karldns.de/karldns/web/templates_management.py

from __future__ import annotations

from collections.abc import Mapping
from dataclasses import dataclass
from typing import TYPE_CHECKING

from ..services.ddns import DdnsService
from .components import (
    _code_window,
    _copy_button,
    _copy_row,
    _event_label,
    _fritzbox_fields,
    _manual_update_commands,
    _secret_notice,
)
from .html_utils import SafeHtml, attr, escape, trusted
from .layout import PageOptions, _page, _top_nav

if TYPE_CHECKING:
    from ..settings import DdnsSettings


@dataclass(frozen=True)
class ManagementPageContext:
    management_slug: str
    account: Mapping[str, object]
    csrf_token: str
    message: str | None = None
    request_ip: str | None = None

    @property
    def account_for_url(self) -> dict[str, str]:
        return {
            "hostname": str(self.account["hostname"]),
            "update_slug": str(self.account["update_slug"]),
            "management_slug": self.management_slug,
        }


@dataclass(frozen=True, slots=True)
class _ManagementPageView:
    update_url: str
    hostname: str
    ipv4: str
    ipv6: str
    updated: str
    fritzbox_fields: str
    cname_record: str
    manual_commands: str


def _management_page_view(update_url: str, context: ManagementPageContext) -> _ManagementPageView:
    hostname = escape(context.account["hostname"])
    return _ManagementPageView(
        update_url=update_url,
        hostname=hostname,
        ipv4=escape(context.account.get("ipv4") or "-"),
        ipv6=escape(context.account.get("ipv6") or "-"),
        updated=escape(context.account.get("updated_at") or "Never"),
        fritzbox_fields=_fritzbox_fields(update_url, hostname),
        cname_record=f"your-subdomain.example.com. CNAME {hostname}.",
        manual_commands=_manual_update_commands(update_url, context.request_ip),
    )


@dataclass(frozen=True)
class PendingManagementPageContext:
    settings: DdnsSettings
    management_slug: str
    account: Mapping[str, object]
    csrf_token: str
    message: str | None = None
    request_ip: str | None = None

    @property
    def account_for_url(self) -> dict[str, str]:
        return {
            "hostname": str(self.account["hostname"]),
            "update_slug": str(self.account["update_slug"]),
            "management_slug": self.management_slug,
        }


def _render_management_page(service: DdnsService, context: ManagementPageContext) -> str:
    update_url = service.fritz_update_url(context.account_for_url)
    view = _management_page_view(update_url, context)
    message_html = _management_message(context.message)
    dashboard_password_panel = _dashboard_password_panel(
        context.management_slug,
        context.csrf_token,
        bool(context.account.get("dashboard_password_hash")),
    )
    dashboard_shell = _management_dashboard_shell(context, view, message_html)
    history_section = _management_history_section(_management_history_rows(service, context))
    delete_section = _management_delete_section(context)
    return _page(
        "KarlDNS management",
        trusted(f"""
        <main id="main" class="dashboard-page">
          {_top_nav()}
          {dashboard_shell}
          {dashboard_password_panel}
          {history_section}
          {delete_section}
        </main>
        """),
        PageOptions(extra_styles=trusted('<link href="/admin.css?v=5" rel="stylesheet">')),
    )


def _management_history_rows(service: DdnsService, context: ManagementPageContext) -> SafeHtml:
    events = service.store.list_update_events_for_hostname(str(context.account["hostname"]), 10)
    rows = "\n".join(_user_event_row(event) for event in events)
    return trusted(rows or """
      <tr class="empty-row">
        <td colspan="6" class="empty">
          <div class="empty-state">
            <div class="empty-state-title">No router updates yet.</div>
            <div class="empty-state-description">
              This table fills after the router or a script sends its first address update.
            </div>
          </div>
        </td>
      </tr>
    """)


def _management_dashboard_shell(
    context: ManagementPageContext,
    view: _ManagementPageView,
    message_html: SafeHtml,
) -> SafeHtml:
    return trusted(f"""
      <section class="dashboard-shell">
        <div class="container">
          {_management_dashboard_header(view)}
          {message_html}
          <div class="dashboard-grid">
            {_router_settings_card(context, view)}
            {_status_card(view)}
          </div>
          {_manual_updates_card(view)}
        </div>
      </section>
    """)


def _management_dashboard_header(view: _ManagementPageView) -> SafeHtml:
    return trusted(f"""
      <div class="dashboard-header">
        <div>
          <p class="eyebrow">Dashboard</p>
          <h1>{view.hostname}</h1>
          <p class="lead">Private management link. Keep it safe.</p>
        </div>
        <a class="btn btn-outline-primary rounded-pill" href="/">Home</a>
      </div>
    """)


