Feature/linking login with backend

src/DTOs/Auth.tsx

@@ -29,10 +29,10 @@ export interface SignUpCredentials {
 
 export interface AuthContextData {
   user: object;
-  invitation: { error: string; loader: boolean; success: boolean };
-  register: { error: string; loader: boolean; success: boolean };
-  signIn(crendentials: SignInCredentials): Promise<void>;
-  signUp(crendentials: SignUpCredentials): Promise<void>;
+  invitation: { error: string; loader: boolean };
+  register: { error: string; loader: boolean };
+  signIn(crendentials: SignInCredentials): Promise<boolean>;
+  signUp(crendentials: SignUpCredentials): Promise<SignInCredentials | null>;
   inviteUser(crendentials: InviteUserCredentials): Promise<void>;
   signOut(): void;
 }

src/components/Header/index.tsx

@@ -22,7 +22,7 @@ const Header = () => {
 
     setTimeout(() => {
       history.push('/');
-    }, 1000);
+    }, 200);
   }, [signOut, history]);
 
   const handleNavigateToHome = useCallback(() => {

src/components/InputForm/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  InputHTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-} from 'react';
+import React, { InputHTMLAttributes, useEffect, useRef, useState } from 'react';
 
 import { FiAlertCircle } from 'react-icons/fi';
 import { useField } from '@unform/core';
@@ -18,22 +12,10 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 
 const Input = ({ name, title, ...rest }: InputProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
-
-  const [isFocused, setIsFocused] = useState(false);
-  const [isFilled, setIsFilled] = useState(false);
+  const [inputError, setInputError] = useState<string | undefined>('');
 
   const { fieldName, error, defaultValue, registerField } = useField(name);
 
-  const handleInputFocus = useCallback(() => {
-    setIsFocused(true);
-  }, []);
-
-  const handleInputBlur = useCallback(() => {
-    setIsFocused(false);
-
-    setIsFilled(!!inputRef.current?.value);
-  }, []);
-
   useEffect(() => {
     registerField({
       name: fieldName,
@@ -42,21 +24,24 @@ const Input = ({ name, title, ...rest }: InputProps) => {
     });
   }, [fieldName, registerField]);
 
+  useEffect(() => {
+    setInputError(error);
+  }, [error]);
+
   return (
-    <Container isErrored={!!error} isFocused={isFocused} isFilled={isFilled}>
+    <Container isErrored={!!inputError}>
       <h3>{title}</h3>
 
       <section>
         <input
-          onFocus={handleInputFocus}
-          onBlur={handleInputBlur}
+          onChange={() => setInputError('')}
           defaultValue={defaultValue}
           ref={inputRef}
           {...rest}
         />
 
-        {error && (
-          <Error title={error}>
+        {inputError && (
+          <Error title={inputError}>
             <FiAlertCircle color="#c53030" size={20} />
           </Error>
         )}

src/components/InputForm/styles.ts

@@ -34,11 +34,14 @@ export const Container = styled.div<ContainerProps>`
     background-color: var(--soft-gray);
 
     border-radius: 1.25rem;
-    border: 1px solid rgba(206, 207, 208, 0.2);
+    border: 2px solid rgba(206, 207, 208, 0.2);
+
+    transition: border-color .3s;
 
     ${props =>
       props.isErrored &&
       css`
+        transition: border-color .3s;
         border-color: #c53030;
       `}
 
@@ -61,8 +64,6 @@ export const Container = styled.div<ContainerProps>`
         color: #adadad;
       }
     }
-
-
   }
 `;
 
@@ -72,14 +73,6 @@ export const Error = styled(Tooltip)`
 
   svg {
     margin: 0;
-  }
-
-  span {
-    background: #c53030;
-    color: #fff;
-
-    &::before {
-      border-color: #c53030 transparent;
-    }
+    cursor: info;
   }
 `;

src/components/Tooltip/styles.ts

@@ -5,7 +5,6 @@ export const Container = styled.div`
 
   span {
     width: 160px;
-    background: #ff9000;
     padding: 8px;
     border-radius: 4px;
     font-size: 14px;
@@ -19,12 +18,16 @@ export const Container = styled.div`
     left: 50%;
     transform: translateX(-50%);
 
-    color: #312e38;
+    display: flex;
+    justify-content: center;
+
+    background-color: #c53030;
+    color: #ffffff;
 
     &::before {
       content: '';
       border-style: solid;
-      border-color: #ff9000 transparent;
+      border-color: #c53030 transparent;
       border-width: 6px 6px 0 6px;
       bottom: 20px;
       top: 100%;

src/contexts/AuthContext.tsx

@@ -7,9 +7,11 @@ import { AuthContextData, AuthProviderProps, AuthState } from 'DTOs/Auth';
 const AuthContext = createContext<AuthContextData>({} as AuthContextData);
 
 const AuthProvider = ({ children }: AuthProviderProps) => {
-  const [error, setError] = useState<string>('');
-  const [success, setSuccess] = useState<boolean>(false);
-  const [loader, setLoader] = useState<boolean>(false);
+  const [signUpError, setSignUpError] = useState<string>('');
+  const [signUpLoader, setSignUpLoader] = useState<boolean>(false);
+
+  const [inviteError, setInviteError] = useState<string>('');
+  const [inviteLoader, setInviteLoader] = useState<boolean>(false);
 
   const [data, setData] = useState<AuthState>(() => {
     const token = localStorage.getItem('@Typext:token');
@@ -26,38 +28,55 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
   });
 
   const signIn = useCallback(async ({ email, password }) => {
-    const response = await api.post('sessions', {
-      email,
-      password,
-    });
+    try {
+      const response = await api.post('sessions', {
+        email,
+        password,
+      });
 
-    const { token, user } = response.data;
+      const { token, user } = response.data;
 
-    localStorage.setItem('@Typext:token', token);
-    localStorage.setItem('@Typext:user', JSON.stringify(user));
+      localStorage.setItem('@Typext:token', token);
+      localStorage.setItem('@Typext:user', JSON.stringify(user));
 
-    setData({ token, user });
-  }, []);
+      setData({ token, user });
+      return true;
+    } catch (err) {
+      const errorStatus = err.response?.status;
 
-  const signUp = useCallback(
-    async credentials => {
-      try {
-        const response = await api.post('/users', credentials);
-
-        setSuccess(true);
-        localStorage.setItem('@Typext:user', JSON.stringify(response.data));
-        localStorage.setItem('@Typext:token', credentials.token);
-      } catch (err) {
-        const errorStatus = err.response?.status;
-
-        if (errorStatus === 401) {
-          setError(err.response?.data.message);
-          setSuccess(false);
-        }
+      if (errorStatus === 401) {
+        setInviteError(err.response?.data.message);
       }
-    },
-    [],
-  );
+
+      return false;
+    }
+  }, []);
+
+  const signUp = useCallback(async credentials => {
+    try {
+      setSignUpError('');
+
+      setSignUpLoader(true);
+      const { email, password } = credentials;
+
+      await api.post('/users', credentials);
+
+      const returnData = {
+        email,
+        password,
+      };
+
+      setSignUpLoader(false);
+      return returnData;
+    } catch (err) {
+      const errorStatus = err.response?.status;
+
+      setSignUpError(errorStatus);
+      setSignUpLoader(false);
+
+      return null;
+    }
+  }, []);
 
   const signOut = useCallback(() => {
     localStorage.removeItem('@Typext:token');
@@ -67,9 +86,10 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
   }, []);
 
   const inviteUser = useCallback(async ({ name, email, type }) => {
-    setLoader(true);
+    setInviteLoader(true);
 
     try {
+      setInviteError('');
       const response = await api.post('/invite-users', {
         name,
         email,
@@ -78,37 +98,32 @@ const AuthProvider = ({ children }: AuthProviderProps) => {
 
       const inviteData = response.data;
 
-      localStorage.set(
+      localStorage.setItem(
         '@Typext:invite_data',
         JSON.stringify({ name: inviteData.name, email: inviteData.email }),
       );
-
-      setSuccess(true);
     } catch (err) {
       const errorStatus = err.response?.status;
 
       if (errorStatus === 401) {
-        setError(err.response.data.message);
-        setSuccess(false);
+        setInviteError(err.response?.data.message);
       }
     }
 
-    setLoader(false);
+    setInviteLoader(false);
   }, []);
 
   return (
     <AuthContext.Provider
       value={{
         user: data.user,
         invitation: {
-          error,
-          success,
-          loader,
+          error: inviteError,
+          loader: inviteLoader,
         },
         register: {
-          error,
-          success,
-          loader,
+          error: signUpError,
+          loader: signUpLoader,
         },
         signIn,
         signUp,

src/pages/InviteUsers/components/InviteConfirmationModal/index.tsx

@@ -15,14 +15,16 @@ interface InviteConfirmationProps {
 }
 
 const InviteConfirmationModal = ({ onClose }: InviteConfirmationProps) => {
-  const { invitation } = useAuth();
+  const {
+    invitation: { error, loader },
+  } = useAuth();
 
   return (
     <Container>
       <DefaultModal onClose={onClose}>
-        {invitation.loader ? (
+        {loader ? (
           <Loader />
-        ) : invitation.success ? (
+        ) : error === '' ? (
           <Content>
             <Email />
             <h1>E-MAIL ENVIADO!</h1>
@@ -32,7 +34,7 @@ const InviteConfirmationModal = ({ onClose }: InviteConfirmationProps) => {
           <Content error>
             <EmailError />
             <h1>ERRO AO ENVIAR CONVITE</h1>
-            <h3>{invitation.error?.toUpperCase()}</h3>
+            <h3>{error?.toUpperCase()}</h3>
           </Content>
         )}
       </DefaultModal>