fix: use translation for required validation (#469)

* fix: use translation for required validation

* fix: issues

src/modules/account/settings/password/CreatePassword.tsx

@@ -99,10 +99,10 @@ const CreatePassword = ({ onClose }: CreatePasswordProps): JSX.Element => {
             }
             id={PASSWORD_INPUT_NEW_PASSWORD_ID}
             form={register('newPassword', {
-              required: true,
+              required: t('REQUIRED_FIELD_ERROR'),
               validate: {
                 strong: (value) =>
-                  isPasswordStrong(value) || 'PASSWORD_WEAK_ERROR',
+                  isPasswordStrong(value) || t('PASSWORD_WEAK_ERROR'),
               },
             })}
           />
@@ -117,11 +117,11 @@ const CreatePassword = ({ onClose }: CreatePasswordProps): JSX.Element => {
             }
             id={PASSWORD_INPUT_CONFIRM_PASSWORD_ID}
             form={register('confirmNewPassword', {
-              required: true,
+              required: t('REQUIRED_FIELD_ERROR'),
               validate: {
                 match: (confirmPassword, formState) =>
                   confirmPassword === formState.newPassword ||
-                  'PASSWORD_DO_NOT_MATCH_ERROR',
+                  t('PASSWORD_DO_NOT_MATCH_ERROR'),
               },
             })}
           />

src/modules/account/settings/password/EditPassword.tsx

@@ -1,4 +1,4 @@
-import { FieldError, SubmitHandler, useForm } from 'react-hook-form';
+import { SubmitHandler, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { LoadingButton } from '@mui/lab';
@@ -33,15 +33,6 @@ type Inputs = {
   confirmNewPassword: string;
 };
 
-export const getValidationMessage = (
-  fieldError?: FieldError,
-): string | undefined => {
-  if (fieldError?.type === 'required') {
-    return 'REQUIRED_FIELD_ERROR';
-  }
-  return fieldError?.message;
-};
-
 const EditPassword = ({ onClose }: EditPasswordProps): JSX.Element => {
   const {
     register,
@@ -73,13 +64,9 @@ const EditPassword = ({ onClose }: EditPasswordProps): JSX.Element => {
     }
   };
 
-  const currentPasswordErrorMessage = getValidationMessage(
-    errors.currentPassword,
-  );
-  const newPasswordErrorMessage = getValidationMessage(errors.newPassword);
-  const confirmNewPasswordErrorMessage = getValidationMessage(
-    errors.confirmNewPassword,
-  );
+  const currentPasswordErrorMessage = errors.currentPassword?.message;
+  const newPasswordErrorMessage = errors.newPassword?.message;
+  const confirmNewPasswordErrorMessage = errors.confirmNewPassword?.message;
   const hasErrors = Boolean(
     currentPasswordErrorMessage ||
       newPasswordErrorMessage ||
@@ -112,17 +99,12 @@ const EditPassword = ({ onClose }: EditPasswordProps): JSX.Element => {
             id={PASSWORD_INPUT_CURRENT_PASSWORD_ID}
             label={t('PASSWORD_SETTINGS_CURRENT_LABEL')}
             error={Boolean(currentPasswordErrorMessage)}
-            helperText={
-              currentPasswordErrorMessage &&
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-expect-error
-              t(currentPasswordErrorMessage)
-            }
+            helperText={currentPasswordErrorMessage}
             form={register('currentPassword', {
-              required: true,
+              required: t('REQUIRED_FIELD_ERROR'),
               validate: {
                 strong: (value) =>
-                  isPasswordStrong(value) || 'PASSWORD_WEAK_ERROR',
+                  isPasswordStrong(value) || t('PASSWORD_WEAK_ERROR'),
               },
             })}
           />
@@ -132,40 +114,30 @@ const EditPassword = ({ onClose }: EditPasswordProps): JSX.Element => {
           <PasswordField
             label={t('PASSWORD_SETTINGS_NEW_LABEL')}
             error={Boolean(newPasswordErrorMessage)}
-            helperText={
-              newPasswordErrorMessage &&
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-expect-error
-              t(newPasswordErrorMessage)
-            }
+            helperText={newPasswordErrorMessage}
             id={PASSWORD_INPUT_NEW_PASSWORD_ID}
             form={register('newPassword', {
-              required: true,
+              required: t('REQUIRED_FIELD_ERROR'),
               validate: {
                 different: (newPassword, formState) =>
                   newPassword !== formState.currentPassword ||
-                  'NEW_PASSWORD_SHOULD_NOT_MATCH_CURRENT_PASSWORD_ERROR',
+                  t('NEW_PASSWORD_SHOULD_NOT_MATCH_CURRENT_PASSWORD_ERROR'),
                 strong: (value) =>
-                  isPasswordStrong(value) || 'PASSWORD_WEAK_ERROR',
+                  isPasswordStrong(value) || t('PASSWORD_WEAK_ERROR'),
               },
             })}
           />
           <PasswordField
             label={t('PASSWORD_SETTINGS_NEW_CONFIRM_LABEL')}
             error={Boolean(confirmNewPasswordErrorMessage)}
-            helperText={
-              confirmNewPasswordErrorMessage &&
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-expect-error
-              t(confirmNewPasswordErrorMessage)
-            }
+            helperText={confirmNewPasswordErrorMessage}
             id={PASSWORD_INPUT_CONFIRM_PASSWORD_ID}
             form={register('confirmNewPassword', {
-              required: true,
+              required: t('REQUIRED_FIELD_ERROR'),
               validate: {
                 match: (confirmPassword, formState) =>
                   confirmPassword === formState.newPassword ||
-                  'PASSWORD_DO_NOT_MATCH_ERROR',
+                  t('PASSWORD_DO_NOT_MATCH_ERROR'),
               },
             })}
           />

src/modules/auth/components/requestPasswordReset/RequestPasswordReset.tsx

@@ -19,7 +19,6 @@ import {
 
 import { HELP_EMAIL } from '~auth/constants';
 import { AUTH } from '~auth/langs';
-import { getValidationMessage } from '~auth/validation';
 
 import { useRecaptcha } from '../../context/RecaptchaContext';
 import { EmailAdornment } from '../common/Adornments';
@@ -53,7 +52,7 @@ export function RequestPasswordReset() {
     requestPasswordReset({ email, captcha });
   };
 
-  const errorMessage = getValidationMessage(errors.email);
+  const errorMessage = errors.email?.message;
   const hasErrors = !!errorMessage;
 
   return (
@@ -76,7 +75,7 @@ export function RequestPasswordReset() {
           // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
           {...register('email', {
-            required: true,
+            required: t('REQUIRED_FIELD_ERROR'),
             validate: (email) =>
               isEmail(email, {}) || t(AUTH.INVALID_EMAIL_ERROR),
           })}

src/modules/auth/components/requestPasswordReset/ResetPassword.tsx

@@ -34,7 +34,6 @@ import {
 import { HELP_EMAIL } from '~auth/constants';
 import { useValidateJWTToken } from '~auth/hooks/useValidateJWTToken';
 import { AUTH } from '~auth/langs';
-import { getValidationMessage } from '~auth/validation';
 
 import { PasswordAdornment } from '../common/Adornments';
 import { CenteredContent } from '../layout/CenteredContent';
@@ -76,10 +75,8 @@ export function ResetPassword() {
     resolveRequestPasswordReset({ password, token });
   };
 
-  const passwordErrorMessage = getValidationMessage(errors.password);
-  const confirmPasswordErrorMessage = getValidationMessage(
-    errors.confirmPassword,
-  );
+  const passwordErrorMessage = errors.password?.message;
+  const confirmPasswordErrorMessage = errors.confirmPassword?.message;
   const hasErrors = Boolean(
     passwordErrorMessage || confirmPasswordErrorMessage,
   );
@@ -139,7 +136,7 @@ export function ResetPassword() {
             },
           }}
           {...register('password', {
-            required: true,
+            required: t('REQUIRED_FIELD_ERROR'),
             validate: (value) =>
               isPasswordStrong(value) || t(AUTH.PASSWORD_WEAK_ERROR),
           })}
@@ -162,7 +159,7 @@ export function ResetPassword() {
             },
           }}
           {...register('confirmPassword', {
-            required: true,
+            required: t('REQUIRED_FIELD_ERROR'),
             validate: {
               strong: (value) =>
                 isPasswordStrong(value) || t(AUTH.PASSWORD_WEAK_ERROR),

src/modules/auth/components/signIn/MagicLinkLoginForm.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/config/selectors';
 
 import { AUTH } from '~auth/langs';
-import { getValidationMessage, isEmailValid } from '~auth/validation';
+import { isEmailValid } from '~auth/validation';
 
 import { useRecaptcha } from '../../context/RecaptchaContext';
 import { useMobileAppLogin } from '../../hooks/useMobileAppLogin';
@@ -84,7 +84,7 @@ export function MagicLinkLoginForm({ search }: MagicLinkLoginFormProps) {
       console.error(e);
     }
   };
-  const emailError = getValidationMessage(errors.email);
+  const emailError = errors.email?.message;
 
   return (
     <Stack
@@ -99,9 +99,9 @@ export function MagicLinkLoginForm({ search }: MagicLinkLoginFormProps) {
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
         form={register('email', {
-          required: true,
+          required: t('REQUIRED_FIELD_ERROR'),
           validate: {
-            email: (value) => isEmailValid(value) || 'INVALID_EMAIL_ERROR',
+            email: (value) => isEmailValid(value) || t('INVALID_EMAIL_ERROR'),
           },
         })}
         placeholder={t(AUTH.EMAIL_INPUT_PLACEHOLDER)}

src/modules/auth/components/signIn/PasswordLoginForm.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Alert, LoadingButton } from '@mui/lab';
 import { Stack } from '@mui/material';
 
-import { RecaptchaAction } from '@graasp/sdk';
+import { RecaptchaAction, isEmail } from '@graasp/sdk';
 
 import { TypographyLink } from '@/components/ui/TypographyLink';
 import { NS } from '@/config/constants';
@@ -19,7 +19,6 @@ import {
 import { useRecaptcha } from '~auth/context/RecaptchaContext';
 import { useMobileAppLogin } from '~auth/hooks/useMobileAppLogin';
 import { AUTH } from '~auth/langs';
-import { getValidationMessage, isEmailValid } from '~auth/validation';
 
 import { ErrorDisplay } from '../common/ErrorDisplay';
 import { PasswordInput } from '../common/PasswordInput';
@@ -94,8 +93,8 @@ export function PasswordLoginForm({ search }: PasswordLoginProps) {
     }
   };
 
-  const emailError = getValidationMessage(errors.email);
-  const passwordError = getValidationMessage(errors.password);
+  const emailError = errors.email?.message;
+  const passwordError = errors.password?.message;
 
   return (
     <Stack
@@ -108,8 +107,8 @@ export function PasswordLoginForm({ search }: PasswordLoginProps) {
       <EmailInput
         id={EMAIL_SIGN_IN_FIELD_ID}
         form={register('email', {
-          required: true,
-          validate: isEmailValid,
+          required: t('REQUIRED_FIELD_ERROR'),
+          validate: (email) => isEmail(email, {}) || t('INVALID_EMAIL_ERROR'),
         })}
         placeholder={t(AUTH.EMAIL_INPUT_PLACEHOLDER)}
         error={emailError}
@@ -119,7 +118,7 @@ export function PasswordLoginForm({ search }: PasswordLoginProps) {
           id={PASSWORD_SIGN_IN_FIELD_ID}
           error={passwordError}
           form={register('password', {
-            required: true,
+            required: t('REQUIRED_FIELD_ERROR'),
           })}
         />
         <TypographyLink

src/modules/auth/validation.ts

@@ -1,5 +1,3 @@
-import { FieldError } from 'react-hook-form';
-
 import {
   MAX_USERNAME_LENGTH,
   MIN_USERNAME_LENGTH,
@@ -71,10 +69,3 @@ export const passwordsMatch = (passA: string, passB: string) => {
   }
   return null;
 };
-
-export const getValidationMessage = (fieldError?: FieldError) => {
-  if (fieldError?.type === 'required') {
-    return AUTH.REQUIRED_FIELD_ERROR;
-  }
-  return fieldError?.message;
-};

src/routes/auth/reset-password.tsx

@@ -28,7 +28,6 @@ import { DialogHeader } from '~auth/components/layout/DialogHeader';
 import { InvalidTokenScreen } from '~auth/components/requestPasswordReset/InvalidTokenScreen';
 import { HELP_EMAIL } from '~auth/constants';
 import { useValidateJWTToken } from '~auth/hooks/useValidateJWTToken';
-import { getValidationMessage } from '~auth/validation';
 
 import { mutations } from '../../config/queryClient';
 import {
@@ -86,10 +85,8 @@ export function ResetPassword() {
     resolveRequestPasswordReset({ password, token });
   };
 
-  const passwordErrorMessage = getValidationMessage(errors.password);
-  const confirmPasswordErrorMessage = getValidationMessage(
-    errors.confirmPassword,
-  );
+  const passwordErrorMessage = errors.password?.message;
+  const confirmPasswordErrorMessage = errors.confirmPassword?.message;
   const hasErrors = Boolean(
     passwordErrorMessage || confirmPasswordErrorMessage,
   );
@@ -149,7 +146,7 @@ export function ResetPassword() {
             },
           }}
           {...register('password', {
-            required: true,
+            required: t('REQUIRED_FIELD_ERROR'),
             validate: (value) =>
               isPasswordStrong(value) || t('PASSWORD_WEAK_ERROR'),
           })}
@@ -172,7 +169,7 @@ export function ResetPassword() {
             },
           }}
           {...register('confirmPassword', {
-            required: true,
+            required: t('REQUIRED_FIELD_ERROR'),
             validate: {
               strong: (value) =>
                 isPasswordStrong(value) || t('PASSWORD_WEAK_ERROR'),