alfresco-ng2-components/ng2-components/ng2-alfresco-login

Alfresco Login Component for Angular 2

Install

npm set registry http://devproducts.alfresco.me:4873
npm install --save ng2-alfresco-core ng2-alfresco-login

Build from sources

Alternatively you can build component from sources with the following commands:

npm install
npm run build

Components included:

• Alfresco Login Component
• Alfresco Authentication Service

Dependencies

Add the following dependency to your index.html:

    <script src="node_modules/alfresco-core-rest-api/bundle.js"></script>

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'
                    }
                }
            });
    

Basic usage

<alfresco-login></alfresco-login>

Example of an App that use Alfresco login component :

main.ts

import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './components/app-component';
import { ALFRESCO_AUTHENTICATION } 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';

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    AlfrescoTranslationLoader,
    AlfrescoTranslationService,
    ALFRESCO_AUTHENTICATION,
    ALFRESCO_CORE_PROVIDERS
]);

app-components.ts

import { Component } from 'angular2/core';
import { AlfrescoLoginComponent, AlfrescoAuthenticationService } from 'ng2-alfresco-login/dist/ng2-alfresco-login';
import { Router, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import { AlfrescoSettingsService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';

@Component({
    selector: 'my-login',
    template: '<alfresco-login method="POST" (onSuccess)="mySuccessMethod($event)" (onError)="myErrorMethod($event)"></alfresco-login>',
    directives: [ROUTER_DIRECTIVES, AlfrescoLoginComponent]
})

@RouteConfig([
    {path: '/', name: 'Login', component: AlfrescoLoginComponent, useAsDefault: true}
])
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);
    }

}

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").
Start the demo

cd demo
npm install
npm start

Running unit tests

npm test

This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.

Code coverage

npm run coverage