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

src/app/api/api.service.ts

@@ -582,4 +582,16 @@ export class ApiService extends HttpService {
         });
     }
 
+    setPwd(pwdStr: string, newPwdStr: string, confirmPwdStr: string,) {
+        return super.Service<string>({
+            path: '/user/setPwd',
+            method: 'POST',
+            queryParam: {
+                pwd: pwdStr,
+                newPwd: newPwdStr,
+                confirmPwd: confirmPwdStr,
+            }
+        });
+    }
+
 }

src/app/components/admin-header/admin-header.component.html

@@ -11,7 +11,9 @@
 
 
     <div id="loged" *ngIf="user" (click)="infoClickedEvent()">
-        <nz-avatar [nzSrc]="user.avatarImgUrl"></nz-avatar>
+        <nz-avatar [nzSrc]="user.avatarImgUrl" *ngIf="user.avatarImgUrl!==noAvatarUrl"></nz-avatar>
+        <nz-avatar [nzText]="user.displayName" style="background: #f56a00"
+                   *ngIf="user.avatarImgUrl===noAvatarUrl"></nz-avatar>
         <span>{{user.displayName}}</span>
     </div>
 

src/app/components/admin-header/admin-header.component.ts

@@ -14,7 +14,7 @@ export class AdminHeaderComponent implements OnInit {
 
     user: User
     @Output() infoClicked = new EventEmitter<void>()
-
+    noAvatarUrl = 'https://cdn.celess.cn/'
     logout = () => this.userService.logout();
     infoClickedEvent = () => this.infoClicked.emit();
 

src/app/components/header/header.component.html

@@ -18,9 +18,9 @@
     </div>
     <div *ngIf="userInfo" id="info">
         <!--        <img [src]="userInfo.avatarImgUrl" alt="avatar" id="avatar">-->
-        <nz-avatar [nzSrc]="userInfo.avatarImgUrl" *ngIf="userInfo.avatarImgUrl===noAvatarUrl"></nz-avatar>
+        <nz-avatar [nzSrc]="userInfo.avatarImgUrl" *ngIf="userInfo.avatarImgUrl!==noAvatarUrl"></nz-avatar>
         <nz-avatar [nzText]="userInfo.displayName" style="background: #f56a00"
-                   *ngIf="userInfo.avatarImgUrl!==noAvatarUrl"></nz-avatar>
+                   *ngIf="userInfo.avatarImgUrl===noAvatarUrl"></nz-avatar>
         <button nz-button nzType="link" class="info-name"
                 nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomRight" nzTrigger="click">
             {{userInfo.displayName}}<i nz-icon nzType="caret-down" nzTheme="outline"></i>

src/app/services/global-user.service.ts

@@ -45,6 +45,7 @@ export class GlobalUserService {
 
     // 刷新用户信息
     refreshUserInfo(): void {
+        this.multicastArray = [...this.userObserverArray];
         this.getUserInfoFromServer();
     }
 

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

@@ -89,10 +89,21 @@
     </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>
     <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>
@@ -110,9 +121,15 @@
         </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 {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
-import {NzMessageService} from 'ng-zorro-antd';
+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({
+        this.host = environment.host;
-            desc: new FormControl(),
-            displayName: new FormControl(),
-            email: new FormControl({value: null, disabled: true})
-        });
     }
 
+    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;
                 }
         }