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_contact.html
+++ b/templates/embed_contact.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contact Form</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
+  </head>
+  <body>
+    <div class="contact-form">
+      <h2>Contact Us</h2>
+      <form id="contactForm" method="post" action="/api/contact">
+        <div class="form-group">
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" required />
+        </div>
+        <div class="form-group">
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required />
+        </div>
+        <div class="form-group">
+          <label for="message">Message:</label>
+          <textarea id="message" name="message" required></textarea>
+        </div>
+        <button type="submit">Send Message</button>
+      </form>
+      <div id="responseMessage"></div>
+    </div>
+
+    <script>
+      document
+        .getElementById("contactForm")
+        .addEventListener("submit", function (e) {
+          e.preventDefault();
+          const formData = new FormData(this);
+          fetch("/api/contact", {
+            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 your message! We will get back to you soon.</div>';
+                this.reset();
+              } else {
+                messageDiv.innerHTML =
+                  '<div class="message error">There was an error sending your message. Please try again.</div>';
+              }
+            })
+            .catch((error) => {
+              console.error("Error:", error);
+              document.getElementById("responseMessage").innerHTML =
+                '<div class="message error">There was an error sending your message. Please try again.</div>';
+            });
+        });
+    </script>
+  </body>
+</html>