def _router_settings_card(context: ManagementPageContext, view: _ManagementPageView) -> SafeHtml:
    return trusted(f"""
      <section class="dashboard-card dashboard-card-main" data-slot="card" aria-labelledby="router-settings-title">
        <div class="dashboard-card-header" data-slot="card-header">
          <div>
            <p class="eyebrow">Router settings</p>
            <h2 id="router-settings-title">Update endpoint</h2>
          </div>
          <form method="post" action="/m/{attr(context.management_slug)}/rotate">
            <input type="hidden" name="csrf" value="{attr(context.csrf_token)}">
            <input type="hidden" name="action" value="update">
            <button class="btn btn-outline-primary rounded-pill" type="submit">New update URL</button>
          </form>
        </div>
        <div data-slot="card-content">
          <p class="section-copy">
            Paste the Update-URL into your router. Use the hostname as Domainnamen,
            or point your own subdomain at it with a CNAME.
          </p>
          {_secret_notice()}
          <div class="dashboard-copy-stack">
            {_copy_row("Update-URL:", view.update_url, "Secret")}
            {_copy_row("Domainnamen:", view.hostname, "Public")}
            {_copy_row("CNAME target:", view.hostname, "Public")}
          </div>
        </div>
        <div class="dashboard-actions" data-slot="card-footer">
          {_copy_button("Router fields", view.fritzbox_fields)}
          {_copy_button("Copy CNAME", view.cname_record, style="outline-secondary")}
        </div>
      </section>
    """)


def _status_card(view: _ManagementPageView) -> SafeHtml:
    return trusted(f"""
      <section class="dashboard-card dashboard-status-card" data-slot="card" aria-labelledby="status-title">
        <div data-slot="card-header">
          <p class="eyebrow">Current address</p>
          <h2 id="status-title">Status</h2>
        </div>
        <div data-slot="card-content">
          <dl class="dashboard-status-list">
            <div><dt>IPv4</dt><dd>{view.ipv4}</dd></div>
            <div><dt>IPv6</dt><dd>{view.ipv6}</dd></div>
            <div><dt>Updated</dt><dd>{view.updated}</dd></div>
          </dl>
        </div>
      </section>
    """)


def _manual_updates_card(view: _ManagementPageView) -> SafeHtml:
    return trusted(f"""
      <section class="dashboard-card dashboard-card-compact" data-slot="card" aria-labelledby="manual-updates-title">
        <div class="dashboard-card-header" data-slot="card-header">
          <div>
            <p class="eyebrow">Manual updates</p>
            <h2 id="manual-updates-title">curl examples</h2>
          </div>
        </div>
        <div data-slot="card-content">
          <p class="section-copy">
            FRITZ!Box fills IP placeholders automatically. Scripts can send an IP explicitly
            or omit it and let KarlDNS use the request IP.
          </p>
          {_code_window(view.manual_commands, copy_label="manual update commands", class_name="manual-code")}
        </div>
      </section>
    """)


def _management_history_section(history_rows: SafeHtml) -> SafeHtml:
    return trusted(f"""
      <section class="dashboard-section">
        <div class="container">
          <div class="dashboard-section-header">
            <div>
              <p class="eyebrow">History</p>
              <h2>Router updates</h2>
              <p class="section-copy">Recent IP changes and failed updates for this hostname.</p>
            </div>
          </div>
          <div class="table-responsive dashboard-table-shell">
            <table class="table table-hover dashboard-history-table mb-0">
              <thead><tr><th>Time</th><th>Status</th><th>IPv4</th><th>IPv6</th><th>Count</th><th>Detail</th></tr></thead>
              <tbody>{history_rows}</tbody>
            </table>
          </div>
        </div>
      </section>
    """)


def _management_delete_section(context: ManagementPageContext) -> SafeHtml:
    return trusted(f"""
      <section class="dashboard-section dashboard-danger-section">
        <div class="container">
          <div class="dashboard-danger-card" data-slot="card">
            <div>
              <p class="eyebrow">Delete</p>
              <h2>Delete hostname</h2>
              <p class="section-copy">
                Remove this hostname and its DNS records. The update URL will stop working.
              </p>
            </div>
            <form method="post" action="/m/{attr(context.management_slug)}/delete">
              <input type="hidden" name="csrf" value="{attr(context.csrf_token)}">
              <button class="btn btn-outline-danger rounded-pill" type="submit">Delete hostname</button>
            </form>
          </div>
        </div>
      </section>
    """)


