添加密码修改功能，完善抽屉部分信息的展示，修改头像显示异常的错误

src/app/view/admin/admin.component.html

@@ -89,30 +89,47 @@
     </nz-layout>
 </nz-layout>
 <nz-drawer [nzClosable]="false" [nzVisible]="infoDrawerVisible" nzPlacement="right"
-           [nzTitle]="sayHelloTemp" (nzOnClose)="infoDrawerVisible = false">
+           [nzTitle]="sayHelloTemp" (nzOnClose)="infoDrawerVisible = false" nzWidth="300px">
     <p>您最近一次登录是在:</p>
-    <p>{{user&&user.recentlyLandedDate}}</p>
+    <p>{{user && user.recentlyLandedDate}}</p>
     <nz-divider></nz-divider>
+    <div style="text-align: center;margin-bottom: 10px;">
+        <nz-avatar [nzSize]="64" [nzSrc]="user.avatarImgUrl"
+                   *ngIf="user.avatarImgUrl!==noAvatarUrl"></nz-avatar>
+        <nz-avatar [nzSize]="64" [nzText]="user.displayName" style="background: #f56a00"
+                   *ngIf="user.avatarImgUrl===noAvatarUrl"></nz-avatar>
+
+        <nz-upload style="display: block" [nzAction]="host+'/user/imgUpload'" nzWithCredentials="true" nzLimit="1"
+                   (nzChange)="avatarUpload($event)" [nzHeaders]="uploadHeader">
+            <button nz-button nzBlock nzType="link"><i nz-icon nzType="upload"></i>修改头像</button>
+        </nz-upload>
+    </div>
     <nz-descriptions [nzColumn]="1">
         <nz-descriptions-item nzTitle="邮箱">
             <div>
                 <i nz-icon nzType="mail" class="icon" nzTheme="twotone"></i>
-                <span>{{user&&user.email}}</span>
+                <span>{{user && user.email}}</span>
                 <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
             </div>
         </nz-descriptions-item>
         <nz-descriptions-item nzTitle="昵称">
             <div>
                 <i nz-icon nzType="crown" class="icon" nzTheme="twotone"></i>
-                <span>{{user&&user.displayName}}</span>
+                <span>{{user && user.displayName}}</span>
                 <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
             </div>
         </nz-descriptions-item>
         <nz-descriptions-item nzTitle="描述" *ngIf="user&&user.desc">
             <i nz-icon nzType="info-circle" class="icon" nzTheme="twotone"></i>
-            <span nz-tooltip [nzTooltipTitle]="user.desc" nzTooltipPlacement="left" nz-typography [nzEllipsis]="true" [nzContent]="user.desc" style="max-width: 100px">{{user.desc}}</span>
+            <span nz-tooltip [nzTooltipTitle]="user.desc" nzTooltipPlacement="left" nz-typography [nzEllipsis]="true"
+                  [nzContent]="user.desc" style="max-width: 100px">{{user.desc}}</span>
             <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showEditInfoModal()"></i>
         </nz-descriptions-item>
+        <nz-descriptions-item nzTitle="密码">
+            <i nz-icon nzType="fire" nzTheme="twotone"> </i>
+            <span> *********</span>
+            <i nz-icon nzType="edit" class="edit-icon" nzTheme="twotone" (click)="showResetPwdModal()"></i>
+        </nz-descriptions-item>
     </nz-descriptions>
 
     <nz-divider></nz-divider>
@@ -147,6 +164,43 @@
     </form>
 </nz-modal>
 
+<nz-modal [(nzVisible)]="resetPwdModalVisible" nzClosable="true" (nzOnCancel)="resetPwdModalVisible = false"
+          (nzOnOk)="resetPwdConfirm()" nzTitle="修改密码" [nzOkDisabled]="!resetPwdFormGroup.valid">
+    <form nz-form (submit)="resetPwdConfirm()" [formGroup]="resetPwdFormGroup">
+        <nz-form-item>
+            <nz-form-label nzRequired>原密码</nz-form-label>
+            <nz-form-control nzErrorTip="原密码不可为空">
+                <input type="password" name="xxx" nz-input formControlName="originPwd">
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label nzRequired>新密码</nz-form-label>
+            <nz-form-control [nzErrorTip]="newPwdErrTip">
+                <input type="password" name="xxx" nz-input formControlName="newPwd">
+            </nz-form-control>
+            <ng-template #newPwdErrTip>
+                <div *ngIf="resetPwdFormGroup.controls.newPwd.hasError('required')">新密码不可为空</div>
+                <div *ngIf="resetPwdFormGroup.controls.newPwd.hasError('minlengtj')">新密码最短6位</div>
+                <div *ngIf="resetPwdFormGroup.controls.newPwd.hasError('maxlengtj')">新密码最长16位</div>
+                <div *ngIf="resetPwdFormGroup.controls.newPwd.hasError('pattern')">新密码范围[数字，大小写字母，下划线和减号]</div>
+            </ng-template>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label nzRequired>确认密码</nz-form-label>
+            <nz-form-control [nzErrorTip]="newPwdConfirmErrTip">
+                <input type="password" nz-input name="xxx" formControlName="newPwdConfirm">
+            </nz-form-control>
+            <ng-template #newPwdConfirmErrTip>
+                <div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('required')">确认密码不可为空</div>
+                <div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('minlengtj')">确认密码最短6位</div>
+                <div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('maxlengtj')">确认密码最长16位</div>
+                <div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('pattern')">确认密码范围[数字，大小写字母，下划线和减号]</div>
+                <div *ngIf="resetPwdFormGroup.controls.newPwdConfirm.hasError('pwdNotSame')">确认密码应和新密码相同</div>
+            </ng-template>
+        </nz-form-item>
+    </form>
+</nz-modal>
+
 <ng-template #zeroTrigger>
     <i nz-icon nzType="menu-fold" nzTheme=outline></i>
 </ng-template>

