Login

Componente responsável por efetuar a autenticação de um usuário na aplicação.

Introdução

O componente de login destina-se a sistematização do controle de autenticação de usuários dentro da aplicação.

Componente de Login

O controle é feito através de um formulário com os campos "email" e "senha". Os campos estão devidamente validados e condicionados para melhor experiência do usuário e para o tratamento de possíveis erros no processo de validação.

Validação dos campos

A validação dos campos ocorre com a lib "yup" e, à exemplo de sua aplicação, há a seguinte definição:

Schema de Login

const loginSchema = yup.object().shape({
  email: yup
    .string()
    .email("Entre com um email válido")
    .required("Email é obrigatório"),

  password: yup
    .string()
    .min(6, "A senha deve ter no mínimo 6 caracteres")
    .matches(
      /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[$*&@#])[0-9a-zA-Z$*&@#]{6,}$/,
      `Necessário ao menos: 
      1 letra maiúscula, 1 número e 1 caractere especial`
    )
    .required("Senha é obrigatória"),
});

Submissão do Form para validação

Através do Axios, tem-se por definição a função de submissão do formulário listada logo abaixo:

Função de submissão

const handleLogin = (data: LoginData) => {
    api
      .post("/auth", data)
      .then((response) => {
        const headers = {
          headers: {
            Authorization: `Bearer ${response.data.token}`,
          },
        };

        api.get(`User/${data.email}`, headers).then((res) => {
          const user = res.data;
          loginAuth!({ token: response.data.token, user: user });
          Router.push("/Homepage");
        });
      })
      .catch((error) => {
        if (error.response.data.message === "User not verified") {
          toast.error("Usuário não verificado");
        } else {
          toast.error("Email ou senha incorretos");
        }
      });
  };

Conforme apresentado acima, a função ainda integra tratamento e verificação de respostas para a validação de usuários, além de controle do context Auth.

Componentes integrados

• React Toast -> Tratamento de respostas

• Yup - Validação de campos

Requisitos Funcionais

Descrição	Entradas	Saídas	Observações ⭐
Login com o servidor da aplicação ( Back-End )	Email e senha previamente cadastrados no banco de dados	1° Jwt - (JSON Web Token)	O Login somente é válido para usuários previamente verificados via email. A verificação decorre após o registro.
Acessibilidade via Color Mode - White e Dark	Evento de clique no ícone superior direito [☀ - 🌙]	Alteração na visualização de cores dentro de toda a aplicação	O controle do modo de cores ocorre através do context ToggleModeStyle.
Tratamento de respostas via ReactToast	-	ERRORS: "Usuário não verificado" - "Email ou senha incorretos"	-
Responsividade	-	-	✅

Caminho do arquivo: src\components\Login