From bee166c982df33f4e690eb2f08c0902a4545a946 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Thu, 7 Sep 2017 13:01:16 +0100 Subject: [PATCH] support redirection on successful login (#2306) --- .../login/login-demo.component.html | 19 +++--- ng2-components/ng2-alfresco-login/README.md | 64 +++++++++++-------- ng2-components/ng2-alfresco-login/index.ts | 2 + .../src/components/login.component.spec.ts | 36 ++++++++--- .../src/components/login.component.ts | 12 +++- .../directives/login-footer.directive.spec.ts | 4 +- .../directives/login-header.directive.spec.ts | 2 + 7 files changed, 90 insertions(+), 49 deletions(-) diff --git a/demo-shell-ng2/app/components/login/login-demo.component.html b/demo-shell-ng2/app/components/login/login-demo.component.html index 3d2cbab27e..901dc463ec 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.html +++ b/demo-shell-ng2/app/components/login/login-demo.component.html @@ -45,15 +45,16 @@ settings - +

+ +``` + +#### 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 | \ | To change the logo image with a customised image | +| copyrightText | string | \ | The copyright text below the login box | +| backgroundImageUrl | string | \ | 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 @@ -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 @@ -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) \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-login/index.ts b/ng2-components/ng2-alfresco-login/index.ts index 13b659bfcc..e97b662933 100644 --- a/ng2-components/ng2-alfresco-login/index.ts +++ b/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 ], diff --git a/ng2-components/ng2-alfresco-login/src/components/login.component.spec.ts b/ng2-components/ng2-alfresco-login/src/components/login.component.spec.ts index 553e50ee79..22b893e62d 100644 --- a/ng2-components/ng2-alfresco-login/src/components/login.component.spec.ts +++ b/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; 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, - MdCheckboxModule, - CoreModule.forRoot() + RouterTestingModule, + MaterialModule, + CoreModule + ], + declarations: [ + LoginComponent ], - declarations: [LoginComponent], providers: [ - {provide: AlfrescoAuthenticationService, useClass: AuthenticationMock}, - {provide: AlfrescoTranslationService, useClass: TranslationMock} + { provide: AlfrescoAuthenticationService, useClass: AuthenticationMock }, + { 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('© 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', () => { diff --git a/ng2-components/ng2-alfresco-login/src/components/login.component.ts b/ng2-components/ng2-alfresco-login/src/components/login.component.ts index 244c0ae126..a079c51ac7 100644 --- a/ng2-components/ng2-alfresco-login/src/components/login.component.ts +++ b/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; diff --git a/ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.spec.ts b/ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.spec.ts index ded5c8d737..d8f2a48981 100644 --- a/ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.spec.ts +++ b/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 ], diff --git a/ng2-components/ng2-alfresco-login/src/directives/login-header.directive.spec.ts b/ng2-components/ng2-alfresco-login/src/directives/login-header.directive.spec.ts index fe1d3cfdcb..97d8c7583b 100644 --- a/ng2-components/ng2-alfresco-login/src/directives/login-header.directive.spec.ts +++ b/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 ],