修改密码

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { RouteReuseStrategy } from '@angular/router';
 import { CustomReuseStrategy } from './CustomReuseStrategy';
 import { ConfigFormDataService } from './service/configFormData.service';
 import { registerLocaleData } from '@angular/common';
+import { NzModalModule } from 'ng-zorro-antd/modal';
 import zh from '@angular/common/locales/zh';
 registerLocaleData(zh);
 @NgModule({
@@ -29,7 +30,8 @@ registerLocaleData(zh);
     FormsModule,
     HttpClientModule,
     NzNotificationModule,
-    NzMessageModule
+    NzMessageModule,
+    NzModalModule
   ],
   providers: [httpInterceptorProviders, CacheTokenService, TreeService, ConfigFormDataService,
     { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }],

src/app/home/change-password/change-password.component.html

@@ -0,0 +1,27 @@
+<div class="box">
+    <form nz-form [formGroup]="validateForm">
+        <nz-form-item>
+            <nz-form-control nzErrorTip="">
+                <nz-input-group>
+                    <input name="oldpassword" nz-input type="password" formControlName="oldpassword" placeholder="请输入原密码" autocomplete="off" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-control>
+                <nz-input-group>
+                    <input name="newpassword" nz-input type="password" formControlName="newpassword" placeholder="请输入新密码"
+                        autocomplete="off" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-control>
+                <nz-input-group>
+                    <input name="affirmpassword" nz-input type="password" formControlName="affirmpassword" placeholder="确认新密码"
+                        autocomplete="new-password" />
+                </nz-input-group>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+</div>

src/app/home/change-password/change-password.component.ts

@@ -0,0 +1,46 @@
+
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+@Component({
+  selector: 'app-change-password',
+  templateUrl: './change-password.component.html',
+  styleUrls: ['./change-password.component.scss']
+})
+export class ChangePasswordComponent implements OnInit {
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+  validateForm!: FormGroup;
+  ngOnInit(): void {
+    const { password } = MyValidators;
+    this.validateForm = this.fb.group({
+      oldpassword: [null, [Validators.required]],
+      newpassword: [null, [Validators.required, password]],
+      affirmpassword: [null, [Validators.required, password]]
+    });
+  }
+
+}
+
+export type MyErrorsOptions = { 'zh-cn': string; en: string } & Record<string, NzSafeAny>;
+export type MyValidationErrors = Record<string, MyErrorsOptions>;
+export class MyValidators extends Validators {
+  static password(control: AbstractControl): MyValidationErrors | null {
+    const value = control.value;
+
+    if (isEmptyInputValue(value)) {
+      return null;
+    }
+
+    return isPassword(value) ? null : { mobile: { 'zh-cn': `长度 12 位以上，包含①大写字母、②小写字母、③数字、④特殊字符四种中的三种组合`, en: `Password phone number is not valid` } };
+  }
+
+}
+function isEmptyInputValue(value: NzSafeAny): boolean {
+  return value == null || value.length === 0;
+}
+function isPassword(value: string): boolean {
+  return typeof value === 'string' && /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{12,99}$/.test(value);
+}
+

src/app/home/home.module.ts

@@ -55,6 +55,7 @@ import { LookTaskComponent } from './task/zhi-audit/look-task/look-task.componen
 import { UnitEditComponent } from './basic-info/unit-edit/unit-edit.component';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { AllotPersonComponent } from './task/da-subordinate-audit/allot-person/allot-person.component';
+import { ChangePasswordComponent } from './change-password/change-password.component';
 @NgModule({
   declarations: [
     NavComponent,
@@ -86,7 +87,8 @@ import { AllotPersonComponent } from './task/da-subordinate-audit/allot-person/a
     ApplyLookComponent,
     LookTaskComponent,
     UnitEditComponent,
-    AllotPersonComponent
+    AllotPersonComponent,
+    ChangePasswordComponent
   ],
   imports: [
     CommonModule,

src/app/home/nav/nav.component.html

@@ -25,6 +25,7 @@
             </a>
             <nz-dropdown-menu #menu="nzDropdownMenu">
                 <ul nz-menu nzSelectable>
+                    <li nz-menu-item (click)="changePassword()">修改密码</li>
                     <li nz-menu-item (click)="signOut()">退出</li>
                 </ul>
             </nz-dropdown-menu>

src/app/home/nav/nav.component.ts

@@ -1,7 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewContainerRef } from '@angular/core';
 import { Router } from '@angular/router';
 import { CacheTokenService } from 'src/app/service/cache-token.service';
-
+import { HttpClient } from '@angular/common/http';
+import { ChangePasswordComponent } from '../change-password/change-password.component';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzMessageService } from 'ng-zorro-antd/message';
 @Component({
   selector: 'app-nav',
   templateUrl: './nav.component.html',
@@ -9,7 +12,7 @@ import { CacheTokenService } from 'src/app/service/cache-token.service';
 })
 export class NavComponent implements OnInit {
 
-  constructor(private router: Router, public token: CacheTokenService) { }
+  constructor( private modal: NzModalService,private http: HttpClient,private message: NzMessageService,private viewContainerRef: ViewContainerRef,private router: Router, public token: CacheTokenService) { }
   user:""
   ngOnInit(): void {
     //调用服务中的function刷新token
@@ -22,4 +25,46 @@ export class NavComponent implements OnInit {
   ngOnDestroy(): void {
     this.token.delete()
   }
+  
+  changePassword() {
+    const modal: any = this.modal.create({
+      nzTitle: '修改密码',
+      nzContent: ChangePasswordComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {},
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          if (instance.validateForm.value.newpassword != instance.validateForm.value.affirmpassword) {
+            this.message.create('warning', '两次密码输入不一致！');
+            return false
+          } else {
+            await new Promise((resolve, reject) => {
+              let body = {
+                oldPassword: instance.validateForm.value.oldpassword,
+                newPassword: instance.validateForm.value.newpassword
+              }
+              this.http.patch('/api/Accounts/ChangePassword', body).subscribe(data => {
+                resolve(data)
+                this.message.create('success', '修改成功！');
+                return true
+              }, err => {
+                this.message.create('warning', err.error.error.message);
+                modal.config.nzOkLoading = false
+                return false
+              })
+            })
+          }
+
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+    // Return a result when closed
+    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
+  }
 }