From c47b24c71a01dfa8a64736c0a6394e3ff70fad0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20M=C3=BCller?= <alexander@mueller-post.de>
Date: Sun, 29 Dec 2024 11:31:57 +0100
Subject: [PATCH] Revert "Datenschutz-Hinweis beim laden der Seite anzeigen."

This reverts commit 2aa52d8662c7e83f16e95309cdd41ff49c789ebf.
---
 rechtlicheHinweise.html       | 12 ++++---
 src/main.js                   |  4 ---
 src/utils/consent-utils.js    | 63 +++++++++++++++++++++++++++++++++++
 src/utils/notice-utils.js     | 48 --------------------------
 src/utils/starterkit-utils.js | 37 ++++++++++++++++++--
 style/consentPopup.css        | 63 +++++++++++++++++++++++++++++++++++
 style/elements.css            | 18 ----------
 style/index.css               |  2 +-
 style/media-query.css         |  7 ----
 style/noticePopup.css         | 45 -------------------------
 10 files changed, 169 insertions(+), 130 deletions(-)
 create mode 100644 src/utils/consent-utils.js
 delete mode 100644 src/utils/notice-utils.js
 create mode 100644 style/consentPopup.css
 delete mode 100644 style/noticePopup.css

diff --git a/rechtlicheHinweise.html b/rechtlicheHinweise.html
index a261fe5..308492e 100644
--- a/rechtlicheHinweise.html
+++ b/rechtlicheHinweise.html
@@ -81,11 +81,13 @@
         <br>Die Plattform dient ausschließlich als Hosting-Anbieter für den Quellcode und dessen Bereitstellung. Bei einem Besuch der Domain können technische Daten (z.B. IP-Adresse, Zugriffszeitpunkt) von Codeberg erhoben und verarbeitet werden. Diese Daten werden entsprechend der Datenschutzerklärung von Codeberg behandelt.
         <br>Weitere Informationen zur Datenverarbeitung durch Codeberg e.V. finden Sie unter: <a href="https://codeberg.org/Codeberg/org/src/branch/main/PrivacyPolicy.md" target="_blank">https://codeberg.org/Codeberg/org/src/branch/main/PrivacyPolicy.md</a>.</p>
         <h3>Einbindung von Mastodon-Server-Daten (JavaScript-Abrufe)</h3>
-            <p>Unsere Website bietet Ihnen die Möglichkeit, Profile und Informationen von Mastodon-Servern anzuzeigen. Um diese Inhalte bereitzustellen, werden Daten von den jeweiligen Servern über JavaScript abgerufen. Dabei können technische Daten wie Ihre IP-Adresse, Browserinformationen und Zugriffszeitpunkte verarbeitet werden.</p>
-            <ul>
-                <li><strong>Rechtsgrundlage</strong> — Die Verarbeitung erfolgt auf Grundlage unseres berechtigten Interesses gemäß Art. 6 Abs. 1 lit. f DSGVO. Das berechtigte Interesse besteht darin, die Funktionalität der Website sicherzustellen und die angeforderten Inhalte bereitzustellen.</li>
-                <li><strong>Transparenz über die Datenverarbeitung</strong> — Im Rahmen der Bereitstellung von Mastodon-Daten können technische Daten (z. B. IP-Adresse) an die jeweiligen Mastodon-Server übermittelt werden. Bitte beachten Sie, dass die Datenverarbeitung auf den Servern nicht in unserem Einflussbereich liegt. Weitere Informationen hierzu finden Sie in den Datenschutzerklärungen der jeweiligen Mastodon-Server.</li>
-                <li><strong>Datenquellen</strong> — Die dargestellten Inhalte stammen von Mastodon-Servern. Die Verarbeitung Ihrer Daten auf diesen Servern erfolgt gemäß den dort geltenden Datenschutzbestimmungen. Weitere Informationen entnehmen Sie bitte den Datenschutzerklärungen der jeweiligen Anbieter.</li>           
+        <p>Unsere Website bietet Ihnen die Möglichkeit, Profile und Informationen von Mastodon-Servern anzuzeigen. Um diese Inhalte bereitzustellen, werden Daten von den jeweiligen Servern über JavaScript abgerufen. Dabei können technische Daten wie Ihre IP-Adresse, Browserinformationen und Zugriffszeitpunkte verarbeitet werden.</p>
+        <ul>
+            <li><strong>Rechtsgrundlage</strong> — Die Verarbeitung erfolgt ausschließlich auf Grundlage Ihrer Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO. Ohne Ihre aktive Zustimmung werden keine Daten von externen Mastodon-Servern geladen.</li>
+            <li><strong>Vorgehensweise bei der Einwilligung</strong> — Nach dem Laden der Website werden Sie gefragt, ob Sie die Mastodon-Daten abrufen möchten. Diese Einwilligung gilt nur für die aktuelle Sitzung und verfällt, sobald Sie die Seite neu laden. Bei einem erneuten Besuch oder Neuladen der Seite wird die Einwilligung erneut eingeholt.</li>
+            <li><strong>Transparenz über die Datenverarbeitung</strong> — Mit Ihrer Einwilligung werden technische Daten (z. B. IP-Adresse) an die jeweiligen Mastodon-Server übermittelt. Bitte beachten Sie, dass die Datenverarbeitung auf den Servern nicht in unserem Einflussbereich liegt. Weitere Informationen hierzu finden Sie in den Datenschutzerklärungen der jeweiligen Mastodon-Server.</li>
+            <li><strong>Widerruf der Einwilligung</strong> — Da Ihre Einwilligung nur für die aktuelle Sitzung gilt, können Sie diese jederzeit durch das Verlassen oder Neuladen der Seite widerrufen.</li>
+            <li><strong>Datenquellen</strong> — Die dargestellten Inhalte stammen von Mastodon-Servern. Die Verarbeitung Ihrer Daten auf diesen Servern erfolgt gemäß den dort geltenden Datenschutzbestimmungen. Weitere Informationen entnehmen Sie bitte den Datenschutzerklärungen der jeweiligen Anbieter.</li>
     </div>
 </section>
 
