WIP feature/ Dashboard_breadcrumbs & fix_localize

client/src/containers/Authentication/InviteAccept.js

@@ -33,14 +33,14 @@ function Invite({ requestInviteAccept, requestInviteMetaByToken }) {
   }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    first_name: Yup.string().required(formatMessage({ id: 'required' })),
-    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
+    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
     phone_number: Yup.string()
       .matches()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:''})),
     password: Yup.string()
-      .min(4, 'Password has to be longer than 4 characters!')
-      .required('Password is required!'),
+      .min(4)
+      .required().label(formatMessage({id:'password'}))
   });
 
   const inviteMeta = useAsync(() => {

client/src/containers/Authentication/Login.js

@@ -1,6 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import * as Yup from 'yup';
+
+
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import {
@@ -34,14 +36,15 @@ function Login({
   const [shown, setShown] = useState(false);
   const passwordRevealer = () => { setShown(!shown); };
 
+
   // Validation schema.
-  const loginValidationSchema =  Yup.object().shape({
+  const loginValidationSchema = Yup.object().shape({
     crediential: Yup.string()
-      .required(formatMessage({ id: 'required' }))
-      .email(formatMessage({ id: 'invalid_email_or_phone_number' })),
+      .required()
+      .email().label(formatMessage({id:'email'})),
     password: Yup.string()
-      .required(formatMessage({ id: 'required' }))
-      .min(4),
+      .required()
+      .min(4).label(formatMessage({id:'password'}))
   });
 
   // Formik validation schema and submit handler.
@@ -69,7 +72,7 @@ function Login({
         const toastBuilders = [];
         if (errors.find((e) => e.type === ERRORS_TYPES.INVALID_DETAILS)) {
           toastBuilders.push({
-            message: formatMessage({id:'email_and_password_entered_did_not_match'}),
+            message: formatMessage({ id: 'email_and_password_entered_did_not_match' }),
             intent: Intent.DANGER,
           });
         }
@@ -110,7 +113,7 @@ function Login({
           <FormGroup
             label={<T id={'email_or_phone_number'} />}
             intent={(errors.crediential && touched.crediential) && Intent.DANGER}
-            helperText={<ErrorMessage name={'crediential'} {...{errors, touched}} />}
+            helperText={<ErrorMessage name={'crediential'} {...{ errors, touched }} />}
             className={'form-group--crediential'}
           >
             <InputGroup
@@ -119,13 +122,13 @@ function Login({
               {...getFieldProps('crediential')}
             />
           </FormGroup>
-      
+
           <FormGroup
             label={<T id={'password'} />}
             labelInfo={passwordRevealerTmp}
             intent={(errors.password && touched.password) && Intent.DANGER}
-            helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
-            className={'form-group--password has-password-revealer'} 
+            helperText={<ErrorMessage name={'password'} {...{ errors, touched }} />}
+            className={'form-group--password has-password-revealer'}
           >
             <InputGroup
               large={true}
@@ -134,12 +137,12 @@ function Login({
               {...getFieldProps('password')}
             />
           </FormGroup>
-        
+
           <div className={'login-form__checkbox-section'}>
             <Checkbox
               large={true}
               className={'checkbox--remember-me'}>
-                <T id={'keep_me_logged_in'} />
+              <T id={'keep_me_logged_in'} />
             </Checkbox>
           </div>
 
@@ -155,7 +158,7 @@ function Login({
             </Button>
           </div>
         </form>
-      
+
         <div class="authentication-page__footer-links">
           <Link to={'/auth/send_reset_password'}>
             <T id={'forget_my_password'} />

client/src/containers/Authentication/Register.js

@@ -10,6 +10,7 @@ import {
   FormGroup,
   Spinner,
 } from '@blueprintjs/core';
+
 import { Row, Col } from 'react-grid-system';
 import { Link, useHistory } from 'react-router-dom';
 import withAuthenticationActions from './withAuthenticationActions';
@@ -29,18 +30,19 @@ function Register({ requestRegister }) {
   }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    organization_name: Yup.string().required(formatMessage({ id: 'required' })),
-    first_name: Yup.string().required(formatMessage({ id: 'required' })),
-    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    organization_name: Yup.string().required().label(formatMessage({id:'organization_name_'})),
+    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
+    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
     email: Yup.string()
       .email()
-      .required(formatMessage({ id: 'required' })),
+      .required()
+      .label(formatMessage({ id: 'email' })),
     phone_number: Yup.string()
       .matches()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:'phone_number_'})),
     password: Yup.string()
-      .min(4, 'Password has to be longer than 8 characters!')
-      .required('Password is required!'),
+      .min(4)
+      .required().label(formatMessage({id:'password'})),
   });
 
   const initialValues = useMemo(

client/src/containers/Authentication/ResetPassword.js

@@ -17,18 +17,21 @@ import withAuthenticationActions from './withAuthenticationActions';
 import AuthInsider from 'containers/Authentication/AuthInsider';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
+
+
 function ResetPassword({ requestResetPassword }) {
   const { formatMessage } = useIntl();
   const { token } = useParams();
   const history = useHistory();
 
+  
   const ValidationSchema = Yup.object().shape({
     password: Yup.string()
-      .min(4, 'Password has to be longer than 4 characters!')
-      .required('Password is required!'),
+      .min(4)
+      .required().label(formatMessage({id:'password'})),
     confirm_password: Yup.string()
-      .oneOf([Yup.ref('password'), null], 'Passwords must match')
-      .required('Confirm Password is required'),
+      .oneOf([Yup.ref('password'), null])
+      .required().label(formatMessage({id:'confirm_password'})),
   });
 
   const initialValues = useMemo(

client/src/containers/Authentication/SendResetPassword.js

@@ -4,7 +4,6 @@ import { useFormik } from 'formik';
 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';
 
 import { compose } from 'utils';
 
@@ -21,9 +20,9 @@ function SendResetPassword({ requestSendResetPassword }) {
 
   // Validation schema.
   const ValidationSchema = Yup.object().shape({
-    crediential: Yup.string('')
-      .required(formatMessage({ id: 'required' }))
-      .email(formatMessage({ id: 'invalid_email_or_phone_numner' })),
+    crediential: Yup.string()
+      .required()
+      .email().label(formatMessage({id:''})),
   });
 
   const initialValues = useMemo(