diff --git a/maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/login/login.component.html b/maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/login/login.component.html index c39df04c..6ee4d61d 100644 --- a/maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/login/login.component.html +++ b/maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/login/login.component.html @@ -42,7 +42,7 @@ - + diff --git a/maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/login/login.component.ts b/maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/login/login.component.ts index 943b7e96..b1262183 100644 --- a/maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/login/login.component.ts +++ b/maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/login/login.component.ts @@ -14,25 +14,34 @@ * limitations under the License. */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit, OnDestroy, AfterViewInit, Optional } from '@angular/core'; -import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { Router, ActivatedRoute } from '@angular/router'; -import { throwIfAlreadyLoaded } from '@core'; -import { ReuseTabService } from '@delon/abc/reuse-tab'; -import { SettingsService, _HttpClient } from '@delon/theme'; -import { environment } from '@env/environment'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; -import { NzMessageService } from 'ng-zorro-antd/message'; -import { NzTabChangeEvent } from 'ng-zorro-antd/tabs'; -import { finalize } from 'rxjs/operators'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Inject, + OnInit, + OnDestroy, + AfterViewInit, + Optional +} from '@angular/core'; +import {AbstractControl, FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {Router, ActivatedRoute} from '@angular/router'; +import {throwIfAlreadyLoaded} from '@core'; +import {ReuseTabService} from '@delon/abc/reuse-tab'; +import {SettingsService, _HttpClient} from '@delon/theme'; +import {environment} from '@env/environment'; +import {NzSafeAny} from 'ng-zorro-antd/core/types'; +import {NzMessageService} from 'ng-zorro-antd/message'; +import {NzTabChangeEvent} from 'ng-zorro-antd/tabs'; +import {finalize} from 'rxjs/operators'; -import { AuthnService } from '../../../service/authn.service'; -import { ImageCaptchaService } from '../../../service/image-captcha.service'; -import { SocialsProviderService } from '../../../service/socials-provider.service'; -import { CONSTS } from '../../../shared/consts'; +import {AuthnService} from '../../../service/authn.service'; +import {ImageCaptchaService} from '../../../service/image-captcha.service'; +import {SocialsProviderService} from '../../../service/socials-provider.service'; +import {CONSTS} from '../../../shared/consts'; -import { stringify } from 'querystring'; +import {stringify} from 'querystring'; @Component({ selector: 'passport-login', @@ -86,6 +95,7 @@ export class UserLoginComponent implements OnInit, OnDestroy { }); } + ngOnInit(): void { //set redirect_uri , is BASE64URL if (this.route.snapshot.queryParams[CONSTS.REDIRECT_URI]) { @@ -100,7 +110,7 @@ export class UserLoginComponent implements OnInit, OnDestroy { //init socials,state this.authnService.clear(); this.authnService - .get({ remember_me: localStorage.getItem(CONSTS.REMEMBER) }) + .get({remember_me: localStorage.getItem(CONSTS.REMEMBER)}) .pipe( finalize(() => { this.loading = false; @@ -124,12 +134,16 @@ export class UserLoginComponent implements OnInit, OnDestroy { } else { this.socials = res.data.socials; this.state = res.data.state; - this.captchaType = res.data.captchaType; - //init image captcha - this.imageCaptchaService.captcha({ state: this.state, captcha: this.captchaType }).subscribe(res => { - this.imageCaptcha = res.data.image; - this.cdr.detectChanges(); - }); + this.captchaType = res.data.captcha; + if (this.captchaType === 'NONE') { + this.form.get('captcha')?.clearValidators(); + } else { + //init image captcha + this.imageCaptchaService.captcha({state: this.state, captcha: this.captchaType}).subscribe(res => { + this.imageCaptcha = res.data.image; + this.cdr.detectChanges(); + }); + } } } }); @@ -160,17 +174,21 @@ export class UserLoginComponent implements OnInit, OnDestroy { } }); } + // #region fields get userName(): AbstractControl { return this.form.get('userName')!; } + get password(): AbstractControl { return this.form.get('password')!; } + get mobile(): AbstractControl { return this.form.get('mobile')!; } + get captcha(): AbstractControl { return this.form.get('captcha')!; } @@ -187,7 +205,7 @@ export class UserLoginComponent implements OnInit, OnDestroy { // #region get captcha getImageCaptcha(): void { - this.imageCaptchaService.captcha({ state: this.state, captcha: this.captchaType }).subscribe(res => { + this.imageCaptchaService.captcha({state: this.state, captcha: this.captchaType}).subscribe(res => { this.imageCaptcha = res.data.image; this.cdr.detectChanges(); }); @@ -196,11 +214,11 @@ export class UserLoginComponent implements OnInit, OnDestroy { //send sms sendOtpCode(): void { if (this.mobile.invalid) { - this.mobile.markAsDirty({ onlySelf: true }); - this.mobile.updateValueAndValidity({ onlySelf: true }); + this.mobile.markAsDirty({onlySelf: true}); + this.mobile.updateValueAndValidity({onlySelf: true}); return; } - this.authnService.produceOtp({ mobile: this.mobile.value }).subscribe(res => { + this.authnService.produceOtp({mobile: this.mobile.value}).subscribe(res => { if (res.code !== 0) { this.msg.success(`发送失败`); } @@ -302,7 +320,7 @@ export class UserLoginComponent implements OnInit, OnDestroy { this.qrScanDingtalk(res.data); } else if (this.socials.qrScan === 'maxkey') { this.qrScanMaxkey(res.data); - }else if (this.socials.qrScan === 'feishu') { + } else if (this.socials.qrScan === 'feishu') { this.qrScanFeishu(res.data); } } @@ -372,30 +390,31 @@ export class UserLoginComponent implements OnInit, OnDestroy { height: '400' }); } + // #region QR Scan end qrScanMaxkey(data: any) { // @ts-ignore - document.getElementById("div_qrcodelogin").innerHTML=''; + document.getElementById("div_qrcodelogin").innerHTML = ''; // @ts-ignore var qrcode = new QRCode("div_qrcodelogin", { width: 200, height: 200, - colorDark : "#000000", - colorLight : "#ffffff" + colorDark: "#000000", + colorLight: "#ffffff" }).makeCode(data.state); - //3分钟监听二维码 + //3分钟监听二维码 this.count = 90; this.interval$ = setInterval(() => { this.count -= 1; - if(this.loginType != 'qrscan') { + if (this.loginType != 'qrscan') { clearInterval(this.interval$); } if (this.count <= 0) { clearInterval(this.interval$); } //轮询发送监听请求 - this.socialsProviderService.qrcallback(this.socials.qrScan,data.state).subscribe(res => { + this.socialsProviderService.qrcallback(this.socials.qrScan, data.state).subscribe(res => { if (res.code === 0) { // 清空路由复用信息 this.reuseTabService.clear();