centraldashboard: Logout with AuthService

The AuthService logout is implemented as follows:
1. Send POST request to logout endpoint with credentials in `Authorization:
Bearer <token>` header. The token is found in the cookie set by the authservice,
called `authservice_session`.
2. A successful response will have a status code of 201 and will return a JSON
response. The JSON response includes the URL to redirect to after logout.

This commit is a rebase of this original GH PR: kubeflow#50

Signed-off-by: Stefano Fioravanzo <stefano@arrikto.com>

components/centraldashboard/public/components/main-page.css

@@ -248,15 +248,20 @@ neon-animatable {
     height: 100%;
 }
 
-#User-Badge {
+#LogoutButton {
     right: 16px;
     position: absolute;
 }
 
-#User-Badge .icon {
+#LogoutButton .icon {
     color: var(--primary-background-color);
 }
 
+#LogoutButton .icon:hover {
+    color: var(--accent-color);
+    cursor: pointer;
+}
+
 #Menu {
     --paper-icon-button: {
         width: 44px;

components/centraldashboard/public/components/main-page.js

@@ -98,6 +98,7 @@ export class MainPage extends utilitiesMixin(PolymerElement) {
             },
             namespaces: Array,
             namespace: String,
+            logoutUrl: {type: String, value: '/authservice/logout'},
             user: String,
             isClusterAdmin: {type: Boolean, value: false},
             isolationMode: {type: String, value: 'undecided', readOnly: true},
@@ -232,9 +233,6 @@ export class MainPage extends utilitiesMixin(PolymerElement) {
         let hideSidebar = false;
 
         switch (newPage) {
-        case 'logout':
-            window.top.location.href = '/logout';
-            break;
         case 'activity':
             this.page = 'activity';
             hideTabs = false;
@@ -427,6 +425,42 @@ export class MainPage extends utilitiesMixin(PolymerElement) {
         // trigger template render
         this.menuLinks = JSON.parse(JSON.stringify(this.menuLinks));
     }
+
+    async logout() {
+        this.$.Logout.headers['Authorization'] = 'Bearer ' +
+            this._getAuthorizationHeader();
+        const req = await this.$.Logout.generateRequest();
+        await req.completes;
+        // eslint-disable-next-line no-console
+        console.log(req);
+        if (!req.succeeded) {
+            // eslint-disable-next-line no-console
+            console.log('Logout request failed');
+        }
+        if (req.response && req.response.afterLogoutURL) {
+            window.location.replace(req.response.afterLogoutURL);
+        }
+    }
+
+    _getAuthorizationHeader() {
+        const session = this._getCookie('authservice_session');
+        return session;
+    }
+
+    _getCookie(cname) {
+        const name = cname + '=';
+        const ca = document.cookie.split(';');
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) == ' ') {
+                c = c.substring(1);
+            }
+            if (c.indexOf(name) == 0) {
+                return c.substring(name.length, c.length);
+            }
+        }
+        return '';
+    }
 }
 
 window.customElements.define('main-page', MainPage);

components/centraldashboard/public/components/main-page.pug

@@ -4,6 +4,7 @@ iron-ajax(auto, url='/api/dashboard-links', handle-as='json',
     on-response='_onHasDashboardLinksResponse', on-error='_onHasDashboardLinksError', loading='{{pageLoading}}')
 iron-ajax#envInfo(auto='[[_shouldFetchEnv]]', url='/api/workgroup/env-info', handle-as='json',
     on-response='_onEnvInfoResponse')
+iron-ajax#Logout(method="POST", url='[[logoutUrl]]', handle-as='json')
 aside#PageLoader(hidden='{{!pageLoading}}')
 app-drawer-layout.flex(narrow='{{narrowMode}}',
         force-narrow='[[or(thinView, hideSidebar)]]',
@@ -79,8 +80,8 @@ app-drawer-layout.flex(narrow='{{narrowMode}}',
                     query-params='{{queryParams}}', namespaces='[[namespaces]]'
                     selected='{{namespace}}', hides, hidden$='[[hideNamespaces]]'
                     all-namespaces='[[allNamespaces]]')
-                footer#User-Badge
-                    a(target="_top", href="/logout")
+                footer#LogoutButton
+                    a(target="_top", on-click='logout')
                         iron-icon.icon(icon='kubeflow:logout' title="Logout")
         main#Content
             section#ViewTabs(hidden$='[[hideTabs]]')