---
# System prepended metadata

title: Modularizar "Login"
tags: [MODULARIZAÇÃO]

---

---
tags: MODULARIZAÇÃO
---
# Modularizar "Login"
## História de Usuário:
**Como** time de negócio \
**Desejo** que a tela de Login seja modularizado \
**Para** que possa facilitar o desenvolvimento e manutenção do projeto 

## Critérios de Aceite:

### Cenário 1: 
>**Dado** que o usuário inicializou o app \
>**E** não está logado \
>**E** clicou na opção "Ja tenho cadastro" \
>**Quando** inserir dados válidos para um login cadastrado **(DEF1)**\
>**E** clicar no botão "Acessar meu Shell Box" **(RN1)** \
>**E** acessar o fluxo de MFA **(RN5)** \
>**Então** devo visualizar a área logada do meu app**(DEF2)**. \

### Cenário 2: 
>**Dado** que o usuário inicializou o app \
>**E** não está logado \
>**E** clicou na opção "Ja tenho cadastro" \
>**Quando** inserir dados inválidos para login **(RN2)**\
>**E** clicar no botão "Acessar meu Shell Box" **(RN1)** \
>**Então** devo visualizar uma mensagem informativa**(DEF2)**. \




## Regras de Negócio:

### RN1 - Habilitar botão "Acessar meu Shell Box"
Botão deve ser habilitado **(DEF4)** quando o campo "E-mail" e o campo "Senha" tiverem sido preenchidos.

### RN2 - Dados inválidos para Login
Campo "E-mail" **(RN3)** e campo "Senha" **(RN4)** devem possuir dados inválidos para a realização do login, conflitando com as informações de login cadastradas.

### RN3 - Campo "E-mail" com dados não cadastrados
Campo "E-mail" deve ser preenchido com dados não cadastrados referentes ao email, podendo ser inválido ou não.

### RN4 - Campo "Senha" com dados não cadastrados
Campo "Senha" deve ser preenchido com dados não cadastrados referente a senha (vinculada ao email), podendo ser inválida ou não.

### RN5 - Fluxo de MFA deve ser desconsiderado para logins realizados a pouco tempo dentro do mesmo celular
Quando houver um login que ja foi realizado anteriormente dentro do mesmo celular, então deve ser exibido diretamente a área da Home.


## Definições


### DEF1 - Elementos presentes na tela de Login
Deve ser exibido no canto superior esquerdo o ícone de voltar, representado pelo simbolo "<"; ícone de "Duvidas Frequentes" no canto superior direito com o símbolo "?", alinhados ao ícone de voltar; Campo "E-mail" e o campo "Senha" com simbolo de um olho do lado direito **(DEF3)** e um link "Esqueceu a senha" logo abaixo do campo; botão "Acessar meu Shell Box" centralizado na parte inferior da tela **(DEF4)**.

### DEF2 - Elementos presentes na tela da Home
Deve ser exibidos o menu hamburguer do lado esquerdo no canto superior; ícones de "Duvidas Frequentes" com o símbolo "?" e "Suas mensagens" com o símbolo de um sino, localizados do lado direito superior (alinhado com o menu hamburguer); centralizado mas na parte superior da tela, deve estar o botão "Digite para pagar", com duas labels "Pague e ganhe" e "Acumule pontos que valem descontos ou milhas Smiles!"; centralizado na tela, a label "Resgate de pontos" com a visualização dos pontos atuais e possível data de expiração logo abaixo, clicável a ser direcionado para a tela "Meus pontos"; na parte inferior e centralizado, deve ser exibido o carrossel de promoções Shell Box.

### DEF3 - Visualização de senha inserida
Estado de alteração do simbolo de visualização deve ser executado a cada clique : quando estiver no estado de visualização, deverá ser possível ver na integra a senha inserida no campo "Senha"; quando estiver no estado de não visualização (olho com um risco no meio), os caracteres inseridos no campo "Senha" devem ser representados pelo simbolo ".".

### DEF4 - Detalhes botão "Acessar meu Shell Box"
Botão "Acessar meu Shell Box" deve estar como default no estado esmaecido e na cor cinza; estado ativado deve mostrar o mesmo botão preenchido com a cor amarela e habilitado para clique.


