SiLoginBasicComponent documentation¶

selector

si-login-basic

A basic login component that supports both single-step and two-step authentication flows.

This component provides a standard login form with username and password fields. It can be configured to work in two-step mode where username validation happens first, followed by password entry.

Example:

<si-login-basic
  [forgotPasswordLink]="forgotPasswordLink"
  [registerNowLink]="registerNowLink"
  [twoStep]="true"
  [loading]="isLoading"
  (login)="handleLogin($event)"
  (usernameValidation)="handleUsernameValidation($event)">
</si-login-basic>

Input Properties¶

Name	Type	Default	Description
backButtonLabel ¶	`TranslatableString`	$localize`:@@SI_LOGIN_BASIC.BACK:Back`	Description of back button.
disableLogin ¶	`boolean`	`false`	Disables the login button.
forgotPasswordLink ¶	`Link`		Config for Forgot Password link. If `title` is omitted, a default translated label is used.
loading ¶	`boolean`	`false`	Indicates whether the login button should show a loading state.
loginButtonLabel ¶	`TranslatableString`	$localize`:@@SI_LOGIN_BASIC.LOGIN:Log in`	Label for login button.
nextButtonLabel ¶	`TranslatableString`	$localize`:@@SI_LOGIN_BASIC.NEXT:Next`	Description of next button.
passwordLabel ¶	`TranslatableString`	$localize`:@@SI_LOGIN_BASIC.PASSWORD:Password`	Label for password input field.
registerNowLink ¶	`Link`		Config for Register Now link. If `title` is omitted, a default translated label is used.
twoStep ¶	`boolean`	`false`	Enables the two-step login flow.
usernameLabel ¶	`TranslatableString`	$localize`:@@SI_LOGIN_BASIC.USERNAME:Username`	Label for username input field.

Output Properties¶

Name	Type	Description
login ¶	`UsernamePassword`	Emits username and password on login event.
usernameValidation ¶	`UsernameValidationPayload`	Emits username when user clicks on next button.
valueChanged ¶	`UsernamePassword`	Emits username and password on value change.

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Link

¶

Interface

Properties
A function that will be invoked when clicking on the menu item. When passed as a string, use together with SiLinkActionService to receive events. This is meant for repetitive things in lists/tables/etc. action?: (`string` \| (param: `any`) => `any`)¶
A boolean that lets the link know whether it is disabled or not. disabled?: `boolean`¶
Defines a href URI that the menu item will be linked to. Will be used to set the href attribute of the a element. Will only be used if link and function is not set. href?: `string`¶
A boolean that lets the link know whether it is active or not. It is useful when action() is executed instead of link route. isActive?: `boolean`¶
Defines the link of the menu item within the application using the angular router link concept. Accepts an array of `any` as per [routerLink API definition] https://angular.dev/api/router/RouterLink . link?: (`string` \| `any`[])¶
The navigation extras provide additional routing options when using the router link. navigationExtras?: `NavigationExtras`¶
The target attribute specifies where to open the linked document. If no target is specified, the link will open in the current tab. target?: `string`¶
The title of the menu item. Can be either the title to be displayed or the translation key. title?: `TranslatableString`¶
The optional tooltip of the link. Can be either the text to be displayed or the translation key. tooltip?: `TranslatableString`¶

UsernamePassword

¶

Interface

Properties
password: (`string` \| `null` \| `undefined`)¶
username: (`string` \| `null` \| `undefined`)¶

UsernameValidationPayload (`Pick`<`UsernamePassword`, `"username"`> & { validate: (isValid: `boolean`) => `void` })¶ Type alias

Except where otherwise noted, content on this site is licensed under MIT License.