src/app/view/admin/admin.component.ts

@@ -1,10 +1,13 @@
 import {Component, OnInit} from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
-import {NzMessageService} from 'ng-zorro-antd';
+import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
+import {NzMessageService, UploadFile} from 'ng-zorro-antd';
 import {Router} from '@angular/router';
 import {GlobalUserService} from '../../services/global-user.service';
 import {User} from '../../class/User';
 import {ApiService} from '../../api/api.service';
+import {environment} from '../../../environments/environment';
+import {Observable} from 'rxjs';
+import {LocalStorageService} from '../../services/local-storage.service';
 
 @Component({
     selector: 'app-admin',
@@ -14,17 +17,33 @@ import {ApiService} from '../../api/api.service';
 export class AdminComponent implements OnInit {
 
     constructor(public gUserService: GlobalUserService, private apiService: ApiService, private messageService: NzMessageService,
-                private router: Router) {
+                private router: Router, private localStorageService: LocalStorageService) {
         this.gUserService.watchUserInfo({
                 complete: () => null,
                 error: (err) => null,
                 next: data => {
                     console.log('更新user')
                     this.user = data.result
+                    this.user.avatarImgUrl += '?t=' + Date.now();
                     if (data.result) this.initHelloWords()
                 }
             }
-        )
+        );
+        this.editInfoFormGroup = new FormGroup({
+            desc: new FormControl(),
+            displayName: new FormControl(),
+            email: new FormControl({value: null, disabled: true})
+        });
+        this.resetPwdFormGroup = new FormGroup({
+            originPwd: new FormControl(null, [Validators.required]),
+            newPwd: new FormControl(null, [
+                Validators.required, Validators.minLength(6), Validators.maxLength(16), Validators.pattern(/^[\w_-]{6,16}$/)
+            ]),
+            newPwdConfirm: new FormControl(null, [
+                Validators.required, Validators.minLength(6), Validators.maxLength(16), Validators.pattern(/^[\w_-]{6,16}$/),
+                this.checkSamePwd()
+            ]),
+        })
     }
 
     user: User;
@@ -32,8 +51,11 @@ export class AdminComponent implements OnInit {
     infoDrawerVisible: boolean = false;
     sayHelloContent: string;
     editInfoModalVisible: boolean = false;
+    resetPwdModalVisible: boolean = false;
     editInfoFormGroup: FormGroup;
-
+    resetPwdFormGroup: FormGroup;
+    noAvatarUrl = 'https://cdn.celess.cn/'
+    host: string
     showInfoDrawer = () => this.infoDrawerVisible = !this.infoDrawerVisible;
 
     logout() {
@@ -42,13 +64,20 @@ export class AdminComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.editInfoFormGroup = new FormGroup({
-            desc: new FormControl(),
-            displayName: new FormControl(),
-            email: new FormControl({value: null, disabled: true})
-        });
+        this.host = environment.host;
     }
 
+    checkSamePwd = () => {
+        return (control: AbstractControl): { [key: string]: any } | null => {
+            console.log('a')
+            const newPwd = this.resetPwdFormGroup && this.resetPwdFormGroup.value.newPwd;
+            return control.value !== newPwd ? {pwdNotSame: true} : null;
+        };
+    }
+    uploadHeader = (file: UploadFile): object | Observable<{}> => {
+        return {Authorization: this.localStorageService.getToken()}
+    };
+
     private initHelloWords() {
         const hours = new Date().getHours();
         if (hours < 6) {
@@ -89,4 +118,30 @@ export class AdminComponent implements OnInit {
         this.editInfoModalVisible = false;
     }
 
+    resetPwdConfirm() {
+        // this.apiService
+        const data = this.resetPwdFormGroup.value;
+        this.apiService.setPwd(data.originPwd, data.newPwd, data.newPwdConfirm).subscribe({
+            next: respData => {
+                this.messageService.success('修改密码成功，请牢记你修改的密码');
+                this.gUserService.refreshUserInfo();
+            },
+            error: err => {
+                this.messageService.error('修改密码失败，' + err.msg);
+            }
+        })
+        this.resetPwdModalVisible = false;
+    }
+
+    showResetPwdModal() {
+        this.resetPwdModalVisible = true;
+        this.infoDrawerVisible = false
+    }
+
+    avatarUpload(info: any) {
+        if (info.type === 'success' && info.file.response.code === 0) {
+            const time = new Date().valueOf();
+            this.gUserService.refreshUserInfo();
+        }
+    }
 }

src/app/view/admin/auth.guard.ts

@@ -67,8 +67,8 @@ export class AuthGuard implements CanActivate {
             case '/admin/visitor':
                 if (this.userInfo && this.userInfo.role !== 'admin') {
                     observer.next(false);
-                    observer.complete();
                     if (this.visitCount === 1) this.router.navigateByUrl('/admin')
+                    observer.complete();
                     return;
                 }
         }