7 changed files with 210 additions and 9 deletions
@ -0,0 +1,59 @@
|
||||
<div class="box"> |
||||
<div class="step1" *ngIf="currentStep == 1"> |
||||
<form nz-form [formGroup]="validateForm" (ngSubmit)="step1()"> |
||||
<nz-form-item> |
||||
<nz-form-label nzRequired nzFor="">请输入要修改密码的账号</nz-form-label> |
||||
<nz-form-control> |
||||
<input autocomplete="off" nz-input formControlName="account" id="account" /> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<div class="btn"> |
||||
<button type="submit" nz-button nzType="primary">下一步</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<div class="step2" *ngIf="currentStep == 2"> |
||||
<div class="phonebox"> |
||||
该账号绑定的手机号为:13864340193 <button type="button" nz-button nzType="primary">点击获取验证码</button> |
||||
</div> |
||||
<form nz-form [formGroup]="validateForm2" (ngSubmit)="step2()"> |
||||
<nz-form-item> |
||||
<nz-form-label nzRequired nzFor="">请输入验证码</nz-form-label> |
||||
<nz-form-control> |
||||
<input autocomplete="off" nz-input formControlName="code" id="code" /> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<div class="btn"> |
||||
<button type="submit" nz-button nzType="primary">下一步</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<div class="step3" *ngIf="currentStep == 3"> |
||||
<form nz-form [formGroup]="validateForm3" (ngSubmit)="step3()"> |
||||
<nz-form-item> |
||||
<!-- <nz-form-label nzRequired nzFor="">请输入原密码</nz-form-label> --> |
||||
<nz-form-control> |
||||
<input name="oldpassword" nz-input type="password" formControlName="oldpassword" |
||||
placeholder="请输入原密码" autocomplete="off" /> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<!-- <nz-form-label nzRequired nzFor="">请输入新密码</nz-form-label> --> |
||||
<nz-form-control> |
||||
<input name="newpassword" nz-input type="password" formControlName="newpassword" |
||||
placeholder="请输入新密码" autocomplete="off" /> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<!-- <nz-form-label nzRequired nzFor="">确认新密码</nz-form-label> --> |
||||
<nz-form-control> |
||||
<input name="affirmpassword" nz-input type="password" formControlName="affirmpassword" |
||||
placeholder="确认新密码" autocomplete="new-password" /> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<div class="btn"> |
||||
<button type="submit" nz-button nzType="primary">确定</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,26 @@
|
||||
.step1, |
||||
.step2 { |
||||
nz-form-item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
nz-form-label { |
||||
text-align: left; |
||||
} |
||||
} |
||||
|
||||
.btn { |
||||
width: 100%; |
||||
text-align: center; |
||||
margin-top: 50px; |
||||
} |
||||
} |
||||
|
||||
|
||||
.step3 { |
||||
.btn { |
||||
width: 100%; |
||||
text-align: center; |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
@ -0,0 +1,98 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { NzSafeAny } from 'ng-zorro-antd/core/types'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
@Component({ |
||||
selector: 'app-forget', |
||||
templateUrl: './forget.component.html', |
||||
styleUrls: ['./forget.component.scss'] |
||||
}) |
||||
export class ForgetComponent implements OnInit { |
||||
validateForm!: FormGroup; |
||||
validateForm2!: FormGroup; |
||||
validateForm3!: FormGroup; |
||||
constructor(private fb: FormBuilder, private message: NzMessageService, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
account: [null, [Validators.required]] |
||||
}); |
||||
this.validateForm2 = this.fb.group({ |
||||
code: [null, [Validators.required]] |
||||
}); |
||||
const { password } = MyValidators; |
||||
this.validateForm3 = this.fb.group({ |
||||
oldpassword: [null, [Validators.required]], |
||||
newpassword: [null, [Validators.required, password]], |
||||
affirmpassword: [null, [Validators.required, password]] |
||||
}); |
||||
} |
||||
currentStep = 1 |
||||
step1() { |
||||
console.log(this.validateForm) |
||||
if (this.validateForm.invalid) { |
||||
this.message.create('warning', '请填写完整'); |
||||
} else { |
||||
this.currentStep = 2 |
||||
} |
||||
} |
||||
step2() { |
||||
if (this.validateForm2.invalid) { |
||||
this.message.create('warning', '请填写完整'); |
||||
} else { |
||||
this.currentStep = 3 |
||||
} |
||||
} |
||||
|
||||
step3() { |
||||
if (this.validateForm3.valid) { |
||||
if (this.validateForm3.value.newpassword != this.validateForm3.value.affirmpassword) { |
||||
this.message.create('warning', '两次密码输入不一致！'); |
||||
return false |
||||
} else { |
||||
|
||||
// let body = {
|
||||
// currentPassword: this.validateForm3.value.oldpassword,
|
||||
// newPassword: this.validateForm3.value.newpassword
|
||||
// }
|
||||
// this.http.post('/api/services/app/User/ChangePassword', body).subscribe(data => {
|
||||
|
||||
// this.message.create('success', '修改成功！');
|
||||
// return true
|
||||
// }, err => {
|
||||
// this.message.create('warning', err.error.error.message);
|
||||
// return false
|
||||
// })
|
||||
|
||||
} |
||||
|
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
export type MyErrorsOptions = { 'zh-cn': string; en: string } & Record<string, NzSafeAny>; |
||||
export type MyValidationErrors = Record<string, MyErrorsOptions>; |
||||
export class MyValidators extends Validators { |
||||
static password(control: AbstractControl): MyValidationErrors | null { |
||||
const value = control.value; |
||||
|
||||
if (isEmptyInputValue(value)) { |
||||
return null; |
||||
} |
||||
|
||||
return isPassword(value) ? null : { mobile: { 'zh-cn': `长度 12 位以上，包含①大写字母、②小写字母、③数字、④特殊字符四种中的三种组合`, en: `Password phone number is not valid` } }; |
||||
} |
||||
|
||||
} |
||||
function isEmptyInputValue(value: NzSafeAny): boolean { |
||||
return value == null || value.length === 0; |
||||
} |
||||
function isPassword(value: string): boolean { |
||||
return typeof value === 'string' && /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{12,99}$/.test(value); |
||||
} |
||||
Loading…
Reference in new issue