Skip to content
Snippets Groups Projects
Commit 79449f2d authored by lumb19's avatar lumb19
Browse files

Issue #18: ADD local storage integration

parent 6794a490
No related branches found
No related tags found
1 merge request!6Issue #18: ADD local storage integration
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
...@@ -3,14 +3,14 @@ import { useEffect, useState } from "react"; ...@@ -3,14 +3,14 @@ import { useEffect, useState } from "react";
import mecredApi from "@/axiosConfig"; import mecredApi from "@/axiosConfig";
export default function Hightlights() { export default function Hightlights() {
const [statistics, setStatistics] = useState({}); const [statistics, setStatistics] = useState({});
useEffect(() => { useEffect(() => {
mecredApi.get('/statistics') mecredApi
.get("/statistics")
.then(({ data }) => setStatistics(data)) .then(({ data }) => setStatistics(data))
.catch(error => console.log(error)) .catch((error) => console.log(error));
}, []) }, []);
return ( return (
<div className="flex flex-col text-center"> <div className="flex flex-col text-center">
...@@ -20,8 +20,10 @@ export default function Hightlights() { ...@@ -20,8 +20,10 @@ export default function Hightlights() {
<h1 className="text-lg text-gray-400 mb-5"> <h1 className="text-lg text-gray-400 mb-5">
Encontre e compartilhe vídeos, animações e muitos outros recursos. Encontre e compartilhe vídeos, animações e muitos outros recursos.
</h1> </h1>
<h1 className="text-base">{statistics.count} recursos disponíveis <h1 className="text-base">
| {statistics.month_downloads} recursos baixados este mês</h1> {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="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>
<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>
......
"use client"; "use client";
import Image from "next/image"; 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 theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react"; import { ThemeProvider } from "@emotion/react";
export default function LoginForm({ export default function LoginForm({
handleEmailChange, handleEmailChange,
handlePasswordChange, handlePasswordChange,
handleButtonClick, handleSubmit,
}) { }) {
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<div className="flex flex-col items-center justify-center"> <form
onSubmit={handleSubmit}
className="flex flex-col items-center justify-center"
>
<Paper <Paper
elevation={0} elevation={0}
className="w-96 flex flex-col items-center p-5 rounded-xl" className="w-96 flex flex-col items-center p-5 rounded-xl"
...@@ -25,14 +28,14 @@ export default function LoginForm({ ...@@ -25,14 +28,14 @@ export default function LoginForm({
/> />
<TextField <TextField
fullWidth fullWidth
label="E-mail *" label="E-mail"
className="m-5" className="m-5"
onChange={handleEmailChange} onChange={handleEmailChange}
/> />
<TextField <TextField
fullWidth fullWidth
type="password" type="password"
label="Senha *" label="Senha"
className="mb-5" className="mb-5"
onChange={handlePasswordChange} onChange={handlePasswordChange}
/> />
...@@ -40,11 +43,13 @@ export default function LoginForm({ ...@@ -40,11 +43,13 @@ export default function LoginForm({
fullWidth fullWidth
disableElevation disableElevation
className="bg-secondary text-white hover:bg-secondary" className="bg-secondary text-white hover:bg-secondary"
onClick={handleButtonClick} type="submit"
> >
Entrar Entrar
</Button> </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 <Button
fullWidth fullWidth
disableElevation disableElevation
...@@ -61,7 +66,7 @@ export default function LoginForm({ ...@@ -61,7 +66,7 @@ export default function LoginForm({
<p className="mt-5 text-xs text-gray-400"> <p className="mt-5 text-xs text-gray-400">
Não tem uma conta? <a className="text-secondary">Cadastre-se.</a> Não tem uma conta? <a className="text-secondary">Cadastre-se.</a>
</p> </p>
</div> </form>
</ThemeProvider> </ThemeProvider>
); );
} }
"use client" "use client";
import Grid from '@mui/material/Unstable_Grid2'; import Grid from "@mui/material/Unstable_Grid2";
import Paper from '@mui/material/Paper' import Paper from "@mui/material/Paper";
import Hightlights from './components/Highlights'; import Hightlights from "./components/Highlights";
import LoginForm from './components/LoginForm'; import LoginForm from "./components/LoginForm";
import { useState } from 'react'; import { useState } from "react";
import mecredApi from '@/axiosConfig'; import mecredApi from "@/axiosConfig";
import { getStoredValue, saveToLocalStorage } from "../handlers/localStorageHandler";
export default function Login() { export default function Login() {
const [userEmail, setUserEmail] = useState(""); const [userEmail, setUserEmail] = useState("");
const [userPassword, setUserPassword] = useState(""); const [userPassword, setUserPassword] = useState("");
const handleEmailChange = (e) => { const handleEmailChange = (e) => {
setUserEmail(e.target.value); setUserEmail(e.target.value);
console.log(e.target.value); console.log(e.target.value);
} };
const handlePasswordChange = (e) => { const handlePasswordChange = (e) => {
setUserPassword(e.target.value); setUserPassword(e.target.value);
} };
const userLogin = async (email, password) => { const userLogin = async (event, email, password) => {
event.preventDefault();
mecredApi.post('/auth/sign_in', { let access_token = getStoredValue("access_token");
console.log("Opa");
if (!access_token) {
console.log("oi");
mecredApi
.post("/auth/sign_in", {
email: userEmail, email: userEmail,
password: userPassword password: userPassword,
}) })
.then(response => console.log(response)) .then(({ headers }) => saveToLocalStorage("access_token", headers["access-token"]))
.catch(error => console.log(error.response)) .catch((error) => console.log(error.response));
} }
};
return ( return (
<Grid container className="min-h-screen bg-main items-center"> <Grid container className="min-h-screen bg-[#f5f9f9] items-center">
<Grid xs={12} md={7} lg={7} className=""> <Grid xs={12} md={7} lg={7} className="">
<Hightlights /> <Hightlights />
</Grid> </Grid>
<Grid xs={12} md={5} lg={5}> <Grid xs={12} md={5} lg={5}>
<LoginForm handleEmailChange={handleEmailChange} <LoginForm
handleEmailChange={handleEmailChange}
handlePasswordChange={handlePasswordChange} handlePasswordChange={handlePasswordChange}
handleButtonClick={userLogin} handleSubmit={userLogin}
/> />
</Grid> </Grid>
</Grid> </Grid>
) );
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment