登录模块
This commit is contained in:
Taric Xin
@ -0,0 +1,56 @@
|
||||
<div class="body-box">
|
||||
<div></div>
|
||||
<div>
|
||||
<img class="box-header" [src]="imageUrl" alt="" srcset="" />
|
||||
<div nz-row class="box-content">
|
||||
<div nz-col nzXs="0" nzSm="0" nzMd="0" nzLg="12"
|
||||
[style]="{ 'background-image': 'url(./assets/images/user/login-image.png)', 'background-size': '100%' }"></div>
|
||||
<div nz-col nzXs="22" nzSm="20" nzMd="16" nzLg="12" class="form-box">
|
||||
<h1 class="title">运营管理后台</h1>
|
||||
<nz-tabset (nzSelectChange)="switch($event)">
|
||||
<nz-tab nzTitle="手机号登录">
|
||||
<sf #captchaSF [layout]="'vertical'" [schema]="captchaSchema" [ui]="captchaUI" [button]="'none'">
|
||||
<ng-template sf-template="smsCode" let-me let-ui="ui" let-schema="schema">
|
||||
<nz-input-group nzSearch [nzPrefix]="prefixTemplateMail" [nzSuffix]="suffixTemplateInfo">
|
||||
<input nz-input type="text" placeholder="请输入验证码" [attr.id]="me.id" [disabled]="me.disabled"
|
||||
[attr.disabled]="me.disabled" [nzSize]="ui.size" [ngModel]="me.formProperty.value"
|
||||
(ngModelChange)="me.setValue($event)" />
|
||||
</nz-input-group>
|
||||
<ng-template #prefixTemplateMail>
|
||||
<i nz-icon nzType="mail"></i>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</sf>
|
||||
</nz-tab>
|
||||
<nz-tab nzTitle="账户密码登录">
|
||||
<sf #accountSF [layout]="'vertical'" [schema]="accountSchema" [ui]="accountUI" [button]="'none'"></sf>
|
||||
</nz-tab>
|
||||
</nz-tabset>
|
||||
<button nz-button type="button" nzType="primary" nzSize="large" (click)="submit()"
|
||||
[nzLoading]="userSrv?.http?.loading" nzBlock style="border-radius: 4px">
|
||||
登录
|
||||
</button>
|
||||
<div class="other">
|
||||
<p>
|
||||
登录即代表您同意 <a target="_blank" [routerLink]="['/passport/agreement']" [queryParams]="{ type: 1 }">《平台服务协议》</a>
|
||||
<a target="_blank" [queryParams]="{ type: 2 }" [routerLink]="['/passport/agreement']">《隐私政策》</a>
|
||||
</p>
|
||||
<div class="other text-right">
|
||||
<a class="forgetPwd" routerLink="/passport/retrieve-password">忘记密码</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<!-- Copyright © 2015-2020 星链380star.com 版权所有 | 粤ICP备16120630号 -->
|
||||
<p [innerHTML]="copyright"></p>
|
||||
</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>
|
||||
103
src/app/routes/passport/components/login/login.component.less
Normal file
103
src/app/routes/passport/components/login/login.component.less
Normal file
@ -0,0 +1,103 @@
|
||||
.body-box {
|
||||
display : flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction : column;
|
||||
flex-direction : column;
|
||||
justify-content : space-between;
|
||||
width : 100%;
|
||||
max-width : 1080px;
|
||||
height : 100%;
|
||||
margin : auto;
|
||||
padding : 50px 0 80px;
|
||||
-webkit-box-orient : vertical;
|
||||
|
||||
.box-header {
|
||||
max-width : 240px;
|
||||
max-height : 48px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
width : 100%;
|
||||
height: 560px;
|
||||
|
||||
.form-box {
|
||||
margin : 0 auto;
|
||||
padding : 40px 88px 40px;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
margin-bottom: 30px;
|
||||
color : #1890ff;
|
||||
font-weight : 800;
|
||||
font-size : 32px;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
.other {
|
||||
margin-top : 24px;
|
||||
line-height: 22px;
|
||||
text-align : left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
padding-top: 70px;
|
||||
color : #626262;
|
||||
font-weight: 400;
|
||||
font-size : 14px;
|
||||
text-align : center;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
passport-login {
|
||||
background-color: #f0f4f7;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep {
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* 火狐 */
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
// tabs样式调整
|
||||
.ant-tabs-nav-list {
|
||||
justify-content: space-between;
|
||||
width : 281px;
|
||||
margin : auto;
|
||||
|
||||
.ant-tabs-tab-btn {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-top>.ant-tabs-nav {
|
||||
margin: 0 0 30px 0;
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-top>.ant-tabs-nav::before {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
nz-input-group {
|
||||
height : 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
224
src/app/routes/passport/components/login/login.component.ts
Normal file
224
src/app/routes/passport/components/login/login.component.ts
Normal file
@ -0,0 +1,224 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, Optional, ViewChild } from '@angular/core';
|
||||
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { StartupService } from '@core';
|
||||
import { ReuseTabService } from '@delon/abc/reuse-tab';
|
||||
import { DA_SERVICE_TOKEN, ITokenService, SocialOpenType, SocialService } from '@delon/auth';
|
||||
import { SFComponent, SFSchema, SFUISchema, SFStringWidgetSchema } from '@delon/form';
|
||||
import { SettingsService, _HttpClient } from '@delon/theme';
|
||||
import { environment } from '@env/environment';
|
||||
import { NzTabChangeEvent } from 'ng-zorro-antd/tabs';
|
||||
import { interval } from 'rxjs';
|
||||
import { finalize, take } from 'rxjs/operators';
|
||||
import { DunHelper } from 'src/app/shared/components/captcha';
|
||||
import { EAUserService, EACaptchaService, EAValidateService, EAPlatformService } from 'src/app/shared/services';
|
||||
|
||||
@Component({
|
||||
selector: 'passport-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrls: ['./login.component.less'],
|
||||
host: {
|
||||
'[class.ant-row]': 'true',
|
||||
'[class.pro-passport]': 'true'
|
||||
}
|
||||
})
|
||||
export class UserLoginComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('accountSF', { static: false })
|
||||
accountSF!: SFComponent;
|
||||
@ViewChild('captchaSF', { static: false })
|
||||
captchaSF!: SFComponent;
|
||||
accountSchema!: SFSchema;
|
||||
accountUI!: SFUISchema;
|
||||
captchaSchema!: SFSchema;
|
||||
captchaUI!: SFUISchema;
|
||||
count = 0;
|
||||
type = 0;
|
||||
// vcode = null;
|
||||
|
||||
imageUrl = './assets/images/user/logo.png';
|
||||
copyright = '';
|
||||
constructor(
|
||||
public userSrv: EAUserService,
|
||||
private captchaSrv: EACaptchaService,
|
||||
private validateSrv: EAValidateService,
|
||||
private dunHelper: DunHelper,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private router: Router
|
||||
) {
|
||||
// this.vcode = this.platformSrv.getOperatorCode();
|
||||
// 加载copyright信息
|
||||
// this.userSrv
|
||||
// .request(this.platformSrv.$api_get_config, {
|
||||
// pageIndex: 1,
|
||||
// pageSize: 999,
|
||||
// })
|
||||
// .subscribe((res: any) => {
|
||||
// this.copyright = res?.records?.find((f: any) => f.configKey === 'website.copyright')?.configValue;
|
||||
// this.imageUrl = res?.records?.find((f: any) => f.configKey === 'platform.saas.logo')?.configValue;
|
||||
// });
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initAccountSF();
|
||||
this.initCaptchaSF();
|
||||
}
|
||||
|
||||
initAccountSF(): void {
|
||||
this.accountSchema = {
|
||||
properties: {
|
||||
username: {
|
||||
title: '',
|
||||
type: 'string',
|
||||
maxLength: 30,
|
||||
ui: {
|
||||
placeholder: '请输入您的账号',
|
||||
prefixIcon: 'user',
|
||||
size: 'large'
|
||||
} as SFStringWidgetSchema
|
||||
},
|
||||
password: {
|
||||
title: '',
|
||||
type: 'string',
|
||||
ui: {
|
||||
placeholder: '请输入您的密码',
|
||||
prefixIcon: 'lock',
|
||||
type: 'password',
|
||||
size: 'large'
|
||||
} as SFStringWidgetSchema
|
||||
}
|
||||
// sc: {
|
||||
// title: '',
|
||||
// type: 'string',
|
||||
// ui: {
|
||||
// hidden: !!this.vcode,
|
||||
// placeholder: '请输入安全码',
|
||||
// prefixIcon: 'safety',
|
||||
// size: 'large',
|
||||
// errors: {
|
||||
// required: '请输入安全码'
|
||||
// }
|
||||
// } as SFStringWidgetSchema,
|
||||
// default: this.vcode
|
||||
// }
|
||||
},
|
||||
required: ['username', 'password']
|
||||
};
|
||||
this.accountUI = {
|
||||
'*': { spanLabelFixed: 110, grid: { span: 24 } }
|
||||
};
|
||||
}
|
||||
|
||||
initCaptchaSF(): void {
|
||||
this.captchaSchema = {
|
||||
properties: {
|
||||
phone: {
|
||||
title: '',
|
||||
type: 'string',
|
||||
format: 'mobile',
|
||||
maxLength: 11,
|
||||
ui: {
|
||||
placeholder: '请输入您的手机号',
|
||||
prefixIcon: 'mobile',
|
||||
size: 'large',
|
||||
errors: { required: '请输入手机号！', format: '手机号格式错误' }
|
||||
} as SFStringWidgetSchema
|
||||
},
|
||||
smsCode: {
|
||||
title: '',
|
||||
type: 'string',
|
||||
maxLength: 6,
|
||||
ui: {
|
||||
widget: 'custom',
|
||||
size: 'large',
|
||||
errors: { required: '请输入验证码！', maxLength: '验证码错误' }
|
||||
}
|
||||
}
|
||||
// sc: {
|
||||
// title: '',
|
||||
// type: 'string',
|
||||
// ui: {
|
||||
// hidden: !!this.vcode,
|
||||
// placeholder: '请输入安全码',
|
||||
// prefixIcon: 'safety',
|
||||
// size: 'large',
|
||||
// errors: {
|
||||
// required: '请输入安全码'
|
||||
// }
|
||||
// } as SFStringWidgetSchema,
|
||||
// default: this.vcode
|
||||
// }
|
||||
},
|
||||
required: ['phone', 'smsCode']
|
||||
};
|
||||
this.captchaUI = {
|
||||
'*': { spanLabelFixed: 110, grid: { span: 24 } }
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
getCaptcha(): void {
|
||||
this.captchaSF.getProperty('/phone')?.updateValueAndValidity();
|
||||
const result = this.validateSrv.validateMobile(this.captchaSF.value.phone);
|
||||
// this.captchaSrv.sendSMSCaptchaByMobile();
|
||||
if (result) {
|
||||
this.captchaSrv.sendSMSCaptchaByMobile(this.captchaSF.value.phone).subscribe(res => {
|
||||
if (res.success && res.data.code === '1') {
|
||||
this.captchaSrv.msgSrv.success('发送验证码成功');
|
||||
this.createInterval();
|
||||
} else if (res.data.code === '503046') {
|
||||
this.dunHelper.popUp(this.captchaSF.value.phone).subscribe(_ => {
|
||||
this.createInterval();
|
||||
this.dunHelper.destory();
|
||||
});
|
||||
} else {
|
||||
this.captchaSrv.msgSrv.warning(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录
|
||||
*/
|
||||
submit(): void {
|
||||
if (this.type === 0) {
|
||||
this.captchaSF.validator({ emitError: true });
|
||||
if (!this.captchaSF.valid) {
|
||||
return;
|
||||
}
|
||||
// this.userSrv.loginByCaptcha(this.captchaSF.value.phone, this.captchaSF.value.smsCode, this.captchaSF.value.sc);
|
||||
} else {
|
||||
this.accountSF.validator({ emitError: true });
|
||||
if (!this.accountSF.valid) {
|
||||
return;
|
||||
// this.userSrv.loginByAccount(this.accountSF.value.username, this.accountSF.value.password, this.accountSF.value.sc);
|
||||
}
|
||||
}
|
||||
this.router.navigateByUrl('/');
|
||||
/* if (!this.accountSF.valid && !this.captchaSF.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.prototype.hasOwnProperty.call(value, 'username')
|
||||
? this.userSrv.loginByAccount(value.username, value.password)
|
||||
: this.userSrv.loginByCaptcha(value.phone, value.smsCode); */
|
||||
}
|
||||
|
||||
switch(ret: any) {
|
||||
this.type = ret.index;
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {}
|
||||
|
||||
private createInterval() {
|
||||
this.count = 59;
|
||||
interval(1000)
|
||||
.pipe(take(60))
|
||||
.subscribe(x => {
|
||||
this.count = 59 - (x + 1);
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="page-box">
|
||||
<div style="width: 90%; margin: 5rem auto">
|
||||
<h1 class="mb-md mt-md">
|
||||
{{ agreementContent?.typeName }}
|
||||
</h1>
|
||||
<p class="md">最新版本生效日期：{{ agreementContent?.modifyTime }}</p>
|
||||
<div [innerHTML]="agreementContent?.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
@import '~@delon/theme/index';
|
||||
|
||||
:host {
|
||||
.page-box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { OrderAgreementComponent } from './order-agreement.component';
|
||||
|
||||
describe('OrderAgreementComponent', () => {
|
||||
let component: OrderAgreementComponent;
|
||||
let fixture: ComponentFixture<OrderAgreementComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [OrderAgreementComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(OrderAgreementComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,26 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
import { PassportService } from '../../services/passport.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-buyer-components-serve-order-agreement',
|
||||
templateUrl: './order-agreement.component.html',
|
||||
styleUrls: ['./order-agreement.component.less']
|
||||
})
|
||||
export class OrderAgreementComponent implements OnInit {
|
||||
agreementContent: any;
|
||||
type = 2;
|
||||
constructor(private ar: ActivatedRoute, private service: PassportService) {
|
||||
ar.queryParams.subscribe((params: Params) => {
|
||||
this.type = params.type || 2;
|
||||
});
|
||||
}
|
||||
ngOnInit() {
|
||||
this.service.request(this.service.$api_get_agreement, { type: this.type }).subscribe(res => {
|
||||
if (res) {
|
||||
console.log(res);
|
||||
this.agreementContent = res;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,144 @@
|
||||
<div class="main">
|
||||
<page-grid>
|
||||
<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">
|
||||
<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">
|
||||
<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;margin-bottom: 5rem;">
|
||||
<ng-template #title>
|
||||
<div class="title" style="font-size: 24px">
|
||||
<!-- {{ 'app.register-result.msg' | translate: params }} -->
|
||||
<span *ngIf="result">密码设置成功！</span>
|
||||
<span *ngIf="!result">密码设置失败！</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #subTitle>
|
||||
<div style="font-size: 14px">请牢记您的新密码，3秒后自动跳转至登录页...</div>
|
||||
</ng-template>
|
||||
|
||||
<button routerLink="/passport/login" nz-button nzType="primary">
|
||||
<!-- {{ 'app.register-result.back-home' | translate }} -->
|
||||
立即登录
|
||||
</button>
|
||||
<!-- <button routerLink="/" nz-button nzSize="large">
|
||||
{{ '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>
|
||||
@ -0,0 +1,86 @@
|
||||
: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;
|
||||
}
|
||||
|
||||
page-grid {
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
background-color: #fff;
|
||||
margin : 100px auto;
|
||||
|
||||
.myForm {
|
||||
margin-top : 3rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin-top : 16px;
|
||||
border : 1px dashed #e9e9e9;
|
||||
border-radius : 6px;
|
||||
background-color: #ffffff;
|
||||
min-height : 250px;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
.steps-action {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-tootip {
|
||||
width : 250px;
|
||||
padding-left: 20px;
|
||||
display : flex;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
|
||||
.dot {
|
||||
font-size: 21px;
|
||||
color : #bdb8b8;
|
||||
}
|
||||
|
||||
.valid-icon {
|
||||
color: rgb(217 0 27);
|
||||
}
|
||||
|
||||
.invalid-icon {
|
||||
color: rgb(82 196 26);
|
||||
}
|
||||
|
||||
.tootip-label {
|
||||
margin-left: 8px;
|
||||
font-size : 12px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,196 @@
|
||||
import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { interval } from 'rxjs';
|
||||
import { take } from 'rxjs/operators';
|
||||
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']
|
||||
})
|
||||
export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
|
||||
step = 0;
|
||||
count = 0;
|
||||
interval$: any;
|
||||
formGroup1!: FormGroup;
|
||||
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 {}
|
||||
|
||||
ngOnInit() {
|
||||
this.initForm();
|
||||
}
|
||||
|
||||
initForm() {
|
||||
this.confirmPasswordValidator = control => {
|
||||
if (!control.value) {
|
||||
return { error: true, required: true };
|
||||
} else if (control.value !== this.formGroup2.controls.passWord.value) {
|
||||
return { passWordTo: true, error: true };
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
this.formGroup1 = this.fb.group({
|
||||
phone: [null, [Validators.required]],
|
||||
smsVerifyCode: [null, [Validators.required]],
|
||||
voucher: [null, [Validators.required]]
|
||||
});
|
||||
|
||||
this.formGroup2 = this.fb.group({
|
||||
passWord: [
|
||||
null,
|
||||
[
|
||||
Validators.required,
|
||||
Validators.maxLength(16),
|
||||
Validators.minLength(8),
|
||||
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]]
|
||||
});
|
||||
}
|
||||
|
||||
formSubmit() {
|
||||
switch (this.step) {
|
||||
case 0:
|
||||
this.submitForm1();
|
||||
break;
|
||||
case 1:
|
||||
this.submitForm2();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
submitForm1() {
|
||||
for (const i in this.formGroup1.controls) {
|
||||
if (this.formGroup1.controls[i]) {
|
||||
this.formGroup1.controls[i].markAsDirty();
|
||||
this.formGroup1.controls[i].updateValueAndValidity();
|
||||
}
|
||||
}
|
||||
if (this.formGroup1.value.smsVerifyCode.length !== 6) {
|
||||
this.service.msgSrv.error('请输入6位验证码');
|
||||
return;
|
||||
}
|
||||
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
|
||||
},
|
||||
{ onlySelf: true }
|
||||
);
|
||||
this.step = 1;
|
||||
// clearInterval(this.interval$);
|
||||
} else {
|
||||
this.service.msgSrv.warning(res?.msg || '操作超时，请重新开始找回密码的流程！');
|
||||
// this.refreshPage();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
submitForm2() {
|
||||
for (const i in this.formGroup2.controls) {
|
||||
if ( this.formGroup2.controls[i]) {
|
||||
this.formGroup2.controls[i].markAsDirty();
|
||||
this.formGroup2.controls[i].updateValueAndValidity();
|
||||
}
|
||||
}
|
||||
|
||||
if (this.formGroup2.valid) {
|
||||
this.service.http
|
||||
.post(this.service.$voucherUpdatePassword, this.formGroup2.value)
|
||||
.subscribe((res: { success: any; data: boolean; msg: any }) => {
|
||||
if (res.success && res.data === true) {
|
||||
this.result = true;
|
||||
this.step = 2;
|
||||
setTimeout(() => {
|
||||
//this.service.logout();
|
||||
this.router.navigateByUrl('/passport/login');
|
||||
}, 3000);
|
||||
} else {
|
||||
this.result = false;
|
||||
this.service.msgSrv.warning(res.msg || '密码修改失败！');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getCaptcha() {
|
||||
for (const i in this.formGroup1.controls) {
|
||||
if (true) {
|
||||
this.formGroup1.controls[i].markAsDirty();
|
||||
this.formGroup1.controls[i].updateValueAndValidity();
|
||||
}
|
||||
}
|
||||
if (this.formGroup1.value.phone.length !== 11) {
|
||||
this.service.msgSrv.error('请输入11位手机号');
|
||||
return;
|
||||
}
|
||||
if (this.formGroup1.value.phone) {
|
||||
this.service.http
|
||||
.post(`${this.service.$getAccountSMVerificationCode}`, null, { phoneNumber: this.formGroup1.value.phone })
|
||||
.subscribe((res: any) => {
|
||||
// console.log(res, 'res');
|
||||
if (res.success) {
|
||||
this.formGroup1.patchValue(
|
||||
{
|
||||
voucher: res?.data?.voucher
|
||||
},
|
||||
{ onlySelf: true }
|
||||
);
|
||||
if (res?.data?.code === '1') {
|
||||
this.codeCountDown();
|
||||
this.service.msgSrv.success('验证码已发送到该账号绑定的手机号！');
|
||||
} else if (res?.data?.code === '503046') {
|
||||
// this.dun.popUp();
|
||||
} else {
|
||||
this.service.msgSrv.error('获取验证码失败!');
|
||||
}
|
||||
} else {
|
||||
this.service.msgSrv.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* code倒计时 */
|
||||
codeCountDown() {
|
||||
this.count = 59;
|
||||
interval(1000)
|
||||
.pipe(take(60))
|
||||
.subscribe(x => {
|
||||
this.count = 59 - (x + 1);
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
}
|
||||
/* 网易盾验证通过 */
|
||||
captchaDone(validate: any) {
|
||||
this.codeCountDown();
|
||||
}
|
||||
|
||||
refreshPage() {
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
validateConfirmPassword(): void {
|
||||
setTimeout(() => this.formGroup2.controls.passWordTo.updateValueAndValidity());
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user