From 07e142bd533738fa4d6a400315e0281bbf64d44d Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Tue, 6 Sep 2016 14:35:03 +0100 Subject: [PATCH 1/4] Extend the validation form --- .../components/alfresco-login.component.ts | 164 ++++++++++++------ .../src/models/form-outcome-event.model.ts | 39 +++++ 2 files changed, 152 insertions(+), 51 deletions(-) create mode 100644 ng2-components/ng2-alfresco-login/src/models/form-outcome-event.model.ts diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts index a11c02516a..1aeaf7f869 100644 --- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts +++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts @@ -15,14 +15,15 @@ * limitations under the License. */ -import {Component, Input, Output, EventEmitter} from '@angular/core'; -import {FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators} from '@angular/common'; +import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; +import { FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators } from '@angular/common'; import { AlfrescoTranslationService, AlfrescoPipeTranslate, AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core'; +import { FormOutcomeEvent } from '../models/form-outcome-event.model'; declare let componentHandler: any; declare let __moduleName: string; @@ -36,7 +37,7 @@ declare let __moduleName: string; pipes: [AlfrescoPipeTranslate] }) -export class AlfrescoLoginComponent { +export class AlfrescoLoginComponent implements OnInit { baseComponentPath = __moduleName.replace('/alfresco-login.component.js', ''); @@ -49,7 +50,7 @@ export class AlfrescoLoginComponent { backgroundImageUrl: string; @Input() - providers: string ; + providers: string; @Output() onSuccess = new EventEmitter(); @@ -57,6 +58,9 @@ export class AlfrescoLoginComponent { @Output() onError = new EventEmitter(); + @Output() + executeOutcome: EventEmitter = new EventEmitter(); + form: ControlGroup; error: boolean = false; errorMsg: string; @@ -78,68 +82,41 @@ export class AlfrescoLoginComponent { public settingsService: AlfrescoSettingsService, private translate: AlfrescoTranslationService) { - this.formError = { - 'username': '', - 'password': '' - }; + translate.addTranslationFolder('node_modules/ng2-alfresco-login/dist/src'); + } + + ngOnInit() { + this.initFormError(); + this.initFormMessages(); this.form = this._fb.group({ username: ['', Validators.compose([Validators.required, Validators.minLength(4)])], password: ['', Validators.required] }); - - this._message = { - 'username': { - 'required': 'LOGIN.MESSAGES.USERNAME-REQUIRED', - 'minlength': 'LOGIN.MESSAGES.USERNAME-MIN' - }, - 'password': { - 'required': 'LOGIN.MESSAGES.PASSWORD-REQUIRED' - } - }; - - translate.addTranslationFolder('node_modules/ng2-alfresco-login/dist/src'); - this.form.valueChanges.subscribe(data => this.onValueChanged(data)); } /** * Method called on submit form - * @param value + * @param values * @param event */ - onSubmit(value: any, event: any) { - if (event) { - event.preventDefault(); - } - if (this.providers === undefined) { - this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ERROR-PROVIDERS'; - this.error = true; - let messageProviders: any; - messageProviders = this.translate.get(this.errorMsg); - this.onError.emit(messageProviders.value); - this.success = false; + onSubmit(values: any) { + if (!this.checkRequiredParams()) { return false; } - this.error = false; - this.settingsService.setProviders(this.providers); - this.authService.login(value.username, value.password) - .subscribe( - (token: any) => { - this.success = true; - this.onSuccess.emit(token); - }, - (err: any) => { - this.error = true; - this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ERROR-CREDENTIALS'; - this.onError.emit(err); - console.log(err); - this.success = false; - }, - () => console.log('Login done') - ); + this.disableError(); + + let args = new FormOutcomeEvent(this.form); + this.executeOutcome.emit(args); + + if (args.defaultPrevented) { + return false; + } else { + this.performeLogin(values); + } } /** @@ -147,7 +124,7 @@ export class AlfrescoLoginComponent { * @param data */ onValueChanged(data: any) { - this.error = false; + this.disableError(); for (let field in this.formError) { if (field) { this.formError[field] = ''; @@ -164,6 +141,52 @@ export class AlfrescoLoginComponent { } } + /** + * Performe the login service + * @param values + */ + private performeLogin(values: any) { + this.authService.login(values.username, values.password) + .subscribe( + (token: any) => { + this.success = true; + this.onSuccess.emit(token); + }, + (err: any) => { + this.enableError(); + this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ERROR-CREDENTIALS'; + this.onError.emit(err); + console.log(err); + }, + () => console.log('Login done') + ); + } + + /** + * Check the require parameter + * @returns {boolean} + */ + private checkRequiredParams(): boolean { + if (this.providers === undefined) { + this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ERROR-PROVIDERS'; + this.enableError(); + let messageProviders: any; + messageProviders = this.translate.get(this.errorMsg); + this.onError.emit(messageProviders.value); + return false; + } + return true; + } + + /** + * Add a new custom error for a field + * @param field + * @param msg + */ + public addCustomError(field: string, msg: string) { + this.formError[field] += msg; + } + /** * Display and hide the password value. */ @@ -187,4 +210,43 @@ export class AlfrescoLoginComponent { } return !field.valid && field.dirty && !field.pristine; } + + /** + * Default formError values + */ + private initFormError() { + this.formError = { + 'username': '', + 'password': '' + }; + } + + /** + * Default form messages values + */ + private initFormMessages() { + this._message = { + 'username': { + 'required': 'LOGIN.MESSAGES.USERNAME-REQUIRED', + 'minlength': 'LOGIN.MESSAGES.USERNAME-MIN' + }, + 'password': { + 'required': 'LOGIN.MESSAGES.PASSWORD-REQUIRED' + } + }; + } + + /** + * Disable the error flag + */ + private disableError() { + this.error = false; + } + + /** + * Enable the error flag + */ + private enableError() { + this.error = true; + } } diff --git a/ng2-components/ng2-alfresco-login/src/models/form-outcome-event.model.ts b/ng2-components/ng2-alfresco-login/src/models/form-outcome-event.model.ts new file mode 100644 index 0000000000..b9c35eb2b2 --- /dev/null +++ b/ng2-components/ng2-alfresco-login/src/models/form-outcome-event.model.ts @@ -0,0 +1,39 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export class FormOutcomeEvent { + + private _values: any; + private _defaultPrevented: boolean = false; + + get values(): any { + return this._values; + } + + get defaultPrevented() { + return this._defaultPrevented; + } + + constructor(_values: any) { + this._values = _values; + } + + preventDefault() { + this._defaultPrevented = true; + } + +} From 9725fb30f9accb178a935fc6dac437dd3e2ed812 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Tue, 6 Sep 2016 14:35:15 +0100 Subject: [PATCH 2/4] Use the custom validation --- .../app/components/login/login-demo.component.html | 4 +++- .../app/components/login/login-demo.component.ts | 14 +++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/demo-shell-ng2/app/components/login/login-demo.component.html b/demo-shell-ng2/app/components/login/login-demo.component.html index 090f4c3f4f..6bb2ea9fa3 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.html +++ b/demo-shell-ng2/app/components/login/login-demo.component.html @@ -12,4 +12,6 @@

- + diff --git a/demo-shell-ng2/app/components/login/login-demo.component.ts b/demo-shell-ng2/app/components/login/login-demo.component.ts index 6df82e500a..7c6a14f62e 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.ts +++ b/demo-shell-ng2/app/components/login/login-demo.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import {Component} from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; import {AlfrescoLoginComponent} from 'ng2-alfresco-login'; import {ROUTER_DIRECTIVES, Router} from '@angular/router'; @@ -30,6 +30,9 @@ declare let __moduleName: string; }) export class LoginDemoComponent { + @ViewChild('alfrescologin') + alfrescologin: any; + providers: string = 'ECM'; constructor(public router: Router) { @@ -67,4 +70,13 @@ export class LoginDemoComponent { this.providers = undefined; } } + + validateForm(event: any) { + let values = event.values; + if (values.controls['username'].value === 'invalidUsername') { + this.alfrescologin.addCustomError('username', 'the username is in blacklist'); + event.preventDefault(); + } + } + } From 0c1c02824ce8085cb6b9a0e1094dbc903ee0becf Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Tue, 6 Sep 2016 14:35:33 +0100 Subject: [PATCH 3/4] Doc custom validation --- ng2-components/ng2-alfresco-login/README.md | 37 +++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md index 681854ace8..7f81dba6ac 100644 --- a/ng2-components/ng2-alfresco-login/README.md +++ b/ng2-components/ng2-alfresco-login/README.md @@ -177,6 +177,43 @@ Alternatively you can bind to your component properties and provide values dynam ``` +#### Controlling form submit execution behaviour + +If absolutely needed it is possible taking full control over form +submit execution by means of `executeOutcome` event. +This event is fired on form submit. + +You can prevent default behaviour by calling `event.preventDefault()`. +This allows for example having custom form validation scenarios and/or additional validation summary presentation. + +Alternatively you may want just running additional code without suppressing default one. + +**MyCustomLogin.component.html** +```html + +``` + +**MyCustomLogin.component.ts** +```ts + +export class MyCustomLogin { + + validateForm(event: any) { + let values = event.values; + + // check if the username is in the blacklist + if (values.controls['username'].value === 'invalidUsername') { + this.alfrescologin.addCustomError('username', 'the username is in blacklist'); + event.preventDefault(); + } + } + +} +``` + +**Please note that if `event.preventDefault()` is not called then default behaviour +will also be executed after your custom code.** + ## Build from sources Alternatively you can build component from sources with the following commands: From e28c3a190ac732ff106f300917058eecb6d6e459 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Tue, 6 Sep 2016 16:14:15 +0100 Subject: [PATCH 4/4] Fix name file --- .../app/components/login/login-demo.component.html | 2 +- ng2-components/ng2-alfresco-login/README.md | 5 +++-- .../src/components/alfresco-login.component.ts | 8 ++++---- ...-outcome-event.model.ts => form-submit-event.model.ts} | 2 +- 4 files changed, 9 insertions(+), 8 deletions(-) rename ng2-components/ng2-alfresco-login/src/models/{form-outcome-event.model.ts => form-submit-event.model.ts} (96%) diff --git a/demo-shell-ng2/app/components/login/login-demo.component.html b/demo-shell-ng2/app/components/login/login-demo.component.html index 6bb2ea9fa3..41df23fbf7 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.html +++ b/demo-shell-ng2/app/components/login/login-demo.component.html @@ -12,6 +12,6 @@

- diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md index 7f81dba6ac..1cf3a5b775 100644 --- a/ng2-components/ng2-alfresco-login/README.md +++ b/ng2-components/ng2-alfresco-login/README.md @@ -180,7 +180,7 @@ Alternatively you can bind to your component properties and provide values dynam #### Controlling form submit execution behaviour If absolutely needed it is possible taking full control over form -submit execution by means of `executeOutcome` event. +submit execution by means of `executeSubmit` event. This event is fired on form submit. You can prevent default behaviour by calling `event.preventDefault()`. @@ -190,7 +190,8 @@ Alternatively you may want just running additional code without suppressing defa **MyCustomLogin.component.html** ```html - + ``` **MyCustomLogin.component.ts** diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts index 1aeaf7f869..4a5129e601 100644 --- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts +++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts @@ -23,7 +23,7 @@ import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core'; -import { FormOutcomeEvent } from '../models/form-outcome-event.model'; +import { FormSubmitEvent } from '../models/form-submit-event.model'; declare let componentHandler: any; declare let __moduleName: string; @@ -59,7 +59,7 @@ export class AlfrescoLoginComponent implements OnInit { onError = new EventEmitter(); @Output() - executeOutcome: EventEmitter = new EventEmitter(); + executeSubmit: EventEmitter = new EventEmitter(); form: ControlGroup; error: boolean = false; @@ -109,8 +109,8 @@ export class AlfrescoLoginComponent implements OnInit { this.disableError(); - let args = new FormOutcomeEvent(this.form); - this.executeOutcome.emit(args); + let args = new FormSubmitEvent(this.form); + this.executeSubmit.emit(args); if (args.defaultPrevented) { return false; diff --git a/ng2-components/ng2-alfresco-login/src/models/form-outcome-event.model.ts b/ng2-components/ng2-alfresco-login/src/models/form-submit-event.model.ts similarity index 96% rename from ng2-components/ng2-alfresco-login/src/models/form-outcome-event.model.ts rename to ng2-components/ng2-alfresco-login/src/models/form-submit-event.model.ts index b9c35eb2b2..957b0b7d0f 100644 --- a/ng2-components/ng2-alfresco-login/src/models/form-outcome-event.model.ts +++ b/ng2-components/ng2-alfresco-login/src/models/form-submit-event.model.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -export class FormOutcomeEvent { +export class FormSubmitEvent { private _values: any; private _defaultPrevented: boolean = false;