source: Klonkt/src/views/pages/admin-push.ejs@ 0475b13

<div class="container" style="max-width:640px;margin:1.5rem auto 3rem;padding:0 1rem">
  <h1 style="margin:0 0 .3rem"><%= t('push.t') %></h1>
  <p style="color:var(--ink-soft,#888);margin:0 0 1.2rem">
    <%= t('push.intro') %>
  </p>

  <% if (!vapidKey) { %>
    <p style="color:#c0392b"><%= t('push.unavailable') %></p>
  <% } else { %>

  <div id="np-unsupported" hidden style="color:#c0392b;margin:0 0 1rem">
    <%= t('push.unsupported') %>
  </div>
  <div id="np-ios-hint" hidden style="border:1px solid var(--border,#333);border-radius:10px;padding:.8rem 1rem;margin:0 0 1rem;font-size:.92rem;color:var(--ink-soft,#888)">
    <%= t('push.ios_hint') %>
  </div>

  <section style="border:1px solid var(--border,#333);border-radius:12px;padding:1rem 1.1rem;margin:0 0 1.2rem">
    <p style="margin:0 0 .6rem"><strong><%= t('push.this_device') %></strong> <span id="np-state"><%= t('push.checking') %></span></p>
    <div style="display:flex;gap:.6rem;flex-wrap:wrap">
      <button type="button" id="np-on" class="btn btn-primary" hidden><%= t('push.enable') %></button>
      <button type="button" id="np-off" class="btn" hidden><%= t('push.disable') %></button>
      <button type="button" id="np-test" class="btn" hidden><%= t('push.test') %></button>
    </div>
    <fieldset id="np-alerts" hidden style="border:none;padding:0;margin:1rem 0 0">
      <legend style="font-weight:600;margin-bottom:.4rem"><%= t('push.what') %></legend>
      <label style="display:block"><input type="checkbox" data-alert="follow"> <%= t('push.a_follow') %></label>
      <label style="display:block"><input type="checkbox" data-alert="reply"> <%= t('push.a_reply') %></label>
      <label style="display:block"><input type="checkbox" data-alert="like"> <%= t('push.a_like') %></label>
      <label style="display:block"><input type="checkbox" data-alert="boost"> <%= t('push.a_boost') %></label>
      <label style="display:block"><input type="checkbox" data-alert="dm"> <%= t('push.a_dm') %></label>
      <p id="np-saved" hidden style="color:var(--accent);margin:.4rem 0 0"><%= t('push.saved') %></p>
    </fieldset>
  </section>

  <% if (subscriptions.length) { %>
    <h2 style="font-size:1.05rem;margin:0 0 .5rem"><%= t('push.devices') %></h2>
    <ul style="list-style:none;padding:0;margin:0 0 1.2rem">
      <% subscriptions.forEach(function (s) { %>
        <li data-endpoint="<%= s.endpoint %>" style="display:flex;justify-content:space-between;gap:.8rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--border,#2a2a2a)">
          <span style="min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><%= s.ua_label || t('push.device') %> <small style="color:var(--ink-soft,#888)"><%= t('push.since') %> <%= String(s.created_at || '').slice(0, 10) %></small></span>
          <button type="button" class="btn np-remove" data-endpoint="<%= s.endpoint %>"><%= t('push.remove') %></button>
        </li>
      <% }); %>
    </ul>
  <% } %>

  <% } %>

  <p style="margin-top:1.5rem"><a href="/admin">&larr; <%= t('admin.back') %></a></p>
</div>

<% if (vapidKey) { %>
<script id="np-data" type="application/json"><%- JSON.stringify({
  vapid: vapidKey,
  alerts: defaultAlerts,
  saved: subscriptions.reduce(function (m, s) { try { m[s.endpoint] = JSON.parse(s.alert_types || '{}'); } catch (e) { m[s.endpoint] = {}; } return m; }, {}),
  i18n: { on: t('push.state_on'), off: t('push.state_off'), denied: t('push.state_denied'), unknown: t('push.state_unknown'), unsupported: t('push.state_unsupported'), failed: t('push.enable_failed') },
}).replace(/</g, '\\u003c') %></script>
<%# Het script van deze pagina staat in assets/js/mod/admin-push.js (shaer-bqr). %>
<% } %>