diff --git a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.html b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.html index 9a572741..2b60f0bf 100644 --- a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.html +++ b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.html @@ -1,115 +1,109 @@
- + -
-
-
-
- - 手机号 - - - - - - 验证码 - - - - - - - - - - - -
-
-
+
+ + 手机号 + + + + + + + + 验证码 + +
+ + + + +
+ + + + + + + +
-
-
-
- - 设置新密码 - - - - - - - - - -
-
- - -
- -
- - - 重复新密码 - - - - - - - - - -
-
- - -
- -
- - - - - - -
-
-
+
+ + 新的密码 + + + + 请输入确认密码! + + 8-16个字符，支持字母、数字、符号“_”和“-”，必须包含字母和数字! + + + + + + 确认密码 + + + + 请输入确认密码! + 两次输入的密码不一致! + + + + + + + + +
- +
@@ -126,19 +120,10 @@ 立即登录 + {{ 'app.register-result.back-home' | translate }} + -->
- - - - 获取验证码 - - 请等待{{ count }}s - - - \ No newline at end of file diff --git a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.less b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.less index 31408925..7c8d01de 100644 --- a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.less +++ b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.less @@ -1,51 +1,29 @@ +@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%; + width: 100%; + height: 100%; + margin: 100px auto; background-color: #fff; - margin : 100px auto; .myForm { - margin-top : 3rem; - margin-bottom: 5rem; + width: 25rem; + margin: 5rem auto; } .steps-content { - margin-top : 16px; - border : 1px dashed #e9e9e9; - border-radius : 6px; - background-color: #ffffff; - min-height : 250px; + min-height: 250px; + margin-top: 16px; + background-color: #fafafa; + border: 1px dashed #e9e9e9; + border-radius: 6px; // text-align: center; } @@ -56,31 +34,45 @@ button { margin-right: 8px; } + .step-title{ + padding: 8px; + } } } -.input-tootip { - width : 250px; - padding-left: 20px; - display : flex; - display : flex; - align-items : center; - .dot { - font-size: 21px; - color : #bdb8b8; - } +.content { + background-color: #f0f3f7; +} +.main { + max-width: 1200px; + margin: 0 auto; +} +.header { + background: #fff; +} +.layout { + min-height: 100vh; +} - .valid-icon { - color: rgb(217 0 27); +.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; + } +} - .invalid-icon { - color: rgb(82 196 26); - } - - .tootip-label { - margin-left: 8px; - font-size : 12px; - } -} \ No newline at end of file diff --git a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts index 70f2efb0..e919081d 100644 --- a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts +++ b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts @@ -1,6 +1,7 @@ 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'; @@ -8,9 +9,11 @@ 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; @@ -18,20 +21,18 @@ 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 {} + ngAfterViewInit(): void { + this.dun.init(); + } 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) { @@ -43,7 +44,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({ @@ -53,12 +54,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]], }); } @@ -75,7 +76,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { submitForm1() { for (const i in this.formGroup1.controls) { - if (this.formGroup1.controls[i]) { + if (true) { this.formGroup1.controls[i].markAsDirty(); this.formGroup1.controls[i].updateValueAndValidity(); } @@ -87,14 +88,13 @@ 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 (this.formGroup2.controls[i]) { + if (true) { this.formGroup2.controls[i].markAsDirty(); this.formGroup2.controls[i].updateValueAndValidity(); } @@ -145,22 +145,22 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { return; } if (this.formGroup1.value.phone) { - this.service - .request(`${this.service.$api_send_sms_by_mobile}`, { phoneNumber: 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 + 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(); }); diff --git a/src/app/routes/passport/services/passport.service.ts b/src/app/routes/passport/services/passport.service.ts index d3f38a0a..6acfa99f 100644 --- a/src/app/routes/passport/services/passport.service.ts +++ b/src/app/routes/passport/services/passport.service.ts @@ -1,3 +1,11 @@ +/* + * @Author: your name + * @Date: 2021-12-27 21:08:36 + * @LastEditTime: 2022-01-10 17:36:25 + * @LastEditors: your name + * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + * @FilePath: \tms-obc-web\src\app\routes\passport\services\passport.service.ts + */ import { Injectable, Injector } from '@angular/core'; import { _HttpClient } from '@delon/theme'; import { NzMessageService } from 'ng-zorro-antd/message'; @@ -10,7 +18,8 @@ import { EAFileUtil } from 'src/app/shared/utils/file.util'; export class PassportService extends BaseService { // 登录协议，服务订购协议 public $api_get_agreement = `/api/mdc/pbc/agreementInfo/getAgreementInfoByType?_allow_anonymous=true`; - + // 未登录账号发送验证码 + public $getAccountSMVerificationCode = `/api/mdc/cuc/userBasicInfo/forgetPassword/getAccountSMVerificationCode?_allow_anonymous=true`; constructor(public injector: Injector) { super(injector); } diff --git a/src/app/shared/services/business/user.service.ts b/src/app/shared/services/business/user.service.ts index c1d6ef52..4b62901d 100644 --- a/src/app/shared/services/business/user.service.ts +++ b/src/app/shared/services/business/user.service.ts @@ -2,7 +2,7 @@ * @Description: * @Author: wsm * @Date: 2021-06-22 10:25:33 - * @LastEditTime: 2021-12-08 16:56:20 + * @LastEditTime: 2022-01-10 17:47:07 * @LastEditors: Please set LastEditors * @Reference: */ @@ -37,13 +37,16 @@ export class EAUserService extends BaseService { // 获取协议信息 public $api_get_agreement_info = `/scce/pbc/pbc/agreementInfo/getAgreementInfoByType?_allow_anonymous=true`; // 未登录验证身份 - public $forgetPasswordVerifyIdentity = `/scm/cuc/cuc/userBasicInfo/forgetPassword/verifyIdentity?_allow_anonymous=true`; + public $forgetPasswordVerifyIdentity = `/api/mdc/cuc/userBasicInfo/forgetPassword/verifyIdentity?_allow_anonymous=true`; // 通过手机号发送短信验证码 public $api_send_sms_by_mobile = `/api/mdc/pbc/smsSend/getSMVerificationCode?_allow_anonymous=true&_allow_badcode=true`; // 未设置密码的用户设置用户密码 public $api_set_password = `/scce/cuc/cuc/userBasicInfo/setPassword`; // 凭证修改密码 - public $voucherUpdatePassword = `/scm/cuc/cuc/userBasicInfo/forgetPassword/voucherUpdatePassword?_allow_anonymous=true`; + // 未登录账号发送验证码 + public $getAccountSMVerificationCode = `/api/mdc/cuc/userBasicInfo/forgetPassword/getAccountSMVerificationCode?_allow_anonymous=true`; + // 凭证修改密码 + public $voucherUpdatePassword = `/api/mdc/cuc/userBasicInfo/forgetPassword/voucherUpdatePassword?_allow_anonymous=true`; // 检测用户名是否存在 public $api_validate_username_exists = `/tms/cuc/cuc/userBasicInfo/checkUserName?_allow_badcode=true`; // 获取当前用户信息