# Account modals - agent guide

> Normative extract of the EchoSistema template for the page
> `/componentes/auth-modais`. 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`.

Five dialogs over the same forms the pages wear.

```vue
<auth-login-modal ref="login" :pending="sending" :error="failure"
                  logo="/img/brand.svg" :title="t('…')"
                  @submit="signIn" @forgot="forgot?.open()" @register="register?.open()" />
<auth-register-modal ref="register" :pending :error @submit="onRegister" @login="…" />
<auth-forgot-password-modal ref="forgot" :sent="sent" @submit="onForgot" @login="…" />
<auth-update-password-modal ref="update" require-current @submit="onUpdate" />
<auth-lock-modal ref="lock" :name="user.name" :avatar="user.avatar" @submit="onUnlock" @sign-out="…" />

login.value?.open()
```

Shared contract: `open()`/`close()` exposed, `pending` locks the fields, `error`
shows the SERVER's message (only it knows the real reason), `logo` and `title`
swap the header's brand. None of them talks to the network.

Payloads: see the full guide, section 6.

The frame is this file; the FIELDS are `<auth-*-form>`, shared with the pages.
The submit button lives in the dialog's footer and reaches the `<form>` through
the `form` attribute - without it, Enter in the password field would post a
different form.

---

Source: `app/components/auth/*Modal.vue`