From a167e3277e081e1ccfee2d776e4570e6ca0615de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Estelle=20K=C3=B6hler?= <estellekoehler37@gmail.com>
Date: Sun, 26 Apr 2026 10:12:53 +0200
Subject: [PATCH] =?UTF-8?q?Abmeldung=20bei=20my=20profile=20pop=20up=20hin?=
 =?UTF-8?q?zugef=C3=BCgt.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/my_profil.js | 41 +++++++++++++++++++++++------------------
 my_profil.html  | 15 +++++++++++++++
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/js/my_profil.js b/js/my_profil.js
index 1977b5d..69c3759 100644
--- a/js/my_profil.js
+++ b/js/my_profil.js
@@ -227,32 +227,37 @@
             return;
         }
 
-        const unregisterButton = target.closest('[data-unregister-id]');
+       const unregisterButton = target.closest('[data-unregister-id]');
         if (unregisterButton) {
-            if (!currentUser?.email) {
-                return;
-            }
+            if (!currentUser?.email) return;
 
             const eventId = Number(unregisterButton.getAttribute('data-unregister-id'));
-            if (!Number.isFinite(eventId)) {
-                return;
-            }
+            if (!Number.isFinite(eventId)) return;
 
-            unregisterFromEvent(eventId, currentUser.email);
+            const modal = document.getElementById('unregister-confirm-modal');
+            if (modal) modal.classList.add('show');
 
-            // Snackbar: Feedback bei erfolgreicher Abmeldung.
-            const snackbar = document.getElementById('snackbar');
-            if (snackbar) {
-                snackbar.textContent = 'Du wurdest erfolgreich abgemeldet.';
-                snackbar.classList.add('snackbar--danger', 'snackbar--visible');
-                setTimeout(() => {
-                    snackbar.classList.remove('snackbar--visible');
-                    setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
-                }, 4000);
-            }
+            document.getElementById('confirm-unregister-btn').onclick = () => {
+                modal.classList.remove('show');
+                unregisterFromEvent(eventId, currentUser.email);
+                const snackbar = document.getElementById('snackbar');
+                if (snackbar) {
+                    snackbar.textContent = 'Du wurdest erfolgreich abgemeldet.';
+                    snackbar.classList.add('snackbar--danger', 'snackbar--visible');
+                    setTimeout(() => {
+                        snackbar.classList.remove('snackbar--visible');
+                        setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
+                    }, 3000);
+                }
+            };
+
+            document.getElementById('unregister-modal-close').onclick = () => modal.classList.remove('show');
+            document.getElementById('unregister-modal-cancel').onclick = () => modal.classList.remove('show');
+            modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('show'); });
             return;
         }
 
+
         if (target.closest('a, button')) {
             return;
         }
diff --git a/my_profil.html b/my_profil.html
index 4dcf8a4..6ecee48 100644
--- a/my_profil.html
+++ b/my_profil.html
@@ -135,6 +135,21 @@
     </div>
 </div>
 
+<div id="unregister-confirm-modal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h2>Pläne haben sich geändert?</h2>
+            <button type="button" class="modal-close" id="unregister-modal-close" aria-label="Popup schließen">&times;</button>
+        </div>
+        <div class="modal-body">
+            <p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
+        </div>
+        <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
+            <button class="button-primary button--outline" type="button" id="unregister-modal-cancel">Abbrechen</button>
+            <button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
+        </div>
+    </div>
+</div>
 <!-- Snackbar: Feedback bei Abmeldung von Events -->
 <div class="snackbar" id="snackbar"></div>