From f45b0b21a7a2ecaaf57936fd9a04eb8375d285ce Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Wed, 7 Sep 2016 12:12:12 +0100 Subject: [PATCH 1/6] Extend Form Validation Rule --- .../login/login-demo.component.html | 3 +- .../components/login/login-demo.component.ts | 17 +++++++++-- .../components/alfresco-login.component.ts | 30 ++++++++++++------- 3 files changed, 36 insertions(+), 14 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 41df23fbf7..14bff32c37 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,7 @@

- 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 1afa49d1b1..a79cd90d33 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.ts +++ b/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; @@ -28,14 +29,24 @@ declare let __moduleName: string; directives: [ROUTER_DIRECTIVES, AlfrescoLoginComponent], pipes: [] }) -export class LoginDemoComponent { +export class LoginDemoComponent implements OnInit { @ViewChild('alfrescologin') alfrescologin: any; providers: string = 'ECM'; + 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.'); } onLogin($event) { @@ -74,7 +85,7 @@ export class LoginDemoComponent { validateForm(event: any) { let values = event.values; if (values.controls['username'].value === 'invalidUsername') { - this.alfrescologin.addCustomError('username', 'This particular username has been blocked'); + this.alfrescologin.addCustomFormError('username', 'This particular username has been blocked'); event.preventDefault(); } } 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 35e94c38cb..f7323ee35d 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 @@ -16,7 +16,7 @@ */ import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; -import { FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators } from '@angular/common'; +import { FORM_DIRECTIVES, ControlGroup, FormBuilder } from '@angular/common'; import { AlfrescoTranslationService, AlfrescoPipeTranslate, @@ -52,6 +52,9 @@ export class AlfrescoLoginComponent implements OnInit { @Input() providers: string; + @Input() + fieldsValidation: any; + @Output() onSuccess = new EventEmitter(); @@ -83,16 +86,13 @@ export class AlfrescoLoginComponent implements OnInit { private translate: AlfrescoTranslationService) { translate.addTranslationFolder('node_modules/ng2-alfresco-login/dist/src'); + + this.initFormError(); + this.initFormMessages(); } ngOnInit() { - this.initFormError(); - this.initFormMessages(); - - this.form = this._fb.group({ - username: ['', Validators.compose([Validators.required, Validators.minLength(4)])], - password: ['', Validators.required] - }); + this.form = this._fb.group(this.fieldsValidation); this.form.valueChanges.subscribe(data => this.onValueChanged(data)); } @@ -179,14 +179,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. */ From 19f66fdb64f59fe7047f71f88cb6526e87e55d92 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Wed, 7 Sep 2016 12:12:54 +0100 Subject: [PATCH 2/6] Fix documentation --- ng2-components/ng2-alfresco-login/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md index 1cf3a5b775..6ca7fb2dc3 100644 --- a/ng2-components/ng2-alfresco-login/README.md +++ b/ng2-components/ng2-alfresco-login/README.md @@ -204,7 +204,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(); } } From 3ec32f216ad1545b3b81d358ef547a3cc7e8ab2e Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Wed, 7 Sep 2016 16:14:53 +0100 Subject: [PATCH 3/6] Improve custom validation rules --- .../components/login/login-demo.component.ts | 6 ++-- .../components/alfresco-login.component.ts | 36 ++++++++++++++++--- 2 files changed, 35 insertions(+), 7 deletions(-) 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 a79cd90d33..53adbb504c 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.ts +++ b/demo-shell-ng2/app/components/login/login-demo.component.ts @@ -39,14 +39,16 @@ export class LoginDemoComponent implements OnInit { constructor(public router: Router) { this.customValidation = { - username: ['', Validators.compose([Validators.required, Validators.minLength(8), , Validators.maxLength(10)])], + username: ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(15)])], password: ['', Validators.required] }; } ngOnInit() { - this.alfrescologin.addCustomValidationError('username', 'minlength', 'Username must be at least 8 characters.'); + 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) { 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 f7323ee35d..01071a1686 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 @@ -16,7 +16,7 @@ */ import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; -import { FORM_DIRECTIVES, ControlGroup, FormBuilder } from '@angular/common'; +import { FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators } from '@angular/common'; import { AlfrescoTranslationService, AlfrescoPipeTranslate, @@ -88,11 +88,16 @@ export class AlfrescoLoginComponent implements OnInit { translate.addTranslationFolder('node_modules/ng2-alfresco-login/dist/src'); this.initFormError(); - this.initFormMessages(); + this.initFormFieldsMessages(); } ngOnInit() { - this.form = this._fb.group(this.fieldsValidation); + if (this.hasCustomFiledsValidation()) { + this.form = this._fb.group(this.fieldsValidation); + } else { + this.initFormFieldsDefault(); + this.initFormFieldsMessagesDefault(); + } this.form.valueChanges.subscribe(data => this.onValueChanged(data)); } @@ -232,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', @@ -246,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 */ @@ -259,4 +281,8 @@ export class AlfrescoLoginComponent implements OnInit { private enableError() { this.error = true; } + + private hasCustomFiledsValidation(): boolean { + return this.fieldsValidation !== undefined; + } } From ec8c9448a737624199799c190e5c0fa9f746666e Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Wed, 7 Sep 2016 16:15:09 +0100 Subject: [PATCH 4/6] Add custom validation rules docs --- ng2-components/ng2-alfresco-login/README.md | 30 +++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md index 6ca7fb2dc3..d93e325e1a 100644 --- a/ng2-components/ng2-alfresco-login/README.md +++ b/ng2-components/ng2-alfresco-login/README.md @@ -177,6 +177,36 @@ Alternatively you can bind to your component properties and provide values dynam ``` +#### 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 + +``` + +**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 From 8ea48667f70f21fef448ee81fe41c38935d01955 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Wed, 7 Sep 2016 16:16:28 +0100 Subject: [PATCH 5/6] Remove hardcode banned user --- demo-shell-ng2/app/components/login/login-demo.component.html | 4 ++++ demo-shell-ng2/app/components/login/login-demo.component.ts | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) 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 14bff32c37..bf8b9a4d95 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.html +++ b/demo-shell-ng2/app/components/login/login-demo.component.html @@ -11,6 +11,10 @@ BPM

+

+
+ +

Date: Thu, 8 Sep 2016 08:28:07 +0100 Subject: [PATCH 6/6] Remove hardcoded css style --- .../app/components/login/login-demo.component.css | 10 ++++++++++ .../app/components/login/login-demo.component.html | 8 ++++---- .../app/components/login/login-demo.component.ts | 1 + 3 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 demo-shell-ng2/app/components/login/login-demo.component.css diff --git a/demo-shell-ng2/app/components/login/login-demo.component.css b/demo-shell-ng2/app/components/login/login-demo.component.css new file mode 100644 index 0000000000..e0d26ce54f --- /dev/null +++ b/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; +} \ No newline at end of file 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 bf8b9a4d95..dbc7ee20ca 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.html +++ b/demo-shell-ng2/app/components/login/login-demo.component.html @@ -1,17 +1,17 @@ -
-

+

+

-

+

-

+


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 adf98319fa..693bcbcb1b 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.ts +++ b/demo-shell-ng2/app/components/login/login-demo.component.ts @@ -26,6 +26,7 @@ declare let __moduleName: string; moduleId: __moduleName, selector: 'login-demo', templateUrl: './login-demo.component.html', + styleUrls: ['./login-demo.component.css'], directives: [ROUTER_DIRECTIVES, AlfrescoLoginComponent], pipes: [] })