FabledSteward/steward/templates/settings/notifications.html

{# steward/templates/settings/notifications.html #}
{% extends "base.html" %}
{% from "_macros.html" import crumbs, zone_select %}
{% block title %}Settings — Notifications — Steward{% endblock %}
{% from "settings/_tabs.html" import settings_tabs %}
{% block section_tabs %}{{ settings_tabs("notifications") }}{% endblock %}
{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Notifications", "")]) }}{% endblock %}
{% block content %}

<form method="post" action="/settings/notifications/">{{ csrf_field() }}
<div style="display:grid;gap:1.25rem;max-width:640px;">

  {# ── SMTP ──────────────────────────────────────────────────────────────── #}
  <div class="card">
    <h2 class="section-title" style="margin-bottom:1.25rem;">Email (SMTP)</h2>

    <div class="form-group">
      <label>SMTP host</label>
      <input type="text" name="smtp.host" value="{{ settings['smtp.host'] }}"
             placeholder="mail.example.com">
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
      <div class="form-group">
        <label>Port</label>
        <input type="number" name="smtp.port" value="{{ settings['smtp.port'] }}">
      </div>
      <div class="form-group" style="display:flex;align-items:center;gap:0.5rem;padding-top:1.5rem;">
        <input type="checkbox" name="smtp.tls" id="smtp-tls"
               {% if settings['smtp.tls'] %}checked{% endif %}>
        <label for="smtp-tls" style="margin:0;">Use STARTTLS</label>
      </div>
    </div>
    <p style="font-size:0.75rem;color:var(--text-muted);margin:-0.5rem 0 1rem;">
      Port 465 always connects with implicit TLS; on other ports the box upgrades the connection with STARTTLS.</p>

    <div class="form-group">
      <label>Username</label>
      <input type="text" name="smtp.username" value="{{ settings['smtp.username'] }}"
             autocomplete="off">
    </div>

    <div class="form-group">
      <label>Password <span style="color:var(--text-muted);font-size:0.8rem;">(leave blank to keep current)</span></label>
      <input type="password" name="smtp.password" placeholder="••••••••" autocomplete="new-password">
    </div>

    <div class="form-group">
      <label>From address <span style="color:var(--text-muted);font-size:0.8rem;">(blank uses the username)</span></label>
      <input type="text" name="smtp.from" value="{{ settings['smtp.from'] }}"
             placeholder="steward@example.com">
    </div>

    <button type="button" class="btn btn-ghost" hx-post="/settings/notifications/test-email"
            hx-include="closest form" hx-target="#email-test-result" hx-swap="innerHTML">
      Send a test email</button>
    <p class="field-hint">It goes to you, at your account's address and in your zone, and to the Also send to addresses below.</p>
    <div id="email-test-result"></div>
  </div>

  {# ── Who gets email (milestone 495) ───────────────────────────────────────── #}
  <section class="card" aria-labelledby="notify-who">
    <h2 id="notify-who" class="section-title" style="margin-bottom:0.75rem;">Who gets email</h2>
    <p class="field-hint" style="margin-bottom:0.75rem;">
      Each account gets its own copy at its own address, with times in its own zone. These are the defaults
      for each role; an account's own choice, on its Account page or in <a href="/settings/users/">Users</a>, wins.</p>
    <table class="table">
      <thead><tr><th>Role</th><th>Alert emails</th><th>Weekly report</th></tr></thead>
      <tbody>
      {% for r in roles %}
      <tr>
        <td>{{ r.value|capitalize }}</td>
        {% for kind in ("alerts", "report") %}
        {% set key = "notify." ~ kind ~ "." ~ r.value %}
        <td><label class="field-check"><input type="checkbox" name="{{ key }}" {% if settings[key] %}checked{% endif %}
              aria-label="{{ 'Alert emails' if kind == 'alerts' else 'Weekly report' }} for {{ r.value }}s"><span>On</span></label></td>
        {% endfor %}
      </tr>
      {% endfor %}
      </tbody>
    </table>
    <p class="page-verdict" style="margin-top:0.75rem;">
      Alerts reach {{ audience.alerts|length }} account{{ 's' if audience.alerts|length != 1 }}
      {%- if audience.alerts %} ({{ audience.alerts|map(attribute='username')|join(', ') }}){% endif %}
      · the weekly report reaches {{ audience.report|length }}
      {%- if audience.report %} ({{ audience.report|map(attribute='username')|join(', ') }}){% endif %}.
    </p>
    {% if audience.unreachable %}
    <p class="field-hint tone-warn">
      {{ audience.unreachable|length }} account{{ 's have' if audience.unreachable|length != 1 else ' has' }} no address mail can reach:
      {% for u in audience.unreachable %}<a href="/settings/users/{{ u.id }}">{{ u.username }}</a>{{ ", " if not loop.last }}{% endfor %}.
    </p>
    {% endif %}
  </section>

  {# ── Also send to ─────────────────────────────────────────────────────────── #}
  <section class="card" aria-labelledby="notify-extra">
    <h2 id="notify-extra" class="section-title" style="margin-bottom:0.75rem;">Also send to</h2>
    <div class="form-group">
      <label for="smtp-recipients">Addresses <span style="color:var(--text-muted);font-size:0.8rem;">(comma-separated)</span></label>
      <input type="text" id="smtp-recipients" name="smtp.recipients"
             value="{{ settings['smtp.recipients'] | join(', ') }}"
             placeholder="ops@example.com, pager@example.com">
      <p class="field-hint">For a mailbox that isn't a person. These get alerts and the weekly report.</p>
    </div>
    <div class="form-group">
      <label for="smtp-tz">Their times are in</label>
      {{ zone_select("smtp.tz", "smtp-tz", settings['smtp.tz'] or "UTC", zones) }}
      <p class="field-hint">With UTC beside, since nobody's own zone is known for them.</p>
    </div>
    {% if not settings['general.public_base_url'] %}
    <p class="field-hint">Set Steward's address in <a href="/settings/general/">General</a> and every email links back here.</p>
    {% endif %}
  </section>

  {# ── Webhook ───────────────────────────────────────────────────────────── #}
  <div class="card">
    <h2 class="section-title" style="margin-bottom:1.25rem;">Webhook</h2>

    <div class="form-group">
      <label>URL {% if webhook_host %}<span style="color:var(--text-muted);font-size:0.8rem;">(saved for {{ webhook_host }}; leave blank to keep it)</span>{% endif %}</label>
      <input type="password" name="webhook.url" autocomplete="off"
             placeholder="{% if webhook_host %}enter a new URL to replace{% else %}https://discord.com/api/webhooks/...{% endif %}">
      <p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
        Stored encrypted and never shown again: a webhook URL usually holds its own token.</p>
    </div>
    {% if webhook_host %}
    <div class="form-group" style="display:flex;align-items:center;gap:0.5rem;">
      <input type="checkbox" name="webhook.remove" id="webhook-remove">
      <label for="webhook-remove" style="margin:0;">Remove the webhook</label>
    </div>
    {% endif %}

    <div class="form-group">
      <label>Payload template <span style="color:var(--text-muted);font-size:0.8rem;">(Jinja2, must produce valid JSON)</span></label>
      <textarea name="webhook.template" rows="4"
                style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ settings['webhook.template'] }}</textarea>
      <p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
        <code>{{ '{{ alert.rule_name }}' }}</code> is escaped to sit inside a JSON string, so quotes or
        line breaks in a name can't break the body; a missing value reads "no data".
        For a bare JSON value use <code>{{ '{{ raw.value | tojson }}' }}</code> (a number, or null).
        Fields: state, rule_name, resource, metric, value, operator, threshold, source_module, note, timestamp.</p>
    </div>

    <button type="button" class="btn btn-ghost" hx-post="/settings/notifications/test-webhook"
            hx-include="closest form" hx-target="#webhook-test-result" hx-swap="innerHTML">
      Send a test webhook</button>
    <div id="webhook-test-result"></div>
  </div>

</div>
<div style="margin-top:1rem;">
  <button type="submit" class="btn">Save</button>
</div>
</form>
{% endblock %}