From 8e5a549c2cad6b716a9e16c22ba46180b430d0d3 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 16:37:31 +0100
Subject: [PATCH] Add template variables display and SMTP settings UI updates

This commit introduces a new section for template variables in the Admin Users page, improving clarity by listing placeholders available for email templates. It also enhances the SMTP settings interface with clearer organization and additional features like clearing stored passwords. Associated styling updates include new visual elements for template variables and subcards.
---
 frontend/src/pages/AdminUsersPage.jsx | 301 ++++++++++++++------------
 frontend/src/styles.css               |  34 +++
 2 files changed, 200 insertions(+), 135 deletions(-)

diff --git a/frontend/src/pages/AdminUsersPage.jsx b/frontend/src/pages/AdminUsersPage.jsx
index 80359af..ee12dfd 100644
--- a/frontend/src/pages/AdminUsersPage.jsx
+++ b/frontend/src/pages/AdminUsersPage.jsx
@@ -2,6 +2,21 @@ import React, { useEffect, useState } from "react";
 import { apiFetch } from "../api";
 import { useAuth } from "../state";
 
+const TEMPLATE_VARIABLES = [
+  "target_name",
+  "target_id",
+  "alert_name",
+  "severity",
+  "category",
+  "description",
+  "message",
+  "value",
+  "warning_threshold",
+  "alert_threshold",
+  "checked_at",
+  "alert_key",
+];
+
 export function AdminUsersPage() {
   const { tokens, refresh, me } = useAuth();
   const [users, setUsers] = useState([]);
@@ -223,148 +238,164 @@ export function AdminUsersPage() {
         </div>
         {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 className="admin-subcard field-full">
+            <h4>SMTP Settings</h4>
+            <div className="grid two">
+              <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 className="admin-field">
-            <label>SMTP host</label>
-            <input
-              value={emailSettings.smtp_host}
-              placeholder="smtp.example.com"
-              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_host: e.target.value })}
-            />
-          </div>
-          <div className="admin-field">
-            <label>SMTP port</label>
-            <input
-              type="number"
-              value={emailSettings.smtp_port}
-              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_port: Number(e.target.value || 587) })}
-            />
-          </div>
+              <div className="admin-field">
+                <label>SMTP host</label>
+                <input
+                  value={emailSettings.smtp_host}
+                  placeholder="smtp.example.com"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, smtp_host: e.target.value })}
+                />
+              </div>
+              <div className="admin-field">
+                <label>SMTP port</label>
+                <input
+                  type="number"
+                  value={emailSettings.smtp_port}
+                  onChange={(e) => setEmailSettings({ ...emailSettings, smtp_port: Number(e.target.value || 587) })}
+                />
+              </div>
 
-          <div className="admin-field">
-            <label>SMTP username</label>
-            <input
-              value={emailSettings.smtp_username}
-              placeholder="alerts@example.com"
-              onChange={(e) => setEmailSettings({ ...emailSettings, smtp_username: e.target.value })}
-            />
-          </div>
-          <div className="admin-field">
-            <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 className="admin-field">
+                <label>SMTP username</label>
+                <input
+                  value={emailSettings.smtp_username}
+                  placeholder="alerts@example.com"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, smtp_username: e.target.value })}
+                />
+              </div>
+              <div className="admin-field">
+                <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 className="admin-field">
-            <label>From name</label>
-            <input
-              value={emailSettings.from_name}
-              placeholder="NexaPG Alerts"
-              onChange={(e) => setEmailSettings({ ...emailSettings, from_name: e.target.value })}
-            />
-          </div>
-          <div className="admin-field">
-            <label>From email</label>
-            <input
-              value={emailSettings.from_email}
-              placeholder="noreply@example.com"
-              onChange={(e) => setEmailSettings({ ...emailSettings, from_email: e.target.value })}
-            />
-          </div>
-          <div className="admin-field">
-            <label>Transport mode</label>
-            <div className="smtp-mode-picker" role="radiogroup" aria-label="SMTP transport mode">
-              <button
-                type="button"
-                className={`smtp-mode-btn ${protocolMode === "starttls" ? "active" : ""}`}
-                aria-pressed={protocolMode === "starttls"}
-                onClick={() => setProtocolMode("starttls")}
-              >
-                STARTTLS
-              </button>
-              <button
-                type="button"
-                className={`smtp-mode-btn ${protocolMode === "ssl" ? "active" : ""}`}
-                aria-pressed={protocolMode === "ssl"}
-                onClick={() => setProtocolMode("ssl")}
-              >
-                SSL/TLS (SMTPS)
-              </button>
-              <button
-                type="button"
-                className={`smtp-mode-btn ${protocolMode === "plain" ? "active" : ""}`}
-                aria-pressed={protocolMode === "plain"}
-                onClick={() => setProtocolMode("plain")}
-              >
-                No TLS
-              </button>
+              <div className="admin-field">
+                <label>From name</label>
+                <input
+                  value={emailSettings.from_name}
+                  placeholder="NexaPG Alerts"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, from_name: e.target.value })}
+                />
+              </div>
+              <div className="admin-field">
+                <label>From email</label>
+                <input
+                  value={emailSettings.from_email}
+                  placeholder="noreply@example.com"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, from_email: e.target.value })}
+                />
+              </div>
+
+              <div className="admin-field field-full">
+                <label>Transport mode</label>
+                <div className="smtp-mode-picker" role="radiogroup" aria-label="SMTP transport mode">
+                  <button
+                    type="button"
+                    className={`smtp-mode-btn ${protocolMode === "starttls" ? "active" : ""}`}
+                    aria-pressed={protocolMode === "starttls"}
+                    onClick={() => setProtocolMode("starttls")}
+                  >
+                    STARTTLS
+                  </button>
+                  <button
+                    type="button"
+                    className={`smtp-mode-btn ${protocolMode === "ssl" ? "active" : ""}`}
+                    aria-pressed={protocolMode === "ssl"}
+                    onClick={() => setProtocolMode("ssl")}
+                  >
+                    SSL/TLS (SMTPS)
+                  </button>
+                  <button
+                    type="button"
+                    className={`smtp-mode-btn ${protocolMode === "plain" ? "active" : ""}`}
+                    aria-pressed={protocolMode === "plain"}
+                    onClick={() => setProtocolMode("plain")}
+                  >
+                    No TLS
+                  </button>
+                </div>
+                <small className="muted">Select exactly one mode to avoid STARTTLS/SSL conflicts.</small>
+              </div>
+
+              <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>
-            <small className="muted">Select exactly one mode to avoid STARTTLS/SSL conflicts.</small>
-          </div>
-          <div className="admin-field">
-            <label>Template variables</label>
-            <small className="muted">
-              Use placeholders like: {"{target_name}"}, {"{alert_name}"}, {"{severity}"}, {"{description}"}, {"{message}"}, {"{value}"}, {"{warning_threshold}"}, {"{alert_threshold}"}, {"{checked_at}"}, {"{alert_key}"}
-            </small>
           </div>
 
