From 2629f6b25fa1039214628ea4f2e58e42141933e4 Mon Sep 17 00:00:00 2001
From: zwitschi <zwitschi82@gmail.com>
Date: Thu, 6 Nov 2025 11:26:29 +0100
Subject: [PATCH] feat(contact-form): implement consent checkbox and
 enable/disable submit button based on consent

---
 static/css/admin.css         | 48 ++++++++++++++++++++++++++++++++
 static/css/styles.css        | 54 ++++--------------------------------
 templates/embed_contact.html | 23 ++++++++++++---
 3 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/static/css/admin.css b/static/css/admin.css
index e0379a0..961cc41 100644
--- a/static/css/admin.css
+++ b/static/css/admin.css
@@ -23,6 +23,54 @@ nav a:hover {
   text-decoration: underline;
 }
 
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.pagination a,
+.pagination span {
+  padding: 8px 12px;
+  text-decoration: none;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  color: #007bff;
+}
+
+.pagination a:hover {
+  background-color: #007bff;
+  color: white;
+}
+
+.pagination .current {
+  background-color: #007bff;
+  color: white;
+}
+
+/* Pagination */
+.pagination button {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  background-color: white;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.pagination button:hover {
+  background-color: #f8f9fa;
+}
+.pagination button:disabled {
+  background-color: #e9ecef;
+  cursor: not-allowed;
+}
+.pagination .current-page {
+  font-weight: bold;
+  color: #007bff;
+}
+
 /* Admin newsletter */
 .filters {
   margin-bottom: 20px;
diff --git a/static/css/styles.css b/static/css/styles.css
index 44c953c..05ffd0b 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -74,6 +74,12 @@ button,
   display: inline-block;
 }
 
+button[disabled="true"],
+.btn[disabled="true"] {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
 button:hover,
 .btn:hover {
   background-color: #0056b3;
@@ -304,54 +310,6 @@ tr:hover {
   background-color: #f5f5f5;
 }
 
-/* Pagination */
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  margin-top: 20px;
-}
-
-.pagination a,
-.pagination span {
-  padding: 8px 12px;
-  text-decoration: none;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  color: #007bff;
-}
-
-.pagination a:hover {
-  background-color: #007bff;
-  color: white;
-}
-
-.pagination .current {
-  background-color: #007bff;
-  color: white;
-}
-
-/* Pagination */
-.pagination button {
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  background-color: white;
-  cursor: pointer;
-  border-radius: 4px;
-}
-.pagination button:hover {
-  background-color: #f8f9fa;
-}
-.pagination button:disabled {
-  background-color: #e9ecef;
-  cursor: not-allowed;
-}
-.pagination .current-page {
-  font-weight: bold;
-  color: #007bff;
-}
-
 /* Utility classes */
 .text-center {
   text-align: center;
diff --git a/templates/embed_contact.html b/templates/embed_contact.html
index 4328308..b5f1518 100644
--- a/templates/embed_contact.html
+++ b/templates/embed_contact.html
@@ -23,17 +23,32 @@
           <textarea id="message" name="message" required></textarea>
         </div>
         <div class="form-group">
-          <label for="consent"
-            >I agree to the processing of my submitted data.</label
+          <input
+            type="checkbox"
+            id="consent"
+            name="consent"
+            required
+            style="display: inline-block; width: auto"
+          />
+          <label for="consent" style="display: inline-block">
+            <span style="color: red">*</span> I agree to the processing of my
+            submitted data.</label
           >
-          <input type="checkbox" id="consent" name="consent" required />
         </div>
-        <button type="submit">Send Message</button>
+        <button id="contactSubmit" class="btn" type="submit" disabled="true">
+          Send Message
+        </button>
       </form>
       <div id="responseMessage"></div>
     </div>
 
     <script>
+      document
+        .getElementById("consent")
+        .addEventListener("change", function (e) {
+          const submitButton = document.getElementById("contactSubmit");
+          submitButton.disabled = !e.target.checked;
+        });
       document
         .getElementById("contactForm")
         .addEventListener("submit", function (e) {