feat(app-signup): add error translations

packages/game-app/.env.template

@@ -5,5 +5,6 @@ REACT_APP_FIREBASE_CONFIG_PROJECT_ID=
 REACT_APP_FIREBASE_CONFIG_STORAGE_BUCKET=
 REACT_APP_FIREBASE_CONFIG_MESSAGING_SENDER_ID=
 REACT_APP_FIREBASE_CONFIG_APP_ID=
+REACT_APP_FIREBASE_USE_EMULATORS=
 FIREBASE_AUTH_EMULATOR_HOST=
 FIRESTORE_EMULATOR_HOST=

packages/game-app/src/_shared/form/FormSelect/FormSelect.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Controller, ControllerRenderProps, useFormContext } from 'react-hook-form';
 import { SelectInput } from '@pipeline/components';
+import { useTranslate } from '@pipeline/i18n';
 
 type Props = {} & Omit<React.ComponentProps<typeof SelectInput>, 'errorMessage' | 'onChange' | 'value'>;
 
@@ -9,6 +10,16 @@ const FormSelect: React.FC<Props> = ({ name, label, options, disabled }) => {
 
   const error = data.errors[name];
 
+  const t = useTranslate();
+
+  const translatedError = useMemo(() => {
+    if (!error) {
+      return undefined;
+    } else {
+      return t(error.message);
+    }
+  }, [error, t]);
+
   const renderInput = useCallback(
     (props: ControllerRenderProps) => {
       return (
@@ -19,11 +30,11 @@ const FormSelect: React.FC<Props> = ({ name, label, options, disabled }) => {
           options={options}
           onChange={props.onChange}
           disabled={disabled}
-          errorMessage={error ? error.message : null}
+          errorMessage={translatedError}
         />
       );
     },
-    [error, label, options, disabled],
+    [translatedError, label, options, disabled],
   );
 
   return (

packages/game-app/src/_shared/form/FormTextField/FormTextField.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Controller, ControllerRenderProps, useFormContext } from 'react-hook-form';
 import { TextInput } from '@pipeline/components';
+import { useTranslate } from '@pipeline/i18n';
 
 type Props = {
   name: string;
@@ -12,6 +13,16 @@ const FormTextField: React.FC<Props> = ({ name, label }) => {
 
   const error = data.errors[name];
 
+  const t = useTranslate();
+
+  const translatedError = useMemo(() => {
+    if (!error) {
+      return undefined;
+    } else {
+      return t(error.message);
+    }
+  }, [error, t]);
+
   const renderInput = useCallback(
     (props: ControllerRenderProps) => {
       return (
@@ -20,11 +31,11 @@ const FormTextField: React.FC<Props> = ({ name, label }) => {
           label={label}
           value={props.value}
           onChange={props.onChange}
-          errorMessage={error?.message}
+          errorMessage={translatedError}
         />
       );
     },
-    [error, label],
+    [translatedError, label],
   );
 
   return (

packages/game-app/src/assets/i18n/en.ts

@@ -7,6 +7,20 @@ const translations = {
     test1: 'Pipeline - The Game that Delivers!',
     test2: 'Random stuff',
   },
+  signup: {
+    errors: {
+      invalidEmail: 'Invalid email',
+      passwordRequirements:
+        'The password must be 8 chars long and should contain at least a lowercase letter, an uppercase letter and a spectial character',
+      passwordMatch: 'The two password must match',
+      'auth/email-already-in-use': 'Ops, it seams that this email is not allowed',
+    },
+  },
+  general: {
+    errors: {
+      required: 'This field is required',
+    },
+  },
 };
 
 export default translations;

packages/game-app/src/signup/apis/executeSignup.ts

@@ -6,10 +6,10 @@ import 'firebase/firestore';
 import { User } from '../../_shared/auth/slice';
 
 export async function executeSignup(signupInfo: SignupInfo): Promise<User> {
-  try {
-    const credentials = await firebase.auth().createUserWithEmailAndPassword(signupInfo.email, signupInfo.password);
-    if (credentials.user) {
-      const user = credentials.user;
+  const credentials = await firebase.auth().createUserWithEmailAndPassword(signupInfo.email, signupInfo.password);
+  if (credentials.user) {
+    const user = credentials.user;
+    try {
       await firebase.firestore().doc(`${FirebaseCollections.Users}/${user?.uid}`).set({
         email: signupInfo.email,
         role: signupInfo.role,
@@ -19,16 +19,14 @@ export async function executeSignup(signupInfo: SignupInfo): Promise<User> {
         id: user.uid,
         email: user.email!,
       };
-    } else {
-      throw new Error('user-not-created');
-    }
-  } catch (e) {
-    try {
+    } catch (e) {
       const currentUser = firebase.auth().currentUser;
       if (currentUser !== null) {
         await currentUser.delete();
       }
-    } catch (e) {}
-    throw e;
+      throw e;
+    }
+  } else {
+    throw { code: 'user-not-created' };
   }
 }

packages/game-app/src/signup/components/Signup/Signup.tsx

@@ -2,32 +2,18 @@ import React, { useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { FormSelect, FormTextField } from '@pipeline/form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
 import { SignupInfo } from '../../types/signupInfo';
 import useSignup from '../../hooks/useSignup';
 import { useDevOpsMaturities, useGameRoles } from '@pipeline/dynamicData';
+import { signupValidationSchema } from '../../utils/validation';
 
 type Props = {};
 
-const schema = yup.object().shape({
-  email: yup.string().required('signup.required').email('signup.invalidEmail'),
-  password: yup
-    .string()
-    .required('signup.required')
-    .matches(new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})'), 'signup.passwordRequirements'),
-  repeatPassword: yup
-    .string()
-    .required('signup.required')
-    .oneOf([yup.ref('password')], 'signup.passwordMatch'),
-  role: yup.string().required('signup.required'),
-  devOpsMaturity: yup.string().required('signup.required'),
-});
-
 const Signup: React.FC<Props> = () => {
   const methods = useForm<SignupInfo>({
     defaultValues: {},
     mode: 'onBlur',
-    resolver: yupResolver(schema),
+    resolver: yupResolver(signupValidationSchema),
   });
 
   const { handleSubmit } = methods;

packages/game-app/src/signup/hooks/useSignup.ts

@@ -2,7 +2,7 @@ import * as actions from '../actions';
 import { createRequestHook } from '@pipeline/requests-status';
 
 const useSignup = createRequestHook('signup', actions.signup, {
-  errorMessagesScope: 'signup',
+  errorMessagesScope: 'signup.errors',
 });
 
 export default useSignup;

packages/game-app/src/signup/utils/validation.ts

@@ -0,0 +1,20 @@
+import * as yup from 'yup';
+
+const requiredError = 'general.errors.required';
+
+export const signupValidationSchema = yup.object().shape({
+  email: yup.string().required(requiredError).email('signup.errors.invalidEmail'),
+  password: yup
+    .string()
+    .required(requiredError)
+    .matches(
+      new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})'),
+      'signup.errors.passwordRequirements',
+    ),
+  repeatPassword: yup
+    .string()
+    .required(requiredError)
+    .oneOf([yup.ref('password')], 'signup.errors.passwordMatch'),
+  role: yup.string().required(requiredError),
+  devOpsMaturity: yup.string().required(requiredError),
+});