Merge pull request #17 from ateliware/feat/call-login-endpoint

Feature :: Integração com API && Login
ateliware · May 9, 2024 · 79bf4d4 · 79bf4d4
2 parents e5ebd6f + c4e2e72
commit 79bf4d4
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 35 deletions.
diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,7 @@
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
-  <title>Blueprint App</title>
+  <title>Caronas SOS</title>
 </head>
 
 <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,13 +2,13 @@ import { AuthProvider, useAuthContext } from './contexts/AuthProvider';
 import {
   BrowserRouter,
   Navigate,
+  Outlet,
   Route,
   Routes,
   useLocation,
 } from 'react-router-dom';
 
 import {
-  DefaultPage,
   EmailSentPage,
   HomePage,
   LoginPage,
@@ -27,15 +27,15 @@ import { VehicleFormPage } from '@pages/Vehicle';
 
 function Authenticated() {
   const location = useLocation();
-  const { user, loading } = useAuthContext();
+  const { token, loading } = useAuthContext();
 
   if (loading) {
     return <>Loading, please wait...</>;
   }
 
-  const isAuthenticated = !!user;
+  const isAuthenticated = !!token;
   return isAuthenticated ? (
-    <DefaultPage />
+    <Outlet />
   ) : (
     <Navigate to="/login" replace state={{ from: location }} />
   );
@@ -73,24 +73,16 @@ function App() {
                     <Route path="email_sent" element={<EmailSentPage />} />
                     <Route path="about" element={<>Example about page</>} />
 
-                    <Route path="vehicle/add" element={<VehicleFormPage />} />
                     <Route path="*" element={<NotFoundPage />} />
-                    <Route path="home" element={<HomePage />} />
-                    <Route path="ride_offer" element={<RideOfferPage />} />
                   </Route>
 
                   <Route path="" element={<Authenticated />}>
                     <Route path="/me" element={<MePage />} />
                     <Route path="/users" element={<UserPage />} />
-                    <Route path="dashboard" element={<>Dashboard Content</>} />
-                    <Route
-                      path="protected"
-                      element={<>Example protected page</>}
-                    />
-                    <Route
-                      path="protected2"
-                      element={<>Example protected page 2</>}
-                    />
+
+                    <Route path="home" element={<HomePage />} />
+                    <Route path="ride_offer" element={<RideOfferPage />} />
+                    <Route path="vehicle/add" element={<VehicleFormPage />} />
                   </Route>
                 </Routes>
               </div>

diff --git a/src/contexts/AuthProvider.tsx b/src/contexts/AuthProvider.tsx
@@ -14,6 +14,7 @@ import { login, sendEmailRecover, setAuthorization } from '@services/api/auth';
 
 export type TAuthContext = {
   user: User | null;
+  token: string | null;
   setUser: (user: User | null) => void;
   loading: boolean;
   isLoadingRequest?: boolean;
@@ -35,19 +36,17 @@ export function AuthProvider({ children }: PropsWithChildren) {
   const [loading, setLoading] = useState(true);
   const [isLoadingRequest, setIsLoadingRequest] = useState(false);
 
-  const handleLogin = async (email: string, password: string) => {
+  const handleLogin = async (cpf: string, password: string) => {
     setIsLoadingRequest(true);
     try {
-      const { data } = await login(email, password);
-      const { user, token } = data;
+      const { data } = await login(cpf, password);
+      const { access } = data;
 
-      if (user) {
-        setAuthorization(token);
-        handleSetUser(user);
-        localStorage.setItem(tokenLocalStorageKey, token);
+      setAuthorization(access);
+      handleSetUser(null);
+      localStorage.setItem(tokenLocalStorageKey, access);
 
-        navigate(location.state?.from?.pathname || '/');
-      }
+      navigate(location.state?.from?.pathname || '/home');
       setIsLoadingRequest(false);
     } catch (error) {
       setIsLoadingRequest(false);
@@ -95,8 +94,10 @@ export function AuthProvider({ children }: PropsWithChildren) {
     localStorage.setItem(userLocalStorageKey, JSON.stringify(user));
   };
 
+  const token = localStorage.getItem(tokenLocalStorageKey);
   const contextValue = {
     user,
+    token,
     setUser: handleSetUser,
     loading,
     isLoadingRequest,

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -2,7 +2,7 @@ import '@styles/index.scss';
 import '../App.css';
 import logo from '@assets/logo-small.svg';
 
-import { Icon, Item, ItemList, PageHeader, Tab } from '@components';
+import { Button, Icon, Item, ItemList, PageHeader, Tab } from '@components';
 import { useAuthContext } from '@contexts/AuthProvider';
 
 function HomePage() {
@@ -43,17 +43,20 @@ function HomePage() {
       component: <div>Conteúdo de Caronas</div>,
     },
   ];
-  const { logout, user } = useAuthContext();
+  const { logout } = useAuthContext();
 
   return (
     <>
-      <div className="p-s-300 align-items-center">
+      <div className="pb-s-300 pt-s-300 align-items-center">
         <PageHeader
           logo={logo}
           actions={
-            <a onClick={() => logout()}>
-              <Icon>logout</Icon>
-            </a>
+            <Button
+              className="sidebutton__label sidebutton__label--xs"
+              prefixes={<Icon>logout</Icon>}
+              design="transparent"
+              onClick={() => logout()}
+            ></Button>
           }
         />
       </div>

diff --git a/src/pages/LoginPage/LoginPage.spec.tsx b/src/pages/LoginPage/LoginPage.spec.tsx
@@ -10,6 +10,7 @@ import LoginPage from './LoginPage';
 
 const contextValues: AuthContext.TAuthContext = {
   user: null,
+  token: null,
   setUser: jest.fn(),
   loading: false,
   login: jest.fn().mockResolvedValue({} as ApiResponse),

diff --git a/src/services/api/auth/auth.ts b/src/services/api/auth/auth.ts
@@ -5,8 +5,8 @@ export const setAuthorization = (token: string | null) => {
   api.defaults.headers.common.Authorization = authorization;
 };
 
-export const login = async (email: string, password: string) => {
-  return api.post('/login', { email, password });
+export const login = async (cpf: string, password: string) => {
+  return api.post('/token/', { cpf, password });
 };
 
 export const sendEmailRecover = async (email: string) => {

diff --git a/src/services/api/index.ts b/src/services/api/index.ts
@@ -25,9 +25,10 @@ export type ErrorResponse = {
 };
 
 export const api = axios.create({
-  baseURL: process.env.REACT_APP_BASE_URL,
+  baseURL: `${process.env.REACT_APP_BASE_URL}/api/v1`,
   headers: {
     'Content-Type': 'application/json',
+    'Access-Control-Allow-Origin': '*',
   },
 });