Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-01-10 19:15:47 +08:00
parent e387c21f6f
commit 28cf90cf26
3 changed files with 187 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/app/routes/passport/components/retrieve-password/retrieve-password.component.html
View File

@ -1,109 +1,116 @@
<div class="main"> <div class="main">
<page-grid> <page-grid>
<nz-steps [nzCurrent]="step" class="step-title"> <nz-steps [nzCurrent]="step" nzLabelPlacement="vertical" class="step-title">
<nz-step nzTitle="安全验证"></nz-step> <nz-step nzTitle="安全验证"></nz-step>
<nz-step nzTitle="重设密码"></nz-step> <nz-step nzTitle="重设密码"></nz-step>
<nz-step nzTitle="完成"></nz-step> <nz-step nzTitle="完成"></nz-step>
</nz-steps> </nz-steps>
<div class="steps-content"> <div class="steps-content">
<ng-container *ngIf="step === 0"> <ng-container *ngIf="step === 0">
<form nz-form [formGroup]="formGroup1" class="myForm"> <div nz-row>
<nz-form-item> <div nz-col nzOffset="7" nzMd="9">
<nz-form-label nzSpan="6" nzRequired nzFor="phone">手机号</nz-form-label> <form nz-form [formGroup]="formGroup1" class="myForm">
<nz-form-control nzSpan="18" nzErrorTip="请输入正确的手机号"> <nz-form-item>
<nz-input-group nzPrefixIcon="user"> <nz-form-label nzSpan="6" nzRequired nzFor="phone">手机号</nz-form-label>
<input type="text" nz-input formControlName="phone" maxlength="11" placeholder="请输入手机号" /> <nz-form-control nzSpan="18" nzErrorTip="请输入正确的手机号">
</nz-input-group> <input type="text" nz-input formControlName="phone" maxlength="11" nzSize="large"
</nz-form-control> placeholder="请输入手机号" />
</nz-form-item> </nz-form-control>
<nz-form-item> </nz-form-item>
<nz-form-label nzSpan="6" nzRequired nzFor="smsVerifyCode">验证码</nz-form-label> <nz-form-item>
<nz-form-control nzSpan="18"> <nz-form-label nzSpan="6" nzRequired nzFor="smsVerifyCode">验证码</nz-form-label>
<div class="valid-code"> <nz-form-control nzSpan="18">
<nz-input-group nzPrefixIcon="lock"> <nz-input-group [nzSuffix]="suffixTemplateInfo" nzSize="large">
<input [disabled]="true" type="text" nz-input formControlName="smsVerifyCode" maxlength="6" placeholder="请输入验证码" /> <input type="text" nz-input formControlName="smsVerifyCode" maxlength="6" placeholder="请输入验证码" />
</nz-input-group> </nz-input-group>
<button </nz-form-control>
class="btn-code" </nz-form-item>
nz-button <nz-form-item>
nzType="link" <nz-form-control nzSpan="6" nzOffset="6">
[disabled]="count > 0" <button class="btn-submit" [disabled]="!formGroup1.valid" [nzLoading]="service.http.loading" nz-button
[nzLoading]="service.http.loading" nzBlock="true" nzType="primary" (click)="formSubmit()">
(click)="getCaptcha()" 下一步
> </button>
{{ count > 0 ? '请等待' + count + 's' : ('获取验证码') }} </nz-form-control>
</button> </nz-form-item>
</div> </form>
</nz-form-control> </div>
</nz-form-item> </div>
<nz-form-item>
<nz-form-control nzSpan="18" nzOffset="6">
<button
class="btn-submit"
[disabled]="!formGroup1.valid"
[nzLoading]="service.http.loading"
nz-button
nzBlock="true"
nzType="primary"
(click)="formSubmit()"
>
下一步
</button>
</nz-form-control>
</nz-form-item>
</form>
</ng-container> </ng-container>
<!-- <app-captcha #dun [phone]="this.formGroup1.value.phone" (done)="captchaDone($event)"></app-captcha> --> <!-- <app-captcha #dun [phone]="this.formGroup1.value.phone" (done)="captchaDone($event)"></app-captcha> -->
<ng-container *ngIf="step === 1"> <ng-container *ngIf="step === 1">
<form nz-form [formGroup]="formGroup2" class="myForm"> <div nz-row>
<nz-form-item> <div nz-col nzOffset="7" nzMd="17">
<nz-form-label nzSpan="6" nzRequired nzFor="passWord">新的密码</nz-form-label> <form nz-form [formGroup]="formGroup2" class="myForm">
<nz-form-control nzSpan="18" [nzErrorTip]="passwordErrorTpl"> <nz-form-item>
<input <nz-form-label nzSpan="4" nzRequired nzFor="passWord">设置新密码</nz-form-label>
nz-input <nz-form-control nzSpan="8">
type="password" <nz-input-group [nzSuffix]="passWordType" nzSize="large">
formControlName="passWord" <input nz-input [type]="isPassWordHide?'password':'text'" formControlName="passWord"
(ngModelChange)="validateConfirmPassword()" (ngModelChange)="validateConfirmPassword()" placeholder="请输入新密码" />
placeholder="请输入密码" </nz-input-group>
/> <ng-template #passWordType>
<ng-template #passwordErrorTpl let-control> <i nz-icon [nzType]="isPassWordHide?'eye-invisible':'eye'" (click)="isPassWordHide=!isPassWordHide"
<ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container> nzTheme="outline" style="color: #bdb7b7;font-size: 18px;cursor: pointer;"></i>
<ng-container *ngIf="control.hasError('minLength') || control.hasError('pattern')"> <!-- <ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
8-16个字符，支持字母、数字、符号“_”和“-”，必须包含字母和数字! <ng-container *ngIf="control.hasError('minLength') || control.hasError('pattern')">
</ng-container> 8-16个字符，支持字母、数字、符号“_”和“-”，必须包含字母和数字!
</ng-template> </ng-container> -->
</nz-form-control> </ng-template>
</nz-form-item> </nz-form-control>
<nz-form-item> <div class="input-tootip">
<nz-form-label nzSpan="6" nzRequired nzFor="passWordTo">确认密码</nz-form-label> <div *ngIf="formGroup2?.value?.passWord;else NodataTemplate">
<nz-form-control nzSpan="18" nzDisableAutoTips [nzErrorTip]="passwordToErrorTpl"> <i *ngIf="formGroup2?.controls?.passWord?.errors" nz-icon nzType="close-circle" nzTheme="fill"
<input nz-input type="password" formControlName="passWordTo" placeholder="再次输入密码" /> class="valid-icon"></i>
<ng-template #passwordToErrorTpl let-control> <i *ngIf="!formGroup2?.controls?.passWord?.errors" nz-icon nzType="check-circle" nzTheme="fill"
<ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container> class="invalid-icon"></i>
<ng-container *ngIf="control.hasError('passWordTo')"> 两次输入的密码不一致! </ng-container> </div>
</ng-template> <label class="tootip-label"> 8-16个字符，支持字母、数字、符号“_”和“-”，必须包含字母和数字</label>
</nz-form-control> </div>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-control nzSpan="18" nzOffset="6"> <nz-form-label nzSpan="4" nzRequired nzFor="passWordTo">重复新密码</nz-form-label>
<button <nz-form-control nzSpan="8" nzDisableAutoTips>
[disabled]="!formGroup2.valid" <nz-input-group [nzSuffix]="confirmPassWordType" nzSize="large">
[nzLoading]="service.http.loading" <input nz-input [type]="isConfirmPassWordHide?'password':'text'" formControlName="passWordTo"
nz-button placeholder="再次输入密码" />
nzBlock="true" </nz-input-group>
nzType="primary" <ng-template #confirmPassWordType>
(click)="formSubmit()" <i nz-icon [nzType]="isConfirmPassWordHide?'eye-invisible':'eye'"
> (click)="isConfirmPassWordHide=!isConfirmPassWordHide" nzTheme="outline"
下一步 style="color: #bdb7b7;font-size: 18px;cursor: pointer;"></i>
</button> <!-- <ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
</nz-form-control> <ng-container *ngIf="control.hasError('passWordTo')"> 两次输入的密码不一致! </ng-container> -->
</nz-form-item> </ng-template>
</form> </nz-form-control>
<div class="input-tootip">
<div *ngIf="formGroup2?.value?.passWordTo;else NodataTemplate">
<i *ngIf="formGroup2?.controls?.passWordTo?.errors" nz-icon nzType="close-circle" nzTheme="fill"
class="valid-icon"></i>
<i *ngIf="!formGroup2?.controls?.passWordTo?.errors" nz-icon nzType="check-circle" nzTheme="fill"
class="invalid-icon"></i>
</div>
<label class="tootip-label">设置新密码与重复新密码保持一致</label>
</div>
</nz-form-item>
<nz-form-item>
<nz-form-control nzSpan="6" nzOffset="6">
<button [disabled]="!formGroup2.valid" [nzLoading]="service.http.loading" nz-button nzBlock="true"
nzType="primary" (click)="formSubmit()">
确认
</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="step === 2"> <ng-container *ngIf="step === 2">
<result [type]="result ? 'success' : 'error'" [title]="title" [description]="subTitle" style="margin-top: 3rem"> <result [type]="result ? 'success' : 'error'" [title]="title" [description]="subTitle"
style="margin-top: 3rem;margin-bottom: 5rem;">
<ng-template #title> <ng-template #title>
<div class="title" style="font-size: 24px"> <div class="title" style="font-size: 24px">
<!-- {{ 'app.register-result.msg' | translate: params }} --> <!-- {{ 'app.register-result.msg' | translate: params }} -->
@ -120,10 +127,19 @@
立即登录 立即登录
</button> </button>
<!-- <button routerLink="/" nz-button nzSize="large"> <!-- <button routerLink="/" nz-button nzSize="large">
{{ 'app.register-result.back-home' | translate }} {{ 'app.register-result.back-home' | translate }}
</button> --> </button> -->
</result> </result>
</ng-container> </ng-container>
</div> </div>
</page-grid> </page-grid>
</div> </div>
<ng-template #suffixTemplateInfo>
<ng-container *ngIf="count < 1; else intervalTemplate">
<span class="msg-btn" style="color: #3370ff; cursor: pointer" (click)="getCaptcha()">获取验证码</span>
</ng-container>
<ng-template #intervalTemplate> 请等待{{ count }}s </ng-template>
</ng-template>
<ng-template #NodataTemplate><label class="dot">●</label></ng-template>

