Commit da3ebdcd authored by Steven Zou's avatar Steven Zou
Browse files

merge ui_ng

parent c1d9d682
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = 0
trim_trailing_whitespace = true
# Indentation override
#[lib/**.js]
#[{package.json,.travis.yml}]
#[**/**.js]
coverage/
dist/
html-report/
node_modules/
typings/
**/*npm-debug.log.*
**/*yarn-error.log.*
.idea/
.DS_Store
language: node_js
node_js:
- "6.9"
addons:
apt:
sources:
- ubuntu-toolchain-r-test
packages:
- g++-4.8
...@@ -38,14 +38,7 @@ ...@@ -38,14 +38,7 @@
</div> </div>
</section> </section>
</form> </form>
<div style="height: 30px;"></div> <inline-alert (confirmEvt)="confirmCancel($event)"></inline-alert>
<clr-alert [clrAlertType]="'alert-danger'" [clrAlertClosable]="true" [(clrAlertClosed)]="alertClose">
<div class="alert-item">
<span class="alert-text">
{{errorMessage}}
</span>
</div>
</clr-alert>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<span class="spinner spinner-inline" style="top:8px;" [hidden]="showProgress === false"></span> <span class="spinner spinner-inline" style="top:8px;" [hidden]="showProgress === false"></span>
......
...@@ -3,6 +3,10 @@ import { NgForm } from '@angular/forms'; ...@@ -3,6 +3,10 @@ import { NgForm } from '@angular/forms';
import { SessionUser } from '../../shared/session-user'; import { SessionUser } from '../../shared/session-user';
import { SessionService } from '../../shared/session.service'; import { SessionService } from '../../shared/session.service';
import { MessageService } from '../../global-message/message.service';
import { AlertType, httpStatusCode } from '../../shared/shared.const';
import { errorHandler, accessErrorHandler } from '../../shared/shared.utils';
import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
@Component({ @Component({
selector: "account-settings-modal", selector: "account-settings-modal",
...@@ -13,43 +17,52 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked { ...@@ -13,43 +17,52 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
opened: boolean = false; opened: boolean = false;
staticBackdrop: boolean = true; staticBackdrop: boolean = true;
account: SessionUser; account: SessionUser;
error: any; error: any = null;
alertClose: boolean = true; originalStaticData: SessionUser;
private isOnCalling: boolean = false; private isOnCalling: boolean = false;
private formValueChanged: boolean = false; private formValueChanged: boolean = false;
accountFormRef: NgForm; accountFormRef: NgForm;
@ViewChild("accountSettingsFrom") accountForm: NgForm; @ViewChild("accountSettingsFrom") accountForm: NgForm;
@ViewChild(InlineAlertComponent)
private inlineAlert: InlineAlertComponent;
constructor(private session: SessionService) { } constructor(
private session: SessionService,
private msgService: MessageService) { }
ngOnInit(): void { ngOnInit(): void {
//Value copy //Value copy
this.account = Object.assign({}, this.session.getCurrentUser()); this.account = Object.assign({}, this.session.getCurrentUser());
} }
private isUserDataChange(): boolean {
if (!this.originalStaticData || !this.account) {
return false;
}
for (var prop in this.originalStaticData) {
if (this.originalStaticData[prop]) {
if (this.account[prop]) {
if (this.originalStaticData[prop] != this.account[prop]) {
return true;
}
}
}
}
return false;
}
public get isValid(): boolean { public get isValid(): boolean {
return this.accountForm && this.accountForm.valid; return this.accountForm && this.accountForm.valid && this.error === null;
} }
public get showProgress(): boolean { public get showProgress(): boolean {
return this.isOnCalling; return this.isOnCalling;
} }
public get errorMessage(): string {
if(this.error){
if(this.error.message){
return this.error.message;
}else{
if(this.error._body){
return this.error._body;
}
}
}
return "";
}
ngAfterViewChecked(): void { ngAfterViewChecked(): void {
if (this.accountFormRef != this.accountForm) { if (this.accountFormRef != this.accountForm) {
this.accountFormRef = this.accountForm; this.accountFormRef = this.accountForm;
...@@ -59,12 +72,15 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked { ...@@ -59,12 +72,15 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
this.error = null; this.error = null;
} }
this.formValueChanged = true; this.formValueChanged = true;
this.inlineAlert.close();
}); });
} }
} }
} }
open() { open() {
//Keep the initial data for future diff
this.originalStaticData = Object.assign({}, this.session.getCurrentUser());
this.account = Object.assign({}, this.session.getCurrentUser()); this.account = Object.assign({}, this.session.getCurrentUser());
this.formValueChanged = false; this.formValueChanged = false;
...@@ -72,7 +88,18 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked { ...@@ -72,7 +88,18 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
} }
close() { close() {
this.opened = false; if (this.formValueChanged) {
if (!this.isUserDataChange()) {
this.opened = false;
} else {
//Need user confirmation
this.inlineAlert.showInlineConfirmation({
message: "ALERT.FORM_CHANGE_CONFIRMATION"
});
}
} else {
this.opened = false;
}
} }
submit() { submit() {
...@@ -92,12 +119,22 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked { ...@@ -92,12 +119,22 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
.then(() => { .then(() => {
this.isOnCalling = false; this.isOnCalling = false;
this.close(); this.close();
this.msgService.announceMessage(200, "PROFILE.SAVE_SUCCESS", AlertType.SUCCESS);
}) })
.catch(error => { .catch(error => {
this.isOnCalling = false; this.isOnCalling = false;
this.error = error; this.error = error;
this.alertClose = false; if(accessErrorHandler(error, this.msgService)){
this.opened = false;
}else{
this.inlineAlert.showInlineError(error);
}
}); });
} }
confirmCancel(): void {
this.inlineAlert.close();
this.opened = false;
}
} }
\ No newline at end of file
...@@ -6,6 +6,9 @@ import { SignInComponent } from './sign-in/sign-in.component'; ...@@ -6,6 +6,9 @@ import { SignInComponent } from './sign-in/sign-in.component';
import { PasswordSettingComponent } from './password/password-setting.component'; import { PasswordSettingComponent } from './password/password-setting.component';
import { AccountSettingsModalComponent } from './account-settings/account-settings-modal.component'; import { AccountSettingsModalComponent } from './account-settings/account-settings-modal.component';
import { SharedModule } from '../shared/shared.module'; import { SharedModule } from '../shared/shared.module';
import { SignUpComponent } from './sign-up/sign-up.component';
import { ForgotPasswordComponent } from './password/forgot-password.component';
import { ResetPasswordComponent } from './password/reset-password.component';
import { PasswordSettingService } from './password/password-setting.service'; import { PasswordSettingService } from './password/password-setting.service';
...@@ -15,9 +18,19 @@ import { PasswordSettingService } from './password/password-setting.service'; ...@@ -15,9 +18,19 @@ import { PasswordSettingService } from './password/password-setting.service';
RouterModule, RouterModule,
SharedModule SharedModule
], ],
declarations: [SignInComponent, PasswordSettingComponent, AccountSettingsModalComponent], declarations: [
exports: [SignInComponent, PasswordSettingComponent, AccountSettingsModalComponent], SignInComponent,
PasswordSettingComponent,
AccountSettingsModalComponent,
SignUpComponent,
ForgotPasswordComponent,
ResetPasswordComponent],
exports: [
SignInComponent,
PasswordSettingComponent,
AccountSettingsModalComponent,
ResetPasswordComponent],
providers: [PasswordSettingService] providers: [PasswordSettingService]
}) })
export class AccountModule { } export class AccountModule { }
\ No newline at end of file
<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true">
<h3 class="modal-title">{{'RESET_PWD.TITLE' | translate}}</h3>
<label class="modal-title reset-modal-title-override">{{'RESET_PWD.CAPTION' | translate}}</label>
<div class="modal-body" style="overflow-y: hidden;">
<form #forgotPasswordFrom="ngForm" class="form">
<section class="form-block">
<div class="form-group">
<label for="reset_pwd_email" class="col-md-4 required">{{'RESET_PWD.EMAIL' | translate}}</label>
<label for="reset_pwd_email" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]="validationState === false">
<input name="reset_pwd_email" type="text" #eamilInput="ngModel" [(ngModel)]="email"
required
pattern='^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$'
id="reset_pwd_email"
size="36"
(input)="handleValidation(true)"
(focusout)="handleValidation(false)">
<span class="tooltip-content">
{{'TOOLTIP.EMAIL' | translate}}
</span>
</label>
</div>
</section>
</form>
<inline-alert></inline-alert>
<div style="height: 30px;"></div>
</div>
<div class="modal-footer">
<span class="spinner spinner-inline" style="top:8px;" [hidden]="showProgress === false"></span>
<button type="button" class="btn btn-outline" (click)="close()">{{'BUTTON.CANCEL' | translate}}</button>
<button type="button" class="btn btn-primary" [disabled]="!isValid || showProgress" (click)="send()">{{'BUTTON.SEND' | translate}}</button>
</div>
</clr-modal>
\ No newline at end of file
import { Component } from '@angular/core'; import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { PasswordSettingService } from './password-setting.service';
import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
@Component({ @Component({
selector: 'forgot-password', selector: 'forgot-password',
templateUrl: "forgot-password.component.html" templateUrl: "forgot-password.component.html",
styleUrls: ['password.component.css']
}) })
export class ForgotPasswordComponent { export class ForgotPasswordComponent {
// constructor(private router: Router){} opened: boolean = false;
private onGoing: boolean = false;
private email: string = "";
private validationState: boolean = true;
private forceValid: boolean = true;
@ViewChild("forgotPasswordFrom") forgotPwdForm: NgForm;
@ViewChild(InlineAlertComponent)
private inlineAlert: InlineAlertComponent;
constructor(private pwdService: PasswordSettingService) { }
public get showProgress(): boolean {
return this.onGoing;
}
public get isValid(): boolean {
return this.forgotPwdForm && this.forgotPwdForm.valid && this.forceValid;
}
public open(): void {
this.opened = true;
this.validationState = true;
this.forceValid = true;
this.forgotPwdForm.resetForm();
}
public close(): void {
this.opened = false;
}
public send(): void {
//Double confirm to avoid improper situations
if (!this.email) {
return;
}
if (!this.isValid) {
return;
}
this.onGoing = true;
this.pwdService.sendResetPasswordMail(this.email)
.then(response => {
this.onGoing = false;
this.forceValid = false;//diable the send button
this.inlineAlert.showInlineSuccess({
message: "RESET_PWD.SUCCESS"
});
})
.catch(error => {
this.onGoing = false;
this.inlineAlert.showInlineError(error);
})
}
public handleValidation(flag: boolean): void {
if (flag) {
this.validationState = true;
} else {
this.validationState = this.isValid;
}
}
} }
\ No newline at end of file
...@@ -45,6 +45,7 @@ ...@@ -45,6 +45,7 @@
</label> </label>
</div> </div>
</section> </section>
<inline-alert (confirmEvt)="confirmCancel($event)"></inline-alert>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
......
...@@ -4,6 +4,10 @@ import { NgForm } from '@angular/forms'; ...@@ -4,6 +4,10 @@ import { NgForm } from '@angular/forms';
import { PasswordSettingService } from './password-setting.service'; import { PasswordSettingService } from './password-setting.service';
import { SessionService } from '../../shared/session.service'; import { SessionService } from '../../shared/session.service';
import { AlertType, httpStatusCode } from '../../shared/shared.const';
import { MessageService } from '../../global-message/message.service';
import { errorHandler, isEmptyForm, accessErrorHandler } from '../../shared/shared.utils';
import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
@Component({ @Component({
selector: 'password-setting', selector: 'password-setting',
...@@ -14,19 +18,27 @@ export class PasswordSettingComponent implements AfterViewChecked { ...@@ -14,19 +18,27 @@ export class PasswordSettingComponent implements AfterViewChecked {
oldPwd: string = ""; oldPwd: string = "";
newPwd: string = ""; newPwd: string = "";
reNewPwd: string = ""; reNewPwd: string = "";
error: any = null;
private formValueChanged: boolean = false; private formValueChanged: boolean = false;
private onCalling: boolean = false; private onCalling: boolean = false;
pwdFormRef: NgForm; pwdFormRef: NgForm;
@ViewChild("changepwdForm") pwdForm: NgForm; @ViewChild("changepwdForm") pwdForm: NgForm;
constructor(private passwordService: PasswordSettingService, private session: SessionService){} @ViewChild(InlineAlertComponent)
private inlineAlert: InlineAlertComponent;
constructor(
private passwordService: PasswordSettingService,
private session: SessionService,
private msgService: MessageService) { }
//If form is valid //If form is valid
public get isValid(): boolean { public get isValid(): boolean {
if (this.pwdForm && this.pwdForm.form.get("newPassword")) { if (this.pwdForm && this.pwdForm.form.get("newPassword")) {
return this.pwdForm.valid && return this.pwdForm.valid &&
this.pwdForm.form.get("newPassword").value === this.pwdForm.form.get("reNewPassword").value; (this.pwdForm.form.get("newPassword").value === this.pwdForm.form.get("reNewPassword").value) &&
this.error === null;
} }
return false; return false;
} }
...@@ -45,6 +57,8 @@ export class PasswordSettingComponent implements AfterViewChecked { ...@@ -45,6 +57,8 @@ export class PasswordSettingComponent implements AfterViewChecked {
if (this.pwdFormRef) { if (this.pwdFormRef) {
this.pwdFormRef.valueChanges.subscribe(data => { this.pwdFormRef.valueChanges.subscribe(data => {
this.formValueChanged = true; this.formValueChanged = true;
this.error = null;
this.inlineAlert.close();
}); });
} }
} }
...@@ -54,10 +68,26 @@ export class PasswordSettingComponent implements AfterViewChecked { ...@@ -54,10 +68,26 @@ export class PasswordSettingComponent implements AfterViewChecked {
open(): void { open(): void {
this.opened = true; this.opened = true;
this.pwdForm.reset(); this.pwdForm.reset();
this.formValueChanged = false;
} }
//Close the moal dialog //Close the moal dialog
close(): void { close(): void {
if (this.formValueChanged) {
if (isEmptyForm(this.pwdForm)) {
this.opened = false;
} else {
//Need user confirmation
this.inlineAlert.showInlineConfirmation({
message: "ALERT.FORM_CHANGE_CONFIRMATION"
});
}
} else {
this.opened = false;
}
}
confirmCancel(): void {
this.opened = false; this.opened = false;
} }
...@@ -73,26 +103,31 @@ export class PasswordSettingComponent implements AfterViewChecked { ...@@ -73,26 +103,31 @@ export class PasswordSettingComponent implements AfterViewChecked {
//Double confirm session is valid //Double confirm session is valid
let cUser = this.session.getCurrentUser(); let cUser = this.session.getCurrentUser();
if(!cUser){ if (!cUser) {
return; return;
} }
//Call service //Call service
this.onCalling = true; this.onCalling = true;
this.passwordService.changePassword(cUser.user_id, this.passwordService.changePassword(cUser.user_id,
{ {
new_password: this.pwdForm.value.newPassword, new_password: this.pwdForm.value.newPassword,
old_password: this.pwdForm.value.oldPassword old_password: this.pwdForm.value.oldPassword
}) })
.then(() => { .then(() => {
this.onCalling = false; this.onCalling = false;
this.close(); this.close();
}) this.msgService.announceMessage(200, "CHANGE_PWD.SAVE_SUCCESS", AlertType.SUCCESS);
.catch(error => { })
this.onCalling = false; .catch(error => {
console.error(error);//TODO: this.onCalling = false;
}); this.error = error;
//TODO:publish the successful message to general messae box if(accessErrorHandler(error, this.msgService)){
this.opened = false;