Migrate from EventBus to provider

README.md

@@ -30,12 +30,13 @@ the version number in its `package.json` is higher than the version number on np
 ## Reserved attributes
 
 | Attribute                | Description                                                         |
-| ----------------- | ------------------------------------------------------------------- |
+| ------------------------ | ------------------------------------------------------------------- |
 | `subscribe`              | Used in all components to subscribe to attributes set by a provider |
 | `unsubscribe`            | Reserved for future use                                             |
 | `auth`                   | Authentication information, set by the authentication component     |
 | `lang`                   | Currently selected language, set by the language selector           |
 | `entry-point-url`        | Entry point url for all api requests                                |
+| `requested-login-status` | Used by the login buttons to trigger a login in auth components     |
 
 ## Reserved events
 

packages/app-shell/src/app-shell.js

@@ -2,7 +2,7 @@ import {createI18nInstance} from './i18n.js';
 import {html, css} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {LanguageSelect} from '@dbp-toolkit/language-select';
-import {Icon, EventBus} from '@dbp-toolkit/common';
+import {Icon} from '@dbp-toolkit/common';
 import {AuthKeycloak} from '@dbp-toolkit/auth';
 import {AuthMenuButton} from './auth-menu-button.js';
 import {Notification} from '@dbp-toolkit/notification';
@@ -60,8 +60,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
         this.env = '';
         this.buildUrl = '';
         this.buildTime = '';
-
-        this._updateAuth = this._updateAuth.bind(this);
         this._loginStatus = 'unknown';
 
         this.matomoUrl = '';
@@ -73,6 +71,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
         this.shellName = 'TU Graz';
         this.shellSubname= 'Graz University of Technology';
         this.noBrand = false;
+        this.auth = {};
     }
 
     static get scopedElements() {
@@ -250,43 +249,22 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
             buildUrl: { type: String, attribute: "build-url" },
             buildTime: { type: String, attribute: "build-time" },
             env: { type: String },
+            auth: { type: Object },
         };
     }
 
-    _updateAuth(login) {
-        if (login.status != this._loginStatus) {
-            console.log('Login status: ' + login.status);
-        }
-
-        this._loginStatus = login.status;
-
-        // Clear the session storage when the user logs out
-        if (this._loginStatus === 'logging-out') {
-            sessionStorage.clear();
-        }
-    }
-
     connectedCallback() {
         super.connectedCallback();
 
-        this._bus = new EventBus();
-
         if (this.src)
             this.fetchMetadata(this.src);
         this.initRouter();
 
-        this._bus.subscribe('auth-update', this._updateAuth);
-
         this.updateComplete.then(()=> {
             this.matomo = this.shadowRoot.querySelector(this.constructor.getScopedTagName('dbp-matomo'));
         });
     }
 