108
src/app/routes/passport/components/retrieve-password/retrieve-password.component.less
View File

@ -1,29 +1,51 @@
@import '~@delon/theme/index';
:host { :host {
::ng-deep {
.ant-steps {
margin: 0 auto;
width : 500px;
}
.ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-tail::after {
background-color: #999494;
}
.ant-steps-item-wait>.ant-steps-item-container>.ant-steps-item-tail::after {
background-color: #999494;
}
.ant-spin-container {
background-color: #f8f8f8;
}
.ant-form-item-label>label {
height: 40px;
}
}
.main { .main {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin : 0 auto;
overflow: hidden; overflow : hidden;
} }
page-grid { page-grid {
width: 100%; width : 100%;
height: 100%; height : 100%;
margin: 100px auto;
background-color: #fff; background-color: #fff;
margin : 100px auto;
.myForm { .myForm {
width: 25rem; margin-top : 3rem;
margin: 5rem auto; margin-bottom: 5rem;
} }
.steps-content { .steps-content {
min-height: 250px; margin-top : 16px;
margin-top: 16px; border : 1px dashed #e9e9e9;
background-color: #fafafa; border-radius : 6px;
border: 1px dashed #e9e9e9; background-color: #ffffff;
border-radius: 6px; min-height : 250px;
// text-align: center; // text-align: center;
} }
@ -34,45 +56,31 @@
button { button {
margin-right: 8px; margin-right: 8px;
} }
.step-title{
padding: 8px;
}
} }
} }
.input-tootip {
width : 250px;
padding-left: 20px;
display : flex;
display : flex;
align-items : center;
.content { .dot {
background-color: #f0f3f7; font-size: 21px;
} color : #bdb8b8;
.main {
max-width: 1200px;
margin: 0 auto;
}
.header {
background: #fff;
}
.layout {
min-height: 100vh;
}
.logo {
display: flex;
margin: 16px 0;
line-height: 32px;
dt {
width: 95px;
height: 32px;
img {
vertical-align: top;
}
} }
dd {
flex: 1;
margin-bottom: 0;
padding: 0 10px;
color: #1890ff;
font-weight: 500;
font-size: 24px;
}
}
.valid-icon {
color: rgb(217 0 27);
}
.invalid-icon {
color: rgb(82 196 26);
}
.tootip-label {
margin-left: 8px;
font-size : 12px;
}
}

