Login e Autenticação

Objetivo

Esta seção define os requisitos mínimos para o fluxo de login e autenticação de dois fatores (2FA), garantindo um acesso seguro, claro e acessível ao ambiente de vendas, baseado nas melhores práticas de UX e nos padrões de proteção de dados.

Diretrizes

• A estrutura de autenticação deve ser compatível com contextos offline (por exemplo, gerenciamento de reconexão, cache seguro), quando aplicável.

• Este fluxo deve estar em conformidade com as regulamentações de segurança exigidas para pagamentos por proximidade via NFC (por exemplo, PCI MPoC).

---

Tela de Login com Campos Vazios

01 - Campos de e-mail e senha

Devem aparecer vazios, com placeholders claros (ex.: [e-mail], Senha123@).

Obrigatório: O botão “Login” deve ser habilitado somente quando ambos os campos estiverem corretamente preenchidos.

Recomendado: Incluir um link “Esqueceu sua senha?” para recuperação.

---

Tela de Login com Credenciais Preenchidas

02 - Botão “Login” (habilitado)

Deve estar visualmente destacado. Ao ser pressionado, inicia o envio de um código de verificação para o e-mail registrado.

Obrigatório: Fornecer um feedback visual imediato ao pressionar o botão (ex.: animação de carregamento).

Recomendado: Incluir um indicativo de confirmação (visual ou sonoro) após a tentativa de login.

---

Código de Autenticação de Dois Fatores (2FA)

03 - Mensagem de informação de segurança

Deve informar ao usuário que um código de verificação foi enviado para seu e-mail, parcialmente mascarado (ex.: us****@email.com).

04 - Campos para entrada do código (6 dígitos)

Devem suportar avanço automático ao digitar e fornecer feedback visual para cada dígito.

Obrigatório: Exibir um temporizador regressivo para reenvio do código (ex.: “Reenviar código em 00:30”).

Recomendado: Validar automaticamente o código assim que todos os dígitos forem inseridos.

---

Código Completamente Inserido

05 - Código 2FA completo

O botão “Login” deve ser habilitado automaticamente assim que todos os dígitos forem validados.

Obrigatório: Após a validação do código, o usuário deve ser redirecionado para o ambiente de vendas.

Recomendado: Utilizar transições visuais suaves para reforçar a autenticação bem-sucedida.

---

Acesso ao Ambiente de Vendas

Exibir a tela inicial de vendas. Esta tela deve apresentar:

• Nome e foto do vendedor

• Barra de busca

• Lista de produtos com nome, categoria, preço e estoque

• Barra de navegação inferior com seções visíveis: Início, Carrinho, Cobrar, Usuário

Obrigatório: A navegação deve estar acessível somente após a validação completa das credenciais e do código.

Recomendado: Personalizar esta tela com informações relevantes baseadas no perfil do vendedor.

Cada componente e a experiência do usuário na tela de vendas serão discutidos em detalhes na próxima sessão.

---

Mensagens Obrigatórias

• Quando o código estiver incorreto:

Código inválido. Por favor, verifique o número enviado ao seu e-mail e tente novamente.

• Quando o código expirar:Código expirado. Por favor, solicite um novo para continuar.

Código expirado. Por favor, solicite um novo para continuar.

---

Comportamentos Esperados

• O aplicativo deve fornecer feedback visual e/ou sonoro em cada etapa.

• O botão “Login” deve respeitar a lógica de validação.

• A autenticação de dois fatores é obrigatória antes do acesso ao sistema de vendas.

• Dados sensíveis (e-mail, senha) devem ser tratados com mascaramento e criptografia, em conformidade com a LGPD e os padrões PCI.