修改密码功能

proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/service": {
-    "target": "http://192.168.4.190",
+    "target": "http://192.168.3.108",
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {

src/app/views/main/main.component.html

@@ -91,11 +91,11 @@
 </ng-template>
 <!-- 修改密码 -->
 <nz-modal [(nzVisible)]="isPwdVisible" nzTitle="修改密码" (nzOnCancel)="pwdHandleCancel()" (nzOnOk)="pwdHandleOk()"
-  [nzOkLoading]="pwdIsOkLoading">
+  [nzOkLoading]="pwdIsOkLoading" (nzAfterOpen)="pwdAfterOpen()">
   <div>
     <label>原始密码:
       <nz-input-group [nzSuffix]="suffixTemplate">
-        <input maxlength="16" minlength="6" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="原始密码"
+        <input minlength="9" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="原始密码"
           [(ngModel)]="upModalData.pwdOld" />
       </nz-input-group>
       <ng-template #suffixTemplate>
@@ -104,24 +104,23 @@
       </ng-template>
     </label>
     <label>新密码:
-      <!-- <div style="display: flex;"> -->
+      <div style="display: flex;">
         <nz-input-group [nzSuffix]="suffixTemplate">
-          <input maxlength="16" minlength="6" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="新密码"
-            [(ngModel)]="upModalData.newPwd" />
+          <input minlength="9" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="新密码"
+            [(ngModel)]="upModalData.newPwd" (ngModelChange)="blurNewPwd()" />
         </nz-input-group>
         <ng-template #suffixTemplate>
-          <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
-            (click)="passwordVisible = !passwordVisible"></i>
+          <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
         </ng-template>
-        <!-- <div class="red" style="display: flex;justify-content: center;align-items: center;padding-left: 5px;">弱</div>
-        <div style="display: flex;justify-content: center;align-items: center;padding-left: 5px;">中</div>
-        <div class="green" style="display: flex;justify-content: center;align-items: center;padding-left: 5px;">强</div> -->
-      <!-- </div> -->
+        <div class="red" style="display: flex;justify-content: center;align-items: center;padding-left: 5px;" *ngIf="enoughRegFlag">弱</div>
+        <div style="display: flex;justify-content: center;align-items: center;padding-left: 5px;" *ngIf="mediumRegFlag">中</div>
+        <div class="green" style="display: flex;justify-content: center;align-items: center;padding-left: 5px;" *ngIf="strongRegFlag">强</div>
+      </div>
     </label>
-    <!-- <div class="red">强密码需包含大小写字母、数字、特殊字符，长度必须超过8个字符</div> -->
+    <div class="red">强密码需包含大小写字母、数字、特殊字符，长度至少9个字符</div>
     <label>确认新密码:
       <nz-input-group [nzSuffix]="suffixTemplate">
-        <input maxlength="16" minlength="6" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="确认新密码"
+        <input minlength="9" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="确认新密码"
           [(ngModel)]="upModalData.newPwd2" />
       </nz-input-group>
       <ng-template #suffixTemplate>

src/app/views/main/main.component.ts

@@ -145,6 +145,19 @@ export class MainComponent implements OnInit {
     }
   }
 
+  // 新密码失去焦点
+  enoughRegFlag = true; //弱
+  mediumRegFlag = false; //中
+  strongRegFlag = false; //强
+  blurNewPwd(){
+    let enoughReg = /^.{0,6}$/;//密码强度-弱
+    let strongReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\!\@\#\$\%\^\&\*])[a-zA-Z\d\!\@\#\$\%\^\&\*]{9,}$/;//密码强度-强
+    this.enoughRegFlag = enoughReg.test(this.upModalData.newPwd);
+    this.strongRegFlag = strongReg.test(this.upModalData.newPwd);
+    this.mediumRegFlag = !this.enoughRegFlag && !this.strongRegFlag;
+    console.log(this.enoughRegFlag,this.mediumRegFlag,this.strongRegFlag);
+  }
+
   // 跳转页面
   menuLabel: string; //当前菜单名称
   indexFlag = localStorage.getItem("index") === "true" ? true : false; //首页高亮
@@ -310,6 +323,18 @@ export class MainComponent implements OnInit {
     });
   }
 
+  //打开修改密码弹窗
+  pwdAfterOpen(){
+    this.passwordVisible = false;
+    this.pwdIsOkLoading = false;
+    this.upModalData = {
+      userid: "",
+      pwdOld: "",
+      newPwd: "",
+      newPwd2: "",
+    };
+  }
+
   // 修改密码
   passwordVisible = false;
   password?: string;
@@ -323,6 +348,26 @@ export class MainComponent implements OnInit {
     newPwd2: "",
   };
   upPwd(): void {
+    if(this.upModalData.newPwd.trim() === ''){
+      this.msg.error('请填写原始密码！', {
+        nzDuration: 5000,
+      });
+      return;
+    }
+    if(!this.strongRegFlag){
+      this.msg.error('新密码不符合要求！', {
+        nzDuration: 5000,
+      });
+      return;
+    }
+    if(this.upModalData.newPwd !== this.upModalData.newPwd2){
+      this.msg.error('新密码与确认新密码不一致！', {
+        nzDuration: 5000,
+      });
+      return;
+    }
+
+    this.pwdIsOkLoading = true;
     let userid = JSON.parse(localStorage.getItem("user")).user.id;
     this.upModalData.userid = userid;
     this.mainService.upPwd(this.upModalData).subscribe((data) => {
@@ -345,7 +390,6 @@ export class MainComponent implements OnInit {
   }
 
   pwdHandleOk(): void {
-    this.pwdIsOkLoading = true;
     this.upPwd();
   }
 

src/main.ts

@@ -8,7 +8,7 @@ if (environment.production) {
   enableProdMode();
   if (window) {
     window.console.log = function () { };
-    console.info('v2.4.20');
+    console.info('v2.4.21');
   }
 }
 platformBrowserDynamic().bootstrapModule(AppModule)