inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Give the possibility to customize the login form validation rules
This commit is contained in:
Mario Romano
2016-09-08 09:27:24 +01:00
committed by GitHub
parent 696f9c3619 50fc169e76
commit 8c4ecc6e9e
5 changed files with 117 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
demo-shell-ng2/app/components/login/login-demo.component.css Normal file
View File

@@ -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;
}

13
demo-shell-ng2/app/components/login/login-demo.component.html
View File

@@ -1,17 +1,22 @@
<div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 10px; z-index: 1;">
<p style="width:120px;margin: 20px;">
<div class="setting">
<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>

23
demo-shell-ng2/app/components/login/login-demo.component.ts
View File

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