ceph/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.ts

   1 import { Component } from '@angular/core';
   2 import { Validators } from '@angular/forms';
   3 import { Router } from '@angular/router';
   4
   5 import { I18n } from '@ngx-translate/i18n-polyfill';
   6 import * as _ from 'lodash';
   7
   8 import { UserService } from '../../../shared/api/user.service';
   9 import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
  10 import { Icons } from '../../../shared/enum/icons.enum';
  11 import { NotificationType } from '../../../shared/enum/notification-type.enum';
  12 import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
  13 import { CdFormGroup } from '../../../shared/forms/cd-form-group';
  14 import { CdValidators } from '../../../shared/forms/cd-validators';
  15 import { AuthStorageService } from '../../../shared/services/auth-storage.service';
  16 import { NotificationService } from '../../../shared/services/notification.service';
  17 import { PasswordPolicyService } from '../../../shared/services/password-policy.service';
  18
  19 @Component({
  20   selector: 'cd-user-password-form',
  21   templateUrl: './user-password-form.component.html',
  22   styleUrls: ['./user-password-form.component.scss']
  23 })
  24 export class UserPasswordFormComponent {
  25   userForm: CdFormGroup;
  26   action: string;
  27   resource: string;
  28   passwordPolicyHelpText = '';
  29   passwordStrengthLevelClass: string;
  30   passwordValuation: string;
  31   icons = Icons;
  32
  33   constructor(
  34     public i18n: I18n,
  35     public actionLabels: ActionLabelsI18n,
  36     public notificationService: NotificationService,
  37     public userService: UserService,
  38     public authStorageService: AuthStorageService,
  39     public formBuilder: CdFormBuilder,
  40     public router: Router,
  41     public passwordPolicyService: PasswordPolicyService
  42   ) {
  43     this.action = this.actionLabels.CHANGE;
  44     this.resource = this.i18n('password');
  45     this.createForm();
  46   }
  47
  48   createForm() {
  49     this.passwordPolicyService.getHelpText().subscribe((helpText: string) => {
  50       this.passwordPolicyHelpText = helpText;
  51     });
  52     this.userForm = this.formBuilder.group(
  53       {
  54         oldpassword: [
  55           null,
  56           [
  57             Validators.required,
  58             CdValidators.custom('notmatch', () => {
  59               return (
  60                 this.userForm &&
  61                 this.userForm.getValue('newpassword') === this.userForm.getValue('oldpassword')
  62               );
  63             })
  64           ]
  65         ],
  66         newpassword: [
  67           null,
  68           [
  69             Validators.required,
  70             CdValidators.custom('notmatch', () => {
  71               return (
  72                 this.userForm &&
  73                 this.userForm.getValue('oldpassword') === this.userForm.getValue('newpassword')
  74               );
  75             })
  76           ],
  77           [
  78             CdValidators.passwordPolicy(
  79               this.userService,
  80               () => this.authStorageService.getUsername(),
  81               (_valid: boolean, credits: number, valuation: string) => {
  82                 this.passwordStrengthLevelClass = this.passwordPolicyService.mapCreditsToCssClass(
  83                   credits
  84                 );
  85                 this.passwordValuation = _.defaultTo(valuation, '');
  86               }
  87             )
  88           ]
  89         ],
  90         confirmnewpassword: [null, [Validators.required]]
  91       },
  92       {
  93         validators: [CdValidators.match('newpassword', 'confirmnewpassword')]
  94       }
  95     );
  96   }
  97
  98   onSubmit() {
  99     if (this.userForm.pristine) {
 100       return;
 101     }
 102     const username = this.authStorageService.getUsername();
 103     const oldPassword = this.userForm.getValue('oldpassword');
 104     const newPassword = this.userForm.getValue('newpassword');
 105     this.userService.changePassword(username, oldPassword, newPassword).subscribe(
 106       () => this.onPasswordChange(),
 107       () => {
 108         this.userForm.setErrors({ cdSubmitButton: true });
 109       }
 110     );
 111   }
 112
 113   /**
 114    * The function that is called after the password has been changed.
 115    * Override this in derived classes to change the behaviour.
 116    */
 117   onPasswordChange() {
 118     this.notificationService.show(NotificationType.success, this.i18n('Updated user password"'));
 119     // Theoretically it is not necessary to navigate to '/logout' because
 120     // the auth token gets invalid after changing the password in the
 121     // backend, thus the user would be automatically logged out after the
 122     // next periodically API request is executed.
 123     this.router.navigate(['/logout']);
 124   }
 125 }