From 79449f2d8b0c26c1b22ffc684df17715aaa1e250 Mon Sep 17 00:00:00 2001
From: lumb19 <lumb19@inf.ufpr.br>
Date: Tue, 27 Feb 2024 11:44:39 -0300
Subject: [PATCH] Issue #18: ADD local storage integration
---
src/app/handlers/localStorageHandler.js | 8 +++
src/app/login/components/Highlights.js | 16 ++---
src/app/login/components/LoginForm.js | 21 ++++---
src/app/login/page.js | 83 ++++++++++++++-----------
4 files changed, 75 insertions(+), 53 deletions(-)
create mode 100644 src/app/handlers/localStorageHandler.js
diff --git a/src/app/handlers/localStorageHandler.js b/src/app/handlers/localStorageHandler.js
new file mode 100644
index 00000000..74d14d10
--- /dev/null
+++ b/src/app/handlers/localStorageHandler.js
@@ -0,0 +1,8 @@
+export const getStoredValue = (attr) => {
+ return localStorage.getItem(attr) || "";
+}
+
+export async function saveToLocalStorage(attr, val) {
+ console.log(val);
+ localStorage.setItem(attr, val);
+}
\ No newline at end of file
diff --git a/src/app/login/components/Highlights.js b/src/app/login/components/Highlights.js
index 48d764f3..bf88e242 100644
--- a/src/app/login/components/Highlights.js
+++ b/src/app/login/components/Highlights.js
@@ -3,14 +3,14 @@ import { useEffect, useState } from "react";
import mecredApi from "@/axiosConfig";
export default function Hightlights() {
-
const [statistics, setStatistics] = useState({});
useEffect(() => {
- mecredApi.get('/statistics')
- .then(({data}) => setStatistics(data))
- .catch(error => console.log(error))
- }, [])
+ mecredApi
+ .get("/statistics")
+ .then(({ data }) => setStatistics(data))
+ .catch((error) => console.log(error));
+ }, []);
return (
<div className="flex flex-col text-center">
@@ -20,8 +20,10 @@ export default function Hightlights() {
<h1 className="text-lg text-gray-400 mb-5">
Encontre e compartilhe vídeos, animações e muitos outros recursos.
</h1>
- <h1 className="text-base">{statistics.count} recursos disponíveis
- | {statistics.month_downloads} recursos baixados este mês</h1>
+ <h1 className="text-base">
+ {statistics.count} recursos disponíveis | {statistics.month_downloads}{" "}
+ recursos baixados este mês
+ </h1>
{/*<div className="flex flex-wrap justify-center max-w-[70%] items-center">
<div className="m-1 min-w-24 h-24 bg-black items-center"></div>
<div className="m-1 min-w-24 h-24 bg-black items-center"></div>
diff --git a/src/app/login/components/LoginForm.js b/src/app/login/components/LoginForm.js
index 8b269678..c0d28092 100644
--- a/src/app/login/components/LoginForm.js
+++ b/src/app/login/components/LoginForm.js
@@ -1,17 +1,20 @@
"use client";
import Image from "next/image";
-import { Button, Paper, SvgIcon, TextField } from "@mui/material";
+import { Button, Paper, Divider, SvgIcon, TextField } from "@mui/material";
import theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react";
export default function LoginForm({
handleEmailChange,
handlePasswordChange,
- handleButtonClick,
+ handleSubmit,
}) {
return (
<ThemeProvider theme={theme}>
- <div className="flex flex-col items-center justify-center">
+ <form
+ onSubmit={handleSubmit}
+ className="flex flex-col items-center justify-center"
+ >
<Paper
elevation={0}
className="w-96 flex flex-col items-center p-5 rounded-xl"
@@ -25,14 +28,14 @@ export default function LoginForm({
/>
<TextField
fullWidth
- label="E-mail *"
+ label="E-mail"
className="m-5"
onChange={handleEmailChange}
/>
<TextField
fullWidth
type="password"
- label="Senha *"
+ label="Senha"
className="mb-5"
onChange={handlePasswordChange}
/>
@@ -40,11 +43,13 @@ export default function LoginForm({
fullWidth
disableElevation
className="bg-secondary text-white hover:bg-secondary"
- onClick={handleButtonClick}
+ type="submit"
>
Entrar
</Button>
- <p className="mt-2 text-gray-400 text-md">OU</p>
+ <Divider flexItem className="mt-2">
+ <p className="text-gray-400 text-md">OU</p>
+ </Divider>
<Button
fullWidth
disableElevation
@@ -61,7 +66,7 @@ export default function LoginForm({
<p className="mt-5 text-xs text-gray-400">
Não tem uma conta? <a className="text-secondary">Cadastre-se.</a>
</p>
- </div>
+ </form>
</ThemeProvider>
);
}
diff --git a/src/app/login/page.js b/src/app/login/page.js
index 585454f0..2e48de11 100644
--- a/src/app/login/page.js
+++ b/src/app/login/page.js
@@ -1,47 +1,54 @@
-"use client"
-import Grid from '@mui/material/Unstable_Grid2';
-import Paper from '@mui/material/Paper'
-import Hightlights from './components/Highlights';
-import LoginForm from './components/LoginForm';
-import { useState } from 'react';
-import mecredApi from '@/axiosConfig';
+"use client";
+import Grid from "@mui/material/Unstable_Grid2";
+import Paper from "@mui/material/Paper";
+import Hightlights from "./components/Highlights";
+import LoginForm from "./components/LoginForm";
+import { useState } from "react";
+import mecredApi from "@/axiosConfig";
+import { getStoredValue, saveToLocalStorage } from "../handlers/localStorageHandler";
export default function Login() {
+ const [userEmail, setUserEmail] = useState("");
+ const [userPassword, setUserPassword] = useState("");
- const [userEmail, setUserEmail] = useState("");
- const [userPassword, setUserPassword] = useState("");
+ const handleEmailChange = (e) => {
+ setUserEmail(e.target.value);
+ console.log(e.target.value);
+ };
- const handleEmailChange = (e) => {
- setUserEmail(e.target.value);
- console.log(e.target.value);
- }
-
- const handlePasswordChange = (e) => {
- setUserPassword(e.target.value);
- }
+ const handlePasswordChange = (e) => {
+ setUserPassword(e.target.value);
+ };
- const userLogin = async (email, password) => {
+ const userLogin = async (event, email, password) => {
+ event.preventDefault();
- mecredApi.post('/auth/sign_in', {
- email: userEmail,
- password: userPassword
+ let access_token = getStoredValue("access_token");
+ console.log("Opa");
+ if (!access_token) {
+ console.log("oi");
+ mecredApi
+ .post("/auth/sign_in", {
+ email: userEmail,
+ password: userPassword,
})
- .then(response => console.log(response))
- .catch(error => console.log(error.response))
+ .then(({ headers }) => saveToLocalStorage("access_token", headers["access-token"]))
+ .catch((error) => console.log(error.response));
}
+ };
-
- return (
- <Grid container className="min-h-screen bg-main items-center">
- <Grid xs={12} md={7} lg={7} className="">
- <Hightlights/>
- </Grid>
- <Grid xs={12} md={5} lg={5} >
- <LoginForm handleEmailChange={handleEmailChange}
- handlePasswordChange={handlePasswordChange}
- handleButtonClick={userLogin}
- />
- </Grid>
- </Grid>
- )
-}
\ No newline at end of file
+ return (
+ <Grid container className="min-h-screen bg-[#f5f9f9] items-center">
+ <Grid xs={12} md={7} lg={7} className="">
+ <Hightlights />
+ </Grid>
+ <Grid xs={12} md={5} lg={5}>
+ <LoginForm
+ handleEmailChange={handleEmailChange}
+ handlePasswordChange={handlePasswordChange}
+ handleSubmit={userLogin}
+ />
+ </Grid>
+ </Grid>
+ );
+}
--
GitLab