feat(newsletter): Add subscription confirmation email functionality

- Implemented `send_subscription_confirmation` function to send a confirmation email upon subscription. - Added a default HTML template for the confirmation email in settings. - Updated the newsletter management page to handle subscription and unsubscription actions. - Created new templates for embedding contact and newsletter forms. - Added styles for the new templates and unified CSS styles across the application. - Updated tests to reflect changes in the newsletter management API endpoints.
2025-10-30 12:38:26 +01:00
parent f7695be8ef
commit 56840ac313
24 changed files with 897 additions and 449 deletions
--- a/templates/embed_newsletter.html
+++ b/templates/embed_newsletter.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Newsletter Subscription</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
+  </head>
+  <body>
+    <div class="form-container">
+      <h2>Subscribe to Our Newsletter</h2>
+      <form id="newsletterForm" method="post" action="/api/newsletter">
+        <div class="form-group">
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required />
+        </div>
+        <button type="submit">Subscribe</button>
+      </form>
+      <div id="responseMessage"></div>
+    </div>
+
+    <script>
+      document
+        .getElementById("newsletterForm")
+        .addEventListener("submit", function (e) {
+          e.preventDefault();
+          const formData = new FormData(this);
+          fetch("/api/newsletter", {
+            method: "POST",
+            body: formData,
+          })
+            .then((response) => response.json())
+            .then((data) => {
+              const messageDiv = document.getElementById("responseMessage");
+              if (data.status === "ok") {
+                messageDiv.innerHTML =
+                  '<div class="message success">Thank you for subscribing! Please check your email for confirmation.</div>';
+                this.reset();
+              } else {
+                messageDiv.innerHTML =
+                  '<div class="message error">' +
+                  (data.message ||
+                    "There was an error subscribing. Please try again.") +
+                  "</div>";
+              }
+            })
+            .catch((error) => {
+              console.error("Error:", error);
+              document.getElementById("responseMessage").innerHTML =
+                '<div class="message error">There was an error subscribing. Please try again.</div>';
+            });
+        });
+    </script>
+  </body>
+</html>