Implemented approve/reject access

frontend/src/App.vue

@@ -13,7 +13,7 @@
       <template v-if="selectedClub">
         <a href="/members">Mitglieder</a>
         <a href="/diary">Tagebuch</a>
-        <button>Freigaben</button>
+        <a href="/pending-approvals">Freigaben</a>
       </template>
       <div>
         <button @click="logout()">Ausloggen</button>

frontend/src/router.js

@@ -7,6 +7,7 @@ import CreateClub from './views/CreateClub.vue';
 import ClubView from './views/ClubView.vue';
 import MembersView from './views/MembersView.vue';
 import DiaryView from './views/DiaryView.vue';
+import PendingApprovalsView from './views/PendingApprovalsView.vue';
 
 const routes = [
   { path: '/register', component: Register },
@@ -17,6 +18,7 @@ const routes = [
   { path: '/showclub/:1', component: ClubView },
   { path: '/members', component: MembersView },
   { path: '/diary', component: DiaryView },
+  { path: '/pending-approvals', component: PendingApprovalsView},
 ];
 
 const router = createRouter({

frontend/src/views/PendingApprovalsView.vue

@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <h2>Ausstehende Benutzeranfragen</h2>
+        <div v-if="pendingUsers.length > 0">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Vorname</th>
+                        <th>Nachname</th>
+                        <th>Email</th>
+                        <th>Aktionen</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="user in pendingUsers" :key="user.id">
+                        <td>{{ user.firstName }}</td>
+                        <td>{{ user.lastName }}</td>
+                        <td>{{ user.email }}</td>
+                        <td>
+                            <button @click="approveUser(user.id)">Genehmigen</button>
+                            <button @click="rejectUser(user.id)">Ablehnen</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div v-else>
+            <p>Keine ausstehenden Benutzeranfragen.</p>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import apiClient from '../apiClient.js';
+
+export default {
+    name: 'PendingApprovalsView',
+    data() {
+        return {
+            pendingUsers: [],
+        };
+    },
+    computed: {
+        ...mapGetters(['currentClub']),
+    },
+    async created() {
+        await this.loadPendingApprovals();
+    },
+    methods: {
+        async loadPendingApprovals() {
+            try {
+                const response = await apiClient.get(`/clubs/pending/${this.currentClub}`);
+                this.pendingUsers = response.data.map(entry => entry.User);
+            } catch (error) {
+                console.error('Fehler beim Laden der ausstehenden Anfragen:', error);
+            }
+        },
+        async approveUser(userId) {
+            try {
+                await apiClient.post('/clubs/approve', {
+                    clubid: this.currentClub,
+                    userid: userId,
+                });
+                this.pendingUsers = this.pendingUsers.filter(user => user.id !== userId);
+            } catch (error) {
+                console.error('Fehler beim Genehmigen des Benutzers:', error);
+            }
+        },
+        async rejectUser(userId) {
+            try {
+                await apiClient.post('/clubs/reject', {
+                    clubid: this.currentClub,
+                    userid: userId,
+                });
+                this.pendingUsers = this.pendingUsers.filter(user => user.id !== userId);
+            } catch (error) {
+                console.error('Fehler beim Ablehnen des Benutzers:', error);
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th,
+td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+button {
+    margin-right: 5px;
+    padding: 5px 10px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+</style>