Páginas de autenticação

As páginas de autenticação são componentes prontos para fluxos públicos de login, recuperação de senha, troca de senha, confirmação de conta e reenvio de confirmação.

Elas cuidam apenas da interface e dos eventos do formulário. O app consumidor continua responsável por chamar a API, lidar com sessão, tokens, notificações, erros de servidor e navegação. Nenhuma página renderiza ilustração por padrão: a mídia entra pelos slots #desktop-aside e #mobile-intro-media.

Os textos seguem o padrão da AlpopUI: props explícitas vencem; sem prop, o componente resolve a chave correspondente por ALPOP_TRANSLATOR com fallback pt-BR empacotado.

Credenciais são emitidas em texto puro

O payload de submit carrega os valores exatamente como digitados: a AlpopUI não aplica nenhuma criptografia. Os front-ends de origem (alpop-financial-front-end, alpop-real-estate-front-end) cifravam e-mail e senha com utils/cryptography (AES) antes do POST, e decifravam os dados da resposta. Essa camada pertence ao app, não ao componente.

Ao migrar dessas telas, mantenha a criptografia no handler — caso contrário as credenciais passam a trafegar em texto puro onde antes eram cifradas:

import cryptography from "utils/cryptography"

function signIn({ email, password }) {
  const formData = new FormData()

  formData.set("email", cryptography.encrypt(email))
  formData.set("password", cryptography.encrypt(password))

  // ... POST, decifrar a resposta, persistir sessão e navegar.
}

O mesmo vale para as demais páginas: password, passwordConfirmation e os tokens (resetPasswordToken, confirmationToken) são emitidos sem tratamento.

Login

Acesse sua conta

Gerencie contratos em garantia, conciliações e repasses com segurança.

E-mail

Senha

Esqueci minha senha

alpop-login-page(
  forgot-password-href="/recuperar-senha",
  :submitting="authenticating",
  :email-error="errors.email",
  :password-error="errors.password",
  @forgot-password="trackForgotPassword",
  @submit="signIn"
)

function signIn({ email, password }) {
  // O app consumidor autentica, persiste sessão e navega.
}

Recuperação de senha

Esqueceu sua senha?

Não tem problema! Informe-nos o endereço de email utilizado em sua conta e nós te enviaremos um email com instruções para trocar sua senha.

E-mail

Voltar para o login

alpop-password-request-page(
  login-href="/login",
  :submitting="submitting",
  :email-error="errors.email",
  @back-to-login="trackBackToLogin",
  @submit="requestPasswordReset"
)

Troca de senha

Troca de senha

Defina sua nova senha de acesso.

Nova senha

Confirmação de nova senha

* Sua senha deve conter no mínimo 8 caracteres. Use maiúsculas, minúsculas, números e caracteres especiais como !, @, #, $...

alpop-password-reset-page(
  :reset-password-token="route.query.reset_password_token",
  :reset-password-token-error="errors.resetPasswordToken",
  :submitting="submitting",
  :password-error="errors.password",
  :password-confirmation-error="errors.passwordConfirmation",
  @submit="resetPassword"
)

Confirmação de conta

Seja bem-vindo(a)!

Para confirmar sua conta, por favor, defina sua senha de acesso.

Senha

Confirmação de senha

* Sua senha deve conter no mínimo 8 caracteres. Use maiúsculas, minúsculas, números e caracteres especiais como !, @, #, $...

alpop-account-confirmation-page(
  :confirmation-token="route.query.confirmation_token",
  :submitting="submitting",
  :password-error="errors.password",
  :password-confirmation-error="errors.passwordConfirmation",
  @submit="confirmAccount"
)

Reenvio de confirmação

Link expirado!

Informe o seu e-mail para receber um novo link de acesso.

E-mail

alpop-resend-confirmation-page(
  :submitting="submitting",
  :email-error="errors.email",
  @submit="resendConfirmation"
)

Ilustrações

As páginas não recebem imagens por prop: a mídia é composta pelos slots do layout, e o app passa o que quiser (uma img, um picture, um componente).

