Fix double auth in demo app

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

+import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {CheckInPlaceSelectDemo} from '@dbp-toolkit/check-in-place-select/src/dbp-check-in-place-select-demo';
+import * as commonUtils from '@dbp-toolkit/common/utils';
+import * as commonStyles from '@dbp-toolkit/common/styles';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import readme from '@dbp-toolkit/check-in-place-select/README.md';
+import highlightCSSPath from 'highlight.js/styles/default.css';
+import * as demoStyles from "./styles";
+
+class DbpActivityNameDemoActivity extends ScopedElementsMixin(LitElement) {
+    static get scopedElements() {
+        return {
+            'dbp-check-in-place-select-demo': CheckInPlaceSelectDemo,
+        };
+    }
+
+    static get properties() {
+        return {
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    static get styles() {
+        // language=css
+        return [
+            commonStyles.getThemeCSS(),
+            commonStyles.getGeneralCSS(),
+            demoStyles.getDemoCSS(),
+            css`
+            h1.title {margin-bottom: 1em;}
+            div.container {margin-bottom: 1.5em;}
+
+            #demo{
+                display: block;
+                padding-top: 50px;
+            }
+            
+            `
+        ];
+    }
+
+    render() {
+        return html`                
+                ${unsafeHTML(readme)}
+                <dbp-check-in-place-select-demo id="demo" lang="en" no-auth></dbp-check-in-place-select-demo>
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('dbp-check-in-place-select-demo-activity', DbpActivityNameDemoActivity);

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

@@ -50,7 +50,7 @@ class DbpActivityNameDemoActivity extends ScopedElementsMixin(LitElement) { //TO
         return html`
 
                 ${unsafeHTML(readme)}
-                <dbp-data-table-view-demo id="demo" lang="en"></dbp-data-table-view-demo>
+                <dbp-data-table-view-demo id="demo" lang="en" no-auth></dbp-data-table-view-demo>
         `;
     }
 }

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

@@ -49,7 +49,7 @@ class KnowledgeBaseWebPageElementViewDemoActivity extends ScopedElementsMixin(Li
     render() {
         return html`
                 ${unsafeHTML(readme)}
-                <dbp-knowledge-base-web-page-element-view-demo id="demo" lang="en"></dbp-knowledge-base-web-page-element-view-demo>
+                <dbp-knowledge-base-web-page-element-view-demo id="demo" lang="en" no-auth></dbp-knowledge-base-web-page-element-view-demo>
         `;
     }
 }

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

@@ -48,8 +48,8 @@ class DbpMatomoDemoActivity extends ScopedElementsMixin(LitElement) {
 
     render() {
         return html`
-               ${unsafeHTML(readme)}
-                <dbp-matomo-demo id="demo" lang="en"></dbp-matomo-demo>
+               ${unsafeHTML(readme)} 
+                <dbp-matomo-demo id="demo" lang="en" no-auth></dbp-matomo-demo>
         `;
     }
 }

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

@@ -49,7 +49,7 @@ class DbpPersonProfileDemoActivity extends ScopedElementsMixin(LitElement) {
     render() {
         return html`
                 ${unsafeHTML(readme)}
-                <dbp-person-profile-demo id="demo" lang="en"></dbp-person-profile-demo>
+                <dbp-person-profile-demo id="demo" lang="en" no-auth></dbp-person-profile-demo>
 
         `;
     }

demo/src/dbp-person-select-demo-activity.js

@@ -49,7 +49,7 @@ class DbpPersonSelectDemoActivity extends ScopedElementsMixin(LitElement) {
     render() {
         return html`
             ${unsafeHTML(readme)}
-            <dbp-person-select-demo id="demo" lang="en"></dbp-person-select-demo>
+            <dbp-person-select-demo id="demo" lang="en" no-auth></dbp-person-select-demo>
         `;
     }
 }

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

@@ -6,7 +6,7 @@ import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 
-class CheckInPlaceSelectDemo extends ScopedElementsMixin(LitElement) {
+export class CheckInPlaceSelectDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
         this.lang = 'de';
@@ -15,7 +15,6 @@ class CheckInPlaceSelectDemo extends ScopedElementsMixin(LitElement) {
 
     static get scopedElements() {
         return {
-          'dbp-auth-keycloak': AuthKeycloak,
           'dbp-login-button': LoginButton,
           'dbp-check-in-place-select': CheckInPlaceSelect,
         };
@@ -49,9 +48,11 @@ class CheckInPlaceSelectDemo extends ScopedElementsMixin(LitElement) {
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`` : html`
+        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
             <div class="container">
-                <dbp-auth-keycloak lang="${this.lang}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
+                <dbp-auth-keycloak lang="${this.lang}" 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>
             </div>
         `;

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

@@ -135,9 +135,11 @@ export class DataTableViewDemo extends ScopedElementsMixin(LitElement) {
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`` : html`
-            <div class="content">
-                <dbp-auth-keycloak lang="${this.lang}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
+        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
+            <div class="container">
+                <dbp-auth-keycloak lang="${this.lang}" 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>
             </div>
         `;

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

@@ -63,14 +63,15 @@ export class KnowledgeBaseWebPageElementViewDemo extends ScopedElementsMixin(Lit
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`` : html`
-            <div class="content">
-                <dbp-auth-keycloak lang="${this.lang}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
+        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
+            <div class="container">
+                <dbp-auth-keycloak lang="${this.lang}" 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>
             </div>
         `;
     }
-
     render() {
         return html`
             <section class="section">

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

@@ -14,6 +14,7 @@ export class MatomoDemo extends ScopedElementsMixin(LitElement) {
         this.lang = 'de';
         this.matomoUrl = '';
         this.matomoSiteId = -1;
+        this.noAuth = false;
     }
 
     static get scopedElements() {
@@ -29,6 +30,7 @@ export class MatomoDemo extends ScopedElementsMixin(LitElement) {
             lang: { type: String },
             matomoUrl: { type: String, attribute: "matomo-url" },
             matomoSiteId: { type: Number, attribute: "matomo-site-id" },
+            noAuth: { type: Boolean, attribute: 'no-auth' },
         };
     }
 
@@ -62,15 +64,26 @@ export class MatomoDemo extends ScopedElementsMixin(LitElement) {
         ];
     }
 
+    getAuthComponentHtml() {
+        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
+            <div class="container">
+                <dbp-auth-keycloak lang="${this.lang}" 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>
+            </div>
+        `;
+    }
+
     render() {
+
         return html`
             <section class="section">
                 <div class="container">
                     <h1 class="title">Matomo-Demo</h1>
                 </div>
                 <div class="container">
-                    <dbp-auth-keycloak lang="${this.lang}" 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>
+                    ${ this.getAuthComponentHtml() }
                     <dbp-matomo endpoint="${this.matomoUrl}" site-id="${this.matomoSiteId}"></dbp-matomo>
                 </div>
                 <div class="container">

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

@@ -66,13 +66,13 @@ export class PersonProfileDemo extends ScopedElementsMixin(DBPLitElement) {
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`` : html`
-            <header>
-                <div class="container">
-                    <dbp-auth-keycloak lang="${this.lang}" 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>
-                </div>
-            </header>
+        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
+            <div class="container">
+                <dbp-auth-keycloak lang="${this.lang}" 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>
+            </div>
         `;
     }
 

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

@@ -49,9 +49,11 @@ export class PersonSelectDemo extends ScopedElementsMixin(LitElement) {
     }
 
     getAuthComponentHtml() {
-        return this.noAuth ? html`` : html`
+        return this.noAuth ? html`<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>` : html`
             <div class="container">
-                <dbp-auth-keycloak lang="${this.lang}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
+                <dbp-auth-keycloak lang="${this.lang}" 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>
             </div>
         `;