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

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

@ -1,29 +1,51 @@
@import '~@delon/theme/index';
: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 {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
margin : 0 auto;
overflow : hidden;
}
page-grid {
width: 100%;
height: 100%;
margin: 100px auto;
width : 100%;
height : 100%;
background-color: #fff;
margin : 100px auto;
.myForm {
width: 25rem;
margin: 5rem auto;
margin-top : 3rem;
margin-bottom: 5rem;
}
.steps-content {
min-height: 250px;
margin-top: 16px;
background-color: #fafafa;
border: 1px dashed #e9e9e9;
border-radius: 6px;
margin-top : 16px;
border : 1px dashed #e9e9e9;
border-radius : 6px;
background-color: #ffffff;
min-height : 250px;
// text-align: center;
}
@ -34,45 +56,31 @@
button {
margin-right: 8px;
}
.step-title{
padding: 8px;
}
}
}
.input-tootip {
width : 250px;
padding-left: 20px;
display : flex;
display : flex;
align-items : center;
.content {
background-color: #f0f3f7;
}
.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;
}
.dot {
font-size: 21px;
color : #bdb8b8;
}
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 { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { CaptchaComponent } from '@shared';
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
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({
selector: 'app-routes-password-retrieve-password',
templateUrl: './retrieve-password.component.html',
styleUrls: ['./retrieve-password.component.less'],
styleUrls: ['./retrieve-password.component.less']
})
export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
@ViewChild('dun', { static: false })
private dun!: CaptchaComponent;
step = 0;
count = 0;
interval$: any;
@ -21,18 +18,20 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
formGroup2!: FormGroup;
confirmPasswordValidator!: ValidatorFn;
result = true;
isPassWordHide = true;
isConfirmPassWordHide = true;
constructor(private fb: FormBuilder, public service: EAUserService, private router: Router, private cdr: ChangeDetectorRef) {}
ngAfterViewInit(): void {
this.dun.init();
}
ngAfterViewInit(): void {}
ngOnInit() {
this.initForm();
}
initForm() {
this.confirmPasswordValidator = (control) => {
this.confirmPasswordValidator = control => {
if (!control.value) {
return { error: true, required: true };
} else if (control.value !== this.formGroup2.controls.passWord.value) {
@ -44,7 +43,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
this.formGroup1 = this.fb.group({
phone: [null, [Validators.required]],
smsVerifyCode: [null, [Validators.required]],
voucher: [null, [Validators.required]],
voucher: [null, [Validators.required]]
});
this.formGroup2 = this.fb.group({
@ -54,12 +53,12 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
Validators.required,
Validators.maxLength(16),
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)]],
voucher: [null, [Validators.required]],
phone: [null, [Validators.required]],
phone: [null, [Validators.required]]
});
}
@ -76,7 +75,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
submitForm1() {
for (const i in this.formGroup1.controls) {
if (true) {
if (this.formGroup1.controls[i]) {
this.formGroup1.controls[i].markAsDirty();
this.formGroup1.controls[i].updateValueAndValidity();
}
@ -88,13 +87,14 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
if (this.formGroup1.valid) {
const param = Object.assign({}, this.formGroup1.value);
this.service.http.post(this.service.$forgetPasswordVerifyIdentity, param).subscribe((res: any) => {
// console.log(res, 'submitForm1');
if (res.success === true) {
this.formGroup2.patchValue(
{
voucher: res.data.voucher,
phone: this.formGroup1.value.phone,
phone: this.formGroup1.value.phone
},
{ onlySelf: true },
{ onlySelf: true }
);
this.step = 1;
// clearInterval(this.interval$);
@ -108,7 +108,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
submitForm2() {
for (const i in this.formGroup2.controls) {
if (true) {
if (this.formGroup2.controls[i]) {
this.formGroup2.controls[i].markAsDirty();
this.formGroup2.controls[i].updateValueAndValidity();
}
@ -152,15 +152,15 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
if (res.success) {
this.formGroup1.patchValue(
{
voucher: res?.data?.voucher,
voucher: res?.data?.voucher
},
{ onlySelf: true },
{ onlySelf: true }
);
if (res?.data?.code === '1') {
this.codeCountDown();
this.service.msgSrv.success('验证码已发送到该账号绑定的手机号！');
} else if (res?.data?.code === '503046') {
this.dun.popUp();
// this.dun.popUp();
} else {
this.service.msgSrv.error('获取验证码失败!');
}
@ -176,7 +176,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
this.count = 59;
interval(1000)
.pipe(take(60))
.subscribe((x) => {
.subscribe(x => {
this.count = 59 - (x + 1);
this.cdr.detectChanges();
});