Alfresco Login Component for Angular 2
Install
npm set registry http://devproducts.alfresco.me:4873
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/bundle.js"></script>
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">
Make sure your systemjs.config has the following configuration:
System.config({
defaultJSExtensions: true,
map: {
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
'rxjs': 'node_modules/rxjs',
'angular2' : 'node_modules/angular2',
'ng2-translate': 'node_modules/ng2-translate',
'src': 'src'
},
packages: {
'src': {
defaultExtension: 'js'
},
'ng2-alfresco-core': {
defaultExtension: 'js'
},
'ng2-alfresco-login': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2': {
defaultExtension: 'js'
}
}
});
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
Basic usage
<alfresco-login></alfresco-login>
Example of an App that use Alfresco login component :
main.ts
import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';
import { Router, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
import { AlfrescoLoginComponent } from 'ng2-alfresco-login/dist/ng2-alfresco-login';
import { ROUTER_PROVIDERS } from 'angular2/router';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ALFRESCO_CORE_PROVIDERS, AlfrescoTranslationService, AlfrescoTranslationLoader } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
@RouteConfig([
{path: '/', name: 'Login', component: AlfrescoLoginComponent, useAsDefault: true}
])
@Component({
selector: 'my-app',
template: '<alfresco-login method="POST" (onSuccess)="mySuccessMethod($event)" (onError)="myErrorMethod($event)"></alfresco-login>',
directives: [ROUTER_DIRECTIVES, AlfrescoLoginComponent]
})
export class AppComponent {
constructor(public auth: AlfrescoAuthenticationService,
public router: Router,
alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.host = 'http://192.168.99.100:8080';
}
mySuccessMethod($event) {
console.log('Success Login EventEmitt called with: ' + $event.value);
}
myErrorMethod($event) {
console.log('Error Login EventEmitt called with: ' + $event.value);
}
}
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
AlfrescoTranslationLoader,
AlfrescoTranslationService,
AlfrescoAuthenticationService,
ALFRESCO_CORE_PROVIDERS
]);
Events
onSuccess: The event is emitted when the login is done
onError: The event is emitted when the login fails
Options
method: {string} optional) default POST. The method attribute specifies how to send form-data
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
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
```sh
$ 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