Select Git revision
LoginForm.js
-
Richard Fernando Heise Ferreira authoredRichard Fernando Heise Ferreira authored
LoginForm.js 6.33 KiB
"use client";
import Image from "next/image";
import { Button, Paper, TextField, Alert, Tooltip } from "@mui/material";
import theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react";
import { useState } from "react";
import SignupModal from "./SignupModal";
import PasswordModal from "./PasswordModal";
import Title from "@/app/components/Title";
import { useRouter } from "next/navigation";
import { redirect } from "next/dist/server/api-utils";
export default function LoginForm({
handleEmailChange,
handlePasswordChange,
handleSubmit,
errorMessage,
}) {
const [openModalSignup, setOpenModalSignup] = useState(false);
const [openModalPasswd, setOpenModalPasswd] = useState(false);
const handleOpenModalSignup = () => setOpenModalSignup(true);
const handleCloseModalSignup = () => setOpenModalSignup(false);
const handleOpenModalPasswd = () => setOpenModalPasswd(true);
const handleCloseModalPasswd = () => setOpenModalPasswd(false);
const handleGovBr = async () => {
const state = window.crypto.randomUUID();
localStorage.setItem("govbr_state", state);
async function generateCodeVerifier() {
var code_verifier = new Uint8Array(32);
window.crypto.getRandomValues(code_verifier);
return code_verifier;
}
function generateCodeChallenge(code_verifier) {
return base64URL(window.crypto.subtle.digest("SHA-256", code_verifier));
}
async function base64URL(buffer) {
// use a FileReader to generate a base64 data URI:
const base64url = await new Promise(r => {
const reader = new FileReader()
reader.onload = () => r(reader.result)
reader.readAsDataURL(new Blob([buffer]))
});
// remove the `data:...;base64,` part from the start
return base64url.slice(base64url.indexOf(',') + 1);
}
const codeVerifier = await generateCodeVerifier();
localStorage.setItem("govbr_code_verifier", await base64URL(codeVerifier));
const params = {
response_type: "code",
client_id: "mecredhomologa.c3sl.ufpr.br",
scope: "openid email profile govbr_confiabilidades",
redirect_uri: "https://mecredhomologa.c3sl.ufpr.br/govbr",
nonce: "1121",
state,
code_challenge: await generateCodeChallenge(codeVerifier),
code_challenge_method: "S256",
};
const searchParams = new URLSearchParams(params);
const url = `https://sso.staging.acesso.gov.br/authorize?${searchParams.toString()}`
window.location = url;
};
const router = useRouter();
return (
<ThemeProvider theme={theme}>
<div className="xl:fixed">
<div className="flex xl:ml-[35%] xl:my-[30%] flex-col items-center">
<div className="xl:hidden">
<Title />
</div>
<form onSubmit={handleSubmit} className="mb-5">
<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" className="mb-3">
{errorMessage}
</Alert>
) : null}
<TextField
fullWidth
label="E-mail"
className="m-5"
onChange={handleEmailChange}
error={errorMessage.length > 0}
alt="E-mail"
/>
<TextField
fullWidth
type="password"
label="Senha"
className="mb-5"
onChange={handlePasswordChange}
error={errorMessage != errorMessage.length > 0}
alt="Senha"
/>
<Button
fullWidth
disableElevation
className="bg-secondary text-white hover:bg-secondary-hover normal-case font-bold"
type="submit"
alt="Entrar"
title="Entrar"
>
Entrar
</Button>
<p className="mt-5 text-xs text-main-text">
Esqueceu a senha?{" "}
<a
onClick={handleOpenModalPasswd}
className="text-secondary cursor-pointer hover:font-bold"
alt="Esqueceu a senha?"
>
Clique aqui.
</a>
</p>
<p className="mt-5 text-sm text-main-text lg:text-nowrap">
Não tem uma conta?{" "}
<a
onClick={handleOpenModalSignup}
className="text-secondary hover:font-bold cursor-pointer"
alt="Cadastre-se"
>
Cadastre-se.
</a>
</p>
<PasswordModal
open={openModalPasswd}
handleClose={handleCloseModalPasswd}
/>
</Paper>
</form>
<Button
title="Ainda não disponível"
fullWidth
disableElevation
onClick={handleGovBr}
variant="outlined"
className="my-2 bg-white border-white text-[#B6CCCC] normal-case flex gap-2 w-96 font-bold"
>
<span >Entrar com o</span>
<Image className="w-14 h-6" src="/govbr.svg" alt="govbr" width={10} height={10} />
</Button>
<button
onClick={() => router.push("/sobre")}
className="text-secondary lg:text-nowrap bg-white py-1 w-96 hover:bg-main-hover rounded cursor-pointer"
alt="Entrar sem cadastrar"
>
Entrar sem cadastrar
</button>
<Button
title="Ainda não disponível"
fullWidth
disableElevation
variant="outlined"
className="mt-2 bg-white border-white text-[#B6CCCC] normal-case flex gap-2 w-96"
>
<Image className="w-6 h-6" src="/google.svg" width={10} height={10} alt="Google" />
<span>Entrar com o Google</span>
</Button>
<SignupModal
open={openModalSignup}
handleClose={handleCloseModalSignup}
/>
</div>
</div>
</ThemeProvider>
);
}