added login function

src/components/ProtectedData.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
-import { useKeycloakStore } from '../stores/keycloakStore';
+//import { useKeycloakStore } from '../stores/keycloakStore';
-import {defineComponent, onMounted, ref} from 'vue';
+import { defineComponent } from 'vue';
-import {useUserStore} from 'stores/user-store';
+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>

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/',
+  url: 'http://localhost:' + keycloakPort + '/',
-  realm: 'PraxistransferKeycloak',
+  realm: realm,
-  clientId: 'praxistransfer'
+  clientId: clientId
 });
 
-console.log("ICH WAR HIER");
-
 try {
-  const authenticated = await keycloak.init({
+  await keycloak.init({
-    onLoad: 'login-required',
+    onLoad: 'login-required', //authentifizierung erforderlich
-    redirectUri: 'http://localhost:8080/test/'
+    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);

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({

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();
+    }
   },
 });