diff --git a/src/app/components/AcessibilityBar.js b/src/app/components/AcessibilityBar.js index f16f511bc01008f113dad035e7dd032d2c1810f3..6c6ffd337a3e355d643021226d07ca0914899bd9 100644 --- a/src/app/components/AcessibilityBar.js +++ b/src/app/components/AcessibilityBar.js @@ -6,13 +6,14 @@ import { useRef, useLayoutEffect } from 'react'; import { useRouter } from 'next/navigation'; import { FaArrowCircleUp } from "react-icons/fa"; import { toggleContrast } from './themeUtils'; -import { isLoggedIn } from "@/app/handlers/loginHandler"; +import { useLoggedIn } from "@/app/handlers/loginHandler"; export default function AcessibilityBar() { const sizes = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl']; const [defaultSizes, setDefaultSizes] = useState({}); const [sizeProperties, setSizeProperties] = useState({}); + const loggedIn = useLoggedIn(); const router = useRouter(); const pathname = usePathname() @@ -24,7 +25,6 @@ export default function AcessibilityBar() { }); } - function changeFont(action) { sizes.forEach(size => { @@ -178,7 +178,7 @@ export default function AcessibilityBar() { 3- Ir para a busca. </button> - {!isLoggedIn() && + {!loggedIn && <button onClick={() => router.push("/entrar")}> 4- Ir para login. </button> @@ -223,7 +223,7 @@ export default function AcessibilityBar() { 1- Ir para o conteúdo. </button> - {!isLoggedIn() && + {!loggedIn && <button onClick={() => router.push("/entrar")}> 2- Ir para login. </button> diff --git a/src/app/entrar/page.js b/src/app/entrar/page.js index 87966bdfbde616c54a595a5b793171ef39ea7e8f..0703538ad206ea74a80d10c6932eac639fd2be94 100644 --- a/src/app/entrar/page.js +++ b/src/app/entrar/page.js @@ -13,7 +13,7 @@ import { ThemeProvider } from "@emotion/react"; import theme from "../theme"; import LoginInfo from "./components/LoginInfo"; import AcessibilityBar from "../components/AcessibilityBar"; -import { useUserStore } from "@/app/stores/userStore" +import { logIn } from "../handlers/loginHandler"; function Login() { const [userEmail, setUserEmail] = useState(""); @@ -22,7 +22,6 @@ function Login() { const [suggestionMessage, setSuggestionMessage] = useState(""); const [isFirstLetterUpperCase, setIsFirstLetterUpperCase] = useState(false); const searchParams = useSearchParams(); - const userStore = useUserStore(); const access_token = getStoredValue("access_token"); // Obtendo os parâmetros de busca @@ -48,18 +47,9 @@ function Login() { setUserPassword(e.target.value); }; - const userLogin = async (event, email, password) => { + const userLogin = async (event) => { event.preventDefault(); - await mecredApi - .post("/public/auth/signin", { - email: userEmail, - password: userPassword, - }) - .then((response) => { - const token = response.data['token']; - userStore.setToken(token); - router.push(redirectUrl); - }) + await logIn(userEmail, userPassword) .catch((error) => { console.log(error); setErrorMessage(error['response']['data']['error']['message']); diff --git a/src/app/handlers/loginHandler.js b/src/app/handlers/loginHandler.js index 95813076b88d992805f01990521233cab1cc8250..a0392f0809821fb93a8043267b517ed70f9b1d2c 100644 --- a/src/app/handlers/loginHandler.js +++ b/src/app/handlers/loginHandler.js @@ -1,14 +1,7 @@ -import { redirect, usePathname, useSearchParams } from "next/navigation"; +import { usePathname, useSearchParams } from "next/navigation"; import { useRouter } from "next/navigation"; -import { useCallback } from "react"; -import { getStoredValue } from "./localStorageHandler"; - -export function isLoggedIn() { - return false; - if (typeof window === "undefined") return undefined; - - return getStoredValue("access_token") ? true : false; -} +import { useCallback, useEffect, useState } from "react"; +import mecredApi from "@/axiosConfig"; /** * React Hook for forcing login. Redirects to login page and when user logs in redirects back to the original page. @@ -17,7 +10,7 @@ export function isLoggedIn() { * * @returns Function that will force login. */ -export function useLoginBarrier(originalPath) { +export function useLoginBarrier() { const pathname = usePathname(); const searchParams = useSearchParams(); const router = useRouter(); @@ -32,4 +25,59 @@ export function useLoginBarrier(originalPath) { return false; }, [router, pathname, searchParams]); +} + +export function authHeaders() { + const token = localStorage.getItem('token'); + return { + 'Authorization': `Bearer ${token}` + }; +} + +export function useLoggedIn() { + const [loggedIn, setLoggedIn] = useState(false); + + useEffect(() => { + setLoggedIn(isLoggedIn()); + }, [setLoggedIn]); + + return loggedIn; +} + +export function isLoggedIn() { + return localStorage.getItem('token') ? true : false; +} + +export function logIn(email, password) { + return mecredApi + .post("/public/auth/signin", { + email: email, + password: password, + }) + .then((response) => { + const token = response.data['token']; + localStorage.setItem('token', token); + fetchUser(); + }); +} + +export function logOut() { + localStorage.removeItem('token'); + localStorage.removeItem('user_data'); +} + +export function userData() { + const dataString = localStorage.getItem('user_data'); + + if (!dataString) + return undefined; + + const data = JSON.parse(dataString); + return data; +} + +export async function fetchUser() { + const response = await mecredApi.get('/api/user/me'); + const dataString = JSON.stringify(response.data); + localStorage.setItem('user_data', dataString); } \ No newline at end of file diff --git a/src/app/stores/userStore.js b/src/app/stores/userStore.js deleted file mode 100644 index 26be6a4b91c7dda267c348d7c03574fe15eadde0..0000000000000000000000000000000000000000 --- a/src/app/stores/userStore.js +++ /dev/null @@ -1,20 +0,0 @@ -import { create } from 'zustand'; - -const useUserStore = create((set, get) => ({ - token: localStorage.getItem('token') || null, - data: null, - error: null, - setToken: (token) => { - localStorage.setItem('token', token); - set({ token, data: null, error: null }); - }, - clearToken: () => { - localStorage.removeItem('token'); - set({ token: null }) - }, - headers: () => { - return { 'Authorization': `Bearer ${get().token}` }; - } -})) - -export { useUserStore };