From 6ee9d4c2b793c89d57efe0f2ecacd87f85dccf74 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Wed, 17 Jul 2019 10:55:57 +0200
Subject: [PATCH] Add login button and option to force login
---
packages/auth/README.md | 12 ++++++++++++
packages/auth/vpu-auth.js | 30 ++++++++++++++++++++++++++++--
2 files changed, 40 insertions(+), 2 deletions(-)
diff --git a/packages/auth/README.md b/packages/auth/README.md
index c373f959..2523a224 100644
--- a/packages/auth/README.md
+++ b/packages/auth/README.md
@@ -2,6 +2,18 @@
[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/Auth)
+## Attributes
+
+- `client-id` (mandatory): set the client id that you have setup on your Keycloak server
+ - example `<vpu-auth client-id="my-dev-client-id"></vpu-auth>`
+- `lang` (optional, default: `de`): set to `de` or `en` for German or English
+ - example `<vpu-auth lang="de" client-id="my-dev-client-id"></vpu-auth>`
+- `load-person` (optional, default: off): if enabled the logged in user will also be loaded as `Person`
+ in the `window.VPUPerson` variable
+ - example `<vpu-auth client-id="my-dev-client-id" load-person></vpu-auth>`
+- `force-login` (optional, default: off): if enabled a login will be forced, there never will be a login button
+ - example `<vpu-auth client-id="my-dev-client-id" force-login></vpu-auth>`
+
## Local development
```bash
diff --git a/packages/auth/vpu-auth.js b/packages/auth/vpu-auth.js
index 5d771182..df2d8693 100644
--- a/packages/auth/vpu-auth.js
+++ b/packages/auth/vpu-auth.js
@@ -19,6 +19,7 @@ class VPUAuth extends LitElement {
constructor() {
super();
this.lang = 'de';
+ this.forceLogin = false;
this.loadPerson = false;
this.clientId = "";
this.keyCloakInitCalled = false;
@@ -39,6 +40,7 @@ class VPUAuth extends LitElement {
static get properties() {
return {
lang: { type: String },
+ forceLogin: { type: Boolean, attribute: 'force-login' },
loadPerson: { type: Boolean, attribute: 'load-person' },
clientId: { type: String, attribute: 'client-id' },
name: { type: String, attribute: false },
@@ -52,8 +54,12 @@ class VPUAuth extends LitElement {
connectedCallback() {
super.connectedCallback();
i18n.changeLanguage(this.lang);
+ const href = window.location.href;
- this.loadKeyCloak();
+ // load Keycloak if we want to force the login or if we were redirected from the Keycloak login page
+ if (this.forceLogin || (href.indexOf('#state=') > 0 && href.indexOf('&session_state=') > 0)) {
+ this.loadKeyCloak();
+ }
this.updateComplete.then(()=>{
});
@@ -77,10 +83,12 @@ class VPUAuth extends LitElement {
clientId: that.clientId,
});
+ // See: https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter
that._keycloak.init({onLoad: 'login-required'}).success(function (authenticated) {
console.log(authenticated ? 'authenticated' : 'not authenticated!');
console.log(that._keycloak);
+ that.setStateToLogin(true);
that.updateKeycloakData();
that.dispatchInitEvent();
@@ -132,6 +140,10 @@ class VPUAuth extends LitElement {
}
}
+ login(e) {
+ this.loadKeyCloak();
+ }
+
logout(e) {
this._keycloak.logout();
}
@@ -140,9 +152,14 @@ class VPUAuth extends LitElement {
* Dispatches the init event
*/
dispatchInitEvent() {
+ this.setStateToLogin(false);
document.dispatchEvent(this.initEvent);
}
+ setStateToLogin(state) {
+ this.shadowRoot.querySelector('#login-block').style.display = state ? "flex" : "none";
+ this.shadowRoot.querySelector('#logout-block').style.display = state ? "none" : "flex";
+ }
/**
* Dispatches the person init event
*/
@@ -167,8 +184,11 @@ class VPUAuth extends LitElement {
render() {
return html`
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+ <style>
+ #logout-block { display: none }
+ </style>
- <div class="columns is-vcentered"">
+ <div id="logout-block" class="columns is-vcentered"">
<div class="column">
${this.name}
</div>
@@ -176,6 +196,12 @@ class VPUAuth extends LitElement {
<button @click="${this.logout}" class="button">${i18n.t('logout')}</button>
</div>
</div>
+
+ <div id="login-block" class="columns is-vcentered"">
+ <div class="column">
+ <button id="login-button" @click="${this.login}" class="button">${i18n.t('login')}</button>
+ </div>
+ </div>
`;
}
}
--
GitLab