40
src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts
View File

@ -1,7 +1,6 @@
import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core'; import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { CaptchaComponent } from '@shared';
import { interval } from 'rxjs'; import { interval } from 'rxjs';
import { take } from 'rxjs/operators'; import { take } from 'rxjs/operators';
import { EAUserService } from 'src/app/shared/services/business/user.service'; import { EAUserService } from 'src/app/shared/services/business/user.service';
@ -9,11 +8,9 @@ import { EAUserService } from 'src/app/shared/services/business/user.service';
@Component({ @Component({
selector: 'app-routes-password-retrieve-password', selector: 'app-routes-password-retrieve-password',
templateUrl: './retrieve-password.component.html', templateUrl: './retrieve-password.component.html',
styleUrls: ['./retrieve-password.component.less'], styleUrls: ['./retrieve-password.component.less']
}) })
export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
@ViewChild('dun', { static: false })
private dun!: CaptchaComponent;
step = 0; step = 0;
count = 0; count = 0;
interval$: any; interval$: any;
@ -21,18 +18,20 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
formGroup2!: FormGroup; formGroup2!: FormGroup;
confirmPasswordValidator!: ValidatorFn; confirmPasswordValidator!: ValidatorFn;
result = true; result = true;
isPassWordHide = true;
isConfirmPassWordHide = true;
constructor(private fb: FormBuilder, public service: EAUserService, private router: Router, private cdr: ChangeDetectorRef) {} constructor(private fb: FormBuilder, public service: EAUserService, private router: Router, private cdr: ChangeDetectorRef) {}
ngAfterViewInit(): void { ngAfterViewInit(): void {}
this.dun.init();
}
ngOnInit() { ngOnInit() {
this.initForm(); this.initForm();
} }
initForm() { initForm() {
this.confirmPasswordValidator = (control) => { this.confirmPasswordValidator = control => {
if (!control.value) { if (!control.value) {
return { error: true, required: true }; return { error: true, required: true };
} else if (control.value !== this.formGroup2.controls.passWord.value) { } else if (control.value !== this.formGroup2.controls.passWord.value) {
@ -44,7 +43,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
this.formGroup1 = this.fb.group({ this.formGroup1 = this.fb.group({
phone: [null, [Validators.required]], phone: [null, [Validators.required]],
smsVerifyCode: [null, [Validators.required]], smsVerifyCode: [null, [Validators.required]],
voucher: [null, [Validators.required]], voucher: [null, [Validators.required]]
}); });
this.formGroup2 = this.fb.group({ this.formGroup2 = this.fb.group({
@ -54,12 +53,12 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
Validators.required, Validators.required,
Validators.maxLength(16), Validators.maxLength(16),
Validators.minLength(8), Validators.minLength(8),
Validators.pattern('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z-_]{8,16}$'), Validators.pattern('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z-_]{8,16}$')
], ]
], ],
passWordTo: [null, [this.confirmPasswordValidator, Validators.maxLength(16), Validators.minLength(8)]], passWordTo: [null, [this.confirmPasswordValidator, Validators.maxLength(16), Validators.minLength(8)]],
voucher: [null, [Validators.required]], voucher: [null, [Validators.required]],
phone: [null, [Validators.required]], phone: [null, [Validators.required]]
}); });
} }
@ -76,7 +75,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
submitForm1() { submitForm1() {
for (const i in this.formGroup1.controls) { for (const i in this.formGroup1.controls) {
if (true) { if (this.formGroup1.controls[i]) {
this.formGroup1.controls[i].markAsDirty(); this.formGroup1.controls[i].markAsDirty();
this.formGroup1.controls[i].updateValueAndValidity(); this.formGroup1.controls[i].updateValueAndValidity();
} }
@ -88,13 +87,14 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
if (this.formGroup1.valid) { if (this.formGroup1.valid) {
const param = Object.assign({}, this.formGroup1.value); const param = Object.assign({}, this.formGroup1.value);
this.service.http.post(this.service.$forgetPasswordVerifyIdentity, param).subscribe((res: any) => { this.service.http.post(this.service.$forgetPasswordVerifyIdentity, param).subscribe((res: any) => {
// console.log(res, 'submitForm1');
if (res.success === true) { if (res.success === true) {
this.formGroup2.patchValue( this.formGroup2.patchValue(
{ {
voucher: res.data.voucher, voucher: res.data.voucher,
phone: this.formGroup1.value.phone, phone: this.formGroup1.value.phone
}, },
{ onlySelf: true }, { onlySelf: true }
); );
this.step = 1; this.step = 1;
// clearInterval(this.interval$); // clearInterval(this.interval$);
@ -108,7 +108,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
submitForm2() { submitForm2() {
for (const i in this.formGroup2.controls) { for (const i in this.formGroup2.controls) {
if (true) { if (this.formGroup2.controls[i]) {
this.formGroup2.controls[i].markAsDirty(); this.formGroup2.controls[i].markAsDirty();
this.formGroup2.controls[i].updateValueAndValidity(); this.formGroup2.controls[i].updateValueAndValidity();
} }
@ -152,15 +152,15 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
if (res.success) { if (res.success) {
this.formGroup1.patchValue( this.formGroup1.patchValue(
{ {
voucher: res?.data?.voucher, voucher: res?.data?.voucher
}, },
{ onlySelf: true }, { onlySelf: true }
); );
if (res?.data?.code === '1') { if (res?.data?.code === '1') {
this.codeCountDown(); this.codeCountDown();
this.service.msgSrv.success('验证码已发送到该账号绑定的手机号！'); this.service.msgSrv.success('验证码已发送到该账号绑定的手机号！');
} else if (res?.data?.code === '503046') { } else if (res?.data?.code === '503046') {
this.dun.popUp(); // this.dun.popUp();
} else { } else {
this.service.msgSrv.error('获取验证码失败!'); this.service.msgSrv.error('获取验证码失败!');
} }
@ -176,7 +176,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
this.count = 59; this.count = 59;
interval(1000) interval(1000)
.pipe(take(60)) .pipe(take(60))
.subscribe((x) => { .subscribe(x => {
this.count = 59 - (x + 1); this.count = 59 - (x + 1);
this.cdr.detectChanges(); this.cdr.detectChanges();
}); });