Web SDK documentation
  1. Components
  2. ChangePasswordComponent

File

core/login/change-password.component.ts

Implements

OnInit

Metadata

selector c8y-change-password
templateUrl ./change-password.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(loginService: LoginService, users: UserService, options: OptionsService, alert: AlertService)
Parameters :
Name Type Optional
loginService LoginService No
users UserService No
options OptionsService No
alert AlertService No

Inputs

credentials
Type : ICredentials

Outputs

onChangeView
Type : EventEmitter

Methods

Async changePassword
changePassword()
Returns : any
Async ngOnInit
ngOnInit()
Returns : any

Properties

emailReadOnly
Default value : false
isLoading
Default value : false
Public loginService
Type : LoginService
model
Type : object
Default value : { tenantId: '', email: '', newPassword: '', newPasswordConfirm: '' }
passwordPattern
Default value : /^[a-zA-Z0-9`~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]{8,32}$/
passwordStrengthEnforced
Default value : false 
<form class="loginForm" (ngSubmit)="changePassword()" #changePasswordForm="ngForm" novalidate>
  <div class="legend form-block center" translate>Change password</div>

  <c8y-form-group class="tenantField" id="tenantField" *ngIf="loginService.showTenant()">
    <label translate>Tenant ID</label>
    <input
      [(ngModel)]="model.tenantId"
      #tenantId="ngModel"
      type="text"
      name="tenantId"
      autocapitalize="off"
      autocorrect="off"
      class="form-control"
      placeholder="{{ 'Tenant ID' | translate }}"
      required
    />
  </c8y-form-group>

  <c8y-form-group>
    <label translate>Email address</label>
    <input
      [(ngModel)]="model.email"
      #email="ngModel"
      type="text"
      name="email"
      autocapitalize="off"
      autocorrect="off"
      class="form-control"
      placeholder="{{ 'Email address' | translate }}"
      email
      required
      [readonly]="emailReadOnly"
    />
  </c8y-form-group>

  <div class="row content-flex-50">
    <div class="col-6">
      <c8y-form-group>
        <label translate>New password</label>
        <input
          [(ngModel)]="model.newPassword"
          #newPassword="ngModel"
          type="password"
          name="newPassword"
          class="form-control"
          placeholder="{{ 'New password' | translate }}"
          [pattern]="passwordPattern"
          autocomplete="new-password"
          [passwordStrengthEnforced]="passwordStrengthEnforced"
          required
        />
        <c8y-messages>
          <c8y-message
            name="pattern"
            [text]="loginService.ERROR_MESSAGES.pattern_newPassword"
          ></c8y-message>
        </c8y-messages>
      </c8y-form-group>

      <c8y-form-group>
        <label translate>Confirm password</label>
        <input
          [(ngModel)]="model.newPasswordConfirm"
          #newPasswordConfirm="ngModel"
          type="password"
          name="newPasswordConfirm"
          class="form-control"
          placeholder="{{ 'Confirm password' | translate }}"
          passwordConfirm="newPassword"
          autocomplete="new-password"
          required
        />
        <c8y-messages>
          <c8y-message
            name="passwordConfirm"
            [text]="loginService.ERROR_MESSAGES.passwordConfirm"
          ></c8y-message>
        </c8y-messages>
      </c8y-form-group>
    </div>
    <div class="col-6">
      <c8y-password-check-list
        [password]="model.newPassword"
        [strengthEnforced]="passwordStrengthEnforced"
      ></c8y-password-check-list>
    </div>
  </div>

  <button
    title="{{ 'Set password' | translate }}"
    [disabled]="!changePasswordForm.form.valid || isLoading"
    type="submit"
    class="btn btn-primary btn-lg btn-block form-group"
  >
    {{ 'Set password' | translate }}
  </button>
</form>

results matching ""

    No results matching ""