Merge pull request #45 from Typext/feature/implementing-recovery-login-screen

feat(recovery login screen): finished recovery and reset login component

Author: LeonardoMessias98

src/DTOs/Auth.tsx

@@ -1,4 +1,3 @@
-import { StringifyOptions } from 'node:querystring';
 import { ReactNode } from 'react';
 
 export interface AuthState {
@@ -43,8 +42,9 @@ export interface RecoveryCredentials {
 }
 
 export interface ResetCredentials {
+  email: string;
   password: string;
-  confirmPassword: string;
+  password_confirmation: string;
 }
 
 interface InvitationData {
@@ -65,6 +65,7 @@ interface RecoveryPassowordData {
 interface ResetPasswordData {
   error: String;
   loader: boolean;
+  success: boolean;
 }
 
 export interface AuthContextData {

src/contexts/auth.tsx

@@ -19,6 +19,7 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
 
   const [resetError, setResetError] = useState<string>('');
   const [resetLoader, setResetLoader] = useState<boolean>(false);
+  const [resetSuccess, setResetSuccess] = useState<boolean>(false);
 
   const [data, setData] = useState<AuthState>(() => {
     const token = localStorage.getItem('@Typext:token');
@@ -130,23 +131,28 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
     setRecoveryLoader(false);
   }, []);
 
-  const resetPassword = useCallback(async ({ password, confirmPassword }) => {
-    setResetLoader(true);
+  const resetPassword = useCallback(
+    async ({ email, password, password_confirmation }) => {
+      setResetLoader(true);
 
-    try {
-      setRecoveryError('');
+      try {
+        setResetError('');
 
-      await api.post('/password/reset', { password, confirmPassword });
-    } catch (err) {
-      const errorStatus = err.response?.status;
+        await api.post('/password/reset', {
+          email,
+          password,
+          password_confirmation,
+        });
 
-      if (errorStatus === 401) {
-        setResetError(err.response?.data.message);
+        setResetLoader(false);
+        setResetSuccess(true);
+      } catch (err) {
+        setResetLoader(false);
+        setResetError(err.response?.data.validation.body.message);
       }
-
-      setResetLoader(false);
-    }
-  }, []);
+    },
+    [],
+  );
 
   return (
     <AuthContext.Provider
@@ -168,6 +174,7 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
         reset: {
           error: resetError,
           loader: resetLoader,
+          success: resetSuccess,
         },
         signIn,
         signUp,
@@ -193,6 +200,3 @@ function useAuth(): AuthContextData {
 }
 
 export { AuthProvider, useAuth };
-function async(arg0: { email: any }): any {
-  throw new Error('Function not implemented.');
-}

src/pages/ResetPassword/components/ResetPasswordModal/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 
 import { useAuth } from 'contexts/auth';
 
@@ -17,10 +18,20 @@ interface IResetPasswordModalProps {
 const ResetPasswordModal: React.FC<IResetPasswordModalProps> = ({
   onClose,
 }: IResetPasswordModalProps) => {
+  const history = useHistory();
+
   const {
-    reset: { error, loader },
+    reset: { error, loader, success },
   } = useAuth();
 
+  useEffect(() => {
+    if (!loader && !error && success) {
+      setTimeout(() => {
+        history.push('/login');
+      }, 1500);
+    }
+  }, [success, error, loader, history]);
+
   return (
     <StyledResetPasswordModal>
       <DefaultModal onClose={onClose}>
@@ -35,8 +46,8 @@ const ResetPasswordModal: React.FC<IResetPasswordModalProps> = ({
         ) : (
           <StyledResetPasswordContent>
             <img src={WarnIcon} alt="" />
-            <h1>SENHA INVÁLIDA!</h1>
-            <h3>VERIFIQUE SE A DIGITOU CORRETAMENTE</h3>
+            <h1>OCORREU UM PROBLEMA</h1>
+            <h3>{error.toUpperCase()}</h3>
           </StyledResetPasswordContent>
         )}
       </DefaultModal>

src/pages/ResetPassword/index.tsx

@@ -7,10 +7,17 @@ import Input from 'components/Input/Input';
 import Button from 'components/Button/Button';
 import Logo from 'assets/logo.svg';
 
+import { useParams } from 'react-router-dom';
 import ResetPasswordModal from './components/ResetPasswordModal';
 import StyledNewPassword from './styles';
 
+export interface ParamsData {
+  email: string;
+}
+
 const NewPassword = () => {
+  const params: ParamsData = useParams();
+
   const { resetPassword } = useAuth();
 
   const [showResetModal, setShowResetModal] = useState<boolean>(false);
@@ -23,17 +30,20 @@ const NewPassword = () => {
   }, []);
 
   const handleResetPassword = useCallback(() => {
+    const userEmail = params.email;
+
     if (!userPassword || !userConfirmPassword) {
       message.error('Todos os campos devem estar preenchidos');
       return;
     }
 
     setShowResetModal(true);
     resetPassword({
+      email: userEmail,
       password: userPassword,
-      confirmPassword: userConfirmPassword,
+      password_confirmation: userConfirmPassword,
     });
-  }, [resetPassword, userPassword, userConfirmPassword]);
+  }, [resetPassword, params, userPassword, userConfirmPassword]);
 
   return (
     <>

src/routes.tsx

@@ -31,7 +31,7 @@ export default function Routes() {
         <Route path="/user/update" isPrivate component={UserUpdate} />
         <Route path="/home" exact isPrivate component={Home} />
         <Route path="/minute" isPrivate component={Minute} />
-        <Route path="/reset" component={ResetPassword} />
+        <Route path="/reset/:email" component={ResetPassword} />
         <Route path="/recovery" component={Recovery} />
         <Route path="/login" component={Login} />
         <Route path="/invite/:email" component={Register} />