From 63ac7eb8c110526a943d905865d56dea3ec07b02 Mon Sep 17 00:00:00 2001
From: lumb19 <lumb19@inf.ufpr.br>
Date: Mon, 4 Mar 2024 12:02:38 -0300
Subject: [PATCH] Issue #23: ADD error verification
---
src/app/login/components/LoginForm.js | 141 ++++++++++++++----------
src/app/login/components/SignupModal.js | 94 ++++++++++++++++
2 files changed, 177 insertions(+), 58 deletions(-)
create mode 100644 src/app/login/components/SignupModal.js
diff --git a/src/app/login/components/LoginForm.js b/src/app/login/components/LoginForm.js
index 020e63c4..bbbe7232 100644
--- a/src/app/login/components/LoginForm.js
+++ b/src/app/login/components/LoginForm.js
@@ -1,76 +1,101 @@
"use client";
import Image from "next/image";
-import { Button, Paper, Divider, SvgIcon, TextField, Alert } from "@mui/material";
+import {
+ Button,
+ Paper,
+ Divider,
+ SvgIcon,
+ TextField,
+ Alert,
+} from "@mui/material";
import theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react";
+import { useState } from "react";
+import SignupModal from "./SignupModal";
export default function LoginForm({
handleEmailChange,
handlePasswordChange,
handleSubmit,
- errorMessage
+ errorMessage,
}) {
+ const [openModal, setOpenModal] = useState(false);
+
+ const handleOpenModal = () => setOpenModal(true);
+ const handleCloseModal = () => setOpenModal(false);
+
return (
<ThemeProvider theme={theme}>
- <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"
- >
- <Image
- src="/mecred.svg"
- alt="MecRED Logo"
- width={60}
- 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
- type="password"
- label="Senha"
- className="mb-5"
- onChange={handlePasswordChange}
- error={errorMessage != ""}
- />
- <Button
- fullWidth
- disableElevation
- className="bg-secondary text-white hover:bg-secondary"
- type="submit"
+ <div className="flex flex-col items-center justify-center">
+ <form onSubmit={handleSubmit}>
+ <Paper
+ elevation={0}
+ className="w-96 flex flex-col items-center p-5 rounded-xl"
>
- Entrar
- </Button>
- <Divider flexItem className="mt-2">
- <p className="text-gray-400 text-md">OU</p>
- </Divider>
- <Button
- fullWidth
- disableElevation
- variant="outlined"
- className="mt-2 border-main text-gray-500 normal-case flex gap-2"
- >
- <img className="w-6 h-6" src="/google.svg" alt="google logo" />
- <span>Entrar com o Google</span>
- </Button>
- <p className="mt-5 text-xs text-gray-500">
- Esqueceu a senha? <a className="text-secondary">Clique aqui.</a>
- </p>
- </Paper>
+ <Image
+ src="/mecred.svg"
+ alt="MecRED Logo"
+ width={60}
+ 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
+ type="password"
+ label="Senha"
+ className="mb-5"
+ onChange={handlePasswordChange}
+ error={errorMessage != ""}
+ />
+ <Button
+ fullWidth
+ disableElevation
+ className="bg-secondary text-white hover:bg-secondary-hover"
+ type="submit"
+ >
+ Entrar
+ </Button>
+ <Divider flexItem className="mt-2">
+ <p className="text-gray-400 text-md">OU</p>
+ </Divider>
+ <Button
+ fullWidth
+ disableElevation
+ variant="outlined"
+ className="mt-2 border-main text-gray-500 normal-case flex gap-2"
+ >
+ <img className="w-6 h-6" src="/google.svg" alt="google logo" />
+ <span>Entrar com o Google</span>
+ </Button>
+ <p className="mt-5 text-xs text-gray-500">
+ Esqueceu a senha?{" "}
+ <a className="text-secondary cursor-pointer hover:font-bold">
+ Clique aqui.
+ </a>
+ </p>
+ </Paper>
+ </form>
<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
+ onClick={handleOpenModal}
+ className="text-secondary hover:font-bold cursor-pointer"
+ >
+ Cadastre-se.
+ </a>
</p>
- </form>
+ <SignupModal open={openModal} handleClose={handleCloseModal} />
+ </div>
</ThemeProvider>
);
}
diff --git a/src/app/login/components/SignupModal.js b/src/app/login/components/SignupModal.js
new file mode 100644
index 00000000..263a1234
--- /dev/null
+++ b/src/app/login/components/SignupModal.js
@@ -0,0 +1,94 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Modal from "@mui/material/Modal";
+import { TextField, Divider, Alert } from "@mui/material";
+import { useState } from "react";
+
+export default function SignupModal({ open, handleClose }) {
+ const [userName, setUserName] = useState("");
+ const [userEmail, setUserEmail] = useState("");
+ const [userPassword, setUserPassword] = useState("");
+ const [userPasswordConfirmation, setUserPasswordConfirmation] = useState("");
+ const [errorMessage, setErrorMessage] = useState("");
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+
+ if (!userName || !userEmail || !userPassword || !userPasswordConfirmation)
+ setErrorMessage("Todos os campos marcados com * são obrigatórios!")
+ else if (userPassword != userPasswordConfirmation)
+ setErrorMessage("As senhas devem ser iguais!");
+ };
+
+ return (
+ <Modal
+ className="grid h-screen place-items-center m-5"
+ open={open}
+ onClose={handleClose}
+ >
+ <Box className="bg-white sm:w-1/2 xl:w-1/4 p-5 flex flex-col items-center border-none rounded-xl">
+ <h1 className="text-secondary text-2xl font-bold m-5">Cadastre-se</h1>
+ <form onSubmit={handleSubmit}>
+ {errorMessage ? <Alert severity="error">{errorMessage}</Alert> : null}
+ <TextField
+ fullWidth
+ onChange={(e) => setUserName(e.target.value)}
+ label="Nome Completo *"
+ className="my-5"
+ value={userName}
+ error={!userName && errorMessage}
+ />
+ <TextField
+ fullWidth
+ onChange={(e) => setUserEmail(e.target.value)}
+ label="E-mail *"
+ type="email"
+ className="mb-5"
+ value={userEmail}
+ error={!userEmail && errorMessage}
+ />
+ <TextField
+ fullWidth
+ onChange={(e) => setUserPassword(e.target.value)}
+ type="password"
+ label="Senha *"
+ className="mb-5"
+ value={userPassword}
+ error={!userPassword && errorMessage}
+ />
+ <TextField
+ fullWidth
+ onChange={(e) => setUserPasswordConfirmation(e.target.value)}
+ type="password"
+ label="Confirmar senha *"
+ className="mb-5"
+ value={userPasswordConfirmation}
+ error={userPasswordConfirmation != userPassword && userPasswordConfirmation != ""}
+ helperText={userPasswordConfirmation && userPasswordConfirmation != userPassword && <p>As senhas devem ser iguais!</p>}
+ />
+ <Button
+ fullWidth
+ disableElevation
+ className="bg-secondary text-white hover:bg-secondary-hover"
+ type="submit"
+ >
+ Enviar
+ </Button>
+ <Divider flexItem className="mt-2">
+ <p className="text-gray-400 text-md">OU</p>
+ </Divider>
+ <Button
+ fullWidth
+ disableElevation
+ variant="outlined"
+ className="mt-2 border-main text-gray-500 normal-case flex gap-2"
+ >
+ <img className="w-6 h-6" src="/google.svg" alt="google logo" />
+ <span>Cadastrar-se com o Google</span>
+ </Button>
+ </form>
+ </Box>
+ </Modal>
+ );
+}
--
GitLab