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/admin_embeds.html
+++ b/templates/admin_embeds.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Embeddable Forms</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
+    <style>
+      .iframe-code {
+        width: 100%;
+        height: 100px;
+        font-family: monospace;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="logout">
+      <a
+        href="/admin/"
+        style="color: #007bff; text-decoration: none; margin-right: 20px"
+        >Dashboard</a
+      >
+      <a
+        href="/admin/submissions"
+        style="color: #007bff; text-decoration: none; margin-right: 20px"
+        >View Submissions</a
+      >
+      <a
+        href="/admin/settings"
+        style="color: #007bff; text-decoration: none; margin-right: 20px"
+        >Settings</a
+      >
+      <a
+        href="{{ url_for('auth.logout') }}"
+        style="color: #007bff; text-decoration: none"
+        >Logout</a
+      >
+    </div>
+
+    <h1>Embeddable Forms</h1>
+
+    <div class="settings-management">
+      <h2>Contact Form</h2>
+      <p>
+        Use the following HTML code to embed the contact form on other websites:
+      </p>
+      <textarea id="iframeCode" class="iframe-code" readonly>
+<iframe src="http://your-server-domain/embed/contact" width="600" height="400" frameborder="0" allowfullscreen></iframe>
+      </textarea>
+      <button class="btn btn-secondary" onclick="copyIframeCode()">
+        Copy Contact Iframe
+      </button>
+    </div>
+
+    <div class="settings-management">
+      <h2>Newsletter Subscription Form</h2>
+      <p>
+        Use the following HTML code to embed the newsletter subscription form on
+        other websites:
+      </p>
+      <textarea id="iframeNewsletterCode" class="iframe-code" readonly>
+<iframe src="http://your-server-domain/embed/newsletter" width="600" height="300" frameborder="0" allowfullscreen></iframe>
+      </textarea>
+      <button class="btn btn-secondary" onclick="copyNewsletterIframeCode()">
+        Copy Newsletter Iframe
+      </button>
+    </div>
+
+    <div class="settings-management">
+      <p>
+        Replace <code>http://your-server-domain</code> with your actual server
+        domain and port (e.g., https://yourdomain.com).
+      </p>
+    </div>
+
+    <script>
+      function copyIframeCode() {
+        const textarea = document.getElementById("iframeCode");
+        textarea.select();
+        document.execCommand("copy");
+        showMessage("Contact iframe code copied to clipboard!", "success");
+      }
+
+      function copyNewsletterIframeCode() {
+        const textarea = document.getElementById("iframeNewsletterCode");
+        textarea.select();
+        document.execCommand("copy");
+        showMessage("Newsletter iframe code copied to clipboard!", "success");
+      }
+
+      function showMessage(text, type) {
+        // Create message div if it doesn't exist
+        let messageDiv = document.getElementById("message");
+        if (!messageDiv) {
+          messageDiv = document.createElement("div");
+          messageDiv.id = "message";
+          document.body.insertBefore(messageDiv, document.body.firstChild);
+        }
+        messageDiv.className = `message ${type}`;
+        messageDiv.textContent = text;
+        messageDiv.style.display = "block";
+
+        setTimeout(() => {
+          messageDiv.style.display = "none";
+        }, 5000);
+      }
+    </script>
+  </body>
+</html>