Fix logout button (#17)

* Pin alpine repository version

* Introduce a new LogoutButton component

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 \

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);

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';
 

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')