-    disconnectedCallback() {
-        this._bus.close();
-        super.disconnectedCallback();
-    }
-
     /**
      * Switches language if another language is requested
      *
@@ -304,7 +282,9 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
 
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
-            if (propName === "lang") {
+            switch (propName) {
+                case 'lang':
+                    i18n.changeLanguage(this.lang);
                     // For screen readers
                     document.documentElement.setAttribute("lang", this.lang);
                     i18n.changeLanguage(this.lang);
@@ -312,6 +292,22 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
                     this.router.update();
                     this.subtitle = this.activeMetaDataText("short_name");
                     this.description = this.activeMetaDataText("description");
+                break;
+                case 'auth':
+                {
+                    const loginStatus = this.auth['login-status'];
+                    if (loginStatus !== this._loginStatus) {
+                        console.log('Login status: ' + loginStatus);
+                    }
+
+                    this._loginStatus = loginStatus;
+
+                    // Clear the session storage when the user logs out
+                    if (this._loginStatus === 'logging-out') {
+                        sessionStorage.clear();
+                    }
+                }
+                break;
             }
         });
 
@@ -815,8 +811,8 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
 
         return html`
             <slot class="${slotClassMap}"></slot>
-            <dbp-auth-keycloak lang="${this.lang}" entry-point-url="${this.entryPointUrl}" url="${kc.url}" realm="${kc.realm}" client-id="${kc.clientId}" silent-check-sso-redirect-uri="${kc.silentCheckSsoRedirectUri || ''}" scope="${kc.scope || ''}"  idp-hint="${kc.idpHint || ''}" load-person ?force-login="${kc.forceLogin}" ?try-login="${!kc.forceLogin}"></dbp-auth-keycloak>
-            <dbp-matomo endpoint="${this.matomoUrl}" site-id="${this.matomoSiteId}" git-info="${this.gitInfo}"></dbp-matomo>
+            <dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" url="${kc.url}" realm="${kc.realm}" client-id="${kc.clientId}" silent-check-sso-redirect-uri="${kc.silentCheckSsoRedirectUri || ''}" scope="${kc.scope || ''}"  idp-hint="${kc.idpHint || ''}" load-person ?force-login="${kc.forceLogin}" ?try-login="${!kc.forceLogin}"></dbp-auth-keycloak>
+            <dbp-matomo subscribe="auth" endpoint="${this.matomoUrl}" site-id="${this.matomoSiteId}" git-info="${this.gitInfo}"></dbp-matomo>
             <div class="${mainClassMap}">
             <div id="main">
                 <dbp-notification lang="${this.lang}"></dbp-notification>
@@ -827,7 +823,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
                     <div class="hd1-middle">
                     </div>
                     <div class="hd1-right">
-                        <dbp-auth-menu-button class="auth-button" lang="${this.lang}"></dbp-auth-menu-button>
+                        <dbp-auth-menu-button subscribe="auth" class="auth-button" lang="${this.lang}"></dbp-auth-menu-button>
                     </div>
                     <div class="hd2-left">
                         <div class="header">

packages/app-shell/src/auth-menu-button.js

@@ -3,8 +3,9 @@ import {html, css} from 'lit-element';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonStyles from '@dbp-toolkit/common/styles';
-import {Icon, EventBus} from '@dbp-toolkit/common';
+import {Icon} from '@dbp-toolkit/common';
 import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
+import {LoginStatus} from "@dbp-toolkit/auth/src/util";
 
 
 const i18n = createI18nInstance();
@@ -15,7 +16,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
         super();
         this.lang = 'de';
         this.showImage = false;
-        this._loginData = {};
+        this.auth = {};
 
         this.closeDropdown = this.closeDropdown.bind(this);
         this.onWindowResize = this.onWindowResize.bind(this);
@@ -32,7 +33,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
             ...super.properties,
             lang: { type: String },
             showImage: { type: Boolean, attribute: 'show-image' },
-            _loginData: { type: Object, attribute: false },
+            auth: { type: Object },
         };
     }
 
@@ -43,18 +44,12 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     connectedCallback() {
         super.connectedCallback();
 
-        this._bus = new EventBus();
-        this._bus.subscribe('auth-update', (data) => {
-            this._loginData = data;
-        });
-
         window.addEventListener('resize', this.onWindowResize);
         document.addEventListener('click', this.closeDropdown);
     }
 
     disconnectedCallback() {
         window.removeEventListener('resize', this.onWindowResize);
-        this._bus.close();
         document.removeEventListener('click', this.closeDropdown);
         super.disconnectedCallback();
     }
@@ -76,12 +71,12 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     }
 
     onLoginClicked(e) {
-        this._bus.publish('auth-login');
+        this.sendSetPropertyEvent('requested-login-status', LoginStatus.LOGGED_IN);
         e.preventDefault();
     }
 
     onLogoutClicked(e) {
-        this._bus.publish('auth-logout');
+        this.sendSetPropertyEvent('requested-login-status', LoginStatus.LOGGED_OUT);
     }
 
     update(changedProperties) {
@@ -251,14 +246,14 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     }
 
     renderLoggedIn() {
-        const person = this._loginData.person;
+        const person = this.auth.person;
         const imageURL = (this.showImage && person && person.image) ? person.image : null;
 
         return html`
             <div class="dropdown" @click="${this.onDropdownClick}">
                 <a href="#">
                     <div class="dropdown-trigger login-button">
-                        <div class="name">${this._loginData.name}</div>
+                        <div class="name">${this.auth['user-full-name']}</div>
                         <dbp-icon class="menu-icon" name="chevron-down" id="menu-chevron-icon"></dbp-icon>
                     </div>
                 </a>
@@ -307,7 +302,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     }
 
     render() {
-        const loggedIn = (this._loginData.status === 'logged-in');
+        const loggedIn = (this.auth['login-status'] === 'logged-in');
         return html`
             <div class="authbox">
                 ${loggedIn ? this.renderLoggedIn() : this.renderLoggedOut()}

packages/auth/README.md

@@ -27,6 +27,9 @@ npm i @dbp-toolkit/auth
 - `try-login` (optional, default: off): if enabled the a login will happen if the user is already logged in
   and finishing the login process would not result in a page location change (reload/redirect).
     - example `<dbp-auth-keycloak try-login></dbp-auth-keycloak>`
+- `requested-login-status` (optional, default: `unknown`): can be set to `logged-in` or `logged-out` to request a login or logout
+    - example `<dbp-auth-keycloak requested-login-status="logged-in"></dbp-auth-keycloak>`
+    - note: most often this should be an attribute that is not set directly, but subscribed at a provider
 
 ### Keycloak Specific Attributes
 
@@ -41,6 +44,7 @@ npm i @dbp-toolkit/auth
 The component emits a `dbp-set-property` event for the attribute `auth`:
 
 - `auth.subject`: Keycloak username
+- `auth.login-status`: Login status (`unknown`, `logging-in`, `logging-out`, `logged-in`, `logged-out`)
 - `auth.token`: Keycloak token to send with your requests
 - `auth.user-full-name`: Full name of the user
 - `auth.person-id`: Person identifier of the user

packages/auth/assets/index.html

@@ -8,8 +8,8 @@
 
 <body>
 
-<dbp-provider auth>
-    <dbp-auth-keycloak lang="de" entry-point-url="http://127.0.0.1:8000"
+<dbp-provider auth requested-login-status>
+    <dbp-auth-keycloak subscribe="requested-login-status" lang="de" entry-point-url="http://127.0.0.1:8000"
                        url="https://auth-dev.tugraz.at/auth"
                        realm="tugraz"
                        client-id="auth-dev-mw-frontend-local"
@@ -17,7 +17,7 @@
                        scope="optional-test-scope"
                        load-person
                        try-login></dbp-auth-keycloak>
-    <dbp-login-button lang="de" show-image></dbp-login-button>
+    <dbp-login-button subscribe="auth" lang="de" show-image></dbp-login-button>
 
     <dbp-auth-demo lang="de" entry-point-url="http://127.0.0.1:8000" subscribe="auth:auth"></dbp-auth-demo>
 </dbp-provider>

packages/auth/src/auth-keycloak.js

 import {i18n} from './i18n.js';
 import JSONLD from '@dbp-toolkit/common/jsonld';
-import {EventBus} from '@dbp-toolkit/common';
 import  {KeycloakWrapper} from './keycloak.js';
 import {LoginStatus} from './util.js';
 import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
@@ -12,6 +11,7 @@ import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
  *
  * Emits a dbp-set-property event for the attribute "auth":
  *   auth.subject: Keycloak username
+ *   auth.login-status: Login status (see object LoginStatus)
  *   auth.token: Keycloak token to send with your requests
  *   auth.user-full-name: Full name of the user
  *   auth.person-id: Person identifier of the user
@@ -31,6 +31,7 @@ export class AuthKeycloak extends AdapterLitElement {
         this.person = null;
         this.entryPointUrl = '';
         this._loginStatus = LoginStatus.UNKNOWN;
+        this.requestedLoginStatus = LoginStatus.UNKNOWN;
 
         // Keycloak config
         this.keycloakUrl = null;
@@ -44,9 +45,33 @@ export class AuthKeycloak extends AdapterLitElement {
     }
 
     update(changedProperties) {
+        console.log("changedProperties", changedProperties);
         changedProperties.forEach((oldValue, propName) => {
-            if (propName === "lang") {
+            switch (propName) {
+                case 'lang':
                     i18n.changeLanguage(this.lang);
+                break;
+                case 'requestedLoginStatus':
+                    console.log("requested-login-status changed", this.requestedLoginStatus);
+                    switch(this.requestedLoginStatus) {
+                        case LoginStatus.LOGGED_IN:
+                            this._kcwrapper.login({lang: this.lang, scope: this.scope || ''});
+                        break;
+                        case LoginStatus.LOGGED_OUT:
+                            // Keycloak will redirect right away without emitting events, so we have
+                            // to do this manually here
+                            if (this._loginStatus === LoginStatus.LOGGED_IN) {
+                                this._setLoginStatus(LoginStatus.LOGGING_OUT);
+                            }
+                            this._kcwrapper.logout();
+                            // In case logout was aborted, for example with beforeunload,
+                            // revert back to being logged in
+                            if (this._loginStatus === LoginStatus.LOGGING_OUT) {
+                                this._setLoginStatus(LoginStatus.LOGGED_IN);
+                            }
+                        break;
+                    }
+                break;
             }
         });
 
@@ -113,6 +138,7 @@ export class AuthKeycloak extends AdapterLitElement {
 
     sendSetPropertyEvents() {
         const auth = {
+            'login-status': this._loginStatus,
             'subject': this.subject,
             'token': this.token,
             'user-full-name': this.name,
@@ -126,6 +152,7 @@ export class AuthKeycloak extends AdapterLitElement {
         }
 
         this.sendSetPropertyEvent('auth', auth);
+        JSONLD.doInitializationOnce(this.entryPointUrl, this.token);
 
         // this.sendSetPropertyEvent('auth-subject', this.subject);
         // this.sendSetPropertyEvent('auth-token', this.token);
@@ -139,15 +166,7 @@ export class AuthKeycloak extends AdapterLitElement {
             return;
 
         this._loginStatus = status;
-
-        this._bus.publish('auth-update', {
-            status: this._loginStatus,
-            token: this.token,
-            name: this.name,
-            person: this.person,
-        }, {
-            retain: true,
-        });
+        this.sendSetPropertyEvents();
     }
 
     static get properties() {
@@ -170,6 +189,7 @@ export class AuthKeycloak extends AdapterLitElement {
             silentCheckSsoRedirectUri: { type: String, attribute: 'silent-check-sso-redirect-uri' },
             scope: { type: String },
             idpHint: { type: String, attribute: 'idp-hint' },
+            requestedLoginStatus: { type: String, attribute: 'requested-login-status' },
         };
     }
 
@@ -183,28 +203,9 @@ export class AuthKeycloak extends AdapterLitElement {
         if (!this.clientId)
             throw Error("client-id not set");
 
-        this._bus = new EventBus();
         this._kcwrapper = new KeycloakWrapper(this.keycloakUrl, this.realm, this.clientId, this.silentCheckSsoRedirectUri, this.idpHint);
         this._kcwrapper.addEventListener('changed', this._onKCChanged);
 
-        this._bus.subscribe('auth-login', () => {
-            this._kcwrapper.login({lang: this.lang, scope: this.scope || ''});
-        });
-
-        this._bus.subscribe('auth-logout', () => {
-            // Keycloak will redirect right away without emitting events, so we have
-            // to do this manually here
-            if (this._loginStatus === LoginStatus.LOGGED_IN) {
-                this._setLoginStatus(LoginStatus.LOGGING_OUT);
-            }
-            this._kcwrapper.logout();
-            // In case logout was aborted, for example with beforeunload,
-            // revert back to being logged in
-            if (this._loginStatus === LoginStatus.LOGGING_OUT) {
-                this._setLoginStatus(LoginStatus.LOGGED_IN);
-            }
-        });
-
         const handleLogin = async () => {
             if (this.forceLogin || this._kcwrapper.isLoggingIn()) {
                 this._setLoginStatus(LoginStatus.LOGGING_IN);
@@ -225,7 +226,6 @@ export class AuthKeycloak extends AdapterLitElement {
     disconnectedCallback() {
         this._kcwrapper.close();
         this._kcwrapper.removeEventListener('changed', this._onKCChanged);
-        this._bus.close();
 
         super.disconnectedCallback();
     }

packages/auth/src/login-button.js

@@ -3,9 +3,8 @@ import {html, css} from 'lit-element';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonStyles from '@dbp-toolkit/common/styles';
-import {LitElement} from "lit-element";
-import {EventBus} from '@dbp-toolkit/common';
 import {LoginStatus} from './util.js';
+import {AdapterLitElement} from "../../provider/src/adapter-lit-element";
 
 let logoutSVG = `
 <svg
@@ -63,12 +62,12 @@ let loggingInSVG = `
 </svg>
 `;
 
-export class LoginButton extends ScopedElementsMixin(LitElement) {
+export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
 
     constructor() {
         super();
         this.lang = 'de';
-        this._loginData = {};
+        this.auth = {};
     }
 
     static get scopedElements() {
@@ -79,31 +78,25 @@ export class LoginButton extends ScopedElementsMixin(LitElement) {
     static get properties() {
         return {
             lang: { type: String },
-            _loginData: { type: Object, attribute: false },
+            auth: { type: Object },
         };
     }
 
     connectedCallback() {
         super.connectedCallback();
-
-        this._bus = new EventBus();
-        this._bus.subscribe('auth-update', (data) => {
-            this._loginData = data;
-        });
     }
 
     disconnectedCallback() {
-        this._bus.close();
         super.disconnectedCallback();
     }
 
     _onLoginClicked(e) {
-        this._bus.publish('auth-login');
+        this.sendSetPropertyEvent('requested-login-status', LoginStatus.LOGGED_IN);
         e.preventDefault();
     }
 
     _onLogoutClicked(e) {
-        this._bus.publish('auth-logout');
+        this.sendSetPropertyEvent('requested-login-status', LoginStatus.LOGGED_OUT);
         e.preventDefault();
     }
 
@@ -164,7 +157,7 @@ export class LoginButton extends ScopedElementsMixin(LitElement) {
     }
 
     render() {
-        if (this._loginData.status === LoginStatus.LOGGING_IN) {
+        if (this.auth['login-status'] === LoginStatus.LOGGING_IN) {
             // try to keep the layout the same to avoid layout shifts
             return html`
                 <a href="#">
@@ -174,7 +167,7 @@ export class LoginButton extends ScopedElementsMixin(LitElement) {
                     </div>
                 </a>
             `;
-        } else if (this._loginData.status === LoginStatus.LOGGED_IN) {
+        } else if (this.auth['login-status'] === LoginStatus.LOGGED_IN) {
             return html`
                 <a href="#" @click="${this._onLogoutClicked}">
                     <div class="login-box login-button">

packages/check-in-place-select/assets/index.html

@@ -8,6 +8,6 @@
 
 <body>
 
-<dbp-check-in-place-select-demo lang="de" entry-point-url="http://127.0.0.1:8000" auth></dbp-check-in-place-select-demo>
+<dbp-check-in-place-select-demo lang="de" entry-point-url="http://127.0.0.1:8000" auth requested-login-status></dbp-check-in-place-select-demo>
 </body>
 </html>

packages/check-in-place-select/src/check-in-place-select.js

@@ -308,6 +308,9 @@ export class CheckInPlaceSelect extends ScopedElementsMixin(AdapterLitElement) {
                     // we don't need to preset the selector if the entry point url changes
                     this.initJSONLD(true);
                     break;
+                case "auth":
+                    JSONLD.doInitializationOnce(this.entryPointUrl, this.auth.token);
+                    break;
             }
         });
 

packages/check-in-place-select/src/dbp-check-in-place-select-demo.js

@@ -53,12 +53,12 @@ export class CheckInPlaceSelectDemo extends ScopedElementsMixin(DBPLitElement) {
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
+        return this.noAuth ? html`<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>` : html`
             <div class="container">
-                <dbp-auth-keycloak lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
+                <dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
                                    url="https://auth-dev.tugraz.at/auth" realm="tugraz"
                                    client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
-                <dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
+                <dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>
             </div>
         `;
     }

packages/common/jsonld.js

@@ -3,7 +3,6 @@
 import {send as notify} from './notification';
 import * as utils from "./utils";
 import {i18n} from "./i18n";
-import {EventBus} from './';
 
 let instances = {};
 let successFunctions = {};
@@ -44,21 +43,25 @@ export default class JSONLD {
         // add success and failure functions
         if (typeof successFnc == 'function') successFunctions[apiUrl].push(successFnc);
         if (typeof failureFnc == 'function') failureFunctions[apiUrl].push(failureFnc);
+    }
 
-        // check if api call was already started
-        if (initStarted[apiUrl] !== undefined) {
+    /**
+     * This should be run as soon as an api token is available (can be run multiple times)
+     *
+     * @param apiUrl
+     * @param token
+     */
+    static doInitializationOnce(apiUrl, token) {
+        // console.log("doInitializationOnce", apiUrl, token);
+
+        // check if token is not set or api call was already started
+        if (!apiUrl || !token || initStarted[apiUrl] !== undefined) {
             return;
         }
 
         initStarted[apiUrl] = true;
-
-        this._bus = new EventBus();
-        this._bus.subscribe('auth-update', (data) => {
-            if (data.token) {
-                this._bus.close();
-                JSONLD.doInitialization(apiUrl, data.token);
-            }
-        });
+        JSONLD.doInitialization(apiUrl, token);
+        // console.log("doInitializationOnce Done", apiUrl, token);
     }
 
     static doInitialization(apiUrl, token) {

packages/data-table-view/assets/index.html

@@ -15,6 +15,6 @@
 
 <body>
 
-<dbp-data-table-view-demo lang="de" entry-point-url="http://127.0.0.1:8000"></dbp-data-table-view-demo>
+<dbp-data-table-view-demo lang="de" entry-point-url="http://127.0.0.1:8000" auth requested-login-status></dbp-data-table-view-demo>
 </body>
 </html>

packages/data-table-view/src/dbp-data-table-view-demo.js

@@ -139,12 +139,12 @@ export class DataTableViewDemo extends ScopedElementsMixin(DBPLitElement) {
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
+        return this.noAuth ? html`<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>` : html`
             <div class="container">
-                <dbp-auth-keycloak lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
+                <dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
                                    url="https://auth-dev.tugraz.at/auth" realm="tugraz"
                                    client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
-                <dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
+                <dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>
             </div>
         `;
     }

packages/knowledge-base-web-page-element-view/assets/index.html

@@ -14,7 +14,7 @@
 </style>
 <body>
 
-<dbp-knowledge-base-web-page-element-view-demo auth lang="de" entry-point-url="http://127.0.0.1:8000"></dbp-knowledge-base-web-page-element-view-demo>
+<dbp-knowledge-base-web-page-element-view-demo auth requested-login-status lang="de" entry-point-url="http://127.0.0.1:8000"></dbp-knowledge-base-web-page-element-view-demo>
 
 </body>
 </html>

packages/knowledge-base-web-page-element-view/src/dbp-knowledge-base-web-page-element-view-demo.js

@@ -67,12 +67,12 @@ export class KnowledgeBaseWebPageElementViewDemo extends ScopedElementsMixin(DBP
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
+        return this.noAuth ? html`<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>` : html`
             <div class="container">
-                <dbp-auth-keycloak lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
+                <dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
                                    url="https://auth-dev.tugraz.at/auth" realm="tugraz"
                                    client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
-                <dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
+                <dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>
             </div>
         `;
     }

packages/matomo/assets/index.html.ejs

@@ -7,7 +7,7 @@
 
 <body>
 
-<dbp-matomo-demo lang="de" entry-point-url="http://127.0.0.1:8000" matomo-url="<%= matomoUrl %>" matomo-site-id="<%= matomoSiteId %>"></dbp-matomo-demo>
+<dbp-matomo-demo lang="de" auth requested-login-status entry-point-url="http://127.0.0.1:8000" matomo-url="<%= matomoUrl %>" matomo-site-id="<%= matomoSiteId %>"></dbp-matomo-demo>
 
 <p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p>
 <p>Matomo: url: <%= matomoUrl %>, site-id: <%= matomoSiteId %></p>

packages/matomo/src/dbp-matomo-demo.js

@@ -69,12 +69,12 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) {
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
+        return this.noAuth ? html`<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>` : html`
             <div class="container">
-                <dbp-auth-keycloak lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
+                <dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
                                    url="https://auth-dev.tugraz.at/auth" realm="tugraz"
                                    client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
-                <dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
+                <dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>
             </div>
         `;
     }

packages/matomo/src/matomo.js

 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
-import {EventBus} from '@dbp-toolkit/common';
+import {LoginStatus} from "@dbp-toolkit/auth/src/util";
 
 function pushEvent(event) {
     window._paq = window._paq || [];
@@ -15,6 +15,8 @@ export class MatomoElement extends DBPLitElement {
         this.isRunning = false;
         this.lastEvent = [];
         this.gitInfo = '';
+        this.auth = {};
+        this.loginStatus = '';
     }
 
 
@@ -23,21 +25,27 @@ export class MatomoElement extends DBPLitElement {
             endpoint: { type: String },
             siteId: { type: Number, attribute: 'site-id' },
             gitInfo: { type: Number, attribute: 'git-info' },
+            auth: { type: Object },
         };
     }
 
-    connectedCallback() {
-        super.connectedCallback();
+    update(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            switch (propName) {
+                case 'auth':
+                {
+                    const loginStatus = this.auth['login-status'];
 
-        this._bus = new EventBus();
-        this._bus.subscribe('auth-update', (data) => {
-            this.setupMatomo(data.status === 'logged-in');
-        });
+                    if (this.loginStatus !== loginStatus) {
+                        this.setupMatomo(loginStatus === LoginStatus.LOGGED_IN);
+                        this.loginStatus = loginStatus;
+                    }
                 }
+                break;
+            }
+        });
 
