From 8ee1203ec657b70a692bc2f01d2c5b2e8e38b1f0 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 27 Aug 2025 09:10:53 +0200
Subject: [PATCH] =?UTF-8?q?Implementiert=20Benutzer-Authentifizierung=20un?=
 =?UTF-8?q?d=20Datenladung=20bei=20Login.=20F=C3=BCgt=20Links=20f=C3=BCr?=
 =?UTF-8?q?=20Registrierung=20und=20Login=20in=20den=20entsprechenden=20Ko?=
 =?UTF-8?q?mponenten=20hinzu.=20Aktualisiert=20das=20Styling=20f=C3=BCr=20?=
 =?UTF-8?q?Login-=20und=20Registrierungslinks.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                    | 52 ++++++++++++++++++++-----
 frontend/src/assets/css/components.scss | 31 +++++++++++++++
 frontend/src/views/Login.vue            |  3 ++
 frontend/src/views/Register.vue         |  5 ++-
 4 files changed, 80 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ba02e5b..01fbe93 100644
--- a/frontend/src/App.vue
+++ b/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() {
diff --git a/frontend/src/assets/css/components.scss b/frontend/src/assets/css/components.scss
index 2e28291..46db46e 100644
--- a/frontend/src/assets/css/components.scss
+++ b/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;
+}
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index ce87e2c..4c40ab3 100644
--- a/frontend/src/views/Login.vue
+++ b/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>
 
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
index d05ba1a..8b0a57f 100644
--- a/frontend/src/views/Register.vue
+++ b/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');