add change password component

src/app/app-routing.module.ts

@@ -23,6 +23,11 @@ const appRoutes: Routes = [
         loadChildren: './register/register.module#RegisterModule',
         data: { preload: false, reuse: false }
     },
+    {
+        path: 'chpw',
+        loadChildren: './chpw/chpw.module#ChpwModule',
+        data: { preload: false, resue: false}
+    },
     {
         path: 'app',
         loadChildren: './pages/pages.module#PagesModule',

src/app/chpw/chpw-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { ChpwComponent } from './chpw.component'
+
+const loginRoutes: Routes = [
+    {
+        path: '',
+        component: ChpwComponent,
+        data: { preload: false, reuse: false }
+    }
+]
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(loginRoutes)
+    ],
+    exports: [RouterModule]
+})
+
+export class ChpwRoutingModule { }

src/app/chpw/chpw.component.html

@@ -0,0 +1,78 @@
+<div class="chpw-container">
+  <div class="chpw-panel card p-20">
+    <div class="card-header">
+      <div class="chpw-header">
+        <h4 class="dip text-center">修改用户弱密码</h4>
+      </div>
+    </div>
+    <div class="card-body">
+      <form nz-form [formGroup]="chpwForm">
+        <nz-form-item>
+          <nz-form-label [nzSm]="6" [nzXs]="26" nzRequired>原密码</nz-form-label>
+          <nz-form-control [nzSm]="14" [nzXs]="26">
+            <input type="password" nz-input formControlName="oldPassword" placeholder="原密码">
+            <nz-form-explain *ngIf="chpwForm.get('oldPassword').dirty && chpwForm.get('oldPassword').errors">
+              <ng-container *ngIf="chpwForm.get('oldPassword')?.hasError('required')">
+                请输入原密码!
+              </ng-container>
+              <ng-container *ngIf="chpwForm.get('oldPassword')?.hasError('minlength')">
+                最小2个字符!
+              </ng-container>
+              <ng-container *ngIf="chpwForm.get('oldPassword')?.hasError('maxlength')">
+                最大15个字符!
+              </ng-container>
+            </nz-form-explain>
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+          <nz-form-label [nzSm]="6" [nzXs]="26" nzRequired>新密码</nz-form-label>
+          <nz-form-control [nzSm]="14" [nzXs]="26">
+            <input type="password" nz-input formControlName="newPassword" placeholder="新密码"
+              (ngModelChange)="updateConfirmValidator()">
+            <nz-form-explain *ngIf="chpwForm.get('newPassword').dirty && chpwForm.get('newPassword').errors">
+              <ng-container *ngIf="chpwForm.get('newPassword')?.hasError('required')">
+                请输入新密码!<br />
+              </ng-container>
+              <ng-container *ngIf="chpwForm.get('newPassword')?.hasError('minlength')">
+                最小8个字符!<br />
+              </ng-container>
+              <ng-container *ngIf="chpwForm.get('newPassword')?.hasError('maxlength')">
+                最大15个字符!<br />
+              </ng-container>
+              <ng-container *ngIf="chpwForm.get('newPassword')?.hasError('hasNumber')">
+                必须有数字!<br />
+              </ng-container>
+              <ng-container *ngIf="chpwForm.get('newPassword')?.hasError('hasSpecialCharacters')">
+                必须有特殊字符!<br />
+              </ng-container>
+              <ng-container *ngIf="chpwForm.get('newPassword')?.hasError('hasCapitalCase')">
+                必须有大写字母!<br />
+              </ng-container>
+              <ng-container *ngIf="chpwForm.get('newPassword')?.hasError('hasSmallCase')">
+                必须有小写字母!
+              </ng-container>
+            </nz-form-explain>
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>确认新密码</nz-form-label>
+          <nz-form-control [nzSm]="14" [nzXs]="26">
+            <input type="password" nz-input formControlName="confirmPassword" placeholder="再次输入新密码">
+            <nz-form-explain *ngIf="chpwForm.get('confirmPassword')?.dirty && chpwForm.get('confirmPassword')?.errors">
+              <ng-container *ngIf="chpwForm.get('confirmPassword')?.hasError('required')">
+                请再次输入新密码!
+              </ng-container>
+              <ng-container *ngIf="chpwForm.get('confirmPassword')?.hasError('NoPassswordMatch')">
+                两次密码不一致!
+              </ng-container>
+            </nz-form-explain>
+          </nz-form-control>
+        </nz-form-item>
+      </form>
+      <div class="text-center">
+        <button nz-button nzType="primary" class="submit-btn" [disabled]="!chpwForm.valid" (click)="modify()"
+          [nzLoading]="isConfirmLoading">修改</button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/chpw/chpw.component.scss

@@ -0,0 +1,65 @@
+@import "../theme/scss/variables.scss";
+
+.chpw-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 10%;
+    background-image: url("../../assets/images/blur-bg-blurred.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    .chpw-panel {
+        width: 410px;
+        height: 440px;
+        margin: 0 auto;
+        > .card-header {
+            background: none;
+            > .chpw-header {
+                text-align: center;
+                img {
+                    width: 32px;
+                    height: 32px;
+                    vertical-align: -7px;
+                    margin-right: 12px;
+                }
+                h2 {
+                    display: inline-block;
+                }
+            }
+        }
+        > .card-body {
+            .form-control {
+                height: 41px;
+            }
+            .submit-btn {
+                width: 40%;
+                background-color: $color-secondary;
+                border-color: $color-secondary;
+                color: $white;
+                &:hover {
+                    background: $color-primary;
+                    border-color: 1px solid $color-primary;
+                }
+            }
+            a:hover {
+                text-decoration: none;
+            }
+            .copy-right {
+                color: $gray-600;
+            }
+        }
+    }
+    .sys-desc {
+        width: 410px;
+        margin: 0 auto;
+        color: $gray-200;
+    }
+}
+
+.validator {
+    color: $white;
+    background: $bootstrap-danger;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}

src/app/chpw/chpw.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChpwComponent } from './chpw.component';
+
+describe('ChpwComponent', () => {
+  let component: ChpwComponent;
+  let fixture: ComponentFixture<ChpwComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChpwComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChpwComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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;
+    })
+
+  }
+
+}

src/app/chpw/chpw.module.spec.ts

@@ -0,0 +1,13 @@
+import { ChpwModule } from './chpw.module';
+
+describe('RegisterModule', () => {
+  let chpwModule: ChpwModule;
+
+  beforeEach(() => {
+    chpwModule = new ChpwModule();
+  });
+
+  it('should create an instance', () => {
+    expect(chpwModule).toBeTruthy();
+  });
+});

src/app/chpw/chpw.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ChpwRoutingModule } from './chpw-routing.module'
+import { ChpwComponent } from './chpw.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        NgZorroAntdModule,
+        ReactiveFormsModule,
+        ChpwRoutingModule
+    ],
+    declarations: [ChpwComponent]
+})
+export class ChpwModule { }