Merge pull request #709 from Alfresco/dev-mvitale-692-rule

Give the possibility to customize the login form validation rules

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

@@ -0,0 +1,10 @@
+.setting {
+    border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 10px;  z-index: 1;
+}
+.banned{
+    width:130px;margin: 10px;
+}
+
+.toggle {
+    width:120px;margin: 20px;
+}

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

@@ -1,17 +1,22 @@
-<div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 10px; z-index: 1;">
+<div class="setting">
-    <p style="width:120px;margin: 20px;">
+    <p class="toggle">
         <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
             <input type="checkbox" id="switch1" class="mdl-switch__input" checked (click)="toggleECM(ecm.checked)" #ecm>
             <span class="mdl-switch__label">ECM</span>
         </label>
     </p>
-    <p style="width:120px;margin: 20px;">
+    <p class="toggle">
         <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
             <input type="checkbox" id="switch2" class="mdl-switch__input"  (click)="toggleBPM(bpm.checked)" #bpm>
             <span class="mdl-switch__label">BPM</span>
         </label>
     </p>
+    <p class="banned">
+        <label for="blacklistusername">Banned username</label><br>
+        <input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername" />
+    </p>
 </div>
-<alfresco-login (executeSubmit)="validateForm($event)" [providers]="providers"
+<alfresco-login [providers]="providers" [fieldsValidation]="customValidation"
+                (executeSubmit)="validateForm($event)"
                 (onSuccess)="onLogin($event)"
                 (onError)="onError($event)" #alfrescologin></alfresco-login>

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

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 
-import {Component, ViewChild} from '@angular/core';
+import {Component, ViewChild, OnInit} from '@angular/core';
 import {AlfrescoLoginComponent} from 'ng2-alfresco-login';
 import {ROUTER_DIRECTIVES, Router} from '@angular/router';
+import {Validators} from '@angular/common';
 
 declare let __moduleName: string;
 
@@ -25,17 +26,31 @@ declare let __moduleName: string;
     moduleId: __moduleName,
     selector: 'login-demo',
     templateUrl: './login-demo.component.html',
+    styleUrls: ['./login-demo.component.css'],
     directives: [ROUTER_DIRECTIVES, AlfrescoLoginComponent],
     pipes: []
 })
