Feature/implementing recovery login screen

src/DTOs/Auth.tsx

@@ -1,3 +1,4 @@
+import { StringifyOptions } from 'node:querystring';
 import { ReactNode } from 'react';
 
 export interface AuthState {
@@ -27,7 +28,7 @@ export interface InviteUserCredentials {
 }
 
 export interface SignUpCredentials {
-  token: string;
+  email: string;
   name: string;
   password: string;
   password_confirmation: string;
@@ -37,6 +38,15 @@ export interface SignUpCredentials {
   area: string;
 }
 
+export interface RecoveryCredentials {
+  email: string;
+}
+
+export interface ResetCredentials {
+  password: string;
+  confirmPassword: string;
+}
+
 interface InvitationData {
   error: string;
   loader: boolean;
@@ -47,6 +57,16 @@ interface RegisterData {
   success: boolean;
 }
 
+interface RecoveryPassowordData {
+  error: string;
+  loader: boolean;
+}
+
+interface ResetPasswordData {
+  error: String;
+  loader: boolean;
+}
+
 export interface AuthContextData {
   user: {
     id: string;
@@ -61,10 +81,14 @@ export interface AuthContextData {
   };
   invitation: InvitationData;
   register: RegisterData;
+  recovery: RecoveryPassowordData;
+  reset: ResetPasswordData;
   signIn(crendentials: SignInCredentials): Promise<boolean>;
   signUp(crendentials: SignUpCredentials): Promise<void>;
-  inviteUser(crendentials: InviteUserCredentials): Promise<void>;
   signOut(): void;
+  inviteUser(crendentials: InviteUserCredentials): Promise<void>;
+  recoveryPassword(crendentials: RecoveryCredentials): Promise<void>;
+  resetPassword(credentials: ResetCredentials): Promise<void>;
 }
 export interface AuthProviderProps {
   children: ReactNode;

src/components/FormUpdate/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 
 import { Form } from '@unform/web';
 
 import InputForm from 'components/InputForm';
 import Button from 'components/Button/Button';
-import Input from 'components/Input/Input';
 
 import { Container } from './styles';
 
@@ -26,13 +26,20 @@ interface FormUpdateProps {
   };
 }
 
+interface ParamsProps {
+  email: string;
+}
 function FormUpdate({
   handleSubmit,
   formRef,
   inviteInfo,
   hasPasswordField,
   user,
 }: FormUpdateProps) {
+  const params = useParams<ParamsProps>();
+
+  const paramsEmail = params.email;
+
   return (
     <Container>
       <Form onSubmit={handleSubmit} ref={formRef} className="Content">
@@ -57,12 +64,11 @@ function FormUpdate({
             title="Empresa"
           />
 
-          <Input
+          <InputForm
             name="email"
             title="E-mail"
-            styleWidth="40rem"
-            defaultValue={inviteInfo?.email || user?.phone || ''}
-            readOnly={!!inviteInfo?.email}
+            defaultValue={paramsEmail || user?.email || ''}
+            readOnly={!!paramsEmail}
           />
 
           <InputForm defaultValue={user?.phone} name="phone" title="Telefone" />

src/contexts/auth.tsx

@@ -14,6 +14,12 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
   const [inviteError, setInviteError] = useState<string>('');
   const [inviteLoader, setInviteLoader] = useState<boolean>(false);
 
+  const [recoveryError, setRecoveryError] = useState<string>('');
+  const [recoveryLoader, setRecoveryLoader] = useState<boolean>(false);
+
+  const [resetError, setResetError] = useState<string>('');
+  const [resetLoader, setResetLoader] = useState<boolean>(false);
+
   const [data, setData] = useState<AuthState>(() => {
     const token = localStorage.getItem('@Typext:token');
     const user = localStorage.getItem('@Typext:user');
@@ -108,6 +114,40 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
     setInviteLoader(false);
   }, []);
 
+  const recoveryPassword = useCallback(async ({ email }) => {
+    setRecoveryLoader(true);
+
+    try {
+      setRecoveryError('');
+
+      await api.post('/password/forgot', {
+        email,
+      });
+    } catch (err) {
+      setRecoveryError(err.response?.data.message);
+    }
+
+    setRecoveryLoader(false);
+  }, []);
+
+  const resetPassword = useCallback(async ({ password, confirmPassword }) => {
+    setResetLoader(true);
+
+    try {
+      setRecoveryError('');
+
+      await api.post('/password/reset', { password, confirmPassword });
+    } catch (err) {
+      const errorStatus = err.response?.status;
+
+      if (errorStatus === 401) {
+        setResetError(err.response?.data.message);
+      }
+
+      setResetLoader(false);
+    }
+  }, []);
+
   return (
     <AuthContext.Provider
       value={{
@@ -121,10 +161,20 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
           loader: signUpLoader,
           success: signUpSuccess,
         },
+        recovery: {
+          error: recoveryError,
+          loader: recoveryLoader,
+        },
+        reset: {
+          error: resetError,
+          loader: resetLoader,
+        },
         signIn,
         signUp,
         signOut,
         inviteUser,
+        recoveryPassword,
+        resetPassword,
       }}
     >
       {children}
@@ -143,3 +193,6 @@ function useAuth(): AuthContextData {
 }
 
 export { AuthProvider, useAuth };
+function async(arg0: { email: any }): any {
+  throw new Error('Function not implemented.');
+}

src/pages/Recovery/components/RecoveryModal/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useAuth } from 'contexts/auth';
+
+import EmailIcon from 'assets/email.svg';
+import EmailErrorIcon from 'assets/email_error.svg';
+import Loader from 'components/Loader';
+
+import DefaultModal from 'components/DefaultModal';
+import { StyledRecoveryModal, StyledRecoveryModalContent } from './styles';
+
+interface IRecoveryModalProps {
+  onClose: Function;
+}
+
+const RecoveryModal: React.FC<IRecoveryModalProps> = ({
+  onClose,
+}: IRecoveryModalProps) => {
+  const {
+    recovery: { error, loader },
+  } = useAuth();
+
+  return (
+    <StyledRecoveryModal>
+      <DefaultModal onClose={onClose}>
+        <>
+          {loader ? (
+            <Loader />
+          ) : error === '' ? (
+            <StyledRecoveryModalContent>
+              <img src={EmailIcon} alt="" />
+              <h1>E-MAIL ENVIADO!</h1>
+              <h3>CONFIRA SUA CAIXA DE E-MAIL.</h3>
+            </StyledRecoveryModalContent>
+          ) : (
+            <StyledRecoveryModalContent>
+              <img src={EmailErrorIcon} alt="" />
+              <h1>{error.toUpperCase()}</h1>
+              <h3>REVISE-O E TENTE NOVAMENTE.</h3>
+            </StyledRecoveryModalContent>
+          )}
+        </>
+      </DefaultModal>
+    </StyledRecoveryModal>
+  );
+};
+
+export default RecoveryModal;

src/pages/Recovery/components/RecoveryModal/styles.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const StyledRecoveryModal = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const StyledRecoveryModalContent = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    height: 3.438rem;
+    margin-bottom: 1rem;
+  }
+`;