Alfresco Login Component for Angular 2
Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
Install
npm install --save ng2-alfresco-login
Components included:
- Alfresco Login Component
- Alfresco Authentication Service
Dependencies
Add the following dependency to your index.html:
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
The following component needs to be added to your systemjs.config:
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-login
Please refer to the following example to have an idea of how your systemjs.config should look like :
Style
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material design dependency to your project:
npm install --save material-design-icons material-design-lite
Also make sure you include these dependencies in your .html page:
<!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
Basic usage
<alfresco-login [providers]="'ALL'"></alfresco-login>
Example of an App that use Alfresco login component :
main.ts
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AlfrescoLoginComponent } from 'ng2-alfresco-login';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService
} from 'ng2-alfresco-core';
@Component({
selector: 'my-app',
template: '
<alfresco-login
providers="'ALL'"
(onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)">
</alfresco-login>',
directives: [AlfrescoLoginComponent]
})
export class AppComponent {
constructor(public auth: AlfrescoAuthenticationService,
alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.host = 'http://myalfrescoip';
}
mySuccessMethod($event) {
console.log('Success Login EventEmitt called with: ' + $event.value);
}
myErrorMethod($event) {
console.log('Error Login EventEmitt called with: ' + $event.value);
}
}
bootstrap(AppComponent, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
Events
| Name | Description |
|---|---|
| onSuccess | The event is emitted when the login is done |
| onError | The event is emitted when the login fails |
| Attribute | Description |
|---|---|
onSuccess |
The event is emitted when the login is done |
onError |
The event is emitted when the login fails |
Options
| Attribute | Options | Default | Description | Mandatory |
|---|---|---|---|---|
providers |
string | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
Custom logo and background
It is possible changing logo and background images to custom values.
<alfresco-login
[backgroundImageUrl]="'http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg'"
[logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'"
>
</alfresco-login>
Should give you something like the following:
Alternatively you can bind to your component properties and provide values dynamically if needed:
<alfresco-login
[backgroundImageUrl]="myCustomBackground"
[logoImageUrl]="myCustomLogo"
>
</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
<alfresco-login [fieldsValidation]="customValidation"
#alfrescologin></alfresco-login>
MyCustomLogin.component.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
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
<alfresco-login (executeSubmit)="validateForm($event)"
#alfrescologin></alfresco-login>
MyCustomLogin.component.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.addCustomFormError('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:
npm install
npm run build
Build the files and keep watching for changes
$ npm run build:w
Running unit tests
npm test
Running unit tests in browser
npm test-browser
This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.
Code coverage
npm run coverage
Demo
If you want have a demo of how the component works, please check the demo folder :
cd demo
npm install
npm start