LE05 - Formulário e validação - Login & Cadastro

Para cada dia em atraso será descontado 0.5 pontos da nota da atividade.

Descrição:

Neste atividade vamos adicionar mais um nova página no Tzeet, a página de login e de cadastro. O seu objetivo nessa atividade é adicionar dois formulários, o formulário de login, que deve aparecer quando página for carregada e um formulário de cadastro, em caso do usuário não está cadastrado.

Página de Login

A página de login (login.html) deve conter apenas o formulário de login. Este formulário deve aparecer centralizado verticalmente e horizontalmente na página. A figura da uma ideia de como a sua página de login deve ficar:

Detalhes de implemetação:

• A cor do plano de fundo da página de login não deve ser branco. Escolha uma cor que torne a aparência agradável. No exemplo acima usamos um tom de cinza.
• O formulário deve possuir o ícone do Tzeet centralizado horizontalmente
• Além disso, o formulário possuir dois campos, login onde o usuário deve informar um email e password.
  • O login do usuário deve ser o email e portanto a label do elemento de input deve ser email.
  • Analogamente, a label do campo de password, deve ser password.
• Dentro deste formlário deve ter ainda:
  • O botão para que as informações sejam enviadas
  • Um link, “Esqueceu a senha?”
  • Um link, “Inscreva-se”, que ao ser clicado deve levar o usuário a uma nova página signup.html
• Validação:
  • Os dois campos são obrigatórios
  • O botão de enviar só deve ficar habilitado quando ambos os campos estiverem preenchidos (pelo menos um caractere em cada campo)
  • Em caso do usuário não informa um email válido, uma mensagem de erro deve ser mostrada na tela. Veja o exemplo abaixo:

Página de cadastro

Ao clicar no link Inscreva-se no formulário de login, o usuário deve chegar a esta página, a página de cadastro. Por sua vez, está página deve mostrar o formulário de cadastro de novos usuários, como mostra a figura abaixo:

Detalhes de implementação:

• O formulário de login deve possuir um texto que indica que a criação de uma nova conta está em andamento
• Além disso, o formulário deve possuir um botão de fechar, que ao ser clicado deve levar o usuário a página de login
• O formulário de login deve possuir os seguintes campos:
  • Nome
  • Email
  • Senha
  • Confirmação de Senha
  • Data de nascimento: 3 campos (mês, dia e ano). Os três devem utilizar o elemento select
    • Todos esses campos não vem vir preenchidos como uma data por padrão
  • Um checkbox para a confirmação ou não de email
  • Um radiobutton para indicar se o usuário concorda ou não com as políticas de privacidade de cookies
• Validação
  • Os campos: Nome, Email, Senha, Confirmação de Senha, Data de nascimento são obrigatórios
  • A senha deve ter pelo menos 6 caracteres
  • A senha e a confirmação de senha devem ser iguais
  • As opções de dias devem mudar de acordo com o mês selecionado. Ex: Ao escolher Janeiro, o usuário pode escolher entre o dia 1 e o dia 31. Caso escolha Abril, o usuário pode escolher entre dia 1 e dia 30.
    • Caso o usuário escolha a data 29 de Fevereiro, apenas anos bisextos devem aparecer no select de anos
  • O botão de envio só deve ser habilitado se o usuário concordar com os termos de política do Tzeet
  • Opcionalmente você utilizar customizar ainda mais a validação Constraint Validation API

Veja abaixo um exemplo do formulário corretamente validado: