Fix the logout button to work with the recent version of `oidc-authse…

…rvice` (kubeflow#6609)

* Pin alpine repository version

* Introduce a new LogoutButton component

components/centraldashboard/Dockerfile

@@ -8,15 +8,15 @@ ENV BUILD_COMMIT=$commit
 ENV CHROME_BIN=/usr/bin/chromium
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 
-RUN apt update -qq && apt install -qq -y chromium gnulib 
+RUN apt update -qq && apt install -qq -y chromium gnulib
 
 COPY . /centraldashboard
 WORKDIR /centraldashboard
 
 RUN BUILDARCH="$(dpkg --print-architecture)" &&  npm rebuild && \
     if [ "$BUILDARCH" = "arm64" ]  ||  \
     [ "$BUILDARCH" = "armhf" ]; then \
-    export CFLAGS=-Wno-error && \ 
+    export CFLAGS=-Wno-error && \
     export CXXFLAGS=-Wno-error;  \
     fi && \
     npm install && \

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

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

@@ -82,8 +82,7 @@ app-drawer-layout.flex(narrow='{{narrowMode}}',
                     all-namespaces='[[allNamespaces]]', 
                     user='[[user]]')
                 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')