feat(webapp): from phone number fields from authentication pages

packages/webapp/src/containers/Authentication/LoginForm.tsx

@@ -32,7 +32,7 @@ export default function LoginForm({ isSubmitting }) {
 
   return (
     <Form>
-      <FFormGroup name={'crediential'} label={<T id={'email'} />}>
+      <FFormGroup name={'crediential'} label={<T id={'email_address'} />}>
         <FInputGroup name={'crediential'} large={true} />
       </FFormGroup>
 

packages/webapp/src/containers/Authentication/RegisterForm.tsx

@@ -40,7 +40,7 @@ export default function RegisterForm({ isSubmitting }) {
   );
 
   return (
-    <Form className={'authentication-page__form'}>
+    <RegisterFormRoot>
       <Row className={'name-section'}>
         <Col md={6}>
           <FFormGroup name={'first_name'} label={<T id={'first_name'} />}>
@@ -87,7 +87,7 @@ export default function RegisterForm({ isSubmitting }) {
       </AuthSubmitButton>
 
       {isSubmitting && <AuthenticationLoadingOverlay />}
-    </Form>
+    </RegisterFormRoot>
   );
 }
 
@@ -95,3 +95,7 @@ const TermsConditionsText = styled.p`
   opacity: 0.8;
   margin-bottom: 1.4rem;
 `;
+
+const RegisterFormRoot = styled(Form)`
+  position: relative;
+`;

packages/webapp/src/containers/Authentication/SendResetPasswordForm.tsx

@@ -18,10 +18,7 @@ export default function SendResetPasswordForm({ isSubmitting }) {
         a link to reset your password.
       </TopParagraph>
 
-      <FFormGroup
-        name={'crediential'}
-        label={<T id={'email_or_phone_number'} />}
-      >
+      <FFormGroup name={'crediential'} label={<T id={'email_address'} />}>
         <FInputGroup name={'crediential'} large={true} />
       </FFormGroup>
 

packages/webapp/src/containers/Authentication/utils.tsx

@@ -15,42 +15,19 @@ const REGISTER_ERRORS = {
 };
 
 export const LoginSchema = Yup.object().shape({
-  crediential: Yup.string()
-    .required()
-    .email()
-    .label(intl.get('email')),
-  password: Yup.string()
-    .required()
-    .min(4)
-    .label(intl.get('password')),
+  crediential: Yup.string().required().email().label(intl.get('email')),
+  password: Yup.string().required().min(4).label(intl.get('password')),
 });
 
 export const RegisterSchema = Yup.object().shape({
-  first_name: Yup.string()
-    .required()
-    .label(intl.get('first_name_')),
-  last_name: Yup.string()
-    .required()
-    .label(intl.get('last_name_')),
-  email: Yup.string()
-    .email()
-    .required()
-    .label(intl.get('email')),
-  phone_number: Yup.string()
-    .matches()
-    .required()
-    .label(intl.get('phone_number_')),
-  password: Yup.string()
-    .min(4)
-    .required()
-    .label(intl.get('password')),
+  first_name: Yup.string().required().label(intl.get('first_name_')),
+  last_name: Yup.string().required().label(intl.get('last_name_')),
+  email: Yup.string().email().required().label(intl.get('email')),
+  password: Yup.string().min(4).required().label(intl.get('password')),
 });
 
 export const ResetPasswordSchema = Yup.object().shape({
-  password: Yup.string()
-    .min(4)
-    .required()
-    .label(intl.get('password')),
+  password: Yup.string().min(4).required().label(intl.get('password')),
   confirm_password: Yup.string()
     .oneOf([Yup.ref('password'), null])
     .required()
@@ -59,27 +36,17 @@ export const ResetPasswordSchema = Yup.object().shape({
 
 // Validation schema.
 export const SendResetPasswordSchema = Yup.object().shape({
-  crediential: Yup.string()
-    .required()
-    .email()
-    .label(intl.get('email')),
+  crediential: Yup.string().required().email().label(intl.get('email')),
 });
 
 export const InviteAcceptSchema = Yup.object().shape({
-  first_name: Yup.string()
-    .required()
-    .label(intl.get('first_name_')),
-  last_name: Yup.string()
-    .required()
-    .label(intl.get('last_name_')),
+  first_name: Yup.string().required().label(intl.get('first_name_')),
+  last_name: Yup.string().required().label(intl.get('last_name_')),
   phone_number: Yup.string()
     .matches()
     .required()
     .label(intl.get('phone_number')),
-  password: Yup.string()
-    .min(4)
-    .required()
-    .label(intl.get('password')),
+  password: Yup.string().min(4).required().label(intl.get('password')),
 });
 
 export const transformSendResetPassErrorsToToasts = (errors) => {
@@ -92,7 +59,7 @@ export const transformSendResetPassErrorsToToasts = (errors) => {
     });
   }
   return toastBuilders;
-}
+};
 
 export const transformLoginErrorsToToasts = (errors) => {
   const toastBuilders = [];
@@ -109,25 +76,25 @@ export const transformLoginErrorsToToasts = (errors) => {
       intent: Intent.DANGER,
     });
   }
-  if (
-    errors.find((e) => e.type === LOGIN_ERRORS.LOGIN_TO_MANY_ATTEMPTS)
-  ) {
+  if (errors.find((e) => e.type === LOGIN_ERRORS.LOGIN_TO_MANY_ATTEMPTS)) {
     toastBuilders.push({
       message: intl.get('your_account_has_been_locked'),
       intent: Intent.DANGER,
     });
   }
   return toastBuilders;
-}
+};
 
 export const transformRegisterErrorsToForm = (errors) => {
   const formErrors = {};
 
   if (errors.some((e) => e.type === REGISTER_ERRORS.PHONE_NUMBER_EXISTS)) {
-    formErrors.phone_number = intl.get('the_phone_number_already_used_in_another_account');
+    formErrors.phone_number = intl.get(
+      'the_phone_number_already_used_in_another_account',
+    );
   }
   if (errors.some((e) => e.type === REGISTER_ERRORS.EMAIL_EXISTS)) {
     formErrors.email = intl.get('the_email_already_used_in_another_account');
   }
   return formErrors;
-}
+};

packages/webapp/src/lang/en/index.json

@@ -38,6 +38,7 @@
   "register_a_new_organization": "Register a New Organization.",
   "organization_name": "Organization Name",
   "email": "Email",
+  "email_address": "Email Address",
   "register": "Register",
   "password_successfully_updated": "The Password for your account was successfully updated.",
   "choose_a_new_password": "Choose a new password",