Merge branch 'master' of gitlab.tugraz.at:VPU/WebComponents/Auth

# Conflicts:
#	vpu-auth.js

packages/auth/README.md

@@ -2,21 +2,29 @@
 
 [GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/Auth)
 
+## Usage
+
+```html
+<vpu-auth client-id="my-client-id"></vpu-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>`
+    - example `<vpu-auth client-id="my-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>`
+    - example `<vpu-auth lang="de" client-id="my-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>`
+    - 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-dev-client-id" force-login></vpu-auth>`
+    - example `<vpu-auth client-id="my-client-id" force-login></vpu-auth>`
 
-## Events
+## Events to listen to
 
-TODO
+- `vpu-auth-init`: Keycloak init event - happens once
+- `vpu-auth-person-init`: Keycloak person init event - the person entity was loaded from the server
+- `vpu-auth-keycloak-data-update`: Keycloak data was updated - happens for example every time after a token refresh
 
 ## Local development
 
@@ -33,11 +41,8 @@ npm run setup
 # install dependencies
 npm install
 
-# constantly builds dist/bundle.js 
+# constantly build dist/bundle.js and run a local web-server on port 8002 
 npm run watch-local
-
-# run local webserver
-cd dist; php -S localhost:8002
 ```
 
 Jump to <http://localhost:8002> and you should get a Single Sign On login page.

packages/auth/rollup.config.js

@@ -5,6 +5,7 @@ import copy from 'rollup-plugin-copy';
 import {terser} from "rollup-plugin-terser";
 import json from 'rollup-plugin-json';
 import replace from "rollup-plugin-replace";
+import serve from 'rollup-plugin-serve';
 
 const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
 console.log("build: " + build);
@@ -27,7 +28,7 @@ export default {
             minimize: false,
             plugins: []
         }),
-        terser(),
+        (build !== 'local') ? terser() : false,
         copy({
             targets: [
                 'index.html',
@@ -36,6 +37,7 @@ export default {
                 'node_modules/@webcomponents/webcomponentsjs/bundles',
             ],
             outputFolder: 'dist'
-        })
+        }),
+        (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
     ]
 };

packages/auth/vpu-auth.js

@@ -59,16 +59,16 @@ class VPUAuth extends LitElement {
 
         // 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.loadKeycloak();
         }
 
         this.updateComplete.then(()=>{
         });
     }
 
-    loadKeyCloak() {
+    loadKeycloak() {
         const that = this;
-        console.log("loadKeyCloak");
+        console.log("loadKeycloak");
 
         if (!this.keyCloakInitCalled) {
             // inject Keycloak javascript file
@@ -142,7 +142,7 @@ class VPUAuth extends LitElement {
     }
 
     login(e) {
-        this.loadKeyCloak();
+        this.loadKeycloak();
     }
 
     logout(e) {
@@ -201,7 +201,7 @@ class VPUAuth extends LitElement {
                 #logout-block { display: none }
             </style>
 
-            <div id="logout-block" class="columns is-vcentered"">
+            <div id="logout-block" class="columns is-vcentered">
                 <div class="column">
                     ${this.name}
                 </div>
@@ -210,7 +210,7 @@ class VPUAuth extends LitElement {
                 </div>
             </div>
 
-            <div id="login-block" class="columns is-vcentered"">
+            <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>