Showcase index
Start
Actions
Forms
Navigation
Authentication
Feedback
Content
Account modals
Sign in, sign up, recover and change the password, and the locked session: five dialogs over the same forms the pages wear.
Account modals
Sign in, create account, recover and change the password, and the locked session: five ready compositions over the same echo-modal. None of them talks to the network - each emits submit with the data and expects the pending and error props from the caller.
<auth-login-modal> · <auth-register-modal> · <auth-forgot-password-modal>
The three talk to each other: the links inside each one switch modals without closing the flow.
<auth-update-password-modal> · <auth-lock-modal>
The lock has no close button and refuses Escape; in this sample, any 8-character password unlocks it.
Frame and fields
The modal is the FRAME; the fields are a component of their own, the same one the page wears. That split is what keeps the two shapes from drifting apart.
<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>The submit button lives in the dialog’s footer, OUTSIDE the `form`, and reaches it through the `form` attribute. Without that, Enter inside the password field would post one form and the footer button another.
See the account pagesFor AI agents
This page’s specification
A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.
/agents/auth-modals.md