SiChangePasswordComponent documentation¶

selector

si-change-password

A component for changing user passwords with strength validation and policy enforcement.

This component provides a form for users to change their password, including password strength indicators, policy validation, and confirmation fields. It supports custom password policies and displays inline notifications for alerts.

Example:

<si-change-password
  [passwordStrength]="passwordPolicy"
  [passwordPolicyContent]="policyTemplate"
  [changePasswordAlert]="alertConfig"
  (changePasswordRequested)="handlePasswordChange($event)"
  (back)="handleBack()">
</si-change-password>

Input Properties¶

Name	Type	Default	Description
backButtonLabel ¶	`TranslatableString`	$localize`:@@SI_CHANGE_PASSWORD.BACK:Back`	Description of back button.
changeButtonLabel ¶	`TranslatableString`	$localize`:@@SI_CHANGE_PASSWORD.CHANGE:Change`	Label for change password button.
changePasswordAlert ¶	`AlertConfig`		Config to enable/disable password related error/alerts.
confirmPasswordLabel ¶	`TranslatableString`	$localize`:@@SI_CHANGE_PASSWORD.CONFIRM_PASSWORD:Confirm password`	Label for confirm password input field.
disableChange ¶	`boolean`	`false`	Disables the change password button.
heading ¶	`TranslatableString`	$localize`:@@SI_CHANGE_PASSWORD.CHANGE_PASSWORD:Change password`	Change password heading.
newPasswordLabel ¶	`TranslatableString`	$localize`:@@SI_CHANGE_PASSWORD.NEW_PASSWORD:New password`	Label for new password input field.
passwordPolicyContent ¶	(`string` \| `TemplateRef`<`unknown`>)		Description of the password policy requirements.
passwordPolicyTitle ¶	`TranslatableString`	$localize`:@@SI_CHANGE_PASSWORD.PASSWORD_POLICY:Password policy`	Title of the password policy.
passwordStrength ¶	`PasswordPolicy`		Description of the password policy requirements.
subheading ¶	`TranslatableString`	$localize`:@@SI_CHANGE_PASSWORD.CHANGE_FACTORY_PASSWORD:Factory set password must be changed`	Short description of the action to perform.

Output Properties¶

Name	Type	Description
back ¶	`void`	Emits on back click.
changePasswordRequested ¶	`ChangePassword`	Emits password on change event.
passwordStrengthChanged ¶	(`number` \| `void`)	The number indicating the number of rules which still can be met. ( `-2` --\> 2 rules are still unmet, `0` --\> all met)
valueChanged ¶	`ChangePassword`	Emits 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.

AlertConfig

¶

Interface

Properties
action?: `Link`¶
heading?: `string`¶
message: `string`¶
severity: `StatusType`¶
translationParams?: { [ key: `string` ]: `any` } }¶

PasswordPolicy

¶

Interface

Properties
Whether to allow whitespaces. By default whitespaces are not allowed. allowWhitespace?: `boolean`¶
Define if digits are required in password. digits: `boolean`¶
Define if lowercase characters are required in password. lowercase: `boolean`¶
Define minimal number of characters. minLength: `number`¶
Minimum required policies for valid password. When set to a number greater than 0, defines the number of policies that must be met for the password to be valid. E.g. when set to 3 and the policies uppercase/lowercase/digits/special are all set and the password contains 3 out of these four, the password will be valid. minRequiredPolicies?: `number`¶
Define if special characters are required in password. special: `boolean`¶
Define if uppercase characters are required in password. uppercase: `boolean`¶

ChangePassword

¶

Interface

Properties
confirmPassword: (`undefined` \| `null` \| `string`)¶
newPassword: (`undefined` \| `null` \| `string`)¶

Translatable ¶ import imported from @siemens/element-translate-ng

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`¶

StatusType (`"success"` \| `"info"` \| `"warning"` \| `"danger"` \| `"caution"` \| `"critical"`)¶ Type alias

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