-export class LoginDemoComponent {
+export class LoginDemoComponent implements OnInit {
 
     @ViewChild('alfrescologin')
     alfrescologin: any;
 
     providers: string = 'ECM';
+    blackListUsername: string;
+    customValidation: any;
 
     constructor(public router: Router) {
+        this.customValidation = {
+            username: ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(15)])],
+            password: ['', Validators.required]
+        };
+    }
+
+    ngOnInit() {
+        this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
+        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN');
+        this.alfrescologin.addCustomValidationError('username', 'maxlength', 'Username must not be longer than 11 characters.');
+        this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
     }
 
     onLogin($event) {
@@ -73,8 +88,8 @@ export class LoginDemoComponent {
 
     validateForm(event: any) {
         let values = event.values;
-        if (values.controls['username'].value === 'invalidUsername') {
+        if (values.controls['username'].value === this.blackListUsername ) {
-            this.alfrescologin.addCustomError('username', 'This particular username has been blocked');
+            this.alfrescologin.addCustomFormError('username', 'This particular username has been blocked');
             event.preventDefault();
         }
     }

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

@@ -177,6 +177,36 @@ Alternatively you can bind to your component properties and provide values dynam
 </alfresco-login>
 ```
 
+#### Customize Validation rules
+If needed it is possible customize the validation rules of the login
+form. You can add/modify the default rules of the login form.
+
+**MyCustomLogin.component.html**
+```html
+<alfresco-login [fieldsValidation]="customValidation"
+#alfrescologin></alfresco-login>
+```
+
+**MyCustomLogin.component.ts**
+```ts
+
+export class MyCustomLogin {
+    customValidation: any;
+
+    constructor(public router: Router) {
+        this.customValidation = {
+            username: ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(10)])],
+            password: ['', Validators.required]
+        };
+    }
+
+    ngOnInit() {
+        this.alfrescologin.addCustomValidationError('username', 'minlength', 'Username must be at least 8 characters.');
+        this.alfrescologin.addCustomValidationError('username', 'maxlength', 'Username must not be longer than 11 characters.');
+    }
+}
+```
+
 #### Controlling form submit execution behaviour
 
 If absolutely needed it is possible taking full control over form 
@@ -204,7 +234,8 @@ export class MyCustomLogin {
         
         // check if the username is in the blacklist
         if (values.controls['username'].value === 'invalidUsername') {
-            this.alfrescologin.addCustomError('username', 'the username is in blacklist');
+            this.alfrescologin.addCustomFormError('username', 'the
+            username is in blacklist');
             event.preventDefault();
         }
     }

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts

@@ -52,6 +52,9 @@ export class AlfrescoLoginComponent implements OnInit {
     @Input()
     providers: string;
 
+    @Input()
+    fieldsValidation: any;
+
     @Output()
     onSuccess = new EventEmitter();
 
@@ -83,16 +86,18 @@ export class AlfrescoLoginComponent implements OnInit {
                 private translate: AlfrescoTranslationService) {
 
         translate.addTranslationFolder('node_modules/ng2-alfresco-login/dist/src');
+
+        this.initFormError();
+        this.initFormFieldsMessages();
     }
 
     ngOnInit() {
-        this.initFormError();
+        if (this.hasCustomFiledsValidation()) {
-        this.initFormMessages();
+            this.form = this._fb.group(this.fieldsValidation);
-
+        } else {
-        this.form = this._fb.group({
+            this.initFormFieldsDefault();
-            username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
+            this.initFormFieldsMessagesDefault();
-            password: ['', Validators.required]
+        }
-        });
         this.form.valueChanges.subscribe(data => this.onValueChanged(data));
     }
 
@@ -179,14 +184,24 @@ export class AlfrescoLoginComponent implements OnInit {
     }
 
     /**
-     * Add a new custom error for a field
+     * Add a custom form error for a field
      * @param field
      * @param msg
      */
-    public addCustomError(field: string, msg: string) {
+    public addCustomFormError(field: string, msg: string) {
         this.formError[field] += msg;
     }
 
+    /**
+     * Add a custom validation rule error for a field
+     * @param field
+     * @param ruleId - i.e. required | minlength | maxlength
+     * @param msg
+     */
+    public addCustomValidationError(field: string, ruleId: string, msg: string) {
+        this._message[field][ruleId] = msg;
+    }
+
     /**
      * Display and hide the password value.
      */
@@ -222,9 +237,19 @@ export class AlfrescoLoginComponent implements OnInit {
     }
 
     /**
-     * Default form messages values
+     * Init form fields messages
      */
-    private initFormMessages() {
+    private initFormFieldsMessages() {
+        this._message = {
+            'username': {},
+            'password': {}
+        };
+    }
+
+    /**
+     * Default form fields messages
+     */
+    private initFormFieldsMessagesDefault() {
         this._message = {
             'username': {
                 'required': 'LOGIN.MESSAGES.USERNAME-REQUIRED',
@@ -236,6 +261,13 @@ export class AlfrescoLoginComponent implements OnInit {
         };
     }
 
+    private initFormFieldsDefault() {
+        this.form = this._fb.group({
+            username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
+            password: ['', Validators.required]
+        });
+    }
+
     /**
      * Disable the error flag
      */
@@ -249,4 +281,8 @@ export class AlfrescoLoginComponent implements OnInit {
     private enableError() {
         this.error = true;
     }
+
+    private hasCustomFiledsValidation(): boolean {
+        return this.fieldsValidation !== undefined;
+    }
 }