Implementiert Benutzer-Authentifizierung und Datenladung bei Login. Fügt Links für Registrierung und Login in den entsprechenden Komponenten hinzu. Aktualisiert das Styling für Login- und Registrierungslinks.

frontend/src/App.vue

@@ -104,10 +104,39 @@ export default {
         this.$router.push(`/showclub/${newVal}`);
       }
     },
+    isAuthenticated(newVal) {
+      if (newVal) {
+        // Benutzer hat sich eingeloggt - Daten laden
+        this.loadUserData();
+      } else {
+        // Benutzer hat sich ausgeloggt - Daten zurücksetzen
+        this.setClubs([]);
+        this.selectedClub = null;
+        if (this.sessionInterval) {
+          clearInterval(this.sessionInterval);
+          this.sessionInterval = null;
+        }
+      }
+    },
   },
   methods: {
     ...mapActions(['setCurrentClub', 'setClubs', 'logout']),
     
+    async loadUserData() {
+      try {
+        const response = await apiClient.get('/clubs');
+        this.setClubs(response.data);
+        if (this.currentClub) {
+          this.selectedClub = this.currentClub;
+        }
+        this.checkSession();
+        this.sessionInterval = setInterval(this.checkSession, 5000);
+      } catch (error) {
+        this.setClubs([]);
+        this.selectedClub = null;
+      }
+    },
+
     loadClub() {
       this.setCurrentClub(this.currentClub);
       this.$router.push(`/showclub/${this.currentClub}`);
@@ -134,17 +163,20 @@ export default {
     }
   },
   async mounted() {
-    try {
-      const response = await apiClient.get('/clubs');
-      this.setClubs(response.data);
-      if (this.currentClub) {
-        this.selectedClub = this.currentClub;
+    // Nur Daten laden, wenn der Benutzer authentifiziert ist
+    if (this.isAuthenticated) {
+      try {
+        const response = await apiClient.get('/clubs');
+        this.setClubs(response.data);
+        if (this.currentClub) {
+          this.selectedClub = this.currentClub;
+        }
+        this.checkSession();
+        this.sessionInterval = setInterval(this.checkSession, 5000);
+      } catch (error) {
+        this.setClubs([]);
+        this.selectedClub = null;
       }
-      this.checkSession();
-      this.sessionInterval = setInterval(this.checkSession, 5000);
-    } catch (error) {
-      this.setClubs([]);
-      this.selectedClub = null;
     }
   },
   beforeUnmount() {

frontend/src/assets/css/components.scss

@@ -498,3 +498,34 @@
     padding: 0.875rem;
   }
 }
+
+/* Login und Registrierungslinks */
+.login-link,
+.register-link {
+  margin-top: 1.5rem;
+  text-align: center;
+  padding: 1rem;
+  background-color: var(--background-light);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+}
+
+.login-link p,
+.register-link p {
+  margin: 0;
+  color: var(--text-muted);
+}
+
+.login-link a,
+.register-link a {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.login-link a:hover,
+.register-link a:hover {
+  color: var(--primary-dark);
+  text-decoration: underline;
+}

frontend/src/views/Login.vue

@@ -6,6 +6,9 @@
       <input v-model="password" type="password" placeholder="Password" required />
       <button type="submit">Login</button>
     </form>
+    <div class="register-link">
+      <p>Noch kein Konto? <router-link to="/register">Registrieren</router-link></p>
+    </div>
   </div>
 </template>
 

frontend/src/views/Register.vue

@@ -7,6 +7,9 @@
         <input v-model="password" type="password" placeholder="Password" required />
         <button type="submit">Register</button>
       </form>
+      <div class="login-link">
+        <p>Bereits ein Konto? <router-link to="/login">Zum Login</router-link></p>
+      </div>
     </div>
   </template>
   
@@ -23,7 +26,7 @@
     methods: {
       async register() {
         try {
-          await axios.post('/api/auth/register', { email: this.email, password: this.password });
+          await axios.post(`${import.meta.env.VITE_BACKEND}/api/auth/register`, { email: this.email, password: this.password });
           alert('Registration successful! Please check your email to activate your account.');
         } catch (error) {
             alert('Registrierung fehlgeschlagen');