# Account pages - agent guide

> Normative extract of the EchoSistema template for the page
> `/componentes/auth-paginas`. Copy it verbatim: tag names, props, events and classes
> are contract.
>
> Full guide (rules, tokens and every family): `/agents/echosistema-ui.md`

## Rules that apply before any line of code

- Colour only through tokens (`text-fg1`, `bg-panel`, `border-line`, `.es-i--*`); never a hex, never a Tailwind colour.
- Two axes: the intent gives the colour, the variant consumes it. Never combine them by hand.
- Visible text through `t()`; tag names, props and classes stay literal.
- A component does not fetch: it takes props and emits events.
- An icon alone inside a button needs an `aria-label`.

```vue
<auth-page-shell
  :title="t('auth.login.title')"
  :image="COVER"            <!-- its presence switches the page to the SPLIT shape -->
  image-side="end"          <!-- start | end -->
  :cover-title="t('…')"     <!-- the claim over the artwork -->
  :cover-text="t('…')"
  size="md"                 <!-- md | lg, centred shape only -->
  :logo="brandLogo"
  embedded                  <!-- fixed height, for a sample inside another page -->
>
  <auth-login-form :form-id="uid" :pending="pending" :error="failure" @submit="signIn" />
  <template #actions>
    <echo-button :form="uid" type="submit" variant="filled" intent="primary" class="w-full justify-center">…</echo-button>
  </template>
  <template #footer>…</template>
</auth-page-shell>
```

Two shapes: the centred card (default) and the split, with the artwork over 60%
of the screen. The split only earns that half with a claim on it - a photograph
alone is decoration, and decoration does not deserve more room than the form.
Below `lg` the artwork disappears.

The pages use the `auth` layout: no masthead, one strip at the bottom, no
appearance gear. It also turns the reserved scrollbar gutter off
(`data-gutter="off"` on the root), because the artwork bleeds to the edge.

The forms (the same ones the modals wear), with `form-id` required:

```vue
<auth-login-form :form-id="id" bare @submit @forgot @register />
<auth-register-form :form-id="id" bare @submit @login />
<auth-forgot-password-form :form-id="id" :sent="sent" bare @submit @login />
<auth-update-password-form :form-id="id" require-current @submit />
```

`bare` hides the links out of the flow, for a screen with one way through. All
of them expose `reset()`, which the modal calls on close and the page does not.

---

Source: `app/components/auth/{PageShell,*Form}.vue`