Showcase index
Start
Actions
Forms
Navigation
Authentication
Feedback
Content
Account pages
The same four routines as real routes, with no masthead and in two shapes: the centred card and the split with artwork over 60% of the screen.
The four routes
Real routes of the template, with the slug translated per language. They use the `auth` layout: no masthead, one strip at the bottom.
/en/sign-in
Sign in
A real call to `POST /api/v1/auth`. `?next=` carries the destination of whoever was turned away by a protected route.
Open the page<auth-login-form>/en/sign-up
Create account
Creates through `POST /api/v1/auth/register` and signs in with the password just chosen: nobody types the same password twice in a row.
Open the page<auth-register-form>/en/forgot-password
Recover the password
The confirmation is vague on purpose: saying that an address does not exist turns the form into a checker for who has an account.
Open the page<auth-forgot-password-form>/en/reset-password
New password
Whoever gets here came from the e-mail link: the token is in the URL and the page reads it. With no token it says so, instead of collecting a password that would be refused.
Open the page<auth-update-password-form>
The two shapes
The same shell with and without `image`. Both live here: `embedded` drops the full-screen height and nothing else.
Centred card
Sign in
Use the email registered on the platform.
<auth-page-shell :title="…">
Split, artwork at 60%
Sign in
Use the email registered on the platform.
<auth-page-shell :title="…" :image="COVER" image-side="start" />
The artwork takes the bigger half because it carries a claim: a photograph alone is decoration, and decoration does not deserve more room than the form. Below `lg` it disappears - half a screen of photo before the first field is half a screen of scrolling.
The fields alone
This is what a derived site reuses: the fields, with no frame at all, and the submit button outside.
Use the email registered on the platform.
`bare` hides the two links out of the flow. It is for the screen with one way through - the panel’s lock, a single-purpose sign-in.
The shell
The pages’ frame, for the fifth flow a derived site invents.
<auth-page-shell :title="t('auth.login.title')">
<auth-login-form :form-id="id" :pending :error @submit="signIn" />
<template #actions>
<echo-button :form="id" type="submit" variant="filled" intent="primary">…</echo-button>
</template>
<template #footer>…</template>
</auth-page-shell>For 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-pages.md