support redirection on successful login (#2306)

demo-shell-ng2/app/components/login/login-demo.component.html

@@ -45,15 +45,16 @@
     <md-icon>settings</md-icon>
 </a>
 
-<alfresco-login #alfrescologin
+<alfresco-login
-                [providers]="providers"
+    #alfrescologin
-                [fieldsValidation]="customValidation"
+    [providers]="providers"
-                [disableCsrf]="disableCsrf"
+    [fieldsValidation]="customValidation"
-                [showLoginActions]="showFooter"
+    [disableCsrf]="disableCsrf"
-                [showRememberMe]="showFooter"
+    [showLoginActions]="showFooter"
-                copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
+    [showRememberMe]="showFooter"
-                (onSuccess)="onLogin($event)"
+    copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
-                (onError)="onError($event)">
+    (onSuccess)="onLogin($event)"
+    (onError)="onError($event)">
     <div class="mobile-settings">
         <p>
             <md-slide-toggle

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

@@ -35,11 +35,46 @@ Authenticates to Alfresco Content Services and Alfresco Process Services.
 
 ### Basic usage
 
+```html
+<adf-login 
+    providers="ECM"
+    successRoute="/home">
+</adf-login>
+```
+
+#### Properties
+
+| Name | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| providers | string | | Possible valid values are ECM, BPM or ALL. The default behaviour of this component will log in only in the ECM . If you want to log in in both systems the correct value to use is ALL. |
+| successRoute | string | | Route to redirect to upon successful login. |
+| disableCsrf | boolean | false | To prevent the CSRF Token from being submitted. Only for Alfresco Process Services 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 | \<ADF logo image> | To change the logo image with a customised image |
+| copyrightText | string | \<ADF copyright string> | The copyright text below the login box |
+| backgroundImageUrl | string | \<ADF 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 |
+| --- | --- |
+| onSuccess | Raised when the login is done |
+| onError | Raised when the login fails |
+| executeSubmit | Raised when the form is submitted |
+
+### Details
+
+#### Handling events
+
 **app.component.html**
 
 ```html
 <adf-login 
-    [providers]="'ALL'"
+    providers="ALL"
     (onSuccess)="mySuccessMethod($event)"
     (onError)="myErrorMethod($event)">
 </adf-login>
@@ -60,31 +95,6 @@ export class AppComponent {
 }
 ```
 
-#### Properties
-
-| Name | Type | Default Value | Description |
-| --- | --- | --- | --- |
-| providers | string | ECM | Possible valid values are ECM, BPM or ALL. The default behaviour of this component will log in only in the ECM . If you want to log in in both systems the correct value to use is ALL |
-| disableCsrf | boolean | false | To prevent the CSRF Token from being submitted. Only for Alfresco Process Services 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 |
-| copyrightText | string | © 2017 Alfresco Software, Inc. All Rights Reserved. | The copyright text below the login box |
-| 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 |
-| --- | --- |
-| onSuccess | Raised when the login is done |
-| onError | Raised when the login fails |
-| executeSubmit | Raised when the form is submitted |
-
-### Details
-
 #### Change footer content
 
 <img src="assets/custom-footer.png" width="400" />
@@ -280,4 +290,4 @@ npm start
 
 ### License
 
-[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
+[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-login/index.ts

@@ -16,6 +16,7 @@
  */
 
 import { ModuleWithProviders, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 
 import { LoginComponent } from './src/components/login.component';
@@ -42,6 +43,7 @@ export const ALFRESCO_LOGIN_DIRECTIVES: any[] = [
 
 @NgModule({
     imports: [
+        RouterModule,
         CoreModule,
         MaterialModule
     ],

ng2-components/ng2-alfresco-login/src/components/login.component.spec.ts

@@ -17,9 +17,12 @@
 
 import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdCheckboxModule, MdInputModule } from '@angular/material';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AlfrescoAuthenticationService, CoreModule } from 'ng2-alfresco-core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+
+import { MaterialModule } from '../material.module';
 import { AuthenticationMock } from './../assets/authentication.service.mock';
 import { TranslationMock } from './../assets/translation.service.mock';
 import { LoginComponent } from './login.component';
@@ -29,6 +32,8 @@ describe('AlfrescoLogin', () => {
     let fixture: ComponentFixture<LoginComponent>;
     let debug: DebugElement;
     let element: any;
+    let authService: AlfrescoAuthenticationService;
+    let router: Router;
 
     let usernameInput, passwordInput;
 
@@ -38,14 +43,16 @@ describe('AlfrescoLogin', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                MdInputModule,
+                RouterTestingModule,
-                MdCheckboxModule,
+                MaterialModule,
-                CoreModule.forRoot()
+                CoreModule
+            ],
+            declarations: [
+                LoginComponent
             ],
-            declarations: [LoginComponent],
             providers: [
-                {provide: AlfrescoAuthenticationService, useClass: AuthenticationMock},
+                { provide: AlfrescoAuthenticationService, useClass: AuthenticationMock },
-                {provide: AlfrescoTranslationService, useClass: TranslationMock}
+                { provide: AlfrescoTranslationService, useClass: TranslationMock }
             ]
         }).compileComponents();
     }));
@@ -62,6 +69,9 @@ describe('AlfrescoLogin', () => {
         usernameInput = element.querySelector('#username');
         passwordInput = element.querySelector('#password');
 
+        authService = TestBed.get(AlfrescoAuthenticationService);
+        router = TestBed.get(Router);
+
         fixture.detectChanges();
     });
 
@@ -78,6 +88,14 @@ describe('AlfrescoLogin', () => {
         fixture.detectChanges();
     }
 
+    it('should redirect to route on successful login', () => {
+        const redirect = '/home';
+        component.successRoute = redirect;
+        spyOn(router, 'navigate');
+        loginWithCredentials('fake-username', 'fake-password');
+        expect(router.navigate).toHaveBeenCalledWith([redirect]);
+    });
+
     describe('Login button', () => {
 
         const getLoginButton = () => element.querySelector('#login-button');
@@ -89,7 +107,6 @@ describe('AlfrescoLogin', () => {
         });
 
         it('should be changed to the "checking key" after a login attempt', () => {
-            const authService = TestBed.get(AlfrescoAuthenticationService);
             spyOn(authService, 'login').and.returnValue({ subscribe: () => { } });
 
             loginWithCredentials('fake-username', 'fake-password');
@@ -130,7 +147,6 @@ describe('AlfrescoLogin', () => {
         });
 
         it('should be taken into consideration during login attempt', () => {
-            const authService = TestBed.get(AlfrescoAuthenticationService);
             spyOn(authService, 'login').and.returnValue({ subscribe: () => { } });
             component.rememberMe = false;
 
@@ -161,7 +177,7 @@ describe('AlfrescoLogin', () => {
 
         it('should render the default copyright text', () => {
             expect(element.querySelector('[data-automation-id="login-copyright"]')).toBeDefined();
-            expect(element.querySelector('[data-automation-id="login-copyright"]').innerText).toEqual('&#169; 2016 Alfresco Software, Inc. All Rights Reserved.');
+            expect(element.querySelector('[data-automation-id="login-copyright"]').innerText).toEqual('\u00A9 2016 Alfresco Software, Inc. All Rights Reserved.');
         });
 
         it('should render the customised copyright text', () => {

ng2-components/ng2-alfresco-login/src/components/login.component.ts

@@ -17,6 +17,7 @@
 
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import { AlfrescoAuthenticationService, AlfrescoSettingsService, AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
 import { FormSubmitEvent } from '../models/form-submit-event.model';
 
@@ -58,7 +59,7 @@ export class LoginComponent implements OnInit {
     backgroundImageUrl: string = require('../assets/images/background.svg');
 
     @Input()
-    copyrightText: string = '© 2016 Alfresco Software, Inc. All Rights Reserved.';
+    copyrightText: string = '\u00A9 2016 Alfresco Software, Inc. All Rights Reserved.';
 
     @Input()
     providers: string;
@@ -69,6 +70,9 @@ export class LoginComponent implements OnInit {
     @Input()
     disableCsrf: boolean;
 
+    @Input()
+    successRoute: string = null;
+
     @Output()
     onSuccess = new EventEmitter();
 
@@ -105,7 +109,8 @@ export class LoginComponent implements OnInit {
                 private settingsService: AlfrescoSettingsService,
                 private translateService: AlfrescoTranslationService,
                 private logService: LogService,
-                private elementRef: ElementRef) {
+                private elementRef: ElementRef,
+                private router: Router) {
         this.initFormError();
         this.initFormFieldsMessages();
     }
@@ -179,6 +184,9 @@ export class LoginComponent implements OnInit {
                     this.actualLoginStep = LoginSteps.Welcome;
                     this.success = true;
                     this.onSuccess.emit({token: token, username: values.username, password: values.password});
+                    if (this.successRoute) {
+                        this.router.navigate([this.successRoute]);
+                    }
                 },
                 (err: any) => {
                     this.actualLoginStep = LoginSteps.Landing;

ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.spec.ts

@@ -16,10 +16,11 @@
  */
 
 import { async, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { CoreModule } from 'ng2-alfresco-core';
-import { MaterialModule } from '../material.module';
 
 import { LoginComponent } from '../components/login.component';
+import { MaterialModule } from '../material.module';
 import { LoginFooterDirective } from './login-footer.directive';
 
 describe('LoginFooterDirective', () => {
@@ -29,6 +30,7 @@ describe('LoginFooterDirective', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
+                RouterTestingModule,
                 CoreModule,
                 MaterialModule
             ],

ng2-components/ng2-alfresco-login/src/directives/login-header.directive.spec.ts

@@ -16,6 +16,7 @@
  */
 
 import { async, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { MaterialModule } from '../material.module';
 
@@ -29,6 +30,7 @@ describe('LoginHeaderDirective', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
+                RouterTestingModule,
                 CoreModule,
                 MaterialModule
             ],