AuthCard

AuthCard é o formulário das telas de acesso do painel. Um único componente cobre quatro modos (entrar, recuperar, redefinir e convite), cada um com título, texto, botão e campos próprios. Quando o link usado já não vale, o cartão troca o formulário por uma mensagem com o caminho para pedir outro.

Quando usar

Você só usa AuthCard se a sua tela precisar de um desses quatro formulários. O painel já monta todos eles em panel/screens/auth, com as regras de token, de senha e de convite. Não use o cartão dentro da moldura do painel: as telas de acesso são montadas sem ela (panel/screens/auth/page.ts:8).

Modos

Modo	Título	Botão	Campos	Tela
entrar	Entrar no painel	Entrar	E-mail e Senha, mais «Lembrar de mim» quando a tela passa remember	/painel/entrar
recuperar	Recuperar acesso	Enviar link	E-mail	/painel/recuperar
redefinir	Definir nova senha	Salvar senha	Nova senha e Confirmar nova senha	/painel/redefinir/:token
convite	Aceitar convite	Criar acesso	Nome, E-mail, Senha e Confirmar senha	/painel/convite/:token

Os textos estão em ui/panel/auth-card.ts:69 a :101. O modo recuperar diz que o link vale por 1 hora (ui/panel/auth-card.ts:80). O convite diz que vale por 7 dias e só pode ser usado uma vez (ui/panel/auth-card.ts:92). A senha nova tem o mínimo de 12 caracteres (ui/panel/auth-card.ts:36), e o campo mostra essa regra como dica.

No modo entrar, o cartão põe o link «Esqueci minha senha» (ui/panel/auth-card.ts:126). Nos modos recuperar e redefinir, o link é «Voltar para entrar» (ui/panel/auth-card.ts:128). O convite não tem link de navegação.

Um link de token inválido, usado ou vencido não aparece como erro de formulário. Quem cuida dele é deadLink (panel/screens/auth/page.ts:42): o cartão troca o formulário por um título, um texto e o botão para pedir outro (failure). Os textos estão em panel/screens/auth/page.ts:28 a :36.

Onde aparece no painel

• Entrar: panel/screens/auth/entrar.ts:60.
• Recuperar acesso: panel/screens/auth/recuperar.ts:27 e :39.
• Definir nova senha: panel/screens/auth/redefinir.ts:23, :39 e :49.
• Aceitar convite: panel/screens/auth/convite.ts:35 e :61.

Os títulos das páginas de acesso vêm de TITLES em panel/screens/auth/page.ts:18.

Variantes e propriedades

AuthCard

Pasta: ui/panel

Variantes

Id	Variante	Tom
auth-card-entrar-light	entrar	light
auth-card-entrar-dark	entrar	dark
auth-card-recuperar-light	recuperar	light
auth-card-redefinir-light	redefinir	light
auth-card-convite-light	convite	light

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
mode	AuthMode	Sim	—
action	string	Sim	Target of the POST form.
csrf	string	Sim	—
errors	Readonly<Record<string, string>>	Não	Messages by field name; the `form` key is the message of the whole form.
values	Readonly<Record<string, string>>	Não	Values to put back into the form (name and e-mail; a password is never written back).
notice	string	Não	Neutral confirmation shown above the form (e.g. after a password change).
remember	boolean	Não	Shows «Lembrar de mim» in the sign-in card; the value is the state of the box.
emailLocked	boolean	Não	Shows the e-mail of the invite read-only (it comes from the token, not from the form).
failure	{ readonly title: string; readonly text: string; readonly action: { readonly label: string; readonly href: string; }; }	Não	Replaces the form: a link that cannot be used (dead token) with the way to ask for another.
entrarHref	string	Não	—
recuperarHref	string	Não	—

Captura

A primeira variante do catálogo, o modo entrar, em 1280 px:

A mesma variante em 360 px:

Origem

• ui/panel/auth-card.ts: AuthCard, o tipo AuthMode e a constante PASSWORD_MIN_LENGTH.
• ui/panel/auth-card.gallery.ts: as variantes do catálogo.
• panel/screens/auth/: as quatro telas que usam o cartão.