Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-02-17 04:11:24 +01:00
Code Issues Projects Releases Wiki Activity

Add force refresh to new user form

Browse Source
This commit is contained in:
Deng, Qian 2018-01-30 20:42:39 +08:00
parent 11288ccc0c
commit 32793e2859
2 changed files with 58 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/ui_ng/src/app/shared/new-user-form/new-user-form.component.html
View File

@ -4,13 +4,14 @@
<div class="form-group form-group-override"> <div class="form-group form-group-override">
<label for="username" class="required form-group-label-override">{{'PROFILE.USER_NAME' | translate}}</label> <label for="username" class="required form-group-label-override">{{'PROFILE.USER_NAME' | translate}}</label>
<label for="username" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("username")'> <label for="username" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='getValidationState("username")'>
<input type="text" required pattern='[^"~#$%]+' maxLengthExt="20" #usernameInput="ngModel" name="username" [(ngModel)]="newUser.username" id="username" size="30" <input type="text" required pattern='[^"~#$%]+' maxLengthExt="20" #usernameInput="ngModel" name="username" [(ngModel)]="newUser.username" id="username" size="30"
(input)='handleValidation("username", false)' (input)='handleValidation("username", false)'
(blur)='handleValidation("username", true)'> (blur)='handleValidation("username", true)'>
<span class="tooltip-content"> <span class="tooltip-content">
{{usernameTooltip | translate}} {{usernameTooltip | translate}}
</span> </span>
</label><span class="spinner spinner-inline spinner-pos" [hidden]='isChecking("username")'></span> </label>
<span class="spinner spinner-inline spinner-pos" [hidden]='isChecking("username")'></span>
</div> </div>
<div class="form-group form-group-override"> <div class="form-group form-group-override">
<label for="email" class="required form-group-label-override">{{'PROFILE.EMAIL' | translate}}</label> <label for="email" class="required form-group-label-override">{{'PROFILE.EMAIL' | translate}}</label>

85
src/ui_ng/src/app/shared/new-user-form/new-user-form.component.ts
View File

