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

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

Browse Source 
Extend the validation of the login form
This commit is contained in:
Mario Romano
2016-09-06 19:14:30 +01:00
committed by GitHub
parent 3d2e391b63 e28c3a190a
commit c68ae71d8e
5 changed files with 206 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

38
ng2-components/ng2-alfresco-login/README.md
View File

@@ -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:

164
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
View File

@@ -15,14 +15,15 @@
* limitations under the License.
*/
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators} from '@angular/common';
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
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 = {
'username': '',
'password': ''
};
translate.addTranslationFolder('node_modules/ng2-alfresco-login/dist/src');
}
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) {
if (event) {
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;
onSubmit(values: any) {
if (!this.checkRequiredParams()) {
return false;
}
this.error = false;
this.settingsService.setProviders(this.providers);
this.authService.login(value.username, value.password)
.subscribe(
(token: any) => {
this.success = true;
this.onSuccess.emit(token);
},
(err: any) => {
this.error = true;
this.errorMsg = 'LOGIN.MESSAGES.LOGIN-ERROR-CREDENTIALS';
this.onError.emit(err);
console.log(err);
this.success = false;
},
() => console.log('Login done')
);
this.disableError();
let args = new FormSubmitEvent(this.form);
this.executeSubmit.emit(args);
if (args.defaultPrevented) {
return false;
} else {
this.performeLogin(values);
}
}
/**
@@ -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;
}
}

39
ng2-components/ng2-alfresco-login/src/models/form-submit-event.model.ts Normal file
View File

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