Add auth demo to toolkit-showcase

b3bfbf8b · Neuber, Eugen Ramon · f492b502 · b3bfbf8b · b3bfbf8b · b3bfbf8b
Commit b3bfbf8b authored 4 years ago by Neuber, Eugen Ramon
--- a/packages/auth/assets/index.html
+++ b/packages/auth/assets/index.html
@@ -3,11 +3,22 @@
 <head>
    <meta charset="UTF-8">
    <script type="module" src="dbp-auth-demo.js"></script>
+    <script type="module" src="dbp-auth.js"></script>
 </head>
 <body>
 <dbp-provider auth>
+    <dbp-auth-keycloak 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"
+                       silent-check-sso-redirect-uri="${silentCheckSsoUri}"
+                       scope="optional-test-scope"
+                       load-person
+                       try-login></dbp-auth-keycloak>
+    <dbp-login-button 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>

--- a/packages/auth/src/dbp-auth-demo.js
+++ b/packages/auth/src/dbp-auth-demo.js
@@ -8,7 +8,7 @@ import {name as pkgName} from './../package.json';
 import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
 import {Provider} from '@dbp-toolkit/provider';
-class AuthDemo extends ScopedElementsMixin(DBPLitElement) {
+export class DbpAuthDemo extends ScopedElementsMixin(DBPLitElement) {
    constructor() {
        super();
        this.lang = 'de';
@@ -43,8 +43,10 @@ class AuthDemo extends ScopedElementsMixin(DBPLitElement) {
    }
    async _onUserInfoClick() {
+        const div = this._('#person-info');
        if (!this.auth.token) {
            console.error("not logged in");
+            div.innerHTML = "You are not logged in!";
            return;
        }
        let userInfoURL = 'https://auth-dev.tugraz.at/auth/realms/tugraz/protocol/openid-connect/userinfo';
@@ -58,16 +60,21 @@ class AuthDemo extends ScopedElementsMixin(DBPLitElement) {
                }
            }
        );
-        console.log(await response.json());
+        const person = await response.json();
+        console.log(person);
+        div.innerHTML = JSON.stringify(person);
    }
    async _onShowToken() {
+        const div = this._('#token-info');
        if (!this.auth.token) {
            console.error("not logged in");
+            div.innerHTML = "You are not logged in!";
            return;
        }
        console.log(this.auth.token);
+        div.innerHTML = this.auth.token;
    }
    render() {
@@ -93,22 +100,39 @@ class AuthDemo extends ScopedElementsMixin(DBPLitElement) {
                    max-width: 100%;
                }
            </style>
+            <slot></slot>
            <section class="section">
                <div class="container">
                    <h1 class="title">Auth-Demo</h1>
                </div>
                <div class="container">
-                    <dbp-auth-keycloak lang="${this.lang}" entry-point-url="${this.entryPointUrl}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" silent-check-sso-redirect-uri="${silentCheckSsoUri}" scope="optional-test-scope" load-person try-login></dbp-auth-keycloak>
+                    <p>In any App/page an <b>Auth component</b> will be used like:</p>
+<pre>
-                    <dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
+&lt;dbp-auth-keycloak lang="${this.lang}" entry-point-url="${this.entryPointUrl}"
+    url="https://auth-dev.tugraz.at/auth" 
+    realm="tugraz"
+    client-id="auth-dev-mw-frontend-local"
+    silent-check-sso-redirect-uri="${silentCheckSsoUri}"
+    scope="optional-test-scope" 
+    load-person 
+    try-login&gt;&lt;/dbp-auth-keycloak&gt;
+&lt;dbp-login-button lang="${this.lang}" show-image&gt;&lt;/dbp-login-button&gt;
+</pre>
+                    <p>but in this demo we actually have already such a component at the top of this page.</p>
+                    <p>Please use the login button on the top of the page!</p>
+                </div>
+                <div class="container">
+                    <input type="button" value="Fetch userinfo" @click="${this._onUserInfoClick}">
+                    <input type="button" value="Show token" @click="${this._onShowToken}">
+                    <h4>Person info:</h4>
+                    <div id="person-info"></div>
+                    <h4>Token info:</h4>
+                    <div id="token-info"></div>
                </div>
            </section>
-            <input type="button" value="Fetch userinfo (see console)" @click="${this._onUserInfoClick}">
-            <input type="button" value="Show token (see console)" @click="${this._onShowToken}">
        `;
    }
 }
 commonUtils.defineCustomElement('dbp-provider', Provider);
-commonUtils.defineCustomElement('dbp-auth-demo', AuthDemo);
+commonUtils.defineCustomElement('dbp-auth-demo', DbpAuthDemo);
--- a/toolkit-showcase/assets/auth.metadata.json
+++ b/toolkit-showcase/assets/auth.metadata.json
+{
+  "element": "dbp-auth-demo-activity",
+  "module_src": "dbp-auth-demo-activity.js",
+  "routing_name": "auth",
+  "name": {
+    "de": "Authentifikation Komponente",
+    "en": "Authentication component"
+  },
+  "short_name": {
+    "de": "Auth Komponente",
+    "en": "Auth component"
+  },
+  "description": {
+    "de": "Web Komponente zur Authentifikation",
+    "en": "Auth web component"
+  },
+  "subscribe": "lang:lang,entry-point-url:entry-point-url"
+}
--- a/toolkit-showcase/assets/dbp-toolkit-showcase.topic.metadata.json.ejs
+++ b/toolkit-showcase/assets/dbp-toolkit-showcase.topic.metadata.json.ejs
@@ -13,6 +13,7 @@
  },
  "routing_name": "toolkit-showcase",
  "activities": [
+    {"path": "auth.metadata.json"},
    {"path": "person-select.metadata.json"},
    {"path": "knowledge-base-web-page-element-view.metadata.json"},
    {"path": "common.metadata.json"},

--- a/toolkit-showcase/src/dbp-auth-demo-activity.js
+++ b/toolkit-showcase/src/dbp-auth-demo-activity.js
+import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {DbpAuthDemo} from '@dbp-toolkit/auth/src/dbp-auth-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/auth/README.md';
+import highlightCSSPath from 'highlight.js/styles/default.css';
+import * as demoStyles from "./styles";
+import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
+class DbpAuthDemoActivity extends ScopedElementsMixin(AdapterLitElement) {
+    constructor() {
+        super();
+        this.lang = 'en';
+        this.entryPointUrl = '';
+    }
+    static get scopedElements() {
+        return {
+            'dbp-auth-demo': DbpAuthDemo,
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            lang: { type: String },
+            entryPointUrl: { type: String, attribute: 'entry-point-url' },
+        };
+    }
+    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-auth-demo id="demo" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" subscribe="auth:auth"></dbp-auth-demo>
+        `;
+    }
+}
+commonUtils.defineCustomElement('dbp-auth-demo-activity', DbpAuthDemoActivity);