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.

É a exceção ao chassi MeLayout: aqui a identidade ME vem do painel de marca (azul me-brand + "me."), não do header.

Boas práticas

Use para o usuário ainda não autenticado. Depois do login, tudo volta ao chassi do app.

Quando usar
Telas de autenticação e onboarding de conta — login, cadastro, recuperação de senha e ativação.
Quando o usuário ainda NÃO está autenticado (antes de entrar no app).
Quando não usar
Qualquer tela dentro do app autenticado — use o chassi MeLayout.
Ajustes de conta já logado (senha, dados) — use Config gerais.

Anatomia

Duas colunas: marca (esquerda) + formulário (direita).

Login

Troque o device acima pra ver as variantes. Para navegar e testar, abra em tela cheia:

Montada com os componentes reais do EletroDS: block MeLogin (split imagem + formulário) + MeLoginForm (form completa: campos, locale, lembrar, esqueci, footer). O painel de marca (banner me.) é conteúdo custom no slot #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.