Add email notification settings management

Implemented backend and frontend support for managing SMTP settings for email notifications. Includes API endpoints, database migration, and UI integration for configuring and testing email alerts.

frontend/src/pages/AdminUsersPage.jsx

@@ -6,10 +6,44 @@ export function AdminUsersPage() {
   const { tokens, refresh, me } = useAuth();
   const [users, setUsers] = useState([]);
   const [form, setForm] = useState({ email: "", password: "", role: "viewer" });
+  const [emailSettings, setEmailSettings] = useState({
+    enabled: false,
+    smtp_host: "",
+    smtp_port: 587,
+    smtp_username: "",
+    smtp_password: "",
+    clear_smtp_password: false,
+    from_email: "",
+    use_starttls: true,
+    use_ssl: false,
+    alert_recipients: "",
+  });
+  const [smtpState, setSmtpState] = useState({ has_password: false, updated_at: null });
+  const [testRecipient, setTestRecipient] = useState("");
+  const [smtpInfo, setSmtpInfo] = useState("");
   const [error, setError] = useState("");
 
   const load = async () => {
-    setUsers(await apiFetch("/admin/users", {}, tokens, refresh));
+    const [userRows, smtp] = await Promise.all([
+      apiFetch("/admin/users", {}, tokens, refresh),
+      apiFetch("/admin/settings/email", {}, tokens, refresh),
+    ]);
+    setUsers(userRows);
+    setEmailSettings((prev) => ({
+      ...prev,
+      enabled: !!smtp.enabled,
+      smtp_host: smtp.smtp_host || "",
+      smtp_port: smtp.smtp_port || 587,
+      smtp_username: smtp.smtp_username || "",
+      smtp_password: "",
+      clear_smtp_password: false,
+      from_email: smtp.from_email || "",
+      use_starttls: !!smtp.use_starttls,
+      use_ssl: !!smtp.use_ssl,
+      alert_recipients: (smtp.alert_recipients || []).join(", "),
+    }));
+    setSmtpState({ has_password: !!smtp.has_password, updated_at: smtp.updated_at });
+    setTestRecipient(smtp.from_email || "");
   };
 
   useEffect(() => {
@@ -38,26 +72,78 @@ export function AdminUsersPage() {
     }
   };
 
+  const saveSmtp = async (e) => {
+    e.preventDefault();
+    setError("");
+    setSmtpInfo("");
+    try {
+      const recipients = emailSettings.alert_recipients
+        .split(",")
+        .map((item) => item.trim())
+        .filter(Boolean);
+      const payload = {
+        ...emailSettings,
+        smtp_host: emailSettings.smtp_host.trim() || null,
+        smtp_username: emailSettings.smtp_username.trim() || null,
+        from_email: emailSettings.from_email.trim() || null,
+        smtp_password: emailSettings.smtp_password || null,
+        alert_recipients: recipients,
+      };
+      await apiFetch("/admin/settings/email", { method: "PUT", body: JSON.stringify(payload) }, tokens, refresh);
+      setSmtpInfo("SMTP settings saved.");
+      await load();
+    } catch (e) {
+      setError(String(e.message || e));
+    }
+  };
+
+  const sendTestMail = async () => {
+    setError("");
+    setSmtpInfo("");
+    try {
+      const recipient = testRecipient.trim();
+      if (!recipient) {
+        throw new Error("Please enter a test recipient email.");
+      }
+      await apiFetch(
+        "/admin/settings/email/test",
+        { method: "POST", body: JSON.stringify({ recipient }) },
+        tokens,
+        refresh
+      );
+      setSmtpInfo(`Test email sent to ${recipient}.`);
+    } catch (e) {
+      setError(String(e.message || e));
+    }
+  };
+
   return (
-    <div>
-      <h2>Admin Users</h2>
+    <div className="admin-settings-page">
+      <h2>Admin Settings - Users</h2>
       {error && <div className="card error">{error}</div>}
-      <form className="card grid three" onSubmit={create}>
-        <input value={form.email} placeholder="email" onChange={(e) => setForm({ ...form, email: e.target.value })} />
-        <input
-          type="password"
-          value={form.password}
-          placeholder="password"
-          onChange={(e) => setForm({ ...form, password: e.target.value })}
-        />
-        <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
-          <option value="viewer">viewer</option>
-          <option value="operator">operator</option>
-          <option value="admin">admin</option>
-        </select>
-        <button>Create user</button>
-      </form>
+
       <div className="card">
+        <h3>User Management</h3>
+        <form className="grid three admin-user-form" onSubmit={create}>
+          <input value={form.email} placeholder="E-Mail" onChange={(e) => setForm({ ...form, email: e.target.value })} />
+          <input
+            type="password"
+            value={form.password}
+            placeholder="Password"
+            onChange={(e) => setForm({ ...form, password: e.target.value })}
+          />
+          <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
+            <option value="viewer">viewer</option>
+            <option value="operator">operator</option>
+            <option value="admin">admin</option>
+          </select>
+          <div className="form-actions field-full">
+            <button className="primary-btn" type="submit">Create User</button>
+          </div>
+        </form>
+      </div>
+
+      <div className="card admin-users-table-wrap">
         <table>
           <thead>
             <tr>
@@ -69,16 +155,148 @@ export function AdminUsersPage() {
           </thead>
           <tbody>
             {users.map((u) => (
-              <tr key={u.id}>
-                <td>{u.id}</td>
-                <td>{u.email}</td>
-                <td>{u.role}</td>
-                <td>{u.id !== me.id && <button onClick={() => remove(u.id)}>Delete</button>}</td>
+              <tr key={u.id} className="admin-user-row">
+                <td className="user-col-id">{u.id}</td>
+                <td className="user-col-email">{u.email}</td>
+                <td>
+                  <span className={`pill role-pill role-${u.role}`}>{u.role}</span>
+                </td>
+                <td>
+                  {u.id !== me.id && (
+                    <button className="table-action-btn delete small-btn" onClick={() => remove(u.id)}>
+                      <span aria-hidden="true">
+                        <svg viewBox="0 0 24 24" width="12" height="12">
+                          <path
+                            d="M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h2v8h-2V9zm4 0h2v8h-2V9zM7 9h2v8H7V9z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span>
+                      <span>Delete</span>
+                    </button>
+                  )}
+                </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
+
+      <div className="card">
+        <h3>Alert Email Notifications (SMTP)</h3>
+        <p className="muted">
+          Configure outgoing SMTP for alert emails. This is send-only; no inbound mailbox is used.
+        </p>
+        {smtpInfo && <div className="test-connection-result ok">{smtpInfo}</div>}
+        <form className="grid two admin-smtp-form" onSubmit={saveSmtp}>
+          <label className="toggle-check field-full">
+            <input
+              type="checkbox"
+              checked={emailSettings.enabled}
+              onChange={(e) => setEmailSettings({ ...emailSettings, enabled: e.target.checked })}
+            />
+            <span className="toggle-ui" />
+            <span>
+              <strong>Enable alert emails</strong>
+            </span>
+          </label>
+
+          <div>
+            <label>SMTP host</label>
+            <input
+              value={emailSettings.smtp_host}
+              placeholder="smtp.example.com"
+              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_host: e.target.value })}
+            />
+          </div>
+          <div>
+            <label>SMTP port</label>
+            <input
+              type="number"
+              value={emailSettings.smtp_port}
+              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_port: Number(e.target.value || 587) })}
+            />
+          </div>
+
+          <div>
+            <label>SMTP username</label>
+            <input
+              value={emailSettings.smtp_username}
+              placeholder="alerts@example.com"
+              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_username: e.target.value })}
+            />
+          </div>
+          <div>
+            <label>SMTP password</label>
+            <input
+              type="password"
+              value={emailSettings.smtp_password}
+              placeholder={smtpState.has_password ? "Stored (enter to replace)" : "Set password"}
+              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_password: e.target.value, clear_smtp_password: false })}
+            />
+          </div>
+
+          <div>
+            <label>From email</label>
+            <input
+              value={emailSettings.from_email}
+              placeholder="noreply@example.com"
+              onChange={(e) => setEmailSettings({ ...emailSettings, from_email: e.target.value })}
+            />
+          </div>
+          <div>
+            <label>Alert recipients (comma-separated)</label>
+            <input
+              value={emailSettings.alert_recipients}
+              placeholder="dba@example.com, oncall@example.com"
+              onChange={(e) => setEmailSettings({ ...emailSettings, alert_recipients: e.target.value })}
+            />
+          </div>
+
+          <label className="toggle-check">
+            <input
+              type="checkbox"
+              checked={emailSettings.use_starttls}
+              onChange={(e) => setEmailSettings({ ...emailSettings, use_starttls: e.target.checked, use_ssl: e.target.checked ? false : emailSettings.use_ssl })}
+            />
+            <span className="toggle-ui" />
+            <span>Use STARTTLS</span>
+          </label>
+          <label className="toggle-check">
+            <input
+              type="checkbox"
+              checked={emailSettings.use_ssl}
+              onChange={(e) => setEmailSettings({ ...emailSettings, use_ssl: e.target.checked, use_starttls: e.target.checked ? false : emailSettings.use_starttls })}
+            />
+            <span className="toggle-ui" />
+            <span>Use SSL/TLS (SMTPS)</span>
+          </label>
+
+          <label className="toggle-check field-full">
+            <input
+              type="checkbox"
+              checked={emailSettings.clear_smtp_password}
+              onChange={(e) => setEmailSettings({ ...emailSettings, clear_smtp_password: e.target.checked, smtp_password: e.target.checked ? "" : emailSettings.smtp_password })}
+            />
+            <span className="toggle-ui" />
+            <span>Clear stored SMTP password</span>
+          </label>
+
+          <div className="form-actions field-full">
+            <input
+              className="admin-test-recipient"
+              value={testRecipient}
+              placeholder="test recipient email"
+              onChange={(e) => setTestRecipient(e.target.value)}
+            />
+            <button className="secondary-btn" type="button" onClick={sendTestMail}>Send Test Mail</button>
+            <button className="primary-btn" type="submit">Save SMTP Settings</button>
+          </div>
+          <small className="muted field-full">
+            Last updated: {smtpState.updated_at ? new Date(smtpState.updated_at).toLocaleString() : "not configured yet"}
+          </small>
+        </form>
+      </div>
     </div>
   );
 }

