Some fixes

frontend/src/App.vue

@@ -7,6 +7,7 @@
         <option value="new">Neuer Verein</option>
         <option v-for="club in clubs" :key="club.id" :value="club.id">{{ club.name }}</option>
       </select>
+      <button @click="loadClub">-&gt;</button>
     </div>
     <router-view></router-view>
   </div>
@@ -40,6 +41,10 @@ export default {
   },
   methods: {
     ...mapActions(['setCurrentClub', 'setClubs']),
+    loadClub() {
+      this.setCurrentClub(this.currentClub);
+      this.$router.push(`/showclub/${this.currentClub}`);
+    },
   },
   async mounted() {
     const response = await apiClient.get('/clubs');

frontend/src/views/ClubView.vue

@@ -1,13 +1,24 @@
 <template>
-    <h2>Verein {{ club.name }}</h2>
-    <div v-if="openRequests.length > 0">
-        <h3>Offene Anfragen auf Zugriff</h3>
-    </div>
     <div>
-        <h3>Mitglieder</h3>
-    </div>
-    <div>
-        <h3>Traingstagebuch</h3>
+        <h2>Verein {{ club.name }}</h2>
+        <div v-if="accessAllowed">
+            <div v-if="openRequests.length > 0">
+                <h3>Offene Anfragen auf Zugriff</h3>
+                <!-- Hier könntest du die offenen Anfragen anzeigen -->
+            </div>
+            <div>
+                <h3>Mitglieder</h3>
+                <!-- Hier könntest du die Mitglieder anzeigen -->
+            </div>
+            <div>
+                <h3>Trainingstagebuch</h3>
+                <!-- Hier könntest du das Trainingstagebuch anzeigen -->
+            </div>
+        </div>
+        <div v-else>
+            <div>Für diesen Verein wurde Dir noch kein Zugriff gestattet.</div>
+            <button @click="requestAccess">Zugriff beantragen</button>
+        </div>
     </div>
 </template>
 
@@ -17,19 +28,54 @@ import apiClient from '../apiClient';
 
 export default {
     name: "ClubView",
+    computed: {
+        ...mapGetters(['isAuthenticated', 'currentClub', 'clubs']),
+    },
     data() {
         return {
-            club: { 
+            club: {
                 name: '',
             },
-            openRequests: []
+            openRequests: [],
+            accessAllowed: false
         }
     },
     methods: {
+        async loadClub() {
+            try {
+                const response = await apiClient.get(`/clubs/${this.currentClub}`);
+                this.club = response.data;
+                this.accessAllowed = true;
+            } catch (error) {
+                console.error("Zugriff auf den Verein nicht gestattet", error);
+                this.accessAllowed = false;
+            }
+        },
         async loadOpenRequests() {
-            const notApproved = apiClient.get('/clubmembers/notapproved/' + id);
-            this.openRequests = notApproved.data;
+            try {
+                const response = await apiClient.get(`/clubmembers/notapproved/${this.currentClub}`);
+                this.openRequests = response.data;
+            } catch (error) {
+                console.error("Fehler beim Laden der offenen Anfragen", error);
+            }
+        }, 
+        async requestAccess() {
+            console.log('start request');
+            const response = await apiClient.get(`/clubs/request/${this.currentClub}`);
+            if (response.status === 200) {
+                alert('Zugriff wurde angefragt');
+            }
         }
     },
+    async mounted() {
+        await this.loadClub();
+        await this.loadOpenRequests();
+    }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+h2 {
+    display: block;
+}
+</style>

frontend/src/views/Home.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <h2>Home</h2>
-    <p v-if="!isAuthenticated">You are not logged in. <router-link to="/login">Login</router-link> or <router-link to="/register">Register</router-link></p>
-    <p v-else>Welcome! <button @click="logout">Logout</button></p>
+    <p v-if="!isAuthenticated">Du bist nicht eingeloggt.<router-link to="/login">Einloggen</router-link> oder <router-link to="/register">Registrieren</router-link></p>
+    <p v-else>Herzlich Willkommen <button @click="logout">Ausloggen</button></p>
   </div>
 </template>