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

Alfresco Login Component for Angular 2

Prerequisites

Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration, see this page.

Install

Follow the 3 steps below:

1. Npm

   npm install ng2-alfresco-login --save
   

2. Html

   Include these dependencies in your index.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">
   
   <!-- Polyfill(s) for Safari (pre-10.x) -->
   <script src="node_modules/intl/dist/Intl.min.js"></script>
   <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
   
   <!-- Polyfill(s) for older browsers -->
   <script src="node_modules/core-js/client/shim.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
   <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
   
   <!-- Polyfill(s) for dialogs -->
   <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
   <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
   
    <!-- Modules  -->
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
   

3. SystemJs

   Add the following components to your systemjs.config.js file:

   • ng2-translate
   • ng2-alfresco-core
   • ng2-alfresco-login

   Please refer to the following example file: [systemjs.config.js](demo/systemjs .config.js) .

Basic usage

This component allow to authenticate to Alfresco One and Alfresco Activiti.

<alfresco-login [providers]="'ALL'"></alfresco-login>

Usage example of this component :

main.ts

import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { LoginModule } from 'ng2-alfresco-login';

@Component({
    selector: 'my-app',
    template: `
       <alfresco-login [providers]="'ALL'"
                       [disableCsrf]="true"
                       (onSuccess)="mySuccessMethod($event)"
                       (onError)="myErrorMethod($event)">
        </alfresco-login>`
})
export class AppComponent {

    constructor(public auth: AlfrescoAuthenticationService,
                private settingsService: AlfrescoSettingsService) {
        settingsService.ecmHost = 'http://localhost:8080/';
        settingsService.bpmHost = 'http://localhost:9999/';
    }

    mySuccessMethod($event) {
        console.log('Success Login EventEmitt called with: ' + $event.value);
    }

    myErrorMethod($event) {
        console.log('Error Login EventEmitt called with: ' + $event.value);
    }
}

@NgModule({
    imports: [
        BrowserModule,
        CoreModule.forRoot(),
        LoginModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Events

Name	Description
onSuccess	The event is emitted when the login is done
onError	The event is emitted when the login fails

Name	Description
onSuccess	The event is emitted when the login is done
onError	The event is emitted when the login fails

Options

Name	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
disableCsrf	boolean	false	To prevent the CSRF Token from been submitted. Only for Activiti call

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

License

Apache Version 2.0