<tyro-ui-auth-card>

Auth Card

Carte d'authentification Useritium plein écran (logo, titre, sous-titre, pied) avec un contenu libre. C'est la base de <tyro-ui-login> et des autres écrans de compte : inscription, mot de passe oublié, confirmation d'email… Le contenu projeté utilise les classes .auth-* de la carte pour avoir le même rendu que le formulaire de connexion.

Formulaire

Formulaire d'inscription : valider avec un pseudo court pour voir une erreur de champ

États

Succès

Erreur

Information

Inputs

Propriété	Type	Défaut	Description
`[title]`	string	`'Useritium'`	Titre sous le logo (sa 1^re lettre sert de fallback si le logo ne charge pas)
`[logo]`	string	`'assets/tyrolium-ui/projects/Useritium.png'`	URL du logo
`[footer]`	string	`'Gratuit · Hébergé en France · Jamais vendu'`	Pied de carte (fr)
`[footerEn]`	string	`'Free · Hosted in France · Never sold'`	Pied de carte (en) - retombe sur `footer` s'il est seul défini

Contenu projeté

Propriété	Type	Défaut	Description
`[authSubtitle]`	ng-content	Slogan Useritium	Élément projeté comme sous-titre, sous le titre. Absent → « Votre identité universelle Tyrolium ».
`(défaut)`	ng-content	-	Contenu de la carte, entre l'en-tête et le pied : formulaire, message d'état…

Classes CSS

Scopées sous la carte (.tyro-auth) et disponibles pour le contenu projeté, thèmes clair et sombre compris.

Classe	Description
`.auth-form`	Colonne du contenu (formulaire ou état), espacement entre blocs
`.auth-field`	Bloc `label` + `input`
`.auth-pass-wrap`	Conteneur d'un mot de passe avec `.auth-pass-toggle` (bouton œil)
`.auth-hint`	Aide sous un champ ; `.is-error` pour une erreur de champ
`.auth-submit`	Bouton principal en dégradé (`button` ou `a`), `.auth-spinner` pour le chargement
`.auth-secondary`	Bouton secondaire à contour (`button` ou `a`)
`.auth-error`	Message d'erreur général (rouge)
`.auth-success`	Message de confirmation (vert)
`.auth-text`	Paragraphe centré (explication, résultat)
`.auth-state-icon`	Grand pictogramme d'état ; `.is-success` / `.is-error`
`.auth-links`	Rangée de `.auth-link` ; `.is-center` pour un seul lien

Utilisation

Comme la page de connexion, l'afficher en dehors du layout du dashboard.

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>