[ADF-1613] logout directive (#2393)

* logout directive

* test fixes

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

@@ -87,7 +87,7 @@
             <md-icon>info_outline</md-icon>
             <span>About</span>
         </a>
-        <button md-menu-item (click)="onLogout($event)">
+        <button md-menu-item adf-logout>
             <md-icon>exit_to_app</md-icon>
             <span>Logout</span>
         </button>

demo-shell-ng2/app/app.component.ts

@@ -16,14 +16,7 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { Router } from '@angular/router';
+import { AlfrescoSettingsService, AlfrescoTranslationService, StorageService } from 'ng2-alfresco-core';
-import {
-    AlfrescoAuthenticationService,
-    AlfrescoSettingsService,
-    AlfrescoTranslationService,
-    LogService,
-    StorageService
-} from 'ng2-alfresco-core';
 
 @Component({
     selector: 'adf-app',
@@ -34,12 +27,9 @@ import {
 export class AppComponent {
     searchTerm: string = '';
 
-    constructor(private authService: AlfrescoAuthenticationService,
+    constructor(private settingsService: AlfrescoSettingsService,
-                private router: Router,
-                private settingsService: AlfrescoSettingsService,
                 private translateService: AlfrescoTranslationService,
-                private storage: StorageService,
+                private storage: StorageService) {
-                private logService: LogService) {
         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);
     }

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
+<button adf-logout>Logout</button>
+```
+
 ## Node Permission directive
 
 Selectively disables an HTML element or Angular component

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,

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: '<button adf-logout></button>'
+    })
+    class TestComponent {}
+
+    let fixture: ComponentFixture<TestComponent>;
+    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' ]);
+    });
+
+});

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']);
+    }
+}