Remove all *.intl.json files. Move strings to the corresponding views. Implement custom command to build i18n/en.json file

packages/app/components/profile/multiFactorAuth/Confirmation.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import { FormattedMessage as Message } from 'react-intl';
+import { defineMessages, FormattedMessage as Message } from 'react-intl';
 
 import { Input, Form, FormModel } from 'app/components/ui/form';
 import profileForm from 'app/components/profile/profileForm.scss';
 
-import messages from '../MultiFactorAuth.intl.json';
+const messages = defineMessages({
+    codePlaceholder: 'Enter the code here',
+});
 
 export default function Confirmation({
     form,
@@ -22,7 +24,10 @@ export default function Confirmation({
             <div className={profileForm.formBody}>
                 <div className={profileForm.formRow}>
                     <p className={profileForm.description}>
-                        <Message {...messages.enterCodeFromApp} />
+                        <Message
+                            key="enterCodeFromApp"
+                            defaultMessage="In order to finish two‑factor auth setup, please enter the code received in the mobile app:"
+                        />
                     </p>
                 </div>
 

packages/app/components/profile/multiFactorAuth/MfaDisable.tsx

@@ -4,8 +4,8 @@ import { disable as disableMFA } from 'app/services/api/mfa';
 import { FormModel } from 'app/components/ui/form';
 
 import Context from '../Context';
-import MfaDisableForm from './disableForm/MfaDisableForm';
-import MfaStatus from './status/MfaStatus';
+import MfaDisableForm from './MfaDisableForm';
+import MfaStatus from './MfaStatus';
 
 export default class MfaDisable extends React.Component<
     {

packages/app/components/profile/multiFactorAuth/MfaDisableForm.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
-import { FormattedMessage as Message } from 'react-intl';
+import { defineMessages, FormattedMessage as Message } from 'react-intl';
 import { Button, Input, Form, FormModel } from 'app/components/ui/form';
 import styles from 'app/components/profile/profileForm.scss';
 
-import messages from '../MultiFactorAuth.intl.json';
-import mfaStyles from '../mfa.scss';
+import mfaStyles from './mfa.scss';
+
+const messages = defineMessages({
+    codePlaceholder: 'Enter the code here',
+    disable: 'Disable',
+});
 
 export default class MfaDisableForm extends React.Component<{
     onSubmit: (form: FormModel) => Promise<void>;
@@ -20,13 +24,16 @@ export default class MfaDisableForm extends React.Component<{
                 <div className={styles.formBody}>
                     <div className={styles.formRow}>
                         <p className={`${styles.description} ${mfaStyles.mfaTitle}`}>
-                            <Message {...messages.disableMfa} />
+                            <Message key="disableMfa" defaultMessage="Disable two‑factor authentication" />
                         </p>
                     </div>
 
                     <div className={styles.formRow}>
                         <p className={styles.description}>
-                            <Message {...messages.disableMfaInstruction} />
+                            <Message
+                                key="disableMfaInstruction"
+                                defaultMessage="In order to disable two‑factor authentication, you need to provide a code from your mobile app and confirm your action with your current account password."
+                            />
                         </p>
                     </div>
 

packages/app/components/profile/multiFactorAuth/MfaEnable.tsx

@@ -7,12 +7,12 @@ import { ScrollIntoView } from 'app/components/ui/scroll';
 import logger from 'app/services/logger';
 import { getSecret, enable as enableMFA } from 'app/services/api/mfa';
 import { Form } from 'app/components/ui/form';
+import { defineMessages } from 'react-intl';
 
 import Context from '../Context';
 import Instructions from './instructions';
 import KeyForm from './keyForm';
 import Confirmation from './confirmation';
-import messages from './MultiFactorAuth.intl.json';
 
 const STEPS_TOTAL = 3;
 
@@ -25,6 +25,12 @@ type Props = {
     step: MfaStep;
 };
 
+const labels = defineMessages({
+    theAppIsInstalled: 'App has been installed',
+    ready: 'Ready',
+    enable: 'Enable',
+});
+
 interface State {
     isLoading: boolean;
     activeStep: MfaStep;
@@ -73,15 +79,15 @@ export default class MfaEnable extends React.PureComponent<Props, State> {
 
         const stepsData = [
             {
-                buttonLabel: messages.theAppIsInstalled,
+                buttonLabel: labels.theAppIsInstalled,
                 buttonAction: () => this.nextStep(),
             },
             {
-                buttonLabel: messages.ready,
+                buttonLabel: labels.ready,
                 buttonAction: () => this.nextStep(),
             },
             {
-                buttonLabel: messages.enable,
+                buttonLabel: labels.enable,
                 buttonAction: () => this.confirmationFormEl && this.confirmationFormEl.submit(),
             },
         ];

packages/app/components/profile/multiFactorAuth/MfaStatus.tsx

@@ -4,8 +4,7 @@ import { ScrollIntoView } from 'app/components/ui/scroll';
 import styles from 'app/components/profile/profileForm.scss';
 import icons from 'app/components/ui/icons.scss';
 
-import messages from '../MultiFactorAuth.intl.json';
-import mfaStyles from '../mfa.scss';
+import mfaStyles from './mfa.scss';
 
 export default function MfaStatus({ onProceed }: { onProceed: () => void }) {
     return (
@@ -17,13 +16,19 @@ export default function MfaStatus({ onProceed }: { onProceed: () => void }) {
                     <span className={icons.lock} />
                 </div>
                 <p className={`${styles.description} ${mfaStyles.mfaTitle}`}>
-                    <Message {...messages.mfaEnabledForYourAcc} />
+                    <Message
+                        key="mfaEnabledForYourAcc"
+                        defaultMessage="Two‑factor authentication for your account is active now"
+                    />
                 </p>
             </div>
 
             <div className={styles.formRow}>
                 <p className={styles.description}>
-                    <Message {...messages.mfaLoginFlowDesc} />
+                    <Message
+                        key="mfaLoginFlowDesc"
+                        defaultMessage="Additional code will be requested next time you log in. Please note, that Minecraft authorization won't work when two‑factor auth is enabled."
+                    />
                 </p>
             </div>
 
@@ -36,7 +41,7 @@ export default function MfaStatus({ onProceed }: { onProceed: () => void }) {
                             onProceed();
                         }}
                     >
-                        <Message {...messages.disable} />
+                        <Message key="disable" defaultMessage="Disable" />
                     </a>
                 </p>
             </div>

packages/app/components/profile/multiFactorAuth/MultiFactorAuth.intl.json

@@ -1,25 +0,0 @@
-{
-    "mfaTitle": "Two‑factor authentication",
-    "mfaDescription": "Two‑factor authentication is an extra layer of security designed to ensure you that you're the only person who can access your account, even if the password gets stolen.",
-
-    "mfaIntroduction": "First of all, you need to install one of our suggested apps on your phone. This app will generate login codes for you. Please choose your OS to get corresponding installation links.",
-    "installOnOfTheApps": "Install one of the following apps:",
-    "findAlternativeApps": "Find alternative apps",
-    "theAppIsInstalled": "App has been installed",
-
-    "scanQrCode": "Open your favorite QR scanner app and scan the following QR code:",
-    "or": "OR",
-    "enterKeyManually": "If you can't scan QR code, try entering your secret key manually:",
-    "whenKeyEntered": "If a temporary code appears in your two‑factor auth app, then you may proceed to the next step.",
-    "ready": "Ready",
-
-    "codePlaceholder": "Enter the code here",
-    "enterCodeFromApp": "In order to finish two‑factor auth setup, please enter the code received in the mobile app:",
-    "enable": "Enable",
-
-    "disable": "Disable",
-    "mfaEnabledForYourAcc": "Two‑factor authentication for your account is active now",
-    "mfaLoginFlowDesc": "Additional code will be requested next time you log in. Please note, that Minecraft authorization won't work when two‑factor auth is enabled.",
-    "disableMfa": "Disable two‑factor authentication",
-    "disableMfaInstruction": "In order to disable two‑factor authentication, you need to provide a code from your mobile app and confirm your action with your current account password."
-}

packages/app/components/profile/multiFactorAuth/MultiFactorAuth.tsx

@@ -7,7 +7,6 @@ import { FormModel } from 'app/components/ui/form';
 
 import MfaEnable, { MfaStep } from './MfaEnable';
 import MfaDisable from './MfaDisable';
-import messages from './MultiFactorAuth.intl.json';
 
 class MultiFactorAuth extends React.Component<{
     step: MfaStep;
@@ -25,7 +24,7 @@ class MultiFactorAuth extends React.Component<{
 
                 <div className={styles.form}>
                     <div className={styles.formBody}>
-                        <Message {...messages.mfaTitle}>
+                        <Message key="mfaTitle" defaultMessage="Two‑factor authentication">
                             {(pageTitle) => (
                                 <h3 className={styles.title}>
                                     <Helmet title={pageTitle as string} />
@@ -36,7 +35,10 @@ class MultiFactorAuth extends React.Component<{
 
                         <div className={styles.formRow}>
                             <p className={styles.description}>
-                                <Message {...messages.mfaDescription} />
+                                <Message
+                                    key="mfaDescription"
+                                    defaultMessage="Two‑factor authentication is an extra layer of security designed to ensure you that you're the only person who can access your account, even if the password gets stolen."
+                                />
                             </p>
                         </div>
                     </div>

packages/app/components/profile/multiFactorAuth/confirmation/index.ts

@@ -1 +0,0 @@
-export { default } from './Confirmation';

packages/app/components/profile/multiFactorAuth/instructions.intl.ts

@@ -0,0 +1,12 @@
+/**
+ * Extract this file to the level upper to keep the messages prefix. Will be resolved later.
+ */
+
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    mfaIntroduction:
+        'First of all, you need to install one of our suggested apps on your phone. This app will generate login codes for you. Please choose your OS to get corresponding installation links.',
+    installOnOfTheApps: 'Install one of the following apps:',
+    findAlternativeApps: 'Find alternative apps',
+});

packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage as Message } from 'react-intl';
 import clsx from 'clsx';
 
 import profileForm from '../../profileForm.scss';
-import messages from '../MultiFactorAuth.intl.json';
+import messages from '../instructions.intl';
 import OsInstruction from './OsInstruction';
 import OsTile from './OsTile';
 import styles from './instructions.scss';

packages/app/components/profile/multiFactorAuth/instructions/OsInstruction.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 
-import messages from '../MultiFactorAuth.intl.json';
+import messages from '../instructions.intl';
 import styles from './instructions.scss';
 
 type OS = 'android' | 'ios' | 'windows';

packages/app/components/profile/multiFactorAuth/keyForm.intl.ts

@@ -0,0 +1,12 @@
+/**
+ * Extract this file to the level upper to keep the messages prefix. Will be resolved later.
+ */
+
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    scanQrCode: 'Open your favorite QR scanner app and scan the following QR code:',
+    or: 'OR',
+    enterKeyManually: "If you can't scan QR code, try entering your secret key manually:",
+    whenKeyEntered: 'If a temporary code appears in your two‑factor auth app, then you may proceed to the next step.',
+});

packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage as Message } from 'react-intl';
 import { ImageLoader } from 'app/components/ui/loader';
 import profileForm from 'app/components/profile/profileForm.scss';
 
-import messages from '../MultiFactorAuth.intl.json';
+import messages from '../keyForm.intl';
 import styles from './key-form.scss';
 
 export default function KeyForm({ secret, qrCodeSrc }: { secret: string; qrCodeSrc: string }) {