Skip to content
Snippets Groups Projects
Commit 63ac7eb8 authored by lumb19's avatar lumb19
Browse files

Issue #23: ADD error verification

parent 739eefa5
No related branches found
No related tags found
1 merge request!17Issue #23: ADD error verification
"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"
>
<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"
......@@ -27,7 +39,9 @@ export default function LoginForm({
height={24}
className="m-5"
/>
{errorMessage ? <Alert severity="error">{errorMessage}</Alert> : null}
{errorMessage ? (
<Alert severity="error">{errorMessage}</Alert>
) : null}
<TextField
fullWidth
label="E-mail"
......@@ -46,7 +60,7 @@ export default function LoginForm({
<Button
fullWidth
disableElevation
className="bg-secondary text-white hover:bg-secondary"
className="bg-secondary text-white hover:bg-secondary-hover"
type="submit"
>
Entrar
......@@ -64,13 +78,24 @@ export default function LoginForm({
<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>
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>
);
}
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>
);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment