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.

templates/newsletter_manage.html

@@ -4,69 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Newsletter Management</title>
+    <link rel="stylesheet" href="/static/css/styles.css" />
     <style>
       body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
         max-width: 600px;
-        margin: 0 auto;
+        margin: 20px auto;
         padding: 20px;
       }
-      h1 {
-        color: #333;
-        text-align: center;
-      }
-      .message {
-        padding: 10px;
-        margin: 10px 0;
-        border-radius: 4px;
-      }
-      .message.success {
-        background-color: #d4edda;
-        color: #155724;
-        border: 1px solid #c3e6cb;
-      }
-      .message.error {
-        background-color: #f8d7da;
-        color: #721c24;
-        border: 1px solid #f5c6cb;
-      }
-      .message.info {
-        background-color: #d1ecf1;
-        color: #0c5460;
-        border: 1px solid #bee5eb;
-      }
-      .form-section {
-        margin: 20px 0;
-        padding: 20px;
-        border: 1px solid #ddd;
-        border-radius: 8px;
-      }
-      .form-section h2 {
-        margin-top: 0;
-        color: #555;
-      }
       form {
         display: flex;
         flex-direction: column;
         gap: 10px;
       }
-      input[type="email"] {
-        padding: 8px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-      button {
-        padding: 10px;
-        background-color: #007bff;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      button:hover {
-        background-color: #0056b3;
-      }
       .unsubscribe-btn {
         background-color: #dc3545;
       }
@@ -93,12 +42,14 @@
       <h2>Subscribe to Newsletter</h2>
       <form method="post">
         <input type="hidden" name="action" value="subscribe" />
-        <input
-          type="email"
-          name="email"
-          placeholder="Enter your email address"
-          required
-        />
+        <div class="form-group">
+          <input
+            type="email"
+            name="email"
+            placeholder="Enter your email address"
+            required
+          />
+        </div>
         <button type="submit">Subscribe</button>
       </form>
     </div>
@@ -107,12 +58,14 @@
       <h2>Unsubscribe from Newsletter</h2>
       <form method="post">
         <input type="hidden" name="action" value="unsubscribe" />
-        <input
-          type="email"
-          name="email"
-          placeholder="Enter your email address"
-          required
-        />
+        <div class="form-group">
+          <input
+            type="email"
+            name="email"
+            placeholder="Enter your email address"
+            required
+          />
+        </div>
         <button type="submit" class="unsubscribe-btn">Unsubscribe</button>
       </form>
     </div>