feat: forget password & reset password errors (#1130)

* feat: forget password & reset password errors * feat: forget password & reset password errors
teableio · Dec 4, 2024 · eb1883f · eb1883f
1 parent e6c7fd9
commit eb1883f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/apps/nextjs-app/src/features/auth/components/SignForm.tsx b/apps/nextjs-app/src/features/auth/components/SignForm.tsx
@@ -72,6 +72,9 @@ export const SignForm: FC<ISignForm> = (props) => {
       setError(error);
       return;
     }
+
+    // Using custom isLoading instead of submitMutation.isLoading because isLoading only reflects the mutation state,
+    // and we need the loader to persist during the delay between the request completion and the redirect.
     try {
       setIsLoading(true);
       await submitMutation.mutateAsync({ type, form });

diff --git a/apps/nextjs-app/src/features/auth/pages/ForgetPasswordPage.tsx b/apps/nextjs-app/src/features/auth/pages/ForgetPasswordPage.tsx
@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import type { HttpError } from '@teable/core';
 import { sendResetPasswordEmail } from '@teable/openapi';
 import { Spin, Error } from '@teable/ui-lib/base';
 import { Button, Input, Label, Separator, useToast } from '@teable/ui-lib/shadcn';
@@ -14,14 +15,17 @@ export const ForgetPasswordPage = () => {
   const { t } = useTranslation(authConfig.i18nNamespaces);
   const { toast } = useToast();
 
-  const { mutateAsync: sendResetPasswordEmailMutate, isLoading } = useMutation({
+  const { mutate: sendResetPasswordEmailMutate, isLoading } = useMutation({
     mutationFn: sendResetPasswordEmail,
     onSuccess: () => {
       toast({
         title: t('auth:forgetPassword.success.title'),
         description: t('auth:forgetPassword.success.description'),
       });
     },
+    onError: (err) => {
+      setError((err as HttpError).message);
+    },
   });
 
   const emailOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {

diff --git a/apps/nextjs-app/src/features/auth/pages/ResetPasswordPage.tsx b/apps/nextjs-app/src/features/auth/pages/ResetPasswordPage.tsx
@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import type { HttpError } from '@teable/core';
 import { resetPassword } from '@teable/openapi';
 import { passwordSchema } from '@teable/openapi/src/auth/types';
 import { Spin, Error } from '@teable/ui-lib/base';
@@ -33,6 +34,9 @@ export const ResetPasswordPage = () => {
         router.push('/auth/login');
       }, 2000);
     },
+    onError: (err) => {
+      setError((err as HttpError).message);
+    },
   });
 
   const passwordOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {