From d8d89c69fbcd711e1acdaa7d8f3b03253efd1ee2 Mon Sep 17 00:00:00 2001 From: Basile Spaenlehauer Date: Thu, 21 Nov 2024 13:35:33 +0100 Subject: [PATCH] fix: use translation for required validation (#469) * fix: use translation for required validation * fix: issues --- .../settings/password/CreatePassword.tsx | 8 +-- .../settings/password/EditPassword.tsx | 56 +++++-------------- .../RequestPasswordReset.tsx | 5 +- .../requestPasswordReset/ResetPassword.tsx | 11 ++-- .../components/signIn/MagicLinkLoginForm.tsx | 8 +-- .../components/signIn/PasswordLoginForm.tsx | 13 ++--- src/modules/auth/validation.ts | 9 --- src/routes/auth/reset-password.tsx | 11 ++-- 8 files changed, 38 insertions(+), 83 deletions(-) diff --git a/src/modules/account/settings/password/CreatePassword.tsx b/src/modules/account/settings/password/CreatePassword.tsx index 8721bf638..3dae260c7 100644 --- a/src/modules/account/settings/password/CreatePassword.tsx +++ b/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'), }, })} /> diff --git a/src/modules/account/settings/password/EditPassword.tsx b/src/modules/account/settings/password/EditPassword.tsx index 5ed72e17a..35972fb9a 100644 --- a/src/modules/account/settings/password/EditPassword.tsx +++ b/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 => { 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'), }, })} /> confirmPassword === formState.newPassword || - 'PASSWORD_DO_NOT_MATCH_ERROR', + t('PASSWORD_DO_NOT_MATCH_ERROR'), }, })} /> diff --git a/src/modules/auth/components/requestPasswordReset/RequestPasswordReset.tsx b/src/modules/auth/components/requestPasswordReset/RequestPasswordReset.tsx index d533f7418..b3ac839c7 100644 --- a/src/modules/auth/components/requestPasswordReset/RequestPasswordReset.tsx +++ b/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), })} diff --git a/src/modules/auth/components/requestPasswordReset/ResetPassword.tsx b/src/modules/auth/components/requestPasswordReset/ResetPassword.tsx index 405379fbd..8738b617b 100644 --- a/src/modules/auth/components/requestPasswordReset/ResetPassword.tsx +++ b/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), diff --git a/src/modules/auth/components/signIn/MagicLinkLoginForm.tsx b/src/modules/auth/components/signIn/MagicLinkLoginForm.tsx index f92ebb2ce..4167f62eb 100644 --- a/src/modules/auth/components/signIn/MagicLinkLoginForm.tsx +++ b/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 ( isEmailValid(value) || 'INVALID_EMAIL_ERROR', + email: (value) => isEmailValid(value) || t('INVALID_EMAIL_ERROR'), }, })} placeholder={t(AUTH.EMAIL_INPUT_PLACEHOLDER)} diff --git a/src/modules/auth/components/signIn/PasswordLoginForm.tsx b/src/modules/auth/components/signIn/PasswordLoginForm.tsx index 3898bd27a..1325db9bb 100644 --- a/src/modules/auth/components/signIn/PasswordLoginForm.tsx +++ b/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 ( 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'), })} /> { } return null; }; - -export const getValidationMessage = (fieldError?: FieldError) => { - if (fieldError?.type === 'required') { - return AUTH.REQUIRED_FIELD_ERROR; - } - return fieldError?.message; -}; diff --git a/src/routes/auth/reset-password.tsx b/src/routes/auth/reset-password.tsx index 1724c0065..160c2b034 100644 --- a/src/routes/auth/reset-password.tsx +++ b/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'),