<tyro-ui-login>

Login

Full-screen Useritium sign-in page, same design as the Useritium OAuth form. Presentational only: the app makes the API call through (submitted) and passes back [loading] / [error]. Built on <tyro-ui-auth-card>, to be used for the other screens (sign-up, forgot password…).

Preview

Submit to simulate a failed API call

With links and notice

forgotLink, registerLink and notice (links open the Auth Card page)

Inputs

Property	Type	Default	Description
`[appName]`	string	`''`	App requesting the sign-in, shown in “Sign-in required by …”. Empty → Useritium tagline.
`[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
`[forgotLink]`	string	`undefined`	Route of the “Forgot password?” link under the button (`routerLink`). Missing → link hidden.
`[registerLink]`	string	`undefined`	Route of the “Create an account” link under the button (`routerLink`). Missing → link hidden.
`[loading]`	boolean	`false`	Disables the form and shows a spinner on the button
`[error]`	string \| null	`null`	Error message shown above the fields
`[notice]`	string \| null	`null`	Green information message above the fields (e.g. “Password changed, please sign in again”). Hidden when `error` is set.
`[autofocus]`	boolean	`true`	Auto-focus the identifier field (disable it when the component is not at the top of the page)
`[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

Outputs

Property	Type	Default	Description
`(submitted)`	`ITyroUiLoginCredentials`	-	Emitted on submit with `{ identifier, password }`. The password field is cleared afterwards.

Usage

Display it instead of the layout as long as there is no 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);
}