@ -18,7 +18,8 @@ import {
Output, Output,
EventEmitter, EventEmitter,
Input, Input,
OnInit OnInit,
ChangeDetectorRef,
} from '@angular/core'; } from '@angular/core';
import { NgForm } from '@angular/forms'; import { NgForm } from '@angular/forms';
@ -33,33 +34,29 @@ import { SessionService } from '../../shared/session.service';
}) })
export class NewUserFormComponent implements AfterViewChecked, OnInit { export class NewUserFormComponent implements AfterViewChecked, OnInit {
newUser: User = new User();
@Input() isSelfRegistration: boolean = false;
newUserFormRef: NgForm; @Input() isSelfRegistration = false;
@ViewChild("newUserFrom") newUserForm: NgForm; // Notify the form value changes
//Notify the form value changes
@Output() valueChange = new EventEmitter<boolean>(); @Output() valueChange = new EventEmitter<boolean>();
@ViewChild("newUserFrom") newUserForm: NgForm;
newUser: User = new User();
newUserFormRef: NgForm;
confirmedPwd: string; confirmedPwd: string;
timerHandler: any;
validationStateMap: any = {};
mailAlreadyChecked: any = {};
userNameAlreadyChecked: any = {};
emailTooltip = 'TOOLTIP.EMAIL';
usernameTooltip = 'TOOLTIP.USER_NAME';
formValueChanged = false;
constructor(private session: SessionService) { } checkOnGoing: any = {};
constructor(private session: SessionService,
private ref: ChangeDetectorRef) { }
ngOnInit() { ngOnInit() {
this.resetState(); this.resetState();
} }
validationStateMap: any = {};
mailAlreadyChecked: any = {};
userNameAlreadyChecked: any = {};
emailTooltip: string = 'TOOLTIP.EMAIL';
usernameTooltip: string = 'TOOLTIP.USER_NAME';
formValueChanged: boolean = false;
checkOnGoing: any = {};
resetState(): void { resetState(): void {
this.mailAlreadyChecked = {}; this.mailAlreadyChecked = {};
this.userNameAlreadyChecked = {}; this.userNameAlreadyChecked = {};
@ -84,19 +81,33 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
return !this.checkOnGoing[key]; return !this.checkOnGoing[key];
} }
forceRefreshView(duration: number): void {
// Reset timer
if (this.timerHandler) {
clearInterval(this.timerHandler);
}
this.timerHandler = setInterval(() => this.ref.markForCheck(), 100);
setTimeout(() => {
if (this.timerHandler) {
clearInterval(this.timerHandler);
this.timerHandler = null;
}
}, duration);
}
getValidationState(key: string): boolean { getValidationState(key: string): boolean {
return !this.validationStateMap[key]; return !this.validationStateMap[key];
} }
handleValidation(key: string, flag: boolean): void { handleValidation(key: string, flag: boolean): void {
if (flag) { if (flag) {
//Checking // Checking
let cont = this.newUserForm.controls[key]; let cont = this.newUserForm.controls[key];
if (cont) { if (cont) {
this.validationStateMap[key] = cont.valid; this.validationStateMap[key] = cont.valid;
//Check email existing from backend // Check email existing from backend
if (cont.valid && this.formValueChanged) { if (cont.valid && this.formValueChanged) {
//Check username from backend // Check username from backend
if (key === "username" && this.newUser.username.trim() != "") { if (key === "username" && this.newUser.username.trim() != "") {
if (this.userNameAlreadyChecked[this.newUser.username.trim()]) { if (this.userNameAlreadyChecked[this.newUser.username.trim()]) {
this.validationStateMap[key] = !this.userNameAlreadyChecked[this.newUser.username.trim()].result; this.validationStateMap[key] = !this.userNameAlreadyChecked[this.newUser.username.trim()].result;
@ -116,17 +127,19 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
} }
this.userNameAlreadyChecked[this.newUser.username.trim()] = { this.userNameAlreadyChecked[this.newUser.username.trim()] = {
result: res result: res
}; //Tag it checked }; // Tag it checked
this.forceRefreshView(2000);
}) })
.catch(error => { .catch(error => {
this.checkOnGoing[key] = false; this.checkOnGoing[key] = false;
this.validationStateMap[key] = false;//Not valid @ backend this.validationStateMap[key] = false;// Not valid @ backend
this.forceRefreshView(2000);
}); });
return; return;
} }
//Check email from backend // Check email from backend
if (key === "email" && this.newUser.email.trim() != "") { if (key === "email" && this.newUser.email.trim() != "") {
if (this.mailAlreadyChecked[this.newUser.email.trim()]) { if (this.mailAlreadyChecked[this.newUser.email.trim()]) {
this.validationStateMap[key] = !this.mailAlreadyChecked[this.newUser.email.trim()].result; this.validationStateMap[key] = !this.mailAlreadyChecked[this.newUser.email.trim()].result;
@ -136,7 +149,7 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
return; return;
} }
//Mail changed // Mail changed
this.checkOnGoing[key] = true; this.checkOnGoing[key] = true;
this.session.checkUserExisting("email", this.newUser.email) this.session.checkUserExisting("email", this.newUser.email)
.then((res: boolean) => { .then((res: boolean) => {
@ -147,16 +160,18 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
} }
this.mailAlreadyChecked[this.newUser.email.trim()] = { this.mailAlreadyChecked[this.newUser.email.trim()] = {
result: res result: res
}; //Tag it checked }; // Tag it checked
this.forceRefreshView(2000);
}) })
.catch(error => { .catch(error => {
this.checkOnGoing[key] = false; this.checkOnGoing[key] = false;
this.validationStateMap[key] = false;//Not valid @ backend this.validationStateMap[key] = false;// Not valid @ backend
this.forceRefreshView(2000);
}); });
return; return;
} }
//Check password confirmation // Check password confirmation
if (key === "confirmPassword" || key === "newPassword") { if (key === "confirmPassword" || key === "newPassword") {
let cpKey = key === "confirmPassword" ? "newPassword" : "confirmPassword"; let cpKey = key === "confirmPassword" ? "newPassword" : "confirmPassword";
let peerCont = this.newUserForm.controls[cpKey]; let peerCont = this.newUserForm.controls[cpKey];
@ -167,7 +182,7 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
} }
} }
} else { } else {
//Reset // Reset
this.validationStateMap[key] = true; this.validationStateMap[key] = true;
if (key === "email") { if (key === "email") {
this.emailTooltip = "TOOLTIP.EMAIL"; this.emailTooltip = "TOOLTIP.EMAIL";
@ -189,7 +204,7 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
this.newUserForm.valid && this.newUserForm.valid &&
pwdEqualStatus && pwdEqualStatus &&
this.validationStateMap["username"] && this.validationStateMap["username"] &&
this.validationStateMap["email"];//Backend check should be valid as well this.validationStateMap["email"];// Backend check should be valid as well
} }
ngAfterViewChecked(): void { ngAfterViewChecked(): void {
@ -204,12 +219,12 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
} }
} }
//Return the current user data // Return the current user data
getData(): User { getData(): User {
return this.newUser; return this.newUser;
} }
//Reset form // Reset form
reset(): void { reset(): void {
this.resetState(); this.resetState();
if (this.newUserForm) { if (this.newUserForm) {
@ -217,7 +232,7 @@ export class NewUserFormComponent implements AfterViewChecked, OnInit {
} }
} }
//To check if form is empty // To check if form is empty
isEmpty(): boolean { isEmpty(): boolean {
return isEmptyForm(this.newUserForm); return isEmptyForm(this.newUserForm);
} }