From b1e71790f6c0dba3ce47dd27ad6f1a89f5e0f90e Mon Sep 17 00:00:00 2001
From: Alex Lembiyeuski <alembiyeuski@d2iq.com>
Date: Wed, 1 Jun 2022 13:20:05 +0200
Subject: [PATCH] Fix logout button (#17)

* Pin alpine repository version

* Introduce a new LogoutButton component
---
 components/centraldashboard/Dockerfile        |  2 +-
 .../public/components/logout-button.js        | 77 +++++++++++++++++++
 .../public/components/main-page.js            |  1 +
 .../public/components/main-page.pug           |  3 +-
 4 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 components/centraldashboard/public/components/logout-button.js

diff --git a/components/centraldashboard/Dockerfile b/components/centraldashboard/Dockerfile
index 1d17384aad5..a0182c9afaf 100644
--- a/components/centraldashboard/Dockerfile
+++ b/components/centraldashboard/Dockerfile
@@ -13,7 +13,7 @@ RUN apk update && apk upgrade && \
     echo @stable http://nl.alpinelinux.org/alpine/v3.15/community >> /etc/apk/repositories && \
     echo @stable http://nl.alpinelinux.org/alpine/v3.15/main >> /etc/apk/repositories
 
-RUN apk add --no-cache bash chromium@stable nss@stable \
+RUN apk add --no-cache bash@stable chromium@stable nss@stable \
     freetype@stable \
     harfbuzz@stable \
     ttf-freefont@stable \
diff --git a/components/centraldashboard/public/components/logout-button.js b/components/centraldashboard/public/components/logout-button.js
new file mode 100644
index 00000000000..87bcbb855bb
--- /dev/null
+++ b/components/centraldashboard/public/components/logout-button.js
@@ -0,0 +1,77 @@
+import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
+
+import '@polymer/iron-ajax/iron-ajax.js';
+import '@polymer/paper-button/paper-button.js';
+
+/**
+ * Logout button component.
+ * Handles the logout requests and post-logout redirects.
+ *
+ */
+
+export class LogoutButton extends PolymerElement {
+    static get template() {
+        return html`
+            <paper-button id="logout-button" on-tap="logout">
+                <iron-icon icon='kubeflow:logout' title="Logout"
+                </iron-icon>
+            </paper-button>
+            <iron-ajax
+                    id='logout'
+                    url='/logout'
+                    method='post'
+                    handle-as='json'
+                    headers='{{headers}}'
+                    on-response='_postLogout'>
+            </iron-ajax>
+        `;
+    }
+
+    static get properties() {
+        return {
+            headers: {
+                type: Object,
+                computed: '_setHeaders()',
+            },
+        };
+    }
+
+    /**
+     * After successful logout, redirects user to `afterLogoutURL`,
+     * received from the backend.
+     *
+     * @param {{Event}} event
+     * @private
+     */
+    _postLogout(event) {
+        window.location.replace(event.detail.response['afterLogoutURL']);
+    }
+
+    /**
+     * Call logout endpoint.
+     */
+    logout() {
+        // call iron-ajax
+        this.$.logout.generateRequest();
+    }
+
+    /**
+     * Set 'Authorization' header based on the existing cookie.
+     * Currently, the logout method only accepts authorization header, see:
+     * https://github.com/arrikto/oidc-authservice/blob/master/server.go#L386
+     *
+     * @return {{Object}} headers
+     * @private
+     */
+    _setHeaders() {
+        const cookie = ('; ' + document.cookie)
+            .split(`; authservice_session=`)
+            .pop()
+            .split(';')[0];
+        return {
+            'Authorization': `Bearer ${cookie}`,
+        };
+    }
+}
+
+customElements.define('logout-button', LogoutButton);
diff --git a/components/centraldashboard/public/components/main-page.js b/components/centraldashboard/public/components/main-page.js
index 7b4494119c3..5f5364d4f9a 100644
--- a/components/centraldashboard/public/components/main-page.js
+++ b/components/centraldashboard/public/components/main-page.js
@@ -39,6 +39,7 @@ import './namespace-needed-view.js';
 import './manage-users-view.js';
 import './resources/kubeflow-icons.js';
 import './iframe-container.js';
+import './logout-button.js';
 import utilitiesMixin from './utilities-mixin.js';
 import {IFRAME_LINK_PREFIX} from './iframe-link.js';
 
diff --git a/components/centraldashboard/public/components/main-page.pug b/components/centraldashboard/public/components/main-page.pug
index f4a4797bbbf..9e620fd4e1e 100644
--- a/components/centraldashboard/public/components/main-page.pug
+++ b/components/centraldashboard/public/components/main-page.pug
@@ -80,8 +80,7 @@ app-drawer-layout.flex(narrow='{{narrowMode}}',
                     selected='{{namespace}}', hides, hidden$='[[hideNamespaces]]'
                     all-namespaces='[[allNamespaces]]')
                 footer#User-Badge
-                    a(target="_top", href="/logout")
-                        iron-icon.icon(icon='kubeflow:logout' title="Logout")
+                    logout-button
         main#Content
             section#ViewTabs(hidden$='[[hideTabs]]')
                 paper-tabs(selected='[[page]]', attr-for-selected='page')