feat: added password reset hooks

client/src/app/(auth)/password/recover/page.tsx

@@ -4,27 +4,24 @@ 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;
 }
 
 export default function Recover() {
   const [email, setEmail] = useState('');
-  const router = useRouter();
+  const { mutate: forgotPassword, isPending } = useForgotPassword();
 
   const {
     register,
     handleSubmit,
     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'>

client/src/app/(auth)/password/update/[id]/[token]/page.tsx → client/src/app/(auth)/password/update/page.tsx

@@ -1,30 +1,30 @@
 '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,
     handleSubmit,
     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>
   );

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.`);
+    },
+  });
+};

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');
+    },
+  });
+};