zheng/blog-frontEnd
1
0
Fork 0
Code Issues 2 Pull Requests 12 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
禾几海
2020-05-19 19:52:54 +08:00
parent f8d3494626
commit ffe4b36f3e
8 changed files with 144 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/api/api.service.ts
View File

@@ -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,
}
});
}
}

4
src/app/components/admin-header/admin-header.component.html
View File

@@ -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>

2
src/app/components/admin-header/admin-header.component.ts
View File

@@ -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();

4
src/app/components/header/header.component.html
View File

@@ -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>

1
src/app/services/global-user.service.ts
View File

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

64
src/app/view/admin/admin.component.html
View File

@@ -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>

75
src/app/view/admin/admin.component.ts
View File

@@ -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();
}
}
}

2
src/app/view/admin/auth.guard.ts
View File

@@ -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;
}
}