diff --git a/src/main.js b/src/main.js
index 86ad2e3..f82d08c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,6 @@ import { createStarterKitElement, enhanceStarterKits } from './utils/starterkit-
 import { seededShuffleChildren } from './utils/shuffle-utils.js';
 import { initializeCreateStarterKitPopup } from './utils/create-starterkit.js';
 import { loadPostwall } from './components/postwall.js';
-import { checkUserNotice } from './utils/notice-utils.js';
 
 
 let userConsent = null;
@@ -18,9 +17,6 @@ async function loadTemplates() {
 }
 
 document.addEventListener('DOMContentLoaded', async function () {
-    // Datenschutz-Hinweis anzeigen oder nicht
-    checkUserNotice();
-    
     await loadTemplates();
 
     initializeCreateStarterKitPopup();
diff --git a/src/utils/consent-utils.js b/src/utils/consent-utils.js
new file mode 100644
index 0000000..b7bd3ca
--- /dev/null
+++ b/src/utils/consent-utils.js
@@ -0,0 +1,63 @@
+import { createPopup } from '../components/popupManager.js';
+
+export function setUserConsent(consent) {
+    localStorage.setItem('userConsent', JSON.stringify(consent));
+}
+
+export function getUserConsent() {
+    const consent = localStorage.getItem('userConsent');
+    return consent !== null ? JSON.parse(consent) : null;
+}
+
+export function showConsentPopup(onAccept, onDecline) {
+    const title = 'Zustimmung zur Datenabfrage';
+    const body = `
+        <p>
+            Mit dem Klicken auf "Bestätigen" erlaubst du, dass Profilinformationen von unterschiedlichen Mastodon-Instanzen
+            abgefragt werden. Deine Entscheidung wird im lokalen Speicher deines Browsers gespeichert.
+        </p>
+        <p>
+            Weitere Informationen findest du in unseren 
+            <a href="/rechtlicheHinweise.html" target="_blank">🛡️&nbsp;Datenschutzhinweisen</a>.
+        </p>
+        <div class="consent-popup-buttons">
+            <button id="consent-decline">Ablehnen</button>    
+            <button id="consent-accept">Bestätigen</button>
+        </div>
+    `;
+
+    const popup = createPopup({
+        title,
+        body,
+        customClass: 'consent-popup',
+        closeCallback: () => {
+            document.body.classList.remove('body-no-scroll');
+            window.removeEventListener('popstate', onPopState);
+        }
+    });
+
+    // Klasse hinzufügen, um das Scrollen des Hintergrunds zu verhindern
+    document.body.classList.add('body-no-scroll');
+
+    // Füge einen neuen Eintrag zur Browser-Historie hinzu
+    history.pushState({ popupOpen: true }, null, '');
+
+    const onPopState = () => {
+        popup.remove();
+        document.body.classList.remove('body-no-scroll');
+        window.removeEventListener('popstate', onPopState);
+        history.back();
+    };
+    window.addEventListener('popstate', onPopState);
+
+    // Event-Listener für die Buttons
+    popup.querySelector('#consent-accept').addEventListener('click', () => {
+        popup.remove();
+        onAccept(); // Zustimmung
+    });
+
+    popup.querySelector('#consent-decline').addEventListener('click', () => {
+        popup.remove();
+        onDecline(); // Ablehnung
+    });
+}
diff --git a/src/utils/notice-utils.js b/src/utils/notice-utils.js
deleted file mode 100644
index 934620f..0000000
--- a/src/utils/notice-utils.js
+++ /dev/null
@@ -1,48 +0,0 @@
-export function setUserNotice() {
-    localStorage.setItem('userNotice', 'true');
-    removeNoticePopup();
-}
-
-export function removeNoticePopup() {
-    const popup = document.getElementById('notice-popup');
-    if (popup) {
-        popup.remove(); // Entfernt das Popup aus dem DOM
-    }
-}
-
-export function checkUserNotice() {
-    const noticeRead = localStorage.getItem('userNotice');
-    if (!noticeRead) {
-        // Popup erstellen
-        const popup = document.createElement('div');
-        popup.id = 'notice-popup';
-        popup.className = 'notice-popup';
-
-        const title = 'Hinweis zur Datenabfrage';
-        const body = `
-            <p>
-                Diese Seite ruft Inhalte von unterschiedlichen Servern im Fediverse — in der Regel von unseren Mastodon-Instanzen — ab. Dabei werden technische Daten wie Deine IP-Adresse übertragen.
-            </p>
-            <p>
-                Mehr Informationen findest du in unseren 
-                <a href="/rechtlicheHinweise.html" target="_blank">🛡️&nbsp;Datenschutzhinweisen</a>.
-            </p>
-            <div class="notice-popup-buttons">
-                <button id="notice-btn" class="btn">Verstanden</button>
-            </div>
-        `;
-
-        const header = document.createElement('h3');
-        header.textContent = title;
-
-        const content = document.createElement('div');
-        content.innerHTML = body;
-
-        popup.appendChild(header);
-        popup.appendChild(content);
-        document.body.appendChild(popup);
-
-        // Event-Listener für den Button
-        document.getElementById('notice-btn').addEventListener('click', setUserNotice);
-    }
-}
diff --git a/src/utils/starterkit-utils.js b/src/utils/starterkit-utils.js
index b3e540c..b7a1333 100644
--- a/src/utils/starterkit-utils.js
+++ b/src/utils/starterkit-utils.js
@@ -1,4 +1,5 @@
 import { createRecommendationPopup, populateAuthorsContainer } from './recommendations-utils.js';
+import { showConsentPopup, getUserConsent, setUserConsent } from './consent-utils.js';
 
 export function createStarterKitElement(kit) {
     const template = document.getElementById('starterkit-template').content.cloneNode(true);
@@ -31,8 +32,40 @@ export function enhanceStarterKits() {
 
     starterkits.forEach(kit => {
         kit.addEventListener('click', function () {
-            // Direkt die Profile laden, ohne Consent-Überprüfung
-            loadStarterKitProfiles(kit);
+            const userConsent = getUserConsent(); // Hole den aktuellen Zustimmungsstatus
+
+            if (userConsent === null) {
+                // Zeige das Popup, da der Nutzer noch nicht zugestimmt oder abgelehnt hat
+                showConsentPopup(
+                    () => {
+                        // Bestätigen-Callback: Zustimmung speichern und Profile laden
+                        setUserConsent(true);
+                        loadStarterKitProfiles(kit);
+                    },
+                    () => {
+                        // Ablehnen-Callback: Ablehnung speichern
+                        setUserConsent(false);
+                        console.log('Nutzer hat die Datenabfrage abgelehnt.');
+                    }
+                );
+            } else if (userConsent === true) {
+                // Nutzer hat zugestimmt: Lade die StarterKit-Profile
+                loadStarterKitProfiles(kit);
+            } else {
+                // Nutzer hat abgelehnt: Popup erneut anzeigen
+                showConsentPopup(
+                    () => {
+                        // Bestätigen-Callback: Zustimmung speichern und Profile laden
+                        setUserConsent(true);
+                        loadStarterKitProfiles(kit);
+                    },
+                    () => {
+                        // Ablehnen-Callback: Ablehnung speichern und nichts tun
+                        setUserConsent(false);
+                        console.log('Nutzer hat die Datenabfrage erneut abgelehnt.');
+                    }
+                );
+            }
         });
     });
 }
diff --git a/style/consentPopup.css b/style/consentPopup.css
new file mode 100644
index 0000000..bd98344
--- /dev/null
+++ b/style/consentPopup.css
@@ -0,0 +1,63 @@
+.consent-popup-content {
+    background-color: var(--background-color);
+    padding: 20px;
+    border-radius: 15px;
+    text-align: center;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.consent-popup-content h3 {
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+    color: #fff;
+}
+
+.consent-popup-content p {
+    margin-bottom: 20px;
+    font-size: 1rem;
+    color: #fff;
+    line-height: 1.5;
+}
+
+.consent-popup-content a {
+    color: #007BFF;
+    text-decoration: none;
+}
+
+.consent-popup-content a:hover {
+    text-decoration: underline;
+}
+
+.consent-popup-buttons {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.consent-popup-buttons button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+#consent-accept {
+    background: #28a745;
+    color: white;
+}
+
+#consent-accept:hover {
+    background: #218838;
+}
+
+#consent-decline {
+    background: #dc3545;
+    color: white;
+}
+
+#consent-decline:hover {
+    background: #c82333;
+}
diff --git a/style/elements.css b/style/elements.css
index ac91054..0dabf96 100644
--- a/style/elements.css
+++ b/style/elements.css
@@ -1,21 +1,3 @@
-.btn {
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    margin: 0;
-    font-size: 1rem;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-}
-
-.btn:hover {
-    background-color: var(--primary-color-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
 button.close-popup {
     background-color: transparent;
     padding: 0;
diff --git a/style/index.css b/style/index.css
index bdc3045..eb8a7a2 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1,6 +1,6 @@
 @import "./base.css";
 @import "./site.css";
-@import "./noticePopup.css";
+@import "./consentPopup.css";
 @import "./starterkit.css";
 @import "./recommendationPopup.css";
 @import "./profile.css";
diff --git a/style/media-query.css b/style/media-query.css
index 654d426..3ecda5f 100644
--- a/style/media-query.css
+++ b/style/media-query.css
@@ -47,13 +47,6 @@
         max-width: 98%;
     }
 
-    .notice-popup {
-        bottom: 5px;
-        left: 50%;
-        transform: translateX(-50%);
-        max-width: 98%;
-    }
-
 }
 
 @media (max-width: 450px) {
diff --git a/style/noticePopup.css b/style/noticePopup.css
deleted file mode 100644
index 4795673..0000000
--- a/style/noticePopup.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.notice-popup {
-    position: fixed;
-    bottom: 50px;
-    right: 50px;
-    width: 100%;
-    max-width: 400px;
-    background-color: var(--background-color);
-    padding: 20px;
-    border-radius: 15px;
-    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
-    z-index: 1000;
-    text-align:center;
-}
-
-/* Titel-Styling */
-.notice-popup h3 {
-    margin-bottom: 10px;
-    font-size: 1.25rem;
-    color: #fff;
-}
-
-/* Text-Styling */
-.notice-popup p {
-    margin-bottom: 15px;
-    font-size: 1rem;
-    color: #fff;
-    line-height: 1.5;
-}
-
-/* Link-Styling */
-.notice-popu a {
-    color: #007BFF;
-    text-decoration: none;
-}
-
-.notice-popup a:hover {
-    text-decoration: underline;
-}
-
-/* Button-Container */
-.notice-popup-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-}