Add force refresh to new user form

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

View File

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

View File

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