From b3bfbf8ba880594f45cca43355f476b8aa54a8da Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Wed, 3 Feb 2021 11:31:43 +0100
Subject: [PATCH] Add auth demo to toolkit-showcase
---
packages/auth/assets/index.html | 11 +++
packages/auth/src/dbp-auth-demo.js | 42 +++++++++---
toolkit-showcase/assets/auth.metadata.json | 18 +++++
...p-toolkit-showcase.topic.metadata.json.ejs | 1 +
.../src/dbp-auth-demo-activity.js | 67 +++++++++++++++++++
5 files changed, 130 insertions(+), 9 deletions(-)
create mode 100644 toolkit-showcase/assets/auth.metadata.json
create mode 100644 toolkit-showcase/src/dbp-auth-demo-activity.js
diff --git a/packages/auth/assets/index.html b/packages/auth/assets/index.html
index 8cd51cdc..a79ecbd9 100644
--- 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>
diff --git a/packages/auth/src/dbp-auth-demo.js b/packages/auth/src/dbp-auth-demo.js
index b03017fe..38bcc4ef 100644
--- 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>
-
- <dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
+ <p>In any App/page an <b>Auth component</b> will be used like:</p>
+<pre>
+<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>
+<dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
+</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);
diff --git a/toolkit-showcase/assets/auth.metadata.json b/toolkit-showcase/assets/auth.metadata.json
new file mode 100644
index 00000000..826c212b
--- /dev/null
+++ b/toolkit-showcase/assets/auth.metadata.json
@@ -0,0 +1,18 @@
+{
+ "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"
+}
diff --git a/toolkit-showcase/assets/dbp-toolkit-showcase.topic.metadata.json.ejs b/toolkit-showcase/assets/dbp-toolkit-showcase.topic.metadata.json.ejs
index 1d5236f9..af1fbba1 100644
--- 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"},
diff --git a/toolkit-showcase/src/dbp-auth-demo-activity.js b/toolkit-showcase/src/dbp-auth-demo-activity.js
new file mode 100644
index 00000000..0adeb6f5
--- /dev/null
+++ b/toolkit-showcase/src/dbp-auth-demo-activity.js
@@ -0,0 +1,67 @@
+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);
--
GitLab