<tyro-ui-login>

Login

Page de connexion Useritium plein écran, même design que le formulaire OAuth de Useritium. Purement présentationnelle : l'application fait l'appel API via (submitted) et renvoie [loading] / [error]. Construite sur <tyro-ui-auth-card>, à utiliser pour les autres écrans (inscription, mot de passe oublié…).

Aperçu

Valider pour simuler un appel API en échec

Avec liens et message

forgotLink, registerLink et notice (les liens ouvrent la page Auth Card)

Inputs

Propriété	Type	Défaut	Description
`[appName]`	string	`''`	Application qui demande la connexion, affichée dans « Connexion requise par … ». Vide → slogan Useritium.
`[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
`[forgotLink]`	string	`undefined`	Route du lien « Mot de passe oublié ? » sous le bouton (`routerLink`). Absent → lien masqué.
`[registerLink]`	string	`undefined`	Route du lien « Créer un compte » sous le bouton (`routerLink`). Absent → lien masqué.
`[loading]`	boolean	`false`	Désactive le formulaire et affiche le spinner sur le bouton
`[error]`	string \| null	`null`	Message d'erreur affiché au-dessus des champs
`[notice]`	string \| null	`null`	Message d'information en vert au-dessus des champs (ex. « Mot de passe modifié, reconnectez-vous »). Masqué si `error` est présent.
`[autofocus]`	boolean	`true`	Focus automatique sur le champ identifiant (à désactiver si le composant n'est pas en haut de page)
`[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

Outputs

Propriété	Type	Défaut	Description
`(submitted)`	`ITyroUiLoginCredentials`	-	Émis à la validation avec `{ identifier, password }`. Le champ mot de passe est vidé ensuite.

Utilisation

L'afficher à la place du layout tant qu'il n'y a pas de session.

import { TyroUiLogin, ITyroUiLoginCredentials } from 'tyrolium-ui';

// Template
<tyro-ui-login
  appName="Useritium Dashboard"
  forgotLink="/forgot-password"
  registerLink="/register"
  [loading]="auth.loading()"
  [error]="auth.error()"
  [notice]="auth.notice()"
  (submitted)="onSubmit($event)">
</tyro-ui-login>

// Composant / Component
onSubmit({ identifier, password }: ITyroUiLoginCredentials) {
  this.auth.login(identifier, password);
}