From 89f757ca982ae733c876f5ddeaadf9696476421c Mon Sep 17 00:00:00 2001
From: JonaKl <147399846+JonaKl@users.noreply.github.com>
Date: Sun, 14 Apr 2024 13:50:47 +0200
Subject: [PATCH 1/6] corrected port to 8081

---
 quasar.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quasar.config.js b/quasar.config.js
index 8550dda..2dac4fa 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -96,7 +96,7 @@ module.exports = configure(function (/* ctx */) {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
       // https: true
-      port: 8080, // default: 3000; changed to 8080 to match keycloak settings
+      port: 8081, // default: 3000; changed to 8081 to match keycloak settings
       open: true // opens browser window automatically
     },
 

From 91f8ef9d3a037a93cc1e98f8ae3165362f705125 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jona=20Kl=C3=A4=C3=9F?= <jonaklaess@gmail.com>
Date: Wed, 1 May 2024 20:26:18 +0200
Subject: [PATCH 2/6] extracted frontend port

---
 quasar.config.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/quasar.config.js b/quasar.config.js
index 5806b3f..488e6c0 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -11,6 +11,7 @@
 
 const { configure } = require('quasar/wrappers');
 const path = require('path');
+const frontendPort = 8080;
 
 module.exports = configure(function (/* ctx */) {
   return {
@@ -67,7 +68,7 @@ module.exports = configure(function (/* ctx */) {
 
         //Defined in realm_export.json, initialize_keycloak.sh and quasar.config.js
         PORT_KEYCLOAK:8083,
-        PORT_FRONTEND:8080,
+        PORT_FRONTEND:frontendPort,
         PORT_BACKEND:8081,
       },
       // rawDefine: {}
@@ -106,11 +107,11 @@ module.exports = configure(function (/* ctx */) {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
       // https: true
-      port: 8080, // default: 3000; changed to 8080 to match keycloak settings
+      port: frontendPort, // default: 3000; changed to 8080 to match keycloak settings
       open: true, // opens browser window automatically
       proxy: {
         '/api': {
-          target: 'http://localhost:8080',
+          target: 'http://localhost:' + frontendPort,
           changeOrigin: true
         }
       },

From 68dae3ea3f6fd8da703e4187a7500c2839b56e9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jona=20Kl=C3=A4=C3=9F?= <jonaklaess@gmail.com>
Date: Wed, 1 May 2024 20:26:24 +0200
Subject: [PATCH 3/6] new app-vite version (no vulnerabilities anymore)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0a3ca0b..eed6fe4 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@intlify/vite-plugin-vue-i18n": "^3.3.1",
-    "@quasar/app-vite": "^1.8.0",
+    "@quasar/app-vite": "^1.8.5",
     "@quasar/cli": "^2.4.0",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",

From cb68ec0d351ffe23e1395f678aa8984c0199fe4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jona=20Kl=C3=A4=C3=9F?= <jonaklaess@gmail.com>
Date: Wed, 1 May 2024 20:48:20 +0200
Subject: [PATCH 4/6] added login function

---
 src/components/ProtectedData.vue | 20 +++++++++++------
 src/main.ts                      | 38 ++++++++++++++++++++------------
 src/pages/IndexPage.vue          |  2 +-
 src/stores/keycloakStore.ts      |  4 +++-
 4 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/components/ProtectedData.vue b/src/components/ProtectedData.vue
index de4c72d..f123af5 100644
--- a/src/components/ProtectedData.vue
+++ b/src/components/ProtectedData.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
-import { useKeycloakStore } from '../stores/keycloakStore';
-import {defineComponent, onMounted, ref} from 'vue';
-import {useUserStore} from 'stores/user-store';
+//import { useKeycloakStore } from '../stores/keycloakStore';
+import { defineComponent } from 'vue';
+import { useUserStore } from 'stores/user-store';
+import { useKeycloakStore } from 'stores/keycloakStore';
 
 /*const protectedData = ref("");
 const keycloakStore = useKeycloakStore();
@@ -34,12 +35,16 @@ onMounted(() => {
 export default defineComponent({
   name: 'ProtectedData',
   components: {},
-
+  methods: {
+    logout() {
+      const keycloakStore = useKeycloakStore();
+      keycloakStore.logout();
+    }
+  },
   setup() {
-    const userStore = useUserStore();
+    return useUserStore();
+  },
 
-    return userStore;
-  }
 })
 
 </script>
@@ -52,6 +57,7 @@ export default defineComponent({
     <p>{{ user.username }}</p>
     <p>{{ user.keycloakID }}</p>
   </div>
+  <q-btn @click="logout()" label="Logout" />
 </template>
 
 <style scoped>
diff --git a/src/main.ts b/src/main.ts
index 51157cd..8dcf370 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,7 @@ import {createPinia} from 'pinia';
 
 import App from './App.vue';
 
-import Keycloak, {type KeycloakConfig, type KeycloakInitOptions} from 'keycloak-js';
+import Keycloak from 'keycloak-js';
 import { useKeycloakStore } from 'stores/keycloakStore';
 import {useUserStore} from 'stores/user-store';
 
@@ -18,23 +18,34 @@ app.use(createPinia());
  * @param onLoad = 'login-required': Hierdurch wird zum Aufrufen der ganzen Applikation ein login benötigt.
  * @param redirectUri: URL, zu der nach dem Login weitergeleitet wird. Hierbei wird die Port des Frontends aus der .env-Datei verwendet.
  */
+/**
+ * Variablen sind in quasar.config.js definiert und werden hier verwendet.
+ * @param keycloakPort Port, auf dem Keycloak läuft, hinterlegt in docker-compose.yml
+ * @param frontendPort Port, auf dem das Frontend läuft, hinterlegt in quasar.config.js und realm-export.json von Keycloak für die Redirect-URL
+ * @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak
+ * @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak
+ */
+const keycloakPort = "" + process.env.PORT_KEYCLOAK;
+const frontendPort = "" + process.env.PORT_FRONTEND;
+const realm = "" + process.env.KEYCLOAK_REALM;
+const clientId = "" + process.env.KEYCLOAK_CLIENT_ID;
+
+const userStore = useUserStore();
+const keycloakStore = useKeycloakStore();
 
 const keycloak = new Keycloak({
-  url: 'http://localhost:8083/',
-  realm: 'PraxistransferKeycloak',
-  clientId: 'praxistransfer'
+  url: 'http://localhost:' + keycloakPort + '/',
+  realm: realm,
+  clientId: clientId
 });
 
-console.log("ICH WAR HIER");
-
 try {
-  const authenticated = await keycloak.init({
-    onLoad: 'login-required',
-    redirectUri: 'http://localhost:8080/test/'
+  await keycloak.init({
+    onLoad: 'login-required', //authentifizierung erforderlich
+    redirectUri: 'http://localhost:' + frontendPort + '/test/'
   }).then( (auth) => {
-    console.log("Authenticated :" + authenticated);
+    console.log("Authenticated: " + auth);
   });
-
 } catch (error) {
   console.error(error);
 }
@@ -43,7 +54,6 @@ console.log(keycloak);
 console.log(keycloak.subject);
 
 // Anfrage ans Backend
-const userStore = useUserStore();
 
 if (keycloak.subject != null) {
   //userStore.loadPtpUsersByKeycloakID(keycloak.subject);
@@ -56,7 +66,7 @@ if (keycloak.subject != null) {
     console.log(JSON.stringify(user));
   })
 } else {
-  console.log("hier ist was schlimmes passiert menno");
+  console.error("hier ist was schlimmes passiert menno");
 }
 
-
+keycloakStore.setKeycloak(keycloak);
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index efe2b03..eeee211 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Todo, Meta } from '../components/models';
+import { Todo, Meta } from 'components/models';
 import ExampleComponent from 'components/ExampleComponent.vue';
 
 defineOptions({
diff --git a/src/stores/keycloakStore.ts b/src/stores/keycloakStore.ts
index c4fdb8a..a60ec39 100644
--- a/src/stores/keycloakStore.ts
+++ b/src/stores/keycloakStore.ts
@@ -13,6 +13,8 @@ export const useKeycloakStore = defineStore('keycloakStore', {
     setKeycloak(keycloak: Keycloak): void {
       this.keycloak = keycloak;
     },
-
+    async logout(){
+      await this.keycloak?.logout();
+    }
   },
 });

From 64edf9b81c9320a6470247555e21ef2da88e6702 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jona=20Kl=C3=A4=C3=9F?= <jonaklaess@gmail.com>
Date: Thu, 2 May 2024 15:21:33 +0200
Subject: [PATCH 5/6] added logout function and persistent pinia store

---
 src/App.vue                      | 13 +++----
 src/boot/pinia.ts                |  6 ++++
 src/components/ProtectedData.vue | 59 ++++++++++---------------------
 src/main.ts                      | 54 +++++-----------------------
 src/pages/IndexPage.vue          | 50 ++++++++------------------
 src/pages/TestPage.vue           |  2 ++
 src/stores/index.ts              | 32 -----------------
 src/stores/keycloakStore.ts      | 20 -----------
 src/stores/user-store.ts         | 60 ++++++++++++++++++++++++++------
 tsconfig.json                    | 10 +-----
 10 files changed, 104 insertions(+), 202 deletions(-)
 create mode 100644 src/boot/pinia.ts
 delete mode 100644 src/stores/index.ts
 delete mode 100644 src/stores/keycloakStore.ts

diff --git a/src/App.vue b/src/App.vue
index c1b93fe..7e6cda0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,12 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router';
-import ProtectedData from './components/ProtectedData.vue';
-defineOptions({
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'App'
 });
 </script>
 
 <template>
-  <header>
-    <img alt="Quasar logo" src="./assets/quasar-logo-vertical.svg" width="200vw"/>
-
-    <ProtectedData />
-  </header>
   <router-view />
 </template>
 
diff --git a/src/boot/pinia.ts b/src/boot/pinia.ts
new file mode 100644
index 0000000..37ecc2a
--- /dev/null
+++ b/src/boot/pinia.ts
@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import { createPinia } from 'pinia';
+
+export default boot(({ app }) => {
+  app.use(createPinia());
+});
diff --git a/src/components/ProtectedData.vue b/src/components/ProtectedData.vue
index f123af5..ee5b5fb 100644
--- a/src/components/ProtectedData.vue
+++ b/src/components/ProtectedData.vue
@@ -1,50 +1,29 @@
 <script lang="ts">
-//import { useKeycloakStore } from '../stores/keycloakStore';
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 import { useUserStore } from 'stores/user-store';
-import { useKeycloakStore } from 'stores/keycloakStore';
-
-/*const protectedData = ref("");
-const keycloakStore = useKeycloakStore();
-
-function fetchProtectedData() {
-  const keycloak = keycloakStore.getKeycloak;
-  if(!keycloak){
-    return;
-  }
-  let myHeaders = new Headers();
-  if(!keycloak.token){
-    return;
-  }
-  myHeaders.append("Authorization", "Bearer " + keycloak.token);
-  let requestOptons = {
-    headers: myHeaders,
-  };
-  fetch("localhost:"+ import.meta.env.PORT_BACKEND + "/api/protected", requestOptons)
-    .then((response) => response.text())
-    .then((data) => {
-      protectedData.value = data;
-      console.info("Protected data: ", data);
-    }).catch((e)=>console.error("Error fetching protected data: ", e));
-}
-onMounted(() => {
-  console.info("Protected component mounted");
-  fetchProtectedData();
-});*/
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
   name: 'ProtectedData',
   components: {},
-  methods: {
-    logout() {
-      const keycloakStore = useKeycloakStore();
-      keycloakStore.logout();
-    }
-  },
   setup() {
-    return useUserStore();
-  },
+    const userStore = useUserStore();
+    const router = useRouter();
 
+    const user = ref();
+    const userLoaded = ref(false);
+    const logout = () => {
+      userStore.logout();
+      router.push('/');
+    };
+    onMounted(() => {
+      console.log("IM MOUNTEEED: " + userStore.userLoaded + " " + userStore.user)
+      userLoaded.value = userStore.userLoaded;
+      user.value = userStore.user;
+      return { user, userLoaded };
+    });
+    return { user, userLoaded, logout };
+  },
 })
 
 </script>
@@ -57,7 +36,7 @@ export default defineComponent({
     <p>{{ user.username }}</p>
     <p>{{ user.keycloakID }}</p>
   </div>
-  <q-btn @click="logout()" label="Logout" />
+  <q-btn @click="logout()" label="Logout"/>
 </template>
 
 <style scoped>
diff --git a/src/main.ts b/src/main.ts
index 8dcf370..b7024a8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,69 +4,31 @@ import {createPinia} from 'pinia';
 import App from './App.vue';
 
 import Keycloak from 'keycloak-js';
-import { useKeycloakStore } from 'stores/keycloakStore';
 import {useUserStore} from 'stores/user-store';
 
 const app = createApp(App);
-app.use(createPinia());
+const pinia = createPinia();
+app.use(pinia);
+
 
-/**
- * Initialisierungsoptionen für Keycloak.
- * @param url URL zu Keycloak, Port definiert in keycloak_init.sh und quasar.config.js-Datei. Müssen identisch sein!
- * @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak und quasar.config.js-Datei. Müssen identisch sein!
- * @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak und quasar.config.js-Datei. Müssen identisch sein!
- * @param onLoad = 'login-required': Hierdurch wird zum Aufrufen der ganzen Applikation ein login benötigt.
- * @param redirectUri: URL, zu der nach dem Login weitergeleitet wird. Hierbei wird die Port des Frontends aus der .env-Datei verwendet.
- */
-/**
- * Variablen sind in quasar.config.js definiert und werden hier verwendet.
- * @param keycloakPort Port, auf dem Keycloak läuft, hinterlegt in docker-compose.yml
- * @param frontendPort Port, auf dem das Frontend läuft, hinterlegt in quasar.config.js und realm-export.json von Keycloak für die Redirect-URL
- * @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak
- * @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak
- */
-const keycloakPort = "" + process.env.PORT_KEYCLOAK;
-const frontendPort = "" + process.env.PORT_FRONTEND;
-const realm = "" + process.env.KEYCLOAK_REALM;
-const clientId = "" + process.env.KEYCLOAK_CLIENT_ID;
 
 const userStore = useUserStore();
-const keycloakStore = useKeycloakStore();
-
-const keycloak = new Keycloak({
-  url: 'http://localhost:' + keycloakPort + '/',
-  realm: realm,
-  clientId: clientId
-});
-
-try {
-  await keycloak.init({
-    onLoad: 'login-required', //authentifizierung erforderlich
-    redirectUri: 'http://localhost:' + frontendPort + '/test/'
-  }).then( (auth) => {
-    console.log("Authenticated: " + auth);
-  });
-} catch (error) {
-  console.error(error);
-}
-
-console.log(keycloak);
-console.log(keycloak.subject);
+const keycloak: Keycloak = await userStore.initKeycloak();
 
 // Anfrage ans Backend
 
-if (keycloak.subject != null) {
+if (keycloak.subject) {
+  userStore.keycloakId = keycloak.subject;
   //userStore.loadPtpUsersByKeycloakID(keycloak.subject);
-  userStore.getPtpUserByKeycloakID(keycloak.subject);
+  await userStore.getPtpUserByKeycloakID(keycloak.subject);
   /*console.log(userStore.userLoaded);
   if(userStore.userLoaded) {
     console.log("Hier ist der Bruder: " + JSON.stringify(userStore.user));
   }*/
-  userStore.loadPtpUsersByKeycloakID(keycloak.subject).then(user => {
+  userStore.loadPtpUsersByKeycloakID(keycloak.subject).then(user  => {
     console.log(JSON.stringify(user));
   })
 } else {
   console.error("hier ist was schlimmes passiert menno");
 }
 
-keycloakStore.setKeycloak(keycloak);
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index eeee211..a2b3a2c 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,47 +1,25 @@
 <template>
   <q-page class="row items-center justify-evenly">
-    <example-component
-      title="Example component"
-      active
-      :todos="todos"
-      :meta="meta"
-    ></example-component>
+    <q-btn v-if="!userStore.keycloak" @click="login()" label="Login" />
+    <q-btn @click="$router.push('/test')" label="Test" />
   </q-page>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue';
-import { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useUserStore } from 'stores/user-store';
 
-defineOptions({
-  name: 'IndexPage'
-});
 
-const todos = ref<Todo[]>([
-  {
-    id: 1,
-    content: 'ct1'
+export default defineComponent({
+  components: {
+
   },
-  {
-    id: 2,
-    content: 'ct2'
-  },
-  {
-    id: 3,
-    content: 'ct3'
-  },
-  {
-    id: 4,
-    content: 'ct4'
-  },
-  {
-    id: 5,
-    content: 'ct5'
+  setup() {
+    const userStore = useUserStore();
+    const login = () => {
+      userStore.login();
+    };
+    return { login, userStore };
   }
-]);
-
-const meta = ref<Meta>({
-  totalCount: 1200
 });
 </script>
diff --git a/src/pages/TestPage.vue b/src/pages/TestPage.vue
index e5f9bc8..7cbb38b 100644
--- a/src/pages/TestPage.vue
+++ b/src/pages/TestPage.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 
+import ProtectedData from 'components/ProtectedData.vue';
 </script>
 
 <template>
   <h1>Hallloooooooooo</h1>
+  <ProtectedData />
 </template>
 
 <style scoped>
diff --git a/src/stores/index.ts b/src/stores/index.ts
deleted file mode 100644
index d30b7cf..0000000
--- a/src/stores/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { store } from 'quasar/wrappers'
-import { createPinia } from 'pinia'
-import { Router } from 'vue-router';
-
-/*
- * When adding new properties to stores, you should also
- * extend the `PiniaCustomProperties` interface.
- * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
- */
-declare module 'pinia' {
-  export interface PiniaCustomProperties {
-    readonly router: Router;
-  }
-}
-
-/*
- * If not building with SSR mode, you can
- * directly export the Store instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Store instance.
- */
-
-export default store((/* { ssrContext } */) => {
-  const pinia = createPinia()
-
-  // You can add Pinia plugins here
-  // pinia.use(SomePiniaPlugin)
-
-  return pinia
-})
diff --git a/src/stores/keycloakStore.ts b/src/stores/keycloakStore.ts
deleted file mode 100644
index a60ec39..0000000
--- a/src/stores/keycloakStore.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type Keycloak from 'keycloak-js';
-import { defineStore } from 'pinia';
-//import api from 'axios';
-
-export const useKeycloakStore = defineStore('keycloakStore', {
-  state: ()=>({
-    keycloak: null as Keycloak| null,
-  }),
-  getters: {
-    getKeycloak: (state) => state.keycloak,
-  },
-  actions:{
-    setKeycloak(keycloak: Keycloak): void {
-      this.keycloak = keycloak;
-    },
-    async logout(){
-      await this.keycloak?.logout();
-    }
-  },
-});
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index 0b226a7..c8d285c 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -1,26 +1,66 @@
 import { defineStore } from 'pinia';
-import {api} from 'boot/axios';
-import {ptpUser, responseModel} from 'src/models';
-import Keycloak from 'keycloak-js';
+import { api } from 'src/boot/axios';
+import { ptpUser, responseModel } from 'src/models';
+import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js';
 
 export const useUserStore = defineStore('userStore', {
   state: () => ({
-    user: {"keycloakID":null,"firstName":null,"lastName":null,"username":null},
+    user: null as ptpUser | null,
     userLoaded: false,
+    keycloak: null as Keycloak | null,
+    keycloakId: "",
   }),
-  getters: {
-
-  },
+  getters: {},
   actions: {
-    getPtpUserByKeycloakID(keycloakID : string) {
-      this.loadPtpUsersByKeycloakID(keycloakID).then((response : responseModel) => {
+    async getPtpUserByKeycloakID(keycloakID : string) {
+      await this.loadPtpUsersByKeycloakID(keycloakID).then((response : responseModel) => {
         this.user = response.response;
         this.userLoaded = true;
-        console.log("ich habe das gesetzt: " + JSON.stringify(this.user) + " / " + this.userLoaded);
       });
     },
     async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel>  {
       return (await api.get("/users/login/"+keycloakID)).data;
     },
+    async initKeycloak() {
+      /**
+       * Variablen sind in quasar.config.js definiert und werden hier verwendet.
+       * @param keycloakPort Port, auf dem Keycloak läuft, hinterlegt in docker-compose.yml
+       * @param frontendPort Port, auf dem das Frontend läuft, hinterlegt in quasar.config.js und realm-export.json von Keycloak für die Redirect-URL
+       * @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak
+       * @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak
+       */
+      const keycloakPort: string = "" + process.env.PORT_KEYCLOAK;
+      const frontendPort: string = "" + process.env.PORT_FRONTEND;
+      const realm : string= "" + process.env.KEYCLOAK_REALM;
+      const clientId: string = "" + process.env.KEYCLOAK_CLIENT_ID;
+      const keycloak: Keycloak = new Keycloak({
+        url: 'http://localhost:' + keycloakPort + '/',
+        realm: realm,
+        clientId: clientId
+      });
+      const initOptions: KeycloakInitOptions = {
+        onLoad: 'login-required', //erzwingt Login
+        redirectUri: 'http://localhost:' + frontendPort + '/',
+        checkLoginIframe: false,
+        locale: 'login-required',
+      }
+      try {
+        await keycloak.init(initOptions).then( (auth: boolean): void => {
+          console.log("Authenticated: " + auth);
+        });
+      } catch (error) {
+        console.error(error);
+      }
+      this.keycloak = keycloak;
+      return keycloak;
+    },
+    async login() {
+      if(!this.keycloak){
+        await this.initKeycloak();
+      }else await this.keycloak?.login( {prompt: 'login'} as KeycloakLoginOptions);
+    },
+    async logout() {
+      window.location.href= 'http://localhost:' + process.env.PORT_KEYCLOAK + '/realms/' + process.env.KEYCLOAK_REALM + '/protocol/openid-connect/logout?post_logout_redirect_uri=http%3A%2F%2Flocalhost:' + process.env.PORT_FRONTEND + '&client_id=' + process.env.KEYCLOAK_CLIENT_ID;
+    }
   },
 });
diff --git a/tsconfig.json b/tsconfig.json
index 24fee09..1cd2194 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,12 +3,4 @@
   "compilerOptions": {
     "baseUrl": "."
   },
-  "exclude": [
-    "./dist",
-    "./.quasar",
-    "./node_modules",
-    "./src-capacitor",
-    "./src-cordova",
-    "./quasar.config.*.temporary.compiled*"
-  ]
-}
\ No newline at end of file
+}

From 74d9c2a62ed49f216297bcd8546eff1929279e6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jona=20Kl=C3=A4=C3=9F?= <jonaklaess@gmail.com>
Date: Thu, 2 May 2024 16:05:24 +0200
Subject: [PATCH 6/6] now able to get all users and print them

---
 src/components/ProtectedData.vue | 32 ++++++++++++++++++++++++++++----
 src/stores/user-store.ts         |  4 ++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/ProtectedData.vue b/src/components/ProtectedData.vue
index ee5b5fb..49108f0 100644
--- a/src/components/ProtectedData.vue
+++ b/src/components/ProtectedData.vue
@@ -2,6 +2,7 @@
 import { defineComponent, onMounted, ref } from 'vue';
 import { useUserStore } from 'stores/user-store';
 import { useRouter } from 'vue-router';
+import { ptpUser } from 'src/models';
 
 export default defineComponent({
   name: 'ProtectedData',
@@ -16,13 +17,26 @@ export default defineComponent({
       userStore.logout();
       router.push('/');
     };
-    onMounted(() => {
-      console.log("IM MOUNTEEED: " + userStore.userLoaded + " " + userStore.user)
+    const users = ref([] as ptpUser[]);
+    const usersLoaded = ref(false);
+    const loadUsers = async() => {
+      await userStore.loadAllUsers();
+      usersLoaded.value = true;
+      users.value = userStore.users;
+    }
+    onMounted(async () => {
       userLoaded.value = userStore.userLoaded;
       user.value = userStore.user;
-      return { user, userLoaded };
+      //users = await userStore.getAllUsers();
     });
-    return { user, userLoaded, logout };
+    return {
+      user,
+      userLoaded,
+      logout,
+      loadUsers,
+      users,
+      usersLoaded
+    };
   },
 })
 
@@ -37,6 +51,16 @@ export default defineComponent({
     <p>{{ user.keycloakID }}</p>
   </div>
   <q-btn @click="logout()" label="Logout"/>
+  <q-btn @click="loadUsers()" label="Print Users"/>
+  <div v-if="usersLoaded">
+    <p>Users:</p>
+    <div v-for="user in users" :key="user.keycloakID">
+      <p>{{ user.firstName }}</p>
+      <p>{{ user.lastName }}</p>
+      <p>{{ user.username }}</p>
+      <p>{{ user.keycloakID }}</p>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index c8d285c..3069d12 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -9,6 +9,7 @@ export const useUserStore = defineStore('userStore', {
     userLoaded: false,
     keycloak: null as Keycloak | null,
     keycloakId: "",
+    users: [] as ptpUser[],
   }),
   getters: {},
   actions: {
@@ -21,6 +22,9 @@ export const useUserStore = defineStore('userStore', {
     async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel>  {
       return (await api.get("/users/login/"+keycloakID)).data;
     },
+    async loadAllUsers(){
+      this.users = (await api.get("/users/user")).data;
+    },
     async initKeycloak() {
       /**
        * Variablen sind in quasar.config.js definiert und werden hier verwendet.