• #desktop-aside — o painel lateral em telas largas.
• #mobile-intro-media — a imagem compacta ao lado da introdução em telas menores.

O layout estiliza a mídia que recebe, então uma img simples já sai enquadrada:

Esqueceu sua senha?

Não tem problema! Informe-nos o endereço de email utilizado em sua conta e nós te enviaremos um email com instruções para trocar sua senha.

E-mail

Voltar para o login

alpop-password-request-page(@submit="requestPasswordReset")
  template(#desktop-aside)
    img(:src="asideImage" alt="")

  template(#mobile-intro-media)
    img(:src="mobileImage" alt="")

Sem slot, nenhuma página renderiza mídia e o formulário ocupa a coluna única.

Painel do login

AlpopAuthFeaturePanel é o painel de marketing das telas de autenticação: título, texto de apoio, ilustração opcional e cards de benefícios. Componha-o no #desktop-aside quando o produto quiser a experiência completa de login.

Acesse sua conta

Gerencie contratos em garantia, conciliações e repasses com segurança.

E-mail

Senha

Esqueci minha senha

Gestão de garantias e conciliação para operações financeiras

Acompanhe contratos em garantia, concilie cobranças e controle repasses em um só lugar.

• Contratos em garantia
• Conciliação financeira
• Repasses com controle

alpop-login-page(@submit="signIn")
  template(#desktop-aside)
    alpop-auth-feature-panel(:image-src="loginArt")

O painel traz a cópia pt-BR empacotada, então funciona sem props. items recebe itens no formato { key, icon, label? }: sem label, o componente resolve components.authFeaturePanel.<key> no tradutor; com label, usa o texto como veio. imageSrc é opcional — sem ela o painel não renderiza ilustração.

Prop	Tipo	Padrão	Descrição
heading	String	tradução	Título do painel
subheading	String	tradução	Texto de apoio
items	Array	3 benefícios	Itens { key, icon, label? }
imageSrc	String	""	Ilustração do painel

AlpopAuthFeatureList também é exportado para listas de benefícios com ícones; use variant="compact" ou variant="card".

Props Comuns

Prop	Tipo	Padrão	Descrição
heading	String	tradução	Título principal
subheading	String	tradução	Texto de apoio
submitLabel	String	tradução	Rótulo do botão em repouso
submittingLabel	String	tradução	Rótulo durante submissão
submitting	Boolean	false	Desabilita os campos, impede novo submit, mostra loading no botão e troca seu rótulo por submittingLabel

Props Por Página

Componente	Props principais
AlpopLoginPage	forgotPasswordHref, forgotPasswordLabel, emailError, passwordError
AlpopPasswordRequestPage	loginHref, backToLoginLabel, emailError
AlpopPasswordResetPage	resetPasswordToken, resetPasswordTokenError, passwordError, passwordConfirmationError, passwordRequirements
AlpopAccountConfirmationPage	confirmationToken, passwordError, passwordConfirmationError, passwordRequirements
AlpopResendConfirmationPage	emailError
AlpopAuthLayout	showLogo, logoHeight, logoLabel
AlpopAuthFeaturePanel	heading, subheading, items, imageSrc
AlpopAuthFeatureList	items, variant

Slots

Todas as páginas repassam os dois slots de mídia do AlpopAuthLayout.

Slot	Onde aparece
desktop-aside	Painel lateral em telas largas
mobile-intro-media	Ao lado da introdução em telas menores

Eventos

Componente	Evento	Payload
AlpopLoginPage	submit	{ email, password }
AlpopLoginPage	forgot-password	MouseEvent
AlpopPasswordRequestPage	submit	{ email }
AlpopPasswordRequestPage	back-to-login	MouseEvent
AlpopPasswordResetPage	submit	{ resetPasswordToken, password, passwordConfirmation }
AlpopAccountConfirmationPage	submit	{ confirmationToken, password, passwordConfirmation }
AlpopResendConfirmationPage	submit	{ email }