alfresco-ng2-components/ng2-components/ng2-alfresco-login/README.md

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

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 :

https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-login/demo/systemjs.config.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

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></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 (onSuccess)="mySuccessMethod($event)" (onError)="myErrorMethod($event)"></alfresco-login>',
    directives: [AlfrescoLoginComponent]
})
export class AppComponent {

    constructor(public auth: AlfrescoAuthenticationService,
                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, [
    HTTP_PROVIDERS,
    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