inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-534] Login dialog enhancements (#1844)

Browse Source 
* version 1.4.0 social component

* Login dialog enhancements

- ability to toggle ‘Remember me’ (switched off by default now)
- ability to toggle a footer with extra actions (switched off by
default now)
- readme updates

* fix unit tests
This commit is contained in:
Denys Vuika
2017-05-03 08:46:02 +01:00
committed by Eugenio Romano
parent 6342c34f51
commit f33b841f9b
5 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ng2-components/ng2-alfresco-login/README.md
View File

@@ -106,8 +106,8 @@ This component allow to authenticate to Alfresco One and Alfresco Activiti.
Usage example of this component :
**main.ts**
```ts
```ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -153,9 +153,22 @@ export class AppComponent {
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
```
#### Properties
| Name | Type | Default Value | Description |
| --- | --- | --- | --- |
| `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 |
| `needHelpLink` | string | '' | It will change the url of the NEED HELP link in the footer |
| `registerLink` | string | '' | It will change the url of the REGISTER link in the footer |
| `logoImageUrl` | string | Alfresco logo image | To change the logo image with a customised image |
| `backgroundImageUrl` | string | Alfresco background image | To change the background image with a customised image |
| `fieldsValidation` | { [key: string]: any; }, extra?: { [key: string]: any; } | | Use it to customise the validation rules of the login form |
| `showRememberMe` | boolean | false | Toggle `Remember me` checkbox visibility |
| `showLoginActions` | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
#### Events
| Name | Description |
@@ -164,19 +177,6 @@ platformBrowserDynamic().bootstrapModule(AppModule);
| `onError` | The event is emitted when the login fails |
| `executeSubmit` | The event is emitted when the form is submitted |
#### 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 |
| `needHelpLink` | *string* | '' | It will change the url of the NEED HELP link in the footer |
| `registerLink` | *string* | '' | It will change the url of the REGISTER link in the footer |
| `logoImageUrl` | *string* | Alfresco logo image | To change the logo image with a customised image |
| `backgroundImageUrl` | *string* | Alfresco background image | To change the background image with a customised image |
| `fieldsValidation` | *map* { [key: string]: any; }, extra?: { [key: string]: any; } | null | Use it to customise the validation rules of the login form |
## Change footer content
<img src="assets/custom-footer.png" width="400" />

11
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
View File

@@ -230,3 +230,14 @@
.adf-full-width {
width: 100%;
}
.adf-login__remember-me {
padding-top: 15px;
}
.adf-login__field {
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 24px;
}

29
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
View File

@@ -1,6 +1,6 @@
<div class="content-grid mdl-grid content-layout login-content"
[style.background-image]="'url(' + backgroundImageUrl + ')'">
<div class="login-card-wide mdl-card mdl-shadow--4dp">
<div class="mdl-card login-card-wide">
<form [formGroup]="form" (submit)="onSubmit(form.value, $event)">
<div class="mdl-card__title alfresco-logo">
<!--HEADER TEMPLATE-->
@@ -20,13 +20,11 @@
</div>
<!--USERNAME FIELD-->
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}"
class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<div class="adf-login__field" [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}">
<md-input-container class="adf-full-width">
<input md-input placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
type="text"
class="mdl-textfield__input adf-full-width"
class="adf-full-width"
[formControl]="form.controls['username']"
autocapitalize="none"
id="username"
@@ -41,14 +39,13 @@
</div>
<!--PASSWORD FIELD-->
<div class="center mdl-textfield mdl-js-textfield mdl-textfield--floating-label alfresco-login__password">
<div class="adf-login__field alfresco-login__password">
<md-icon *ngIf="!isPasswordShow" class="alfresco-login__password-icon" data-automation-id="show_password" (click)="toggleShowPassword()">visibility</md-icon>
<md-icon *ngIf="isPasswordShow" class="alfresco-login__password-icon" data-automation-id="hide_password" (click)="toggleShowPassword()">visibility_off</md-icon>
<md-input-container class="adf-full-width">
<input md-input placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
type="password"
class="mdl-textfield__input"
[formControl]="form.controls['password']"
id="password"
data-automation-id="password"
@@ -66,15 +63,11 @@
<button type="submit" id="login-button" tabindex="3"
class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
data-automation-id="login-button" [disabled]="!form.valid">{{'LOGIN.BUTTON.LOGIN' | translate }}</button>
<br>
<div class="center">
<label class=" mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="remember">
<input type="checkbox" id="remember" class="center mdl-checkbox__input">
<span id="login-remember" class="mdl-checkbox__label">{{'LOGIN.LABEL.REMEMBER' | translate }}</span>
</label>
<div *ngIf="showRememberMe" class="adf-login__remember-me">
<md-checkbox>{{'LOGIN.LABEL.REMEMBER' | translate }}</md-checkbox>
</div>
</div>
<div class="mdl-card__actions mdl-card--border mdl-card__link">
<div *ngIf="showLoginActions" class="mdl-card__actions mdl-card--border mdl-card__link">
<!--FOOTER TEMPLATE-->
<template *ngIf="footerTemplate"
@@ -82,11 +75,11 @@
[ngForTemplate]="footerTemplate">
</template>
<div class="login-action" *ngIf="!footerTemplate">
<div id="login-action-help" class="login-action-left"> <a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate
}}</a>
<div id="login-action-help" class="login-action-left">
<a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate }}</a>
</div>
<div id="login-action-register" class="login-action-right"> <a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' |
translate }}</a>
<div id="login-action-register" class="login-action-right">
<a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
</div>
</div>
</div>

8
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.spec.ts
View File

@@ -16,7 +16,7 @@
*/
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { DebugElement } from '@angular/core';
import { AlfrescoAuthenticationService, CoreModule } from 'ng2-alfresco-core';
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
import { AlfrescoLoginComponent } from './alfresco-login.component';
@@ -24,7 +24,7 @@ import { AuthenticationMock } from './../assets/authentication.service.mock';
import { TranslationMock } from './../assets/translation.service.mock';
describe('AlfrescoLogin', () => {
let component: any;
let component: AlfrescoLoginComponent;
let fixture: ComponentFixture<AlfrescoLoginComponent>;
let debug: DebugElement;
let element: any;
@@ -50,6 +50,8 @@ describe('AlfrescoLogin', () => {
debug = fixture.debugElement;
element = fixture.nativeElement;
component = fixture.componentInstance;
component.showRememberMe = true;
component.showLoginActions = true;
usernameInput = element.querySelector('#username');
passwordInput = element.querySelector('#password');
@@ -67,8 +69,10 @@ describe('AlfrescoLogin', () => {
expect(element.querySelector('#login-button')).toBeDefined();
expect(element.querySelector('#login-button').innerText).toEqual('LOGIN.BUTTON.LOGIN');
/*
expect(element.querySelector('#login-remember')).toBeDefined();
expect(element.querySelector('#login-remember').innerText).toEqual('LOGIN.LABEL.REMEMBER');
*/
expect(element.querySelector('#login-action-help')).toBeDefined();
expect(element.querySelector('#login-action-help').innerText).toEqual('LOGIN.ACTION.HELP');

6
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
View File

@@ -35,6 +35,12 @@ export class AlfrescoLoginComponent implements OnInit {
isPasswordShow: boolean = false;
@Input()
showRememberMe: boolean = false;
@Input()
showLoginActions: boolean = false;
@Input()
needHelpLink: string = '';