Registro

Componente responsável pelo cadastro de novos usuários na plataforma.

Introdução

O componente de registro destina-se ao controle de cadastro de colaboradores e demais usuários dentro da aplicação.

Componente de registro

Sua funcionalidade ocorre por meio de um formulário padrão de inscrição para eventual verificação e autorização de acesso.

Formulário e Validação

Os campos do formulário estão sujeitos a seguinte configuração:

Type Register

interface RegisterData {
  email: string;
  name: string;
  password: string;
  confirmPassword: string;
  terms: boolean;
}

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

Schema Register

const registerSchema = 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"),

  confirmPassword: yup
    .string()
    .oneOf([yup.ref("password"), null], "Senhas não conferem")
    .required("Confirmação de senha é obrigatória"),

  name: yup
    .string()
    .min(3, "Nome deve ter no mínimo 3 caracteres")
    .max(40, "Nome deve ter no máximo 40 caracteres")
    .required("Nome é obrigatório"),

  terms: yup.boolean().oneOf([true]),
});

Submissão de Form de Registro

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

Submit Register

const handleRegister = (data: RegisterData) => {
    api.post("/User/create", data).then((response) => {
      console.log(response);
      toast.success("Perfil registrado com sucesso!");
      setTabIndex(0);
    });
  };

Componentes Integrados

• React Toast -> Tratamento de respostas

• Yup -> Validação de campos

Requisitos Funcionais

Descrição	Entradas	Saídas	Observações ⭐
Envio de formulário de registro para o servidor	Campos do formulário listados aqui	Criação de usuário & envio de email para verificação de conta	-
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	-	-	✅
Responsividade	-	-	✅

Caminho do arquivo: src\components\RegisterComponent\RegisterComponent.tsx