Login e acesso
As telas de autenticação do ME são as únicas fora do chassi (sem header/nav do app). Usam um split screen: painel de marca azul à esquerda + formulário à direita. Cobrem login, cadastro, recuperação de senha e ativação.
Boas práticas
Use para o usuário ainda não autenticado. Depois do login, tudo volta ao chassi do app.
Anatomia
Duas colunas: marca (esquerda) + formulário (direita).
Troque o device acima pra ver as variantes. Para navegar e testar, abra em tela cheia:
#image. Painel de marca
Coluna esquerda, azul me-brand com padrão hexagonal: marca "me." em branco + tagline ("O MERCADO elevado à potência do ELETRÔNICO"). É a identidade ME nesta tela (não há header do app).
Painel de formulário
Coluna direita, fundo claro: seletor de idioma no topo, título + subtítulo, campos, CTA primário full-width e links secundários.
Variantes
Mesmo split; muda o formulário à direita.
Login
Usuário · Senha (mostrar/ocultar) · Lembrar senha + Esqueci a senha · CTA "Entrar" · links (Cadastre-se como Fornecedor, Não recebeu e-mail de ativação).
Recuperar senha
E-mail de cadastro → envia link de redefinição.
Ativação
Reenvio do e-mail de ativação a partir do e-mail informado.
Os cadastros são telas de acesso próprias (fluxos e campos distintos):
Regras
O que vale em toda tela de acesso.
Fora do chassi MeLayout
Sem header/nav/toolbar do app. A identidade ME vem do painel de marca azul + "me.".
Senha com checklist de regras
No cadastro, a força da senha é validada em tempo real: mín. 8 caracteres, maiúsc.+minúsc., 1 número, 1 caractere especial. Campo com mostrar/ocultar.
Aceite de Termos no cadastro
Checkbox obrigatório "Confirmo que li e aceito os Termos e Condições" antes de prosseguir.
Idioma selecionável
Seletor no topo do painel de formulário (Português BR por padrão).
CTA primário full-width
A ação principal (Entrar / Cadastrar) ocupa a largura do formulário; ações secundárias viram links abaixo.