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

@@ -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

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;