diff --git a/src/app/login/components/LoginForm.js b/src/app/login/components/LoginForm.js index c0d28092190a3cf46ac78bcb8c61d6554e38ff68..020e63c4b2e150bfe410fd380f4aebc1b0bcc44d 100644 --- a/src/app/login/components/LoginForm.js +++ b/src/app/login/components/LoginForm.js @@ -1,6 +1,6 @@ "use client"; import Image from "next/image"; -import { Button, Paper, Divider, SvgIcon, TextField } from "@mui/material"; +import { Button, Paper, Divider, SvgIcon, TextField, Alert } from "@mui/material"; import theme from "@/app/theme"; import { ThemeProvider } from "@emotion/react"; @@ -8,6 +8,7 @@ export default function LoginForm({ handleEmailChange, handlePasswordChange, handleSubmit, + errorMessage }) { return ( <ThemeProvider theme={theme}> @@ -26,11 +27,13 @@ export default function LoginForm({ height={24} className="m-5" /> + {errorMessage ? <Alert severity="error">{errorMessage}</Alert> : null} <TextField fullWidth label="E-mail" className="m-5" onChange={handleEmailChange} + error={errorMessage != ""} /> <TextField fullWidth @@ -38,6 +41,7 @@ export default function LoginForm({ label="Senha" className="mb-5" onChange={handlePasswordChange} + error={errorMessage != ""} /> <Button fullWidth diff --git a/src/app/login/page.js b/src/app/login/page.js index ed1e00efaeed191ddc75616551ea4b222dc3df3f..c1a3a3247a9d66544745152ab39ee7ec0cc3c71c 100644 --- a/src/app/login/page.js +++ b/src/app/login/page.js @@ -4,12 +4,16 @@ import Hightlights from "./components/Highlights"; import LoginForm from "./components/LoginForm"; import { useEffect, useState } from "react"; import mecredApi from "@/axiosConfig"; -import { getStoredValue, saveToLocalStorage } from "../handlers/localStorageHandler"; -import { useRouter } from "next/navigation"; +import { + getStoredValue, + saveToLocalStorage, +} from "../handlers/localStorageHandler"; +import { redirect, useRouter } from "next/navigation"; export default function Login() { const [userEmail, setUserEmail] = useState(""); const [userPassword, setUserPassword] = useState(""); + const [errorMessage, setErrorMessage] = useState(""); const access_token = getStoredValue("access_token"); @@ -27,36 +31,38 @@ export default function Login() { const userLogin = async (event, email, password) => { event.preventDefault(); - if (!access_token) { - mecredApi - .post("/auth/sign_in", { - email: userEmail, - password: userPassword, - }) - .then(response => { - saveToLocalStorage("user_data", JSON.stringify(response.data["data"])); - saveToLocalStorage("access_token", response.headers["access-token"]); - router.push("/"); - - }) - .catch((error) => console.log(error.response)); - } - + mecredApi + .post("/auth/sign_in", { + email: userEmail, + password: userPassword, + }) + .then((response) => { + saveToLocalStorage("user_data", JSON.stringify(response.data["data"])); + saveToLocalStorage("access_token", response.headers["access-token"]); + router.push("/"); + }) + .catch((error) => { + setErrorMessage(error['response']['data']['errors'][0]) + }) }; + useEffect(() => { + if (access_token) redirect("/"); + }); + return ( - <Grid container className="min-h-screen bg-[#f5f9f9] items-center"> - <Grid xs={12} md={7} lg={7} > - <Hightlights /> - </Grid> - <Grid xs={12} md={5} lg={5}> - <LoginForm - handleEmailChange={handleEmailChange} - handlePasswordChange={handlePasswordChange} - handleSubmit={userLogin} - /> - - </Grid> + <Grid container className="min-h-screen bg-[#f5f9f9] items-center"> + <Grid xs={12} md={7} lg={7}> + <Hightlights /> + </Grid> + <Grid xs={12} md={5} lg={5}> + <LoginForm + handleEmailChange={handleEmailChange} + handlePasswordChange={handlePasswordChange} + handleSubmit={userLogin} + errorMessage={errorMessage} + /> </Grid> + </Grid> ); }