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 41df23fbf7..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,22 @@ -
-

+

+

-

+

+

+
+ +

- 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..693bcbcb1b 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; @@ -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') { - this.alfrescologin.addCustomError('username', 'This particular username has been blocked'); + if (values.controls['username'].value === this.blackListUsername ) { + this.alfrescologin.addCustomFormError('username', 'This particular username has been blocked'); event.preventDefault(); } } diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md index 1cf3a5b775..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 @@ -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(); } } 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..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 @@ -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(); - this.initFormMessages(); - - this.form = this._fb.group({ - username: ['', Validators.compose([Validators.required, Validators.minLength(4)])], - password: ['', Validators.required] - }); + if (this.hasCustomFiledsValidation()) { + this.form = this._fb.group(this.fieldsValidation); + } else { + this.initFormFieldsDefault(); + this.initFormFieldsMessagesDefault(); + } 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; + } }