<tyro-ui-auth-card>

Auth Card

Full-screen Useritium authentication card (logo, title, subtitle, footer) with free content. It is the base of <tyro-ui-login> and of the other account screens: sign-up, forgot password, e-mail confirmation… The projected content uses the card's .auth-* classes to get the same look as the sign-in form.

Form

Sign-up form: submit with a short username to see a field error

States

Success

Error

Information

Inputs

Property	Type	Default	Description
`[title]`	string	`'Useritium'`	Title under the logo (its first letter is the fallback if the logo fails to load)
`[logo]`	string	`'assets/tyrolium-ui/projects/Useritium.png'`	Logo URL
`[footer]`	string	`'Gratuit · Hébergé en France · Jamais vendu'`	Card footer (fr)
`[footerEn]`	string	`'Free · Hosted in France · Never sold'`	Card footer (en) - falls back to `footer` when only that one is set

Content projection

Property	Type	Default	Description
`[authSubtitle]`	ng-content	Useritium tagline	Element projected as the subtitle, under the title. Missing → “Your universal Tyrolium identity”.
`(default)`	ng-content	-	Card content, between header and footer: form, state message…

CSS classes

Scoped under the card (.tyro-auth) and available to the projected content, light and dark themes included.

Class	Description
`.auth-form`	Content column (form or state), spacing between blocks
`.auth-field`	`label` + `input` block
`.auth-pass-wrap`	Password wrapper with `.auth-pass-toggle` (eye button)
`.auth-hint`	Help under a field; `.is-error` for a field error
`.auth-submit`	Main gradient button (`button` or `a`), `.auth-spinner` while loading
`.auth-secondary`	Outlined secondary button (`button` or `a`)
`.auth-error`	General error message (red)
`.auth-success`	Confirmation message (green)
`.auth-text`	Centered paragraph (explanation, result)
`.auth-state-icon`	Large state icon; `.is-success` / `.is-error`
`.auth-links`	Row of `.auth-link`; `.is-center` for a single link

Usage

Like the login page, display it outside the dashboard layout.

import { TyroUiAuthCard } from 'tyrolium-ui';

<tyro-ui-auth-card>
  <span authSubtitle>Créez votre compte Useritium</span>

  <form class="auth-form" (submit)="submit($event)">
    @if (error()) {
      <p class="auth-error"><i class="ri-error-warning-line"></i> {{ error() }}</p>
    }
    <div class="auth-field">
      <label for="username">Nom d'utilisateur</label>
      <input id="username" name="username" [(ngModel)]="username">
      <p class="auth-hint is-error">3 caractères minimum.</p>
    </div>
    <button type="submit" class="auth-submit">Créer mon compte</button>
    <div class="auth-links is-center">
      <a class="auth-link" routerLink="/">Déjà un compte ? Se connecter</a>
    </div>
  </form>
</tyro-ui-auth-card>