Web SDK documentation
  1. Components
  2. NewPasswordComponent

File

core/authentication/new-password.component.ts

Implements

OnChanges OnInit

Metadata

selector c8y-new-password
standalone true
imports FormGroupComponent C8yTranslateDirective PasswordInputComponent FormsModule PasswordValidationDirective PasswordConfirm PasswordCheckListComponent C8yTranslatePipe
templateUrl ./new-password.component.html
viewProviders NgForm

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(passwordStrength: PasswordStrengthService, passwordValidation: PasswordValidationService, cdRef: ChangeDetectorRef, elementRef: ElementRef)
Parameters :
Name Type Optional
passwordStrength PasswordStrengthService No
passwordValidation PasswordValidationService No
cdRef ChangeDetectorRef No
elementRef ElementRef No

Inputs

requireStrongPassword
Type : boolean
showChangePasswordButton
Type : boolean
Default value : true

Outputs

password
Type : EventEmitter

Methods

Async loadPasswordStrengthSettings
loadPasswordStrengthSettings()
Returns : Promise<void>
newPasswordChanged
newPasswordChanged()
Returns : void
Async ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : any
Async ngOnInit
ngOnInit()
Returns : any
toggleChangePassword
toggleChangePassword()
Returns : void
updateValidity
updateValidity(requirementsFulfilled: boolean)
Parameters :
Name Type Optional
requirementsFulfilled boolean No
Returns : void

Properties

changePassword
Type : unknown
Default value : false
Public elementRef
Type : ElementRef
minlength
Type : number
model
Type : any
Default value : {}
newPasswordModel
Type : NgModel
passwordChecklistValidator
Type : ValidatorFn
Default value : () => {...}
passwordEnforced
Type : unknown
Default value : false
requirementsFulfilled
Type : boolean

Accessors

effectiveMinLength
geteffectiveMinLength()

Returns effective min length for validation:

  • When enforceStrength=true: use greenMinLength (or default 8)
  • When enforceStrength=false: always use default 8
Returns : number
_newPasswordModel
set_newPasswordModel(ngModel: NgModel)
Parameters :
Name Type Optional
ngModel NgModel No
Returns : void 
@if (showChangePasswordButton) {
  <div class="form-group">
    <button
      class="btn btn-default"
      type="button"
      (click)="toggleChangePassword()"
      data-cy="c8y-new-password--change-button"
    >
      @if (!changePassword) {
        {{ 'Change password' | translate }}
      } @else {
        {{ 'Cancel password change' | translate }}
      }
    </button>
  </div>
}

@if (changePassword) {
  <div class="row content-flex-50">
    <div class="col-6">
      <c8y-form-group>
        <label
          for="newPassword"
          translate
        >
          Password
        </label>
        <c8y-password-input
          name="newPassword"
          required
          [id]="'newPassword'"
          #newPassword="ngModel"
          [(ngModel)]="model.newPassword"
          (change)="newPasswordChanged()"
          (input)="newPasswordConfirm.control.updateValueAndValidity()"
          c8yPasswordValidation
          [passwordStrengthEnforced]="passwordEnforced"
          [minLength]="effectiveMinLength"
          [autocomplete]="'new-password'"
        ></c8y-password-input>
      </c8y-form-group>

      <c8y-form-group>
        <label
          for="newConfirmPassword"
          translate
        >
          Confirm password
        </label>
        <c8y-password-input
          name="newPasswordConfirm"
          required
          [id]="'newConfirmPassword'"
          #newPasswordConfirm="ngModel"
          [(ngModel)]="model.newPasswordConfirm"
          passwordConfirm="newPassword"
          [autocomplete]="'new-password'"
        ></c8y-password-input>
      </c8y-form-group>
    </div>
    <div class="col-6">
      <c8y-password-check-list
        [password]="model.newPassword"
        [strengthEnforced]="passwordEnforced"
        (onRequirementsFulfilled)="updateValidity($event)"
      ></c8y-password-check-list>
    </div>
  </div>
}

results matching ""

    No results matching ""