diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html index 8d75ad1c28..6ecf0aadbc 100644 --- a/demo-shell-ng2/app/app.component.html +++ b/demo-shell-ng2/app/app.component.html @@ -87,7 +87,7 @@ info_outline About - diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts index 5d4dc4c070..a7327baeb4 100644 --- a/demo-shell-ng2/app/app.component.ts +++ b/demo-shell-ng2/app/app.component.ts @@ -16,14 +16,7 @@ */ import { Component, ViewEncapsulation } from '@angular/core'; -import { Router } from '@angular/router'; -import { - AlfrescoAuthenticationService, - AlfrescoSettingsService, - AlfrescoTranslationService, - LogService, - StorageService -} from 'ng2-alfresco-core'; +import { AlfrescoSettingsService, AlfrescoTranslationService, StorageService } from 'ng2-alfresco-core'; @Component({ selector: 'adf-app', @@ -34,12 +27,9 @@ import { export class AppComponent { searchTerm: string = ''; - constructor(private authService: AlfrescoAuthenticationService, - private router: Router, - private settingsService: AlfrescoSettingsService, + constructor(private settingsService: AlfrescoSettingsService, private translateService: AlfrescoTranslationService, - private storage: StorageService, - private logService: LogService) { + private storage: StorageService) { this.setProvider(); } @@ -47,28 +37,6 @@ export class AppComponent { return location.pathname === '/login' || location.pathname === '/settings'; } - onLogout(event) { - event.preventDefault(); - this.authService.logout() - .subscribe( - () => { - this.navigateToLogin(); - }, - (error: any) => { - if (error && error.response && error.response.status === 401) { - this.navigateToLogin(); - } else { - this.logService.error('An unknown error occurred while logging out', error); - this.navigateToLogin(); - } - } - ); - } - - navigateToLogin() { - this.router.navigate(['/login']); - } - changeLanguage(lang: string) { this.translateService.use(lang); } diff --git a/ng2-components/ng2-alfresco-core/README.md b/ng2-components/ng2-alfresco-core/README.md index 646a367034..716a4bd9a1 100644 --- a/ng2-components/ng2-alfresco-core/README.md +++ b/ng2-components/ng2-alfresco-core/README.md @@ -444,6 +444,14 @@ For Angular to be able to load your custom component dynamically, you have to re export class MyModule {} ``` +## Logout directive + +Upon the dectorated element click, logs out and automatically redirects to `/`login` route: + +```html + +``` + ## Node Permission directive Selectively disables an HTML element or Angular component diff --git a/ng2-components/ng2-alfresco-core/index.ts b/ng2-components/ng2-alfresco-core/index.ts index 05ed203172..0f7fd317cf 100644 --- a/ng2-components/ng2-alfresco-core/index.ts +++ b/ng2-components/ng2-alfresco-core/index.ts @@ -54,6 +54,7 @@ import { UploadService } from './src/services/upload.service'; import { UserPreferencesService } from './src/services/user-preferences.service'; import { HighlightDirective } from './src/directives/highlight.directive'; +import { LogoutDirective } from './src/directives/logout.directive'; import { DeletedNodesApiService } from './src/services/deleted-nodes-api.service'; import { DiscoveryApiService } from './src/services/discovery-api.service'; import { FavoritesApiService } from './src/services/favorites-api.service'; @@ -249,6 +250,7 @@ export function createTranslateLoader(http: Http, logService: LogService) { declarations: [ ...obsoleteMdlDirectives(), ...pipes(), + LogoutDirective, UploadDirective, NodePermissionDirective, HighlightDirective, @@ -291,6 +293,7 @@ export function createTranslateLoader(http: Http, logService: LogService) { ToolbarModule, ...obsoleteMdlDirectives(), ...pipes(), + LogoutDirective, UploadDirective, NodePermissionDirective, HighlightDirective, diff --git a/ng2-components/ng2-alfresco-core/src/directives/logout.directive.spec.ts b/ng2-components/ng2-alfresco-core/src/directives/logout.directive.spec.ts new file mode 100644 index 0000000000..c73095b37b --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/directives/logout.directive.spec.ts @@ -0,0 +1,79 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { Router } from '@angular/router'; +import { RouterTestingModule } from '@angular/router/testing'; +import { Observable } from 'rxjs/Rx'; + +import { AuthenticationService, CoreModule } from 'ng2-alfresco-core'; + +describe('LogoutDirective', () => { + + @Component({ + selector: 'adf-test-component', + template: '' + }) + class TestComponent {} + + let fixture: ComponentFixture; + let router: Router; + let authService: AuthenticationService; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + RouterTestingModule, + CoreModule + ], + declarations: [ + TestComponent + ] + }).compileComponents(); + })); + + beforeEach(() => { + router = TestBed.get(Router); + authService = TestBed.get(AuthenticationService); + fixture = TestBed.createComponent(TestComponent); + fixture.detectChanges(); + }); + + it('should redirect to login on click', () => { + spyOn(router, 'navigate').and.callThrough(); + spyOn(authService, 'logout').and.returnValue(Observable.of(true)); + + const button = fixture.nativeElement.querySelector('button'); + button.click(); + + expect(authService.logout).toHaveBeenCalled(); + expect(router.navigate).toHaveBeenCalledWith([ '/login' ]); + }); + + it('should redirect to login even on logout error', () => { + spyOn(router, 'navigate').and.callThrough(); + spyOn(authService, 'logout').and.returnValue(Observable.throw('err')); + + const button = fixture.nativeElement.querySelector('button'); + button.click(); + + expect(authService.logout).toHaveBeenCalled(); + expect(router.navigate).toHaveBeenCalledWith([ '/login' ]); + }); + +}); diff --git a/ng2-components/ng2-alfresco-core/src/directives/logout.directive.ts b/ng2-components/ng2-alfresco-core/src/directives/logout.directive.ts new file mode 100644 index 0000000000..30dcb4169b --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/directives/logout.directive.ts @@ -0,0 +1,53 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core'; +import { Router } from '@angular/router'; +import { AuthenticationService } from '../services/authentication.service'; + +@Directive({ + selector: '[adf-logout]' +}) +export class LogoutDirective implements OnInit { + + constructor( + private elementRef: ElementRef, + private renderer: Renderer2, + private router: Router, + private auth: AuthenticationService) { + } + + ngOnInit() { + if (this.elementRef.nativeElement) { + this.renderer.listen(this.elementRef.nativeElement, 'click', (evt) => { + evt.preventDefault(); + this.logout(); + }); + } + } + + logout() { + this.auth.logout().subscribe( + () => this.redirectToLogin(), + () => this.redirectToLogin() + ); + } + + redirectToLogin() { + this.router.navigate(['/login']); + } +}