Showcase index
Actions
Forms
Feedback
Content
Authentication
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.