From b653d314162c1d86fa1fc7b3c7e95193a25c7b57 Mon Sep 17 00:00:00 2001
From: Nikita Mashchenko <mashchenko1@icloud.com>
Date: Tue, 31 Oct 2023 04:27:36 -0500
Subject: [PATCH] feat: added password reset hooks

---
 .../src/app/(auth)/password/recover/page.tsx  | 11 +++-----
 .../update/{[id]/[token] => }/page.tsx        | 24 ++++++++++--------
 .../model/queries/useForgotPassword.tsx       | 25 +++++++++++++++++++
 .../model/queries/useResetPassword.tsx        | 19 ++++++++++++++
 4 files changed, 61 insertions(+), 18 deletions(-)
 rename client/src/app/(auth)/password/update/{[id]/[token] => }/page.tsx (74%)
 create mode 100644 client/src/entities/session/model/queries/useForgotPassword.tsx
 create mode 100644 client/src/entities/session/model/queries/useResetPassword.tsx

diff --git a/client/src/app/(auth)/password/recover/page.tsx b/client/src/app/(auth)/password/recover/page.tsx
index 0ab025782..4b65dfdf2 100644
--- a/client/src/app/(auth)/password/recover/page.tsx
+++ b/client/src/app/(auth)/password/recover/page.tsx
@@ -4,8 +4,8 @@ import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { ArrowLeft } from '@/shared/assets';
 import { Button, Flex, Input, Typography } from '@/shared/ui';
-import { useRouter } from 'next/navigation';
 import styles from '../password.module.scss';
+import { useForgotPassword } from '@/entities/session/model/queries/useForgotPassword';
 
 interface RecoverProps {
   email: string;
@@ -13,7 +13,7 @@ interface RecoverProps {
 
 export default function Recover() {
   const [email, setEmail] = useState('');
-  const router = useRouter();
+  const { mutate: forgotPassword, isPending } = useForgotPassword();
 
   const {
     register,
@@ -21,10 +21,7 @@ export default function Recover() {
     formState: { errors },
   } = useForm<RecoverProps>();
 
-  const onSubmit: SubmitHandler<RecoverProps> = data => {
-    console.log(data);
-    router.push('confirmation');
-  };
+  const onSubmit: SubmitHandler<RecoverProps> = data => forgotPassword(data);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -58,7 +55,7 @@ export default function Recover() {
           onChange={e => setEmail(e.target.value)}
         />
         <Flex direction='column' justify='center' align='center' gap={8} width='100%'>
-          <Button width='100%' disabled={!email.length}>
+          <Button width='100%' disabled={!email.length} loading={isPending}>
             Reset password
           </Button>
           <Button width='100%' typeBtn='secondary' type='button'>
diff --git a/client/src/app/(auth)/password/update/[id]/[token]/page.tsx b/client/src/app/(auth)/password/update/page.tsx
similarity index 74%
rename from client/src/app/(auth)/password/update/[id]/[token]/page.tsx
rename to client/src/app/(auth)/password/update/page.tsx
index ee2ca8ad5..29db7fb88 100644
--- a/client/src/app/(auth)/password/update/[id]/[token]/page.tsx
+++ b/client/src/app/(auth)/password/update/page.tsx
@@ -1,19 +1,21 @@
 'use client';
-import styles from '../../../password.module.scss';
+import styles from '../password.module.scss';
 import { Button, Flex, InputPassword, Typography } from '@/shared/ui';
 import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { useRouter } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+import { useResetPassword } from '@/entities/session/model/queries/useResetPassword';
 
 interface UpdateProps {
   password: string;
   repeatPassword: string;
 }
-export default function Update({ params }: { params: { id: string; token: string } }) {
-  const { id, token } = params;
+export default function Update() {
+  const searchParams = useSearchParams();
+  const hash = searchParams.get('hash') ?? ''; // default value is ""
   const [password, setPassword] = useState('');
   const [repeatPassword, setRepeatPassword] = useState('');
-  const router = useRouter();
+  const { mutate: resetPassword, isPending } = useResetPassword();
 
   const {
     register,
@@ -21,10 +23,8 @@ export default function Update({ params }: { params: { id: string; token: string
     formState: { errors },
   } = useForm<UpdateProps>();
 
-  const onSubmit: SubmitHandler<UpdateProps> = data => {
-    console.log(data, id, token);
-    router.push('/password/success');
-  };
+  const onSubmit: SubmitHandler<UpdateProps> = data =>
+    resetPassword({ password: data.password, hash });
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -54,7 +54,7 @@ export default function Update({ params }: { params: { id: string; token: string
             placeholder='Password'
             {...register('password', {
               required: 'You must specify a password',
-              minLength: { value: 8, message: 'Password must have at least 8 characters' },
+              // minLength: { value: 8, message: 'Password must have at least 8 characters' },
             })}
             error={errors?.password ? errors.password.message : undefined}
             value={password}
@@ -70,7 +70,9 @@ export default function Update({ params }: { params: { id: string; token: string
             onChange={e => setRepeatPassword(e.target.value)}
           />
         </Flex>
-        <Button width='100%'>Reset password</Button>
+        <Button width='100%' loading={isPending}>
+          Reset password
+        </Button>
       </Flex>
     </form>
   );
diff --git a/client/src/entities/session/model/queries/useForgotPassword.tsx b/client/src/entities/session/model/queries/useForgotPassword.tsx
new file mode 100644
index 000000000..082d4a493
--- /dev/null
+++ b/client/src/entities/session/model/queries/useForgotPassword.tsx
@@ -0,0 +1,25 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { IForgotPassword } from '@teameights/types';
+import { toast } from 'sonner';
+import { FORGOT_PASSWORD } from '@/shared/constant';
+import { useRouter } from 'next/navigation';
+import { isAxiosError } from 'axios';
+
+export const useForgotPassword = () => {
+  const router = useRouter();
+  return useMutation({
+    mutationFn: async (data: IForgotPassword) => await API.post(FORGOT_PASSWORD, data),
+    onSuccess: () => {
+      router.push('/password/confirmation');
+    },
+    onError: error => {
+      if (isAxiosError(error)) {
+        toast.error(`Something went wrong: ${error?.response?.data?.errors?.email}`);
+        return;
+      }
+
+      toast.error(`Something went wrong.`);
+    },
+  });
+};
diff --git a/client/src/entities/session/model/queries/useResetPassword.tsx b/client/src/entities/session/model/queries/useResetPassword.tsx
new file mode 100644
index 000000000..e0c1e3007
--- /dev/null
+++ b/client/src/entities/session/model/queries/useResetPassword.tsx
@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { IResetPassword } from '@teameights/types';
+import { RESET_PASSWORD } from '@/shared/constant';
+import { useRouter } from 'next/navigation';
+
+export const useResetPassword = () => {
+  const router = useRouter();
+  return useMutation({
+    mutationFn: async (data: IResetPassword) => await API.post(RESET_PASSWORD, data),
+    onSuccess: () => {
+      router.push('/password/success');
+    },
+    onError: error => {
+      console.log(error);
+      router.push('/password/expired');
+    },
+  });
+};