-          <div className="admin-field field-full">
-            <label>Warning subject template</label>
-            <input
-              value={emailSettings.warning_subject_template}
-              placeholder="[NexaPG][WARNING] {target_name} - {alert_name}"
-              onChange={(e) => setEmailSettings({ ...emailSettings, warning_subject_template: e.target.value })}
-            />
-          </div>
-          <div className="admin-field field-full">
-            <label>Alert subject template</label>
-            <input
-              value={emailSettings.alert_subject_template}
-              placeholder="[NexaPG][ALERT] {target_name} - {alert_name}"
-              onChange={(e) => setEmailSettings({ ...emailSettings, alert_subject_template: e.target.value })}
-            />
-          </div>
-          <div className="admin-field field-full">
-            <label>Warning body template</label>
-            <textarea
-              value={emailSettings.warning_body_template}
-              placeholder={"Severity: {severity}\nTarget: {target_name} (id={target_id})\nAlert: {alert_name}\nMessage: {message}\nChecked At: {checked_at}"}
-              onChange={(e) => setEmailSettings({ ...emailSettings, warning_body_template: e.target.value })}
-            />
-          </div>
-          <div className="admin-field field-full">
-            <label>Alert body template</label>
-            <textarea
-              value={emailSettings.alert_body_template}
-              placeholder={"Severity: {severity}\nTarget: {target_name} (id={target_id})\nAlert: {alert_name}\nMessage: {message}\nCurrent Value: {value}\nWarning Threshold: {warning_threshold}\nAlert Threshold: {alert_threshold}\nChecked At: {checked_at}\nAlert Key: {alert_key}"}
-              onChange={(e) => setEmailSettings({ ...emailSettings, alert_body_template: e.target.value })}
-            />
-          </div>
+          <div className="admin-subcard field-full">
+            <h4>Template Settings</h4>
+            <p className="muted template-help-text">
+              If a template field is left empty, NexaPG automatically uses the built-in default template.
+            </p>
+            <div className="template-vars-grid">
+              {TEMPLATE_VARIABLES.map((item) => (
+                <code key={item} className="template-var-pill">
+                  {"{" + item + "}"}
+                </code>
+              ))}
+            </div>
 
-          <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="grid two">
+              <div className="admin-field field-full">
+                <label>Warning subject template</label>
+                <input
+                  value={emailSettings.warning_subject_template}
+                  placeholder="[NexaPG][WARNING] {target_name} - {alert_name}"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, warning_subject_template: e.target.value })}
+                />
+              </div>
+              <div className="admin-field field-full">
+                <label>Alert subject template</label>
+                <input
+                  value={emailSettings.alert_subject_template}
+                  placeholder="[NexaPG][ALERT] {target_name} - {alert_name}"
+                  onChange={(e) => setEmailSettings({ ...emailSettings, alert_subject_template: e.target.value })}
+                />
+              </div>
+              <div className="admin-field field-full">
+                <label>Warning body template</label>
+                <textarea
+                  value={emailSettings.warning_body_template}
+                  placeholder={"Severity: {severity}\nTarget: {target_name} (id={target_id})\nAlert: {alert_name}\nMessage: {message}\nChecked At: {checked_at}"}
+                  onChange={(e) => setEmailSettings({ ...emailSettings, warning_body_template: e.target.value })}
+                />
+              </div>
+              <div className="admin-field field-full">
+                <label>Alert body template</label>
+                <textarea
+                  value={emailSettings.alert_body_template}
+                  placeholder={"Severity: {severity}\nTarget: {target_name} (id={target_id})\nAlert: {alert_name}\nMessage: {message}\nCurrent Value: {value}\nWarning Threshold: {warning_threshold}\nAlert Threshold: {alert_threshold}\nChecked At: {checked_at}\nAlert Key: {alert_key}"}
+                  onChange={(e) => setEmailSettings({ ...emailSettings, alert_body_template: e.target.value })}
+                />
+              </div>
+            </div>
+          </div>
 
           <div className="form-actions field-full">
             <input
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1e9f27c..d9a9210 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1208,6 +1208,40 @@ td {
   gap: 10px;
 }
 
+.admin-subcard {
+  border: 1px solid #2c598f;
+  border-radius: 12px;
+  padding: 12px;
+  background: linear-gradient(180deg, #102748, #0e2342);
+}
+
+.admin-subcard h4 {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+}
+
+.template-help-text {
+  margin: 0 0 10px 0;
+}
+
+.template-vars-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.template-var-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid #4d81bc;
+  background: #15365f;
+  color: #d9ebff;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
 .admin-test-recipient {
   min-width: 260px;
   max-width: 320px;