Índice da vitrine
Ações
Formulários
Retorno
Conteúdo
Autenticação
Modais de conta
Entrar, criar conta, recuperar e trocar a senha, e a sessão bloqueada: cinco diálogos sobre os mesmos formulários que as páginas vestem.
Modais de conta
Entrar, criar conta, recuperar e trocar a senha, e a sessão bloqueada: cinco composições prontas sobre o mesmo echo-modal. Nenhuma delas fala com a rede — cada uma emite submit com os dados e espera as props pending e error de quem chamou.
<auth-login-modal> · <auth-register-modal> · <auth-forgot-password-modal>
Os três conversam: os links de dentro de cada um trocam de modal sem fechar o fluxo.
<auth-update-password-modal> · <auth-lock-modal>
O bloqueio não tem botão de fechar e recusa o Escape; nesta amostra, qualquer senha com 8 caracteres desbloqueia.
Moldura e campos
O modal é a MOLDURA; os campos são um componente à parte, o mesmo que a página veste. É essa divisão que impede as duas formas de divergirem.
<echo-modal ref="modal" size="md">
<template #title>…</template>
<auth-login-form :form-id="id" :pending :error @submit="signIn" />
<template #footer>
<echo-button :form="id" type="submit">…</echo-button>
</template>
</echo-modal>O botão de enviar fica no rodapé do diálogo, FORA do `form`, e o alcança pelo atributo `form`. Sem isso, o Enter dentro do campo de senha enviaria um formulário e o botão outro.