frontend/src/styles.css

@@ -979,6 +979,74 @@ td {
   border-color: #7f1d1d;
 }
 
+.admin-settings-page h2 {
+  margin-top: 4px;
+  margin-bottom: 14px;
+}
+
+.admin-settings-page h3 {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.admin-user-form {
+  gap: 10px;
+}
+
+.admin-users-table-wrap table tbody .admin-user-row td {
+  padding-top: 11px;
+  padding-bottom: 11px;
+  vertical-align: middle;
+}
+
+.user-col-id {
+  width: 64px;
+  color: #a8c0df;
+}
+
+.user-col-email {
+  font-weight: 600;
+}
+
+.role-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 9px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.role-pill.role-admin {
+  color: #e9dcff;
+  border-color: #8f77e3;
+  background: #31235d;
+}
+
+.role-pill.role-operator {
+  color: #c7e7ff;
+  border-color: #4e8dc8;
+  background: #18375a;
+}
+
+.role-pill.role-viewer {
+  color: #cde2f8;
+  border-color: #4a6692;
+  background: #192b49;
+}
+
+.admin-smtp-form {
+  margin-top: 8px;
+  gap: 10px;
+}
+
+.admin-test-recipient {
+  min-width: 260px;
+}
+
 .muted {
   color: #9eb8d6;
 }