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