WIP / exchangeRate / localize

client/src/containers/Authentication/InviteAccept.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import ErrorMessage from 'components/ErrorMessage';
 import AppToaster from 'components/AppToaster';
 import { compose } from 'utils';
@@ -15,27 +15,29 @@ import {
   Position,
   Spinner,
 } from '@blueprintjs/core';
+
 import Icon from 'components/Icon';
 import { Row, Col } from 'react-grid-system';
 import AuthInsider from 'containers/Authentication/AuthInsider';
 import { Link, useHistory } from 'react-router-dom';
 import useAsync from 'hooks/async';
+import { If } from 'components';
 
-
-function Invite({
-  requestInviteAccept,
-  requestInviteMetaByToken,
-}) {
-  const intl = useIntl();
+function Invite({ requestInviteAccept, requestInviteMetaByToken }) {
+  const { formatMessage } = useIntl();
   const { token } = useParams();
   const history = useHistory();
   const [shown, setShown] = useState(false);
-  const passwordRevealer = useCallback(() => { setShown(!shown); }, [shown]);
+  const passwordRevealer = useCallback(() => {
+    setShown(!shown);
+  }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    first_name: Yup.string().required(),
-    last_name: Yup.string().required(),
-    phone_number: Yup.string().matches().required(),
+    first_name: Yup.string().required(formatMessage({ id: 'required' })),
+    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    phone_number: Yup.string()
+      .matches()
+      .required(formatMessage({ id: 'required' })),
     password: Yup.string()
       .min(4, 'Password has to be longer than 4 characters!')
       .required('Password is required!'),
@@ -49,11 +51,10 @@ function Invite({
   const inviteValue = {
     organization_name: '',
     invited_email: '',
-    ...inviteMeta.value ? 
-      inviteMeta.value.data.data : {},
+    ...(inviteMeta.value ? inviteMeta.value.data.data : {}),
   };
 
-  if (inviteErrors.find(e => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
+  if (inviteErrors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
     AppToaster.show({
       message: 'An unexpected error occurred',
       intent: Intent.DANGER,
@@ -62,12 +63,15 @@ function Invite({
     history.push('/auth/login');
   }
 
-  const initialValues = useMemo(() => ({
-    first_name: '',
-    last_name: '',
-    phone_number: '',
-    password: '',
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      first_name: '',
+      last_name: '',
+      phone_number: '',
+      password: '',
+    }),
+    []
+  );
 
   const {
     values,
@@ -95,15 +99,15 @@ function Invite({
         .catch((errors) => {
           if (errors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
             AppToaster.show({
-              message: 'An unexpected error occurred',
+              message: formatMessage({ id: 'an_unexpected_error_occurred' }),
               intent: Intent.DANGER,
               position: Position.BOTTOM,
             });
             history.push('/auth/login');
           }
-          if (errors.find(e => e.type === 'PHONE_MUMNER.ALREADY.EXISTS')){
+          if (errors.find((e) => e.type === 'PHONE_MUMNER.ALREADY.EXISTS')) {
             setErrors({
-              phone_number: 'This phone number is used in another account.'
+              phone_number: 'This phone number is used in another account.',
             });
           }
           setSubmitting(false);
@@ -111,23 +115,40 @@ function Invite({
     },
   });
 
-  const passwordRevealerTmp = useMemo(() => (
-    <span class="password-revealer" onClick={() => passwordRevealer()}>
-      {(shown) ? (
-        <><Icon icon='eye-slash' /> <span class="text">Hide</span></>
-      ) : (
-        <><Icon icon='eye' /> <span class="text">Show</span></>
-      )} 
-    </span>), [shown, passwordRevealer]);
+  const passwordRevealerTmp = useMemo(
+    () => (
+      <span class='password-revealer' onClick={() => passwordRevealer()}>
+        <If condition={shown}>
+          <>
+            <Icon icon='eye-slash' />{' '}
+            <span class='text'>
+              <T id={'hide'} />
+            </span>
+          </>
+        </If>
+        <If condition={!shown}>
+          <>
+            <Icon icon='eye' />{' '}
+            <span class='text'>
+              <T id={'show'} />
+            </span>
+          </>
+        </If>
+      </span>
+    ),
+    [shown, passwordRevealer]
+  );
 
   return (
     <AuthInsider>
       <div className={'invite-form'}>
         <div className={'authentication-page__label-section'}>
-          <h3>Welcome to Bigcapital</h3>
+          <h3>
+            <T id={'welcome_to_bigcapital'} />
+          </h3>
           <p>
-            Enter your personal information <b>{ inviteValue.organization_name }</b>{' '}
-            Organization.
+            <T id={'enter_your_personal_information'} />
+            <b>{inviteValue.organization_name}</b> Organization.
           </p>
         </div>
 
@@ -135,30 +156,37 @@ function Invite({
           <Row>
             <Col md={6}>
               <FormGroup
-                label={'First Name'}
+                label={<T id={'First Name'} />}
                 className={'form-group--first_name'}
-                intent={(errors.first_name && touched.first_name) && Intent.DANGER}
-                helperText={<ErrorMessage name={'first_name'} {...{errors, touched}} />}
+                intent={
+                  errors.first_name && touched.first_name && Intent.DANGER
+                }
+                helperText={
+                  <ErrorMessage name={'first_name'} {...{ errors, touched }} />
+                }
               >
                 <InputGroup
-                  intent={(errors.first_name && touched.first_name) &&
-                    Intent.DANGER
+                  intent={
+                    errors.first_name && touched.first_name && Intent.DANGER
                   }
-                  {...getFieldProps('first_name')} />
+                  {...getFieldProps('first_name')}
+                />
               </FormGroup>
             </Col>
 
             <Col md={6}>
               <FormGroup
-                label={'Last Name'}
+                label={<T id={'Last Name'} />}
                 className={'form-group--last_name'}
-                intent={(errors.last_name && touched.last_name) &&
-                  Intent.DANGER
+                intent={errors.last_name && touched.last_name && Intent.DANGER}
+                helperText={
+                  <ErrorMessage name={'last_name'} {...{ errors, touched }} />
                 }
-                helperText={<ErrorMessage name={'last_name'} {...{errors, touched}} />}
               >
                 <InputGroup
-                  intent={(errors.last_name && touched.last_name) && Intent.DANGER}
+                  intent={
+                    errors.last_name && touched.last_name && Intent.DANGER
+                  }
                   {...getFieldProps('last_name')}
                 />
               </FormGroup>
@@ -166,57 +194,73 @@ function Invite({
           </Row>
 
           <FormGroup
-            label={'Phone Number'}
+            label={<T id={'Phone Number'} />}
             className={'form-group--phone_number'}
-            intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
-            helperText={<ErrorMessage name={'phone_number'} {...{errors, touched}} />}
+            intent={
+              errors.phone_number && touched.phone_number && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name={'phone_number'} {...{ errors, touched }} />
+            }
           >
             <InputGroup
-              intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
+              intent={
+                errors.phone_number && touched.phone_number && Intent.DANGER
+              }
               {...getFieldProps('phone_number')}
             />
           </FormGroup>
 
           <FormGroup
-            label={'Password'}
+            label={<T id={'password'} />}
             labelInfo={passwordRevealerTmp}
             className={'form-group--password has-password-revealer'}
-            intent={(errors.password && touched.password) && Intent.DANGER}
-            helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
+            intent={errors.password && touched.password && Intent.DANGER}
+            helperText={
+              <ErrorMessage name={'password'} {...{ errors, touched }} />
+            }
           >
             <InputGroup
               lang={true}
               type={shown ? 'text' : 'password'}
-              intent={(errors.password && touched.password) && Intent.DANGER}
+              intent={errors.password && touched.password && Intent.DANGER}
               {...getFieldProps('password')}
             />
           </FormGroup>
-        
+
           <div className={'invite-form__statement-section'}>
             <p>
-              You email address is <b>{ inviteValue.invited_email },</b> <br />
-              You will use this address to sign in to Bigcapital.
+              <T id={'You email address is'} />{' '}
+              <b>{inviteValue.invited_email},</b> <br />
+              <T id={'you_will_use_this_address_to_sign_in_to_bigcapital'} />
             </p>
             <p>
-              By signing in or creating an account, you agree with our <br />
-              <Link>Terms & Conditions</Link> and <Link> Privacy Statement</Link>
+              <T id={'signing_in_or_creating'} /> <br />
+              <Link>
+                <T id={'terms_conditions'} />
+              </Link>{' '}
+              <T id={'and'} />
+              <Link>
+                {' '}
+                <T id={'privacy_statement'} />
+              </Link>
             </p>
           </div>
-         
+
           <div className={'authentication-page__submit-button-wrap'}>
             <Button
               intent={Intent.PRIMARY}
               type='submit'
               fill={true}
-              loading={isSubmitting} 
+              loading={isSubmitting}
             >
-              Create Account
+              <T id={'create_account'} />
             </Button>
           </div>
         </form>
 
-        { inviteMeta.pending && (
-          <div class="authentication-page__loading-overlay">
+        {inviteMeta.pending && (
+          <div class='authentication-page__loading-overlay'>
             <Spinner size={40} />
           </div>
         )}
@@ -225,6 +269,4 @@ function Invite({
   );
 }
 
-export default compose(
-  withAuthenticationActions,
-)(Invite);
+export default compose(withAuthenticationActions)(Invite);

client/src/containers/Authentication/Login.js

@@ -69,7 +69,7 @@ function Login({
         const toastBuilders = [];
         if (errors.find((e) => e.type === ERRORS_TYPES.INVALID_DETAILS)) {
           toastBuilders.push({
-            message: formatMessage('email_and_password_entered_did_not_match'),
+            message: formatMessage({id:'email_and_password_entered_did_not_match'}),
             intent: Intent.DANGER,
           });
         }
@@ -102,7 +102,7 @@ function Login({
       <div className='login-form'>
         <div className={'authentication-page__label-section'}>
           <h3><T id={'log_in'} /></h3>
-          <T id={'need_bigcapital_account?'} />
+          <T id={'need_bigcapital_account'} />
           <Link to='/auth/register'> <T id={'create_an_account'} /></Link>
         </div>
 

client/src/containers/Authentication/Register.js

@@ -1,13 +1,14 @@
 import React, { useMemo, useState, useCallback } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import {
   Button,
   InputGroup,
   Intent,
   FormGroup,
-  Spinner
+  Spinner,
 } from '@blueprintjs/core';
 import { Row, Col } from 'react-grid-system';
 import { Link, useHistory } from 'react-router-dom';
@@ -19,35 +20,40 @@ import { compose } from 'utils';
 import Icon from 'components/Icon';
 import { If } from 'components';
 
-function Register({
-  requestRegister,
-}) {
-  const intl = useIntl();
+function Register({ requestRegister }) {
+  const { formatMessage } = useIntl();
   const history = useHistory();
   const [shown, setShown] = useState(false);
-  const passwordRevealer = useCallback(() => { setShown(!shown); }, [shown]);
+  const passwordRevealer = useCallback(() => {
+    setShown(!shown);
+  }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    organization_name: Yup.string().required(),
-    first_name: Yup.string().required(),
-    last_name: Yup.string().required(),
-    email: Yup.string().email().required(),
+    organization_name: Yup.string().required(formatMessage({ id: 'required' })),
+    first_name: Yup.string().required(formatMessage({ id: 'required' })),
+    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    email: Yup.string()
+      .email()
+      .required(formatMessage({ id: 'required' })),
     phone_number: Yup.string()
       .matches()
-      .required(intl.formatMessage({ id: 'required' })),
+      .required(formatMessage({ id: 'required' })),
     password: Yup.string()
       .min(4, 'Password has to be longer than 8 characters!')
       .required('Password is required!'),
   });
 
-  const initialValues = useMemo(() => ({
-    organization_name: '',
-    first_name: '',
-    last_name: '',
-    email: '',
-    phone_number: '',
-    password: '',
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      organization_name: '',
+      first_name: '',
+      last_name: '',
+      email: '',
+      phone_number: '',
+      password: '',
+    }),
+    []
+  );
 
   const {
     errors,
@@ -62,26 +68,27 @@ function Register({
     validationSchema: ValidationSchema,
     initialValues: {
       ...initialValues,
-      country: 'libya'
+      country: 'libya',
     },
     onSubmit: (values, { setSubmitting, setErrors }) => {
       requestRegister(values)
         .then((response) => {
           AppToaster.show({
-            message: 'success',
+            message: formatMessage({ id: 'success' }),
           });
           setSubmitting(false);
           history.push('/auth/login');
         })
         .catch((errors) => {
-          if (errors.some(e => e.type === 'PHONE_NUMBER_EXISTS')) {
+          if (errors.some((e) => e.type === 'PHONE_NUMBER_EXISTS')) {
             setErrors({
-              phone_number: 'The phone number is already used in another account.'
+              phone_number:
+                'The phone number is already used in another account.',
             });
           }
-          if (errors.some(e => e.type === 'EMAIL_EXISTS')) {
+          if (errors.some((e) => e.type === 'EMAIL_EXISTS')) {
             setErrors({
-              email: 'The email is already used in another account.'
+              email: 'The email is already used in another account.',
             });
           }
           setSubmitting(false);
@@ -89,34 +96,66 @@ function Register({
     },
   });
 
-  const passwordRevealerTmp = useMemo(() => (
-    <span class="password-revealer" onClick={() => passwordRevealer()}>
-      {(shown) ? (
-        <><Icon icon='eye-slash' /> <span class="text">Hide</span></>
-      ) : (
-        <><Icon icon='eye' /> <span class="text">Show</span></>
-      )} 
-    </span>), [shown, passwordRevealer]);
+  const passwordRevealerTmp = useMemo(
+    () => (
+      <span class='password-revealer' onClick={() => passwordRevealer()}>
+        <If condition={shown}>
+          <>
+            <Icon icon='eye-slash' />{' '}
+            <span class='text'>
+              <T id={'hide'} />
+            </span>
+          </>
+        </If>
+        <If condition={!shown}>
+          <>
+            <Icon icon='eye' />{' '}
+            <span class='text'>
+              <T id={'show'} />
+            </span>
+          </>
+        </If>
+      </span>
+    ),
+    [shown, passwordRevealer]
+  );
 
   return (
     <AuthInsider>
       <div className={'register-form'}>
         <div className={'authentication-page__label-section'}>
           <h3>
-            Register a New <br />Organization.
+            <T id={'register_a_new_organization'} />
           </h3>
-          You have a bigcapital account ?<Link to='/auth/login'> Login</Link>
+          <T id={'you_have_a_bigcapital_account'} />
+          <Link to='/auth/login'>
+            {' '}
+            <T id={'login'} />
+          </Link>
         </div>
 
         <form onSubmit={handleSubmit} className={'authentication-page__form'}>
           <FormGroup
-            label={'Organization Name'}
+            label={<T id={'organization_name'} />}
             className={'form-group--name'}
-            intent={(errors.organization_name && touched.organization_name) && Intent.DANGER}
-            helperText={<ErrorMessage {...{errors, touched}} name={'organization_name'} />}
+            intent={
+              errors.organization_name &&
+              touched.organization_name &&
+              Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage
+                {...{ errors, touched }}
+                name={'organization_name'}
+              />
+            }
           >
             <InputGroup
-              intent={(errors.organization_name && touched.organization_name) && Intent.DANGER}
+              intent={
+                errors.organization_name &&
+                touched.organization_name &&
+                Intent.DANGER
+              }
               {...getFieldProps('organization_name')}
             />
           </FormGroup>
@@ -124,13 +163,19 @@ function Register({
           <Row className={'name-section'}>
             <Col md={6}>
               <FormGroup
-                label={'First Name'}
-                intent={(errors.first_name && touched.first_name) && Intent.DANGER}
-                helperText={<ErrorMessage name={'first_name'} {...{errors, touched}} />}
+                label={<T id={'first_name'} />}
+                intent={
+                  errors.first_name && touched.first_name && Intent.DANGER
+                }
+                helperText={
+                  <ErrorMessage name={'first_name'} {...{ errors, touched }} />
+                }
                 className={'form-group--first-name'}
               >
                 <InputGroup
-                  intent={(errors.first_name && touched.first_name) && Intent.DANGER}
+                  intent={
+                    errors.first_name && touched.first_name && Intent.DANGER
+                  }
                   {...getFieldProps('first_name')}
                 />
               </FormGroup>
@@ -138,65 +183,83 @@ function Register({
 
             <Col md={6}>
               <FormGroup
-                label={'Last Name'}
-                intent={(errors.last_name && touched.last_name) && Intent.DANGER}
-                helperText={<ErrorMessage name={'last_name'} {...{errors, touched}} />}
+                label={<T id={'last_name'} />}
+                intent={errors.last_name && touched.last_name && Intent.DANGER}
+                helperText={
+                  <ErrorMessage name={'last_name'} {...{ errors, touched }} />
+                }
                 className={'form-group--last-name'}
               >
                 <InputGroup
-                  intent={(errors.last_name && touched.last_name) && Intent.DANGER}
+                  intent={
+                    errors.last_name && touched.last_name && Intent.DANGER
+                  }
                   {...getFieldProps('last_name')}
                 />
               </FormGroup>
             </Col>
           </Row>
-          
+
           <FormGroup
-            label={'Phone Number'}
-            intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
-            helperText={<ErrorMessage name={'phone_number'} {...{errors, touched}} />}
+            label={<T id={'phone_number'} />}
+            intent={
+              errors.phone_number && touched.phone_number && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage name={'phone_number'} {...{ errors, touched }} />
+            }
             className={'form-group--phone-number'}
           >
             <InputGroup
               intent={
-                (errors.phone_number && touched.phone_number) &&
-                Intent.DANGER
+                errors.phone_number && touched.phone_number && Intent.DANGER
               }
               {...getFieldProps('phone_number')}
             />
           </FormGroup>
-      
+
           <FormGroup
-            label={'Email'}
-            intent={(errors.email && touched.email) && Intent.DANGER}
-            helperText={<ErrorMessage name={'email'} {...{errors, touched}} />}
+            label={<T id={'email'} />}
+            intent={errors.email && touched.email && Intent.DANGER}
+            helperText={
+              <ErrorMessage name={'email'} {...{ errors, touched }} />
+            }
             className={'form-group--email'}
           >
             <InputGroup
-              intent={(errors.email && touched.email) && Intent.DANGER}
+              intent={errors.email && touched.email && Intent.DANGER}
               {...getFieldProps('email')}
             />
           </FormGroup>
-          
+
           <FormGroup
-            label={'Password'}
+            label={<T id={'password'} />}
             labelInfo={passwordRevealerTmp}
-            intent={(errors.password && touched.password) && Intent.DANGER}
-            helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
+            intent={errors.password && touched.password && Intent.DANGER}
+            helperText={
+              <ErrorMessage name={'password'} {...{ errors, touched }} />
+            }
             className={'form-group--password has-password-revealer'}
           >
             <InputGroup
               lang={true}
               type={shown ? 'text' : 'password'}
-              intent={(errors.password && touched.password) && Intent.DANGER}
+              intent={errors.password && touched.password && Intent.DANGER}
               {...getFieldProps('password')}
             />
           </FormGroup>
-          
+
           <div className={'register-form__agreement-section'}>
-            <p>
-              By signing in or creating an account, you agree with our <br />
-              <Link>Terms & Conditions</Link> and <Link> Privacy Statement</Link>
+          <p>
+              <T id={'signing_in_or_creating'} /> <br />
+              <Link>
+                <T id={'terms_conditions'} />
+              </Link>{' '}
+              <T id={'and'} />
+              <Link>
+                {' '}
+                <T id={'privacy_statement'} />
+              </Link>
             </p>
           </div>
 
@@ -208,13 +271,13 @@ function Register({
               fill={true}
               loading={isSubmitting}
             >
-              Register
+              <T id={'register'} />
             </Button>
           </div>
         </form>
 
         <If condition={isSubmitting}>
-          <div class="authentication-page__loading-overlay">
+          <div class='authentication-page__loading-overlay'>
             <Spinner size={50} />
           </div>
         </If>
@@ -223,6 +286,4 @@ function Register({
   );
 }
 
-export default compose(
-  withAuthenticationActions,
-)(Register);
+export default compose(withAuthenticationActions)(Register);

client/src/containers/Authentication/ResetPassword.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+
 import {
   Button,
   InputGroup,
@@ -15,12 +15,10 @@ import AppToaster from 'components/AppToaster';
 import { compose } from 'utils';
 import withAuthenticationActions from './withAuthenticationActions';
 import AuthInsider from 'containers/Authentication/AuthInsider';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
-
-function ResetPassword({
-  requestResetPassword,
-}) {
-  const intl = useIntl();
+function ResetPassword({ requestResetPassword }) {
+  const { formatMessage } = useIntl();
   const { token } = useParams();
   const history = useHistory();
 
@@ -33,10 +31,13 @@ function ResetPassword({
       .required('Confirm Password is required'),
   });
 
-  const initialValues = useMemo(() => ({
-    password: '',
-    confirm_password: '',
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      password: '',
+      confirm_password: '',
+    }),
+    []
+  );
 
   const {
     touched,
@@ -56,7 +57,7 @@ function ResetPassword({
       requestResetPassword(values, token)
         .then((response) => {
           AppToaster.show({
-            message: 'The password for your account was successfully updated.',
+            message: formatMessage('password_successfully_updated'),
             intent: Intent.DANGER,
             position: Position.BOTTOM,
           });
@@ -64,9 +65,9 @@ function ResetPassword({
           setSubmitting(false);
         })
         .catch((errors) => {
-          if (errors.find(e => e.type === 'TOKEN_INVALID')) {
+          if (errors.find((e) => e.type === 'TOKEN_INVALID')) {
             AppToaster.show({
-              message: 'An unexpected error occurred',
+              message: formatMessage('an_unexpected_error_occurred'),
               intent: Intent.DANGER,
               position: Position.BOTTOM,
             });
@@ -79,17 +80,24 @@ function ResetPassword({
 
   return (
     <AuthInsider>
-      <div className={'submit-np-form'}>       
+      <div className={'submit-np-form'}>
         <div className={'authentication-page__label-section'}>
-          <h3>Choose a new password</h3>
-          You remembered your password ? <Link to='/auth/login'>Login</Link>
+          <h3>
+            <T id={'choose_a_new_password'} />
+          </h3>
+          <T id={'you_remembered_your_password'} />{' '}
+          <Link to='/auth/login'>
+            <T id={'login'} />
+          </Link>
         </div>
 
         <form onSubmit={handleSubmit}>
           <FormGroup
-            label={'Password'}
-            intent={(errors.password && touched.password) && Intent.DANGER}
-            helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
+            label={<T id={'password'} />}
+            intent={errors.password && touched.password && Intent.DANGER}
+            helperText={
+              <ErrorMessage name={'password'} {...{ errors, touched }} />
+            }
             className={'form-group--password'}
           >
             <InputGroup
@@ -99,18 +107,31 @@ function ResetPassword({
               {...getFieldProps('password')}
             />
           </FormGroup>
-        
+
           <FormGroup
-            label={'New Password'}
+            label={<T id={'new_password'} />}
             labelInfo={'(again):'}
-            intent={(errors.confirm_password && touched.confirm_password) && Intent.DANGER}
-            helperText={<ErrorMessage name={'confirm_password'} {...{errors, touched}} />}
+            intent={
+              errors.confirm_password &&
+              touched.confirm_password &&
+              Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage
+                name={'confirm_password'}
+                {...{ errors, touched }}
+              />
+            }
             className={'form-group--confirm-password'}
           >
             <InputGroup
               lang={true}
               type={'password'}
-              intent={(errors.confirm_password && touched.confirm_password) && Intent.DANGER}
+              intent={
+                errors.confirm_password &&
+                touched.confirm_password &&
+                Intent.DANGER
+              }
               {...getFieldProps('confirm_password')}
             />
           </FormGroup>
@@ -121,8 +142,9 @@ function ResetPassword({
               className={'btn-new'}
               intent={Intent.PRIMARY}
               type='submit'
-              loading={isSubmitting}>
-              Submit new password
+              loading={isSubmitting}
+            >
+              <T id={'submit_new_password'} />
             </Button>
           </div>
         </form>
@@ -131,6 +153,4 @@ function ResetPassword({
   );
 }
 
-export default compose(
-  withAuthenticationActions,
-)(ResetPassword);
+export default compose(withAuthenticationActions)(ResetPassword);

client/src/containers/Authentication/SendResetPassword.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import { useIntl } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
 import { FormattedMessage } from 'react-intl';
@@ -15,23 +15,23 @@ import AuthInsider from 'containers/Authentication/AuthInsider';
 
 import withAuthenticationActions from './withAuthenticationActions';
 
-
-function SendResetPassword({
-  requestSendResetPassword,
-}) {
-  const intl = useIntl();
+function SendResetPassword({ requestSendResetPassword }) {
+  const { formatMessage } = useIntl();
   const history = useHistory();
 
   // Validation schema.
   const ValidationSchema = Yup.object().shape({
     crediential: Yup.string('')
-      .required(intl.formatMessage({ id: 'required' }))
-      .email(intl.formatMessage({ id: 'invalid_email_or_phone_numner' })),
+      .required(formatMessage({ id: 'required' }))
+      .email(formatMessage({ id: 'invalid_email_or_phone_numner' })),
   });
 
-  const initialValues = useMemo(() => ({
-    crediential: '',
-  }), []);
+  const initialValues = useMemo(
+    () => ({
+      crediential: '',
+    }),
+    []
+  );
 
   // Formik validation
   const {
@@ -60,9 +60,9 @@ function SendResetPassword({
           setSubmitting(false);
         })
         .catch((errors) => {
-          if (errors.find(e => e.type === 'EMAIL.NOT.REGISTERED')){
+          if (errors.find((e) => e.type === 'EMAIL.NOT.REGISTERED')) {
             AppToaster.show({
-              message: 'We couldn\'t find your account with that email',
+              message: "We couldn't find your account with that email",
               intent: Intent.DANGER,
             });
           }
@@ -73,21 +73,29 @@ function SendResetPassword({
 
   return (
     <AuthInsider>
-      <div class='reset-form'>        
+      <div class='reset-form'>
         <div className={'authentication-page__label-section'}>
-          <h3>Reset Your Password</h3>
-          <p>Enter your email address and we’ll send you a link to reset your password.</p>
+          <h3>
+            <T id={'reset_your_password'} />
+          </h3>
+          <p>
+            <T id={'we_ll_send_you_a_link_to_reset_your_password'} />
+          </p>
         </div>
 
         <form onSubmit={handleSubmit} className={'send-reset-password'}>
           <FormGroup
             label={'Email or Phone Number'}
-            intent={(errors.crediential && touched.crediential) && Intent.DANGER}
-            helperText={<ErrorMessage name={'crediential'} {...{errors, touched}} />}
+            intent={errors.crediential && touched.crediential && Intent.DANGER}
+            helperText={
+              <ErrorMessage name={'crediential'} {...{ errors, touched }} />
+            }
             className={'form-group--crediential'}
           >
             <InputGroup
-              intent={(errors.crediential && touched.crediential) && Intent.DANGER}
+              intent={
+                errors.crediential && touched.crediential && Intent.DANGER
+              }
               large={true}
               {...getFieldProps('crediential')}
             />
@@ -100,14 +108,14 @@ function SendResetPassword({
               fill={true}
               loading={isSubmitting}
             >
-              {intl.formatMessage({ id: 'Send password reset link' })}
+              <T id={'send_password_reset_link'} />
             </Button>
           </div>
         </form>
 
         <div class='authentication-page__footer-links'>
           <Link to='/auth/login'>
-            <FormattedMessage id='Return to log in' />
+            <T id={'return_to_log_in'} />
           </Link>
         </div>
       </div>
@@ -115,6 +123,4 @@ function SendResetPassword({
   );
 }
 
-export default compose(
-  withAuthenticationActions,
-)(SendResetPassword);
+export default compose(withAuthenticationActions)(SendResetPassword);