def _render_pending_management_page(service: DdnsService, context: PendingManagementPageContext) -> str:
    raw_hostname = str(context.account["hostname"])
    update_url = service.fritz_update_url(context.account_for_url)
    dashboard_url = service.dashboard_url({"management_slug": context.management_slug})
    hostname = escape(raw_hostname)
    message_html = _management_message(context.message)
    cleanup_hours = context.settings.cleanup_pending_account_hours
    cleanup_text = f"{cleanup_hours} hours" if cleanup_hours != 24 else "24 hours"
    pending_lead = (
        "Save these values, then register the hostname. Pending setups are cleaned up after " f"{cleanup_text}."
    )
    manual_commands = _manual_update_commands(update_url, context.request_ip)
    hero = _pending_hero(hostname, pending_lead)
    values_section = _pending_values_section(context, update_url, raw_hostname, dashboard_url)
    router_section = _pending_router_section(hostname, update_url, manual_commands)
    return _page(
        "KarlDNS setup",
        trusted(f"""
        <main id="main">
          {_top_nav()}
          {hero}
          {message_html}
          {values_section}
          {router_section}
        </main>
        """),
    )


def _pending_hero(hostname: str, pending_lead: str) -> SafeHtml:
    return trusted(f"""
      <section class="hero-band compact">
        <div class="container text-center d-grid justify-items-center gap-3">
          <p class="eyebrow">Pending setup</p>
          <h1>{hostname}</h1>
          <p class="lead">{escape(pending_lead)}</p>
        </div>
      </section>
    """)


def _pending_values_section(
    context: PendingManagementPageContext,
    update_url: str,
    raw_hostname: str,
    dashboard_url: str,
) -> SafeHtml:
    return trusted(f"""
      <section class="section">
        <div class="container narrow d-grid gap-4">
          <div>
            <p class="eyebrow">Save</p>
            <h2>Your values.</h2>
            <p class="section-copy">
              Save the update URL and dashboard link before you register. After registration,
              the dashboard hides secrets by default.
            </p>
            <p class="section-copy">
              <strong>Public:</strong> Domainnamen.
              <strong>Secret:</strong> Update-URL and private dashboard.
            </p>
          </div>
          <div class="d-grid gap-2">
            {_copy_row("Update-URL:", update_url, "Secret", mask_secret=False)}
            {_copy_row("Domainnamen:", raw_hostname, "Public")}
            {_copy_row("Private dashboard:", dashboard_url, "Secret", mask_secret=False)}
          </div>
          <form method="post" action="/m/{attr(context.management_slug)}/activate">
            <input type="hidden" name="csrf" value="{attr(context.csrf_token)}">
            <button class="btn btn-primary rounded-pill" type="submit">Register hostname</button>
          </form>
        </div>
      </section>
    """)


def _pending_router_section(hostname: str, update_url: str, manual_commands: str) -> SafeHtml:
    return trusted(f"""
      <section class="section section-compact">
        <div class="container narrow d-grid gap-4">
          <div>
            <p class="eyebrow">FRITZ!Box</p>
            <h2>Router setup.</h2>
            <p class="section-copy">
              Paste this exact URL into the FRITZ!Box <strong>Update-URL</strong> field.
              Use <strong>{hostname}</strong> as <strong>Domainnamen</strong>.
              No KarlDNS username or password is needed; if your router requires them,
              enter any placeholder.
            </p>
            {_code_window(update_url, copy_label="FRITZ!Box update URL", class_name="mt-3")}
          </div>
          <div>
            <h2>Manual updates.</h2>
            <p class="section-copy">
              Scripts can send the IP explicitly, or omit it and let KarlDNS use the request IP.
              Visible examples use your public IP when KarlDNS or your browser can detect it.
            </p>
            {_code_window(manual_commands, copy_label="manual update commands", class_name="manual-code mt-3")}
          </div>
          <div>
            <h2>Use your own DNS name.</h2>
            <p class="section-copy">
              Create a CNAME at your DNS provider that points to <strong>{hostname}</strong>.
              This is the same value as Domainnamen.
            </p>
          </div>
        </div>
      </section>
    """)


def _management_message(message: str | None) -> SafeHtml:
    if not message:
        return trusted("")
    return trusted(f"""
        <div class="alert alert-info ui-alert mb-0 rounded-0 border-start-0 border-end-0"
          role="status" data-slot="alert">
          <div class="container">{escape(message)}</div>
        </div>
        """)


