修改密码

src/app/admin/navigation/navigation.component.html

@@ -35,6 +35,9 @@
         </a>
         <nz-dropdown-menu #menu="nzDropdownMenu">
           <ul nz-menu nzSelectable>
+            <li nz-menu-item>
+              <a (click)="openUpdatePwd()">修改密码</a>
+            </li>
             <li nz-menu-item>
               <a (click)="loginOut()">退出</a>
             </li>
@@ -47,3 +50,54 @@
     </nz-content>
   </nz-layout>
 </nz-layout>
+
+<nz-drawer
+        [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom': '53px' }"
+        [nzWidth]="500"
+        [nzVisible]="visibleUpdatePwd"
+        nzTitle="修改密码"
+        [nzMaskClosable] = "true"
+        (nzOnClose)="closeUser()"
+>
+  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
+
+    <nz-form-item>
+      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>旧密码</nz-form-label>
+      <nz-form-control [nzSm]="14" [nzXs]="24">
+        <input nz-input type="password"  formControlName="oldPassword"  placeholder="请输入您的旧密码" />
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>
+        <span> 新密码 </span>
+      </nz-form-label>
+      <nz-form-control [nzSm]="14" [nzXs]="24">
+        <nz-input-group [nzSuffix]="suffixTemplate">
+          <input nz-input [type]="passwordVisible ? 'text' : 'password'"  formControlName="newPassword"  placeholder="请输入您的新密码" />
+        </nz-input-group>
+        <ng-template #suffixTemplate>
+          <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
+        </ng-template>
+      </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]="24" [nzErrorTip]="errorTpl">
+        <input nz-input type="password"  formControlName="checkNewPassword"  placeholder="请再次输入您的新密码" />
+        <ng-template #errorTpl let-control>
+          <ng-container *ngIf="control.hasError('confirm')">
+            您输入的两个密码不一致!
+          </ng-container>
+        </ng-template>
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-control [nzSpan]="8" >
+      <button nz-button nzType="primary" style="margin-left: 130px;width: 200px;">提交</button>
+    </nz-form-control>
+
+  </form>
+
+</nz-drawer>

src/app/admin/navigation/navigation.component.ts

@@ -2,11 +2,16 @@ import { Component, OnInit } from '@angular/core';
 import {LocalStorageService} from '../../services/local-storage.service';
 import {DATA, ROUTENAME, MENUNAME, CHILDMENUNAME, INIT_FLAG, ADMIN_INFO_OBJECT, TOKEN} from '../../services/local-storage.namespace';
 import {LoginService} from '../../services/login.service';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService, NzModalService} from 'ng-zorro-antd';
 import {Router} from '@angular/router';
 import {IconService} from '../../services/icon.service';
 import {RechargeService} from '../../services/recharge.service';
 import {CommonsService} from '../../services/commons.service';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {ValidatorsService} from '../../services/validators.service';
+import {Md5} from 'ts-md5';
+import {environment} from '../../../environments/environment';
+import {HttpClient} from '@angular/common/http';
 
 @Component({
   selector: 'app-navigation',
@@ -15,6 +20,9 @@ import {CommonsService} from '../../services/commons.service';
 })
 export class NavigationComponent implements OnInit {
 
+  visibleUpdatePwd = false;  // 修改密码抽屉
+  validateForm: FormGroup; // 定义表单
+
   isCollapsed = false;
   userInfo: any;
   menuList: any;
@@ -25,11 +33,20 @@ export class NavigationComponent implements OnInit {
     private loginService: LoginService,
     private message: NzMessageService,
     private commonsService: CommonsService,
+    private http: HttpClient, // http请求
     private iconService: IconService,
+    private modal: NzModalService,
+    private fb: FormBuilder, // 表单
     private router: Router,
   ) { }
 
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      oldPassword: [null, [Validators.required, ValidatorsService.minLength(6), ValidatorsService.maxLength(16)]],
+      newPassword: [null, [Validators.required, ValidatorsService.minLength(6), ValidatorsService.maxLength(16)]],
+      checkNewPassword: [null, [Validators.required, this.checkPwd]],
+    });
+
     this.routeName = this.storage.get(ROUTENAME) == null ? 'index' : this.storage.get(ROUTENAME);
     this.userInfo = this.storage.getList(ADMIN_INFO_OBJECT);
     this.commonsService.mappingSysNameOl('RECHARGE', data => {
@@ -79,4 +96,77 @@ export class NavigationComponent implements OnInit {
     });
   }
 
+  // 打开抽屉
+  openUpdatePwd(): void {
+    this.visibleUpdatePwd = true;
+  }
+
+  // 关闭抽屉
+  closeUser(): void {
+    this.visibleUpdatePwd = false;
+  }
+
+  // 提交表单
+  submitForm(value): void {
+    // 表单验证
+    // tslint:disable-next-line:forin
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+    if (this.validateForm.status == null || this.validateForm.status !== 'VALID') {
+      this.modal.info({
+        nzTitle: '提示',
+        nzContent: '请正确填写必填信息',
+      });
+      return;
+    }
+    const timeNum = new Date().getTime();
+    const signStr = 'userId=' + this.storage.get(ADMIN_INFO_OBJECT)['secUser'].id + '&newPassword=' + value.newPassword + '&nonceStr=' + timeNum;
+    // 定义请求数据
+    const params = {
+      userId: this.storage.get(ADMIN_INFO_OBJECT)['secUser'].id,
+      oldPassword: value.oldPassword,
+      newPassword: value.newPassword,
+      nonceStr: timeNum,
+      sign: String(Md5.hashStr(signStr)).toLocaleUpperCase(),
+    };
+    this.http.post(environment.baseUrl + '/secUser/sendUserPass', params).subscribe(data => {
+      if (data['return_code'] === '000000') {
+        this.modal.success({
+          nzTitle: '提示',
+          nzContent: '密码修改成功',
+          nzOkText: '重新登录',
+          nzOkType: 'primary',
+          nzOnOk: () => this.loginOut()
+        });
+      } else {
+        this.modal.warning({
+          nzTitle: '提示',
+          nzContent: data['return_msg'],
+          nzOkText: '取消',
+          nzOkType: 'primary',
+        });
+      }
+      setTimeout(() => {
+      }, 1000);
+    }, error => {
+      this.message.create('error', `未知错误！`);
+    });
+  }
+
+  /**
+   * 新密码校验两次密码是否一致
+   * @param control
+   */
+  checkPwd = (control: FormControl): { [s: string]: boolean } => {
+    if (!control.value) {
+      return { required: true };
+    } else if (control.value !== this.validateForm.controls.newPassword.value) {
+      return { confirm: true, error: true };
+    }
+    return {};
+  }
+
+
 }