Eletro Design System EletroDSGuide

Cadastro de Comprador

Criação de conta de comprador — tela de acesso fora do chassi, no split de marca + formulário. Fluxo em dois passos (empresa/endereço → dados cadastrais) + validação por e-mail.

É uma das telas de acesso (junto de Login e Cadastro Fornecedor). Não é o Cadastro Fornecedor — campos e passos são diferentes.

Boas práticas

Use na jornada de entrada do comprador. Depois de concluído e validado, o acesso volta ao chassi do app.

Quando usar
Criação de conta de comprador (empresa que vai comprar pela plataforma).
Usuário ainda NÃO autenticado, a partir do login ("Fazer login" faz o caminho inverso).
Quando não usar
Cadastro de fornecedor — use o padrão Cadastro Fornecedor (fluxo e campos diferentes).
Qualquer tela dentro do app autenticado — use o chassi MeLayout.

Anatomia

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

Cadastro Comprador
Troque o device acima pra ver desktop/tablet/mobile. Para navegar e testar o fluxo (avançar passos, abrir o modal de Termos, ver o checklist da senha), abra em tela cheia:
Abrir em tela cheia
Split no mesmo padrão do block MeLogin. O formulário é montado com MeInput (com máscara) + campos Nuxt UI (select, checkbox, modal). O painel de marca é conteúdo custom.

Passos

Dois passos no formulário + a validação por e-mail.

1. Empresa / endereço

País, Natureza (PJ/PF), CNPJ, Razão Social, CEP, Endereço, Número, Complemento, Bairro, Cidade e Estado.

2. Dados cadastrais

Nome, E-mail, Login, Telefone, Celular, Senha (checklist de força), Repetir senha e aceite dos Termos.

✓. Validar cadastro

Confirmação por e-mail: link de validação enviado, com opção de reenvio.

Regras

O que vale nesta tela de acesso.

Fora do chassi MeLayout

Sem header/nav do app; a identidade ME vem do painel de marca azul + "me.".

Barra de progresso

Passos numerados (1/2, 2/2) com o "Próximo passo" nomeado no rodapé do formulário.

Senha com checklist

Força validada em tempo real: mín. 8 caracteres, maiúsc.+minúsc., 1 número, 1 caractere especial.

Aceite de Termos

Checkbox obrigatório com link que abre o modal de Termos e Condições.

Só o formulário rola

Painel de marca faz fill da altura visível; a coluna do formulário rola quando o conteúdo é longo.

Veja tambémLogin e acesso Cadastro Fornecedor Chassi (MeLayout)