-    disconnectedCallback() {
-        this._bus.close();
-        super.disconnectedCallback();
+        super.update(changedProperties);
     }
 
     render() {

packages/person-profile/assets/index.html

@@ -7,6 +7,6 @@
 
 <body>
 
-<dbp-person-profile-demo auth lang="de" entry-point-url="http://127.0.0.1:8000"></dbp-person-profile-demo>
+<dbp-person-profile-demo auth requested-login-status lang="de" entry-point-url="http://127.0.0.1:8000"></dbp-person-profile-demo>
 </body>
 </html>

packages/person-profile/src/dbp-person-profile-demo.js

@@ -8,7 +8,6 @@ import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import $ from 'jquery';
 import {PersonSelect} from '@dbp-toolkit/person-select';
-import {EventBus} from '@dbp-toolkit/common';
 
 export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
@@ -18,6 +17,7 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
         this.person = '';
         this.selectedPerson = '';
         this.noAuth = false;
+        this.auth = {};
     }
 
     static get scopedElements() {
@@ -37,21 +37,33 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
             person: { type: String, attribute: false },
             selectedPerson: { type: String, attribute: false },
             noAuth: { type: Boolean, attribute: 'no-auth' },
+            auth: { type: Object },
         };
     }
 
+    update(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            switch (propName) {
+                case 'auth':
+                {
+                    const person = this.auth.person;
+
+                    if (person) {
+                        this.person = person.identifier;
+                    }
+                }
+                    break;
+            }
+        });
+
+        super.update(changedProperties);
+    }
+
     connectedCallback() {
         super.connectedCallback();
         i18n.changeLanguage(this.lang);
         const that = this;
 
-        this._bus = new EventBus();
-        this._bus.subscribe('auth-update', (data) => {
-            if (data.person) {
-                this.person = data.person.identifier;
-            }
-        });
-
         this.updateComplete.then(()=>{
             const personSelect = that._(this.constructor.getScopedTagName('dbp-person-select'));
             personSelect.onchange = function () {
@@ -61,11 +73,6 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
         });
     }
 
-    disconnectedCallback() {
-        this._bus.close();
-        super.disconnectedCallback();
-    }
-
     static get styles() {
         // language=css
         return css`
@@ -78,12 +85,12 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
+        return this.noAuth ? html`<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>` : html`
             <div class="container">
-                <dbp-auth-keycloak lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
+                <dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
                                    url="https://auth-dev.tugraz.at/auth" realm="tugraz"
                                    client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
-                <dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
+                <dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>
             </div>
         `;
     }
@@ -97,7 +104,7 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
                     <h1 class="title">Person-Profile-Demo</h1>
                 </div>
                 <div class="container">
-                    <dbp-person-profile subscribe="auth:auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" value="${this.person}"></dbp-person-profile>
+                    <dbp-person-profile subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" value="${this.person}"></dbp-person-profile>
                 </div>
             </section>
             <section class="section">
@@ -105,10 +112,10 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
                     <h1 class="title">Select-Profile-Demo</h1>
                 </div>
                 <div class="container">
-                    <dbp-person-select subscribe="auth:auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}"></dbp-person-select>
+                    <dbp-person-select subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}"></dbp-person-select>
                 </div>
                 <div class="container">
-                    <dbp-person-profile subscribe="auth:auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" value="${this.selectedPerson}"></dbp-person-profile>
+                    <dbp-person-profile subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" value="${this.selectedPerson}"></dbp-person-profile>
                 </div>
             </section>
         `;