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

packages/app/components/auth/recoverPassword/RecoverPassword.intl.json

@@ -1,12 +0,0 @@
-{
-    "title": "Restore password",
-    "contactSupport": "Contact support",
-    "messageWasSent": "The recovery code was sent to your account E‑mail.",
-    "messageWasSentTo": "The recovery code was sent to your E‑mail {email}.",
-    "enterCodeBelow": "Please enter the code received into the field below:",
-    "enterNewPasswordBelow": "Enter and repeat new password below:",
-    "change": "Change password",
-    "newPassword": "Enter new password",
-    "newRePassword": "Repeat new password",
-    "enterTheCode": "Enter confirmation code"
-}

packages/app/components/auth/recoverPassword/RecoverPassword.ts

@@ -1,7 +1,13 @@
+import { defineMessages } from 'react-intl';
 import factory from '../factory';
-import messages from './RecoverPassword.intl.json';
 import Body from './RecoverPasswordBody';
 
+const messages = defineMessages({
+    title: 'Restore password',
+    contactSupport: 'Contact support',
+    change: 'Change password',
+});
+
 export default factory({
     title: messages.title,
     body: Body,

packages/app/components/auth/recoverPassword/RecoverPasswordBody.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 
-import { FormattedMessage as Message } from 'react-intl';
+import { defineMessages, FormattedMessage as Message } from 'react-intl';
 
 import { Input } from 'app/components/ui/form';
 import BaseAuthBody from 'app/components/auth/BaseAuthBody';
 
 import styles from './recoverPassword.scss';
-import messages from './RecoverPassword.intl.json';
 
 // TODO: activation code field may be decoupled into common component and reused here and in activation panel
 
+const placeholders = defineMessages({
+    newPassword: 'Enter new password',
+    newRePassword: 'Repeat new password',
+    enterTheCode: 'Enter confirmation code',
+});
+
 export default class RecoverPasswordBody extends BaseAuthBody {
     static displayName = 'RecoverPasswordBody';
     static panelId = 'recoverPassword';
@@ -28,15 +33,22 @@ export default class RecoverPasswordBody extends BaseAuthBody {
                 <p className={styles.descriptionText}>
                     {user.maskedEmail ? (
                         <Message
-                            {...messages.messageWasSentTo}
+                            key="messageWasSentTo"
+                            defaultMessage="The recovery code was sent to your E‑mail {email}."
                             values={{
                                 email: <b>{user.maskedEmail}</b>,
                             }}
                         />
                     ) : (
-                        <Message {...messages.messageWasSent} />
+                        <Message
+                            key="messageWasSent"
+                            defaultMessage="The recovery code was sent to your account E‑mail."
+                        />
                     )}{' '}
-                    <Message {...messages.enterCodeBelow} />
+                    <Message
+                        key="enterCodeBelow"
+                        defaultMessage="Please enter the code received into the field below:"
+                    />
                 </p>
 
                 <Input
@@ -47,11 +59,11 @@ export default class RecoverPasswordBody extends BaseAuthBody {
                     value={key}
                     readOnly={!!key}
                     autoComplete="off"
-                    placeholder={messages.enterTheCode}
+                    placeholder={placeholders.enterTheCode}
                 />
 
                 <p className={styles.descriptionText}>
-                    <Message {...messages.enterNewPasswordBelow} />
+                    <Message key="enterNewPasswordBelow" defaultMessage="Enter and repeat new password below:" />
                 </p>
 
                 <Input
@@ -60,7 +72,7 @@ export default class RecoverPasswordBody extends BaseAuthBody {
                     color="lightViolet"
                     type="password"
                     required
-                    placeholder={messages.newPassword}
+                    placeholder={placeholders.newPassword}
                 />
 
                 <Input
@@ -69,7 +81,7 @@ export default class RecoverPasswordBody extends BaseAuthBody {
                     color="lightViolet"
                     type="password"
                     required
-                    placeholder={messages.newRePassword}
+                    placeholder={placeholders.newRePassword}
                 />
             </div>
         );