- Instale o Node.js que inclui o Node Package Manager
- Instale o Angular CLI globalmente (versão 14.2.3).
- npm install -g @angular/cli
- Execute a api SohaLoginApi em modo debug
- Verifique se está rodando na no endereço
https://localhost:7040
- Verifique se está rodando na no endereço
- Execute a aplicação
- cd soha-login
- npm start ou ng serve
- Navegue no endereço
http://localhost:4200/
.
"A tela de login deverá ser responsiva, abrindo corretamente num desktop, num tablet e num celular"
Solução:
Nada de especial foi feito, testei a aplicação em diferentes resoluções e não apresentou nenhum problema.
"A usuário e a senha são obrigatórios, devendo o botão de login ficar desabilitado caso não tenham sido informados."
Solução:
Utilizei a diretiva disabled usando o método hasValues() para habilitar o botão apenas quando existir valor em email e password
<button [disabled]="!account.hasValues()"
"Uma mensagem deverá informar que o usuário é obrigatório, bem como que a senha é obrigatória."
Solução:
- Adicionei o texto "(obrigatório)" no placeholder dos inputs email e password
- Validei a obrigatoriedade na api e pode ser visto no teste unitário
"O usuário deverá ser um e-mail e deverá haver uma validação para caso não seja um e-mail válido."
Solução:
Validei o e-mail na api e pode ser visto no teste unitário
"A senha deverá ter no mínimo 4 caracteres e no máximo 15."
Solução:
Validei a senha na api e pode ser visto no teste unitário
"Após autenticar, a tela principal pode ser uma tela sem nada, com exceção de um botão de deslogar e voltar ao login."
Solução:
Use as credenciais para testar esse CA:
email: soha@soha.com
passord: soha
Após a autenticação no método authenticate, o usuário é redirecionado para a página /home com os botões 'Deslogar' e 'Voltar ao Login'
"Deverá haver sinalizações na tela indicando que alguma requisição está sendo feita a API, para que o usuário saiba que algo está sendo processado."
Solução:
Adicionei o toster info "Processando" em todas as requisições (método request do sohalogin-api.service.ts)
"Deverá utilizar Material Design para a criação da interface."
Solução:
Foi utilizado os módulos MatFormFieldModule, MatCardModule, MatInputModule, MatButtonModule do Material Design
"Um token de autenticação seguro deverá ser retornado e armazenado. O token deve ter validade de 15 minutos. Ele não precisa ser autorrenovado"
Solução:
A implementação do CA9 pode ser vista no método authenticate do login.component.ts
"Deve haver tratamento de erro e apresentação de mensagem ao usuário caso a API esteja inacessível ou a usuário/senha sejam inválidos."
Solução:
-
Tente logar na aplicação com a API parada, uma mensagem "API está inacessível (https://localhost:7040/)" deve aparecer. O tratamento foi feito no método request do sohalogin-api.service.ts
-
Tente logar na aplicação com a API rodando, com uma credencial aleatória, uma mensagem "Credenciais inválidas." deve aparecer O tratamento foi feito na api
- Angular Material
- Componentes em Material Design para Angular
- ngx-toastr
- Um componente para enviar notificações para o usuário, uma mensagem de alerta leve e facilmente personalizável.