Skip to content
Snippets Groups Projects
Select Git revision
  • issue/271.3-update-routes-new-backend
  • issue-383/description-of-edit-profile
  • issue/384-FIX-followes-following-routes
  • develop default protected
  • issue-363/add-abort-controller-on-collection-page
  • issue/332-resource-edit
  • issue-299/FIX-change-name-share-button-profile-page
  • issue/271.gus
  • 289-tela-de-perfil-inserir-icones-no-cabecalho
9 results

LoginForm.js

Blame
  • 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>
      );
    }