Merge pull request #691 from Alfresco/dev-mvitale-643

Extend the validation of the login form

demo-shell-ng2/app/components/login/login-demo.component.html

@@ -12,4 +12,6 @@
         </label>
     </p>
 </div>
-<alfresco-login [providers]="providers" (onSuccess)="onLogin($event)" (onError)="onError($event)"></alfresco-login>
+<alfresco-login (executeSubmit)="validateForm($event)" [providers]="providers"
+                (onSuccess)="onLogin($event)"
+                (onError)="onError($event)" #alfrescologin></alfresco-login>

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();
+        }
+    }
+
 }

ng2-components/ng2-alfresco-login/README.md

@@ -177,6 +177,44 @@ Alternatively you can bind to your component properties and provide values dynam
 </alfresco-login>
 ```
 
+#### Controlling form submit execution behaviour
+
+If absolutely needed it is possible taking full control over form 
+submit execution by means of `executeSubmit` 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
+<alfresco-login (executeSubmit)="validateForm($event)" 
+#alfrescologin></alfresco-login>
+```
+
+**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:

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 { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import {FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators} from '@angular/common';
+import { FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators } from '@angular/common';
 import {
     AlfrescoTranslationService,
     AlfrescoPipeTranslate,
     AlfrescoAuthenticationService,
     AlfrescoSettingsService
 } from 'ng2-alfresco-core';
+import { FormSubmitEvent } from '../models/form-submit-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()
+    executeSubmit: EventEmitter<FormSubmitEvent> = new EventEmitter<FormSubmitEvent>();
+
     form: ControlGroup;
     error: boolean = false;
     errorMsg: string;
@@ -78,68 +82,41 @@ export class AlfrescoLoginComponent {
                 public settingsService: AlfrescoSettingsService,
                 private translate: AlfrescoTranslationService) {
 
-        this.formError = {
+        translate.addTranslationFolder('node_modules/ng2-alfresco-login/dist/src');
-            'username': '',
+    }
-            'password': ''
+
-        };
+    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) {
+    onSubmit(values: any) {
-        if (event) {
+        if (!this.checkRequiredParams()) {
-            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;
             return false;
         }
-        this.error = false;
-
         this.settingsService.setProviders(this.providers);
 
-        this.authService.login(value.username, value.password)
+        this.disableError();
-            .subscribe(
+
-                (token: any) => {
+        let args = new FormSubmitEvent(this.form);
-                    this.success = true;
+        this.executeSubmit.emit(args);
-                    this.onSuccess.emit(token);
+
-                },
+        if (args.defaultPrevented) {
-                (err: any) => {
+            return false;
-                    this.error = true;
+        } else {
-                    this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ERROR-CREDENTIALS';
+            this.performeLogin(values);
-                    this.onError.emit(err);
+        }
-                    console.log(err);
-                    this.success = false;
-                },
-                () => console.log('Login done')
-            );
     }
 
     /**
@@ -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;
+    }
 }

ng2-components/ng2-alfresco-login/src/models/form-submit-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 FormSubmitEvent {
+
+    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;
+    }
+
+}