add change password component

src/app/chpw/chpw.component.ts

@@ -0,0 +1,119 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'
+import { CustomValidators } from '../utils/custom-validators';
+import { NzMessageService } from 'ng-zorro-antd';
+import { HttpClientService } from '../services/http-client.service';
+
+@Component({
+  selector: 'chpw',
+  templateUrl: './chpw.component.html',
+  styleUrls: ['./chpw.component.scss']
+})
+export class ChpwComponent implements OnInit {
+
+  chpwForm: FormGroup;
+  isConfirmLoading = false;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private message: NzMessageService,
+    private httpClient: HttpClientService) { }
+
+  ngOnInit() {
+    this.chpwForm = this.formBuilder.group({
+      oldPassword: [null, [Validators.required, Validators.minLength(2), Validators.maxLength(15)]],
+      newPassword: [
+        null,
+        Validators.compose([
+          Validators.required,
+          // check whether the entered password has a number
+          CustomValidators.patternValidator(/\d/, {
+            hasNumber: true
+          }),
+          // check whether the entered password has upper case letter
+          CustomValidators.patternValidator(/[A-Z]/, {
+            hasCapitalCase: true
+          }),
+          // check whether the entered password has a lower case letter
+          CustomValidators.patternValidator(/[a-z]/, {
+            hasSmallCase: true
+          }),
+          // check whether the entered password has a special character
+          CustomValidators.patternValidator(
+            /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
+            {
+              hasSpecialCharacters: true
+            }
+          ),
+          Validators.minLength(8),
+          Validators.maxLength(15),
+        ])
+      ],
+      confirmPassword: [null, Validators.compose([Validators.required])],
+    },
+      {
+        // check whether our password and confirm password match
+        validator: CustomValidators.passwordMatchValidator
+      }
+
+    )
+  }
+
+  confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
+    console.log(control.value);
+    if (!control.value) {
+      return { required: true };
+    } else if (control.value !== this.chpwForm.controls.newPassword.value) {
+      return { confirm: true, error: true };
+    }
+    return {};
+  };
+
+  updateConfirmValidator(): void {
+    /** wait for refresh value */
+    Promise.resolve().then(() => this.chpwForm.controls.confirmPassword.updateValueAndValidity());
+  }
+
+  modify(): void {
+    this.isConfirmLoading = true;
+    let params = {
+      "curPassword": this.chpwForm.get('oldPassword').value,
+      "newPassword": this.chpwForm.get('newPassword').value
+    }
+    this.httpClient.put('/sysapi/setting/user/cur/password', params).subscribe((response) => {
+      // console.log(response);
+      if (response.is_success) {
+        this.message.success('修改密码成功！');
+        this.chpwForm.patchValue({
+          oldPassword: '',
+          newPassword: '',
+          confirmPassword: ''
+        })
+        for (const i in this.chpwForm.controls) {
+          this.chpwForm.controls[i].markAsPristine();
+          this.chpwForm.controls[i].markAsUntouched();
+          this.chpwForm.controls[i].updateValueAndValidity();
+        }
+      } else {
+        this.message.error(response.err_msg + '，修改失败！');
+      }
+      this.isConfirmLoading = false;
+    }, err => {
+      // console.log(err);
+      this.message.error('修改密码失败！');
+      this.chpwForm.patchValue({
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+      })
+      for (const i in this.chpwForm.controls) {
+        this.chpwForm.controls[i].markAsPristine();
+        this.chpwForm.controls[i].markAsUntouched();
+        this.chpwForm.controls[i].updateValueAndValidity();
+      }
+      this.isConfirmLoading = false;
+    })
+
+  }
+
+}