def _dashboard_password_panel(management_slug: str, csrf_token: str, password_enabled: bool) -> SafeHtml:
    password_status = "Enabled" if password_enabled else "Not enabled"
    password_action = "Change password" if password_enabled else "Set password"
    remove_form = ""
    if password_enabled:
        remove_form = f"""
          <form class="dashboard-card dashboard-form-card" data-slot="card" method="post"
            action="/m/{attr(management_slug)}/password/remove">
            <input type="hidden" name="csrf" value="{attr(csrf_token)}">
            <label class="form-label" for="dashboard-remove-current-password">Current password</label>
            <input class="form-control" id="dashboard-remove-current-password"
              name="current_dashboard_password" type="password" autocomplete="current-password" required>
            <button class="btn btn-outline-danger rounded-pill" type="submit">Remove password</button>
          </form>
        """
    current_password_field = ""
    if password_enabled:
        current_password_field = """
                  <div>
                    <label class="form-label" for="dashboard-current-password">Current password</label>
                    <input class="form-control" id="dashboard-current-password"
                      name="current_dashboard_password" type="password" autocomplete="current-password" required>
                  </div>
        """
    return trusted(f"""
        <section class="dashboard-section">
          <div class="container">
            <div class="dashboard-settings-grid">
              <div>
                <p class="eyebrow">Dashboard password</p>
                <h2>Password protection</h2>
                <p class="section-copy">
                  Status: {escape(password_status)}. This password protects only this dashboard.
                  Router updates still work.
                </p>
              </div>
              <div class="d-grid gap-3">
                <form class="dashboard-card dashboard-form-card" data-slot="card" method="post"
                  action="/m/{attr(management_slug)}/password">
                  <input type="hidden" name="csrf" value="{attr(csrf_token)}">
                  {current_password_field}
                  <div>
                    <label class="form-label" for="dashboard-password">{escape(password_action)}</label>
                    <input class="form-control" id="dashboard-password" name="dashboard_password"
                      type="password" autocomplete="new-password" minlength="8" required>
                  </div>
                  <div>
                    <label class="form-label" for="dashboard-password-confirm">Confirm password</label>
                    <input class="form-control" id="dashboard-password-confirm"
                      name="dashboard_password_confirm" type="password" autocomplete="new-password"
                      minlength="8" required>
                  </div>
                  <div class="d-flex gap-2 flex-wrap">
                    <button class="btn btn-primary rounded-pill" type="submit">{escape(password_action)}</button>
                  </div>
                </form>
                {remove_form}
              </div>
            </div>
          </div>
        </section>
        """)


def _render_management_unlock_page(
    management_slug: str,
    account: Mapping[str, object],
    csrf_token: str,
    message: str | None = None,
) -> str:
    hostname = escape(account["hostname"])
    message_html = ""
    if message:
        message_html = (
            f'<div class="alert alert-warning ui-alert" role="alert" data-slot="alert">{escape(message)}</div>'
        )
    return _page(
        "Unlock KarlDNS management",
        trusted(f"""
        <main id="main">
          {_top_nav()}
          <section class="hero-band compact">
            <div class="container text-center d-grid justify-items-center gap-3">
              <p class="eyebrow">Dashboard locked</p>
              <h1>{hostname}</h1>
              <p class="lead">Enter the dashboard password for this hostname.</p>
            </div>
          </section>
          <section class="section">
            <div class="container narrow">
              {message_html}
              <form class="card card-body gap-3" data-slot="card" method="post"
                action="/m/{attr(management_slug)}/unlock">
                <input type="hidden" name="csrf" value="{attr(csrf_token)}">
                <div>
                  <label class="form-label" for="dashboard-unlock-password">Dashboard password</label>
                  <input class="form-control" id="dashboard-unlock-password" name="dashboard_password"
                    type="password" autocomplete="current-password" required autofocus>
                </div>
                <label class="form-check d-flex align-items-center gap-2">
                  <input class="form-check-input" type="checkbox" name="stay_unlocked" value="1">
                  <span class="form-check-label">Remember this browser for 30 days</span>
                </label>
                <button class="btn btn-primary rounded-pill" type="submit">Unlock</button>
              </form>
            </div>
          </section>
        </main>
        """),
    )


def _user_event_row(event: Mapping[str, object]) -> str:
    row = _user_event_row_view(event)
    return (
        f'<tr><td>{row.created}</td><td><span class="status-badge {attr(row.badge_class)}">{row.status}</span></td>'
        f"<td>{row.ipv4}</td><td>{row.ipv6}</td><td>{row.count}</td><td>{row.detail}</td></tr>"
    )


@dataclass(frozen=True, slots=True)
class _UserEventRow:
    created: str
    status: str
    badge_class: str
    ipv4: str
    ipv6: str
    count: str
    detail: str


def _user_event_row_view(event: Mapping[str, object]) -> _UserEventRow:
    raw_status = str(event.get("status") or "")
    return _UserEventRow(
        created=escape(_event_text(event, "created_at")),
        status=escape(_event_label(raw_status)),
        badge_class=_event_badge_class(raw_status),
        ipv4=escape(_event_text(event, "ipv4")),
        ipv6=escape(_event_text(event, "ipv6")),
        count=escape(event.get("count") or 1),
        detail=escape(_event_text(event, "detail")),
    )


def _event_text(event: Mapping[str, object], key: str) -> str:
    return str(event.get(key) or "-")


def _event_badge_class(status: str) -> str:
    if status in {"updated", "dashboard_hostname_activated", "unchanged"}:
        return "status-badge-ok"
    if "failed" in status or "failure" in status:
        return "status-badge-error"
    return "status-badge-neutral"