Add a new remember-login attribute for remembering the login state across refreshes.

We keep the login state in the session storage and force a login in case the user was
logged in before.

This means a page refresh will try to restore the login state (which usually should mean
that it just flashes becasue of redirects). And new visitors get the logged out state by default.

packages/auth/README.md

@@ -19,6 +19,8 @@
     - example `<vpu-auth client-id="my-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-client-id" force-login></vpu-auth>`
+- `remember-login` (optional, default: off): if enabled a login will be forced if the user was logged in, in the same session
+    - example `<vpu-auth client-id="my-client-id" remember-login></vpu-auth>`
 
 ## Events to listen to
 

packages/auth/src/vpu-auth-demo.js

@@ -36,7 +36,7 @@ class AuthDemo extends LitElement {
                     <h1 class="title">Auth-Demo</h1>
                 </div>
                 <div class="container">
-                    <vpu-auth lang="${this.lang}" client-id="${commonUtils.setting('keyCloakClientId')}" load-person></vpu-auth>
+                    <vpu-auth lang="${this.lang}" client-id="${commonUtils.setting('keyCloakClientId')}" load-person remember-login></vpu-auth>
                 </div>
             </section>
         `;

packages/auth/src/vpu-auth.js

@@ -30,6 +30,7 @@ class VPUAuth extends LitElement {
         this.name = "";
         this.personId = "";
         this.loggedIn = false;
+        this.rememberLogin = false
 
         // Create the events
         this.initEvent = new CustomEvent("vpu-auth-init", { "detail": "KeyCloak init event", bubbles: true, composed: true });
@@ -46,6 +47,7 @@ class VPUAuth extends LitElement {
         return {
             lang: { type: String },
             forceLogin: { type: Boolean, attribute: 'force-login' },
+            rememberLogin: { type: Boolean, attribute: 'remember-login' },
             loggedIn: { type: Boolean},
             loadPerson: { type: Boolean, attribute: 'load-person' },
             clientId: { type: String, attribute: 'client-id' },
@@ -61,6 +63,10 @@ class VPUAuth extends LitElement {
         super.connectedCallback();
         const href = window.location.href;
 
+        if (this.rememberLogin && sessionStorage.getItem('vpu-logged-in')) {
+            this.forceLogin = true;
+        }
+
         // 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();
@@ -100,7 +106,7 @@ class VPUAuth extends LitElement {
                     console.log(authenticated ? 'authenticated' : 'not authenticated!');
                     console.log(that._keycloak);
 
-                    that.setStateToLogin(true);
+                    this.loggedIn = false;
                     that.updateKeycloakData();
                     that.dispatchInitEvent();
 
@@ -157,6 +163,7 @@ class VPUAuth extends LitElement {
     }
 
     logout(e) {
+        sessionStorage.removeItem('vpu-logged-in');
         this._keycloak.logout();
     }
 
@@ -164,14 +171,10 @@ class VPUAuth extends LitElement {
      * Dispatches the init event
      */
     dispatchInitEvent() {
-        this.setStateToLogin(false);
+        this.loggedIn = true;
         this.dispatchEvent(this.initEvent);
     }
 
-    setStateToLogin(state) {
-        this.loggedIn = !state;
-    }
-
     /**
      * Dispatches the person init event
      */
@@ -206,6 +209,12 @@ class VPUAuth extends LitElement {
             if (propName === "lang") {
                 i18n.changeLanguage(this.lang);
             }
+            if (propName == "loggedIn") {
+                if (this.loggedIn)
+                    sessionStorage.setItem('vpu-logged-in', true);
+                else
+                    sessionStorage.removeItem('vpu-logged-in');
+            }
         });
 
         super.update(changedProperties);