diff --git a/components/centraldashboard/Dockerfile b/components/centraldashboard/Dockerfile index 71300e00a64..d0b56901df4 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` + + + + + + `; + } + + 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 ef032fbbd30..f5a40dee330 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 26aee9f5956..f0e03a38e6d 100644 --- a/components/centraldashboard/public/components/main-page.pug +++ b/components/centraldashboard/public/components/main-page.pug @@ -72,8 +72,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')