fix: use update password generation to fix translation

cypress/support/server.ts

@@ -669,7 +669,9 @@ export const mockCreatePassword = (shouldThrowError: boolean): void => {
     },
     ({ reply }) => {
       if (shouldThrowError) {
-        return reply({ statusCode: StatusCodes.BAD_REQUEST });
+        return reply({
+          statusCode: StatusCodes.INTERNAL_SERVER_ERROR,
+        });
       }
 
       return reply({ status: StatusCodes.NO_CONTENT });

src/config/notifier.ts

@@ -9,7 +9,6 @@ import { NS } from './constants';
 import { SHOW_NOTIFICATIONS } from './env';
 
 const {
-  updatePasswordRoutine,
   postPublicProfileRoutine,
   patchPublicProfileRoutine,
   updateEmailRoutine,
@@ -59,7 +58,6 @@ export default ({
     // error messages
     // auth
     case getInvitationRoutine.FAILURE:
-    case updatePasswordRoutine.FAILURE:
     case postPublicProfileRoutine.FAILURE:
     case updateEmailRoutine.FAILURE:
     case patchPublicProfileRoutine.FAILURE: {
@@ -69,7 +67,6 @@ export default ({
 
     // success messages
     // auth
-    case updatePasswordRoutine.SUCCESS:
     case postPublicProfileRoutine.SUCCESS:
     case updateEmailRoutine.SUCCESS:
     case patchPublicProfileRoutine.SUCCESS: {

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

@@ -1,24 +1,26 @@
 import type { JSX } from 'react';
 import { FieldError, SubmitHandler, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 
 import { LoadingButton } from '@mui/lab';
 import { Alert, Stack, Typography } from '@mui/material';
 
 import { isPasswordStrong } from '@graasp/sdk';
 
-import { isAxiosError } from 'axios';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { BorderedSection } from '@/components/layout/BorderedSection';
 import { Button } from '@/components/ui/Button';
 import { NS } from '@/config/constants';
-import { mutations } from '@/config/queryClient';
 import {
   PASSWORD_CREATE_CONTAINER_ID,
   PASSWORD_INPUT_CONFIRM_PASSWORD_ID,
   PASSWORD_INPUT_NEW_PASSWORD_ID,
   PASSWORD_SAVE_BUTTON_ID,
 } from '@/config/selectors';
+import { postPasswordMutation } from '@/openapi/client/@tanstack/react-query.gen';
+import { memberKeys } from '@/query/keys';
 
 import { PasswordField } from './PasswordField';
 
@@ -44,6 +46,7 @@ const CreatePassword = ({ onClose }: CreatePasswordProps): JSX.Element => {
     handleSubmit,
     formState: { errors },
   } = useForm<Inputs>();
+  const queryClient = useQueryClient();
 
   const { t } = useTranslation(NS.Account);
   const { t: translateMessage } = useTranslation(NS.Messages);
@@ -53,11 +56,26 @@ const CreatePassword = ({ onClose }: CreatePasswordProps): JSX.Element => {
     mutateAsync: createPassword,
     error: createPasswordError,
     isPending: isCreatePasswordLoading,
-  } = mutations.useCreatePassword();
+  } = useMutation({
+    ...postPasswordMutation(),
+    onSuccess: () => {
+      // toast success on another page because the form will be closed
+      toast.success(translateMessage('UPDATE_PASSWORD'));
+    },
+    onError: (e) => {
+      // error will be shown below
+      console.error(e);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: memberKeys.current().passwordStatus,
+      });
+    },
+  });
 
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
     try {
-      await createPassword({ password: data.newPassword });
+      await createPassword({ body: { password: data.newPassword } });
       onClose();
     } catch (e) {
       console.error(e);
@@ -72,11 +90,14 @@ const CreatePassword = ({ onClose }: CreatePasswordProps): JSX.Element => {
     newPasswordErrorMessage ?? confirmNewPasswordErrorMessage,
   );
 
-  const createNetworkError = isAxiosError(createPasswordError)
-    ? translateMessage(
-        createPasswordError.response?.data.name ?? 'UNEXPECTED_ERROR',
-      )
+  const createNetworkError = createPasswordError
+    ? (translateMessage(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        createPasswordError?.message ?? translateMessage('UNEXPECTED_ERROR'),
+      ) satisfies string)
     : null;
+
   return (
     <BorderedSection
       id={PASSWORD_CREATE_CONTAINER_ID}

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

@@ -1,25 +1,26 @@
 import type { JSX } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 
 import { LoadingButton } from '@mui/lab';
 import { Alert, Box, Stack, Typography } from '@mui/material';
 
 import { isPasswordStrong } from '@graasp/sdk';
 
-import { isAxiosError } from 'axios';
+import { useMutation } from '@tanstack/react-query';
 
 import { BorderedSection } from '@/components/layout/BorderedSection';
 import { Button } from '@/components/ui/Button';
 import { NS } from '@/config/constants';
-import { mutations } from '@/config/queryClient';
 import {
   PASSWORD_EDIT_CONTAINER_ID,
   PASSWORD_INPUT_CONFIRM_PASSWORD_ID,
   PASSWORD_INPUT_CURRENT_PASSWORD_ID,
   PASSWORD_INPUT_NEW_PASSWORD_ID,
   PASSWORD_SAVE_BUTTON_ID,
 } from '@/config/selectors';
+import { patchPasswordMutation } from '@/openapi/client/@tanstack/react-query.gen';
 
 import { PasswordField } from './PasswordField';
 
@@ -48,16 +49,24 @@ const EditPassword = ({ onClose }: EditPasswordProps): JSX.Element => {
     mutateAsync: updatePassword,
     error: updatePasswordError,
     isPending: isUpdatePasswordLoading,
-  } = mutations.useUpdatePassword();
+  } = useMutation({
+    ...patchPasswordMutation(),
+    onSuccess: () => {
+      toast.success(translateMessage('UPDATE_PASSWORD'));
+    },
+    onError: (e) => {
+      toast.error(e.message);
+    },
+  });
 
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
     try {
-      // perform password update
       await updatePassword({
-        password: data.newPassword,
-        currentPassword: data.currentPassword,
+        body: {
+          password: data.newPassword,
+          currentPassword: data.currentPassword,
+        },
       });
-
       onClose();
     } catch (e) {
       console.error(e);
@@ -68,15 +77,17 @@ const EditPassword = ({ onClose }: EditPasswordProps): JSX.Element => {
   const newPasswordErrorMessage = errors.newPassword?.message;
   const confirmNewPasswordErrorMessage = errors.confirmNewPassword?.message;
   const hasErrors = Boolean(
-    currentPasswordErrorMessage ||
-      newPasswordErrorMessage ||
+    currentPasswordErrorMessage ??
+      newPasswordErrorMessage ??
       confirmNewPasswordErrorMessage,
   );
 
-  const updateNetworkError = isAxiosError(updatePasswordError)
-    ? translateMessage(
-        updatePasswordError.response?.data.name ?? 'UNEXPECTED_ERROR',
-      )
+  const updateNetworkError = updatePasswordError
+    ? (translateMessage(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        updatePasswordError?.message ?? 'UNEXPECTED_ERROR',
+      ) satisfies string)
     : null;
 
   return (

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

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { LoadingButton } from '@mui/lab';
 import { Stack } from '@mui/material';
 
-import { RecaptchaAction } from '@graasp/sdk';
+import { RecaptchaAction, isEmail } from '@graasp/sdk';
 
 import { useLocation, useNavigate } from '@tanstack/react-router';
 
@@ -16,7 +16,6 @@ import {
 } from '@/config/selectors';
 
 import { AUTH } from '~auth/langs';
-import { isEmailValid } from '~auth/validation';
 
 import { executeCaptcha } from '../../context/RecaptchaContext';
 import { useMobileAppLogin } from '../../hooks/useMobileAppLogin';
@@ -38,6 +37,9 @@ export function MagicLinkLoginForm({
 }: Readonly<MagicLinkLoginFormProps>) {
   const navigate = useNavigate();
   const location = useLocation();
+  const { t: translateCommon } = useTranslation(NS.Common, {
+    keyPrefix: 'FIELD_ERROR',
+  });
   const { t } = useTranslation(NS.Auth);
 
   const {
@@ -85,6 +87,7 @@ export function MagicLinkLoginForm({
       console.error(e);
     }
   };
+
   const emailError = errors.email?.message;
 
   return (
@@ -100,10 +103,9 @@ export function MagicLinkLoginForm({
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
         form={register('email', {
-          required: t('REQUIRED_FIELD_ERROR'),
-          validate: {
-            email: (value) => isEmailValid(value) || t('INVALID_EMAIL_ERROR'),
-          },
+          required: translateCommon('REQUIRED'),
+          validate: (email) =>
+            isEmail(email, {}) || translateCommon('INVALID_EMAIL'),
         })}
         placeholder={t(AUTH.EMAIL_INPUT_PLACEHOLDER)}
         error={emailError}

src/modules/auth/validation.ts

@@ -42,13 +42,6 @@ export const emailValidator = (email?: string) => {
   return isEmail(email, {}) ? null : INVALID_EMAIL_ERROR;
 };
 
-export const isEmailValid = (email?: string) => {
-  if (!email) {
-    return EMPTY_EMAIL_ERROR;
-  }
-  return isEmail(email, {}) ? true : INVALID_EMAIL_ERROR;
-};
-
 export const passwordValidator = (password?: string) => {
   if (!password || password.trim().length == 0) {
     return PASSWORD_EMPTY_ERROR;

src/query/member/api.ts

@@ -6,7 +6,6 @@ import {
   MemberStorageItem,
   Paginated,
   Pagination,
-  Password,
   UUID,
 } from '@graasp/sdk';
 
@@ -29,9 +28,7 @@ import {
   buildGetMemberStorageFilesRoute,
   buildGetMemberStorageRoute,
   buildPatchCurrentMemberRoute,
-  buildPatchMemberPasswordRoute,
   buildPostMemberEmailUpdateRoute,
-  buildPostMemberPasswordRoute,
   buildUploadAvatarRoute,
 } from './routes.js';
 
@@ -110,19 +107,6 @@ export const deleteCurrentMember = async () =>
       .then(({ data }) => data),
   );
 
-export const createPassword = async (payload: { password: Password }) =>
-  axios
-    .post<void>(`${API_HOST}/${buildPostMemberPasswordRoute()}`, payload)
-    .then((data) => data);
-
-export const updatePassword = async (payload: {
-  password: Password;
-  currentPassword: Password;
-}) =>
-  axios
-    .patch<void>(`${API_HOST}/${buildPatchMemberPasswordRoute()}`, payload)
-    .then((data) => data);
-
 export const uploadAvatar = async (args: {
   file: Blob;
   onUploadProgress?: (progressEvent: AxiosProgressEvent) => void;