source: Klonkt/src/views/pages/auth-register.ejs@ 67f7150

<div class="container auth-page">
  <h1><%= t('setup.title') %></h1>
  <p class="auth-intro"><%= t('setup.intro') %></p>

  <div class="setup-lang" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 20px">
    <span style="opacity:.7;font-size:.9rem"><%= t('setup.lang_label') %>:</span>
    <% (typeof langs !== 'undefined' ? langs : []).forEach(function(L){ %>
      <a href="/lang/<%= L.code %>?r=/auth/register"
         style="padding:5px 13px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.9rem;border:1px solid <%= L.active ? 'var(--accent)' : 'var(--rule, #2b3140)' %>;color:<%= L.active ? 'var(--accent)' : 'inherit' %>"><%= L.name %></a>
    <% }) %>
  </div>

  <% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
  <form method="post" action="/auth/register" class="auth-form">
    <% if (typeof next !== 'undefined' && next) { %>
      <input type="hidden" name="next" value="<%= next %>">
    <% } %>
    <label>
      <span><%= t('setup.f_sitename') %></span>
      <input type="text" name="siteName" value="<%= typeof siteName !== 'undefined' ? siteName : '' %>" required autofocus maxlength="80" placeholder="<%= t('setup.sitename_ph') %>">
    </label>
    <label>
      <span><%= t('auth.f_username') %></span>
      <input type="text" id="setup-username" name="username" value="<%= username %>" required autocomplete="username" pattern="[a-zA-Z0-9_-]{3,32}">
      <small class="setup-handle-hint"><%= t('setup.username_note') %> <code id="setup-handle">@username@…</code></small>
    </label>
    <label>
      <span><%= t('auth.f_email') %></span>
      <input type="email" name="email" value="<%= email %>" required autocomplete="email">
    </label>
    <label>
      <span><%= t('auth.f_password') %></span>
      <input type="password" name="password" required minlength="8" autocomplete="new-password">
    </label>
    <button type="submit" class="btn btn-primary"><%= t('setup.submit') %></button>
  </form>
</div>

<style>
  .setup-handle-hint { display: block; margin-top: .35rem; font-size: .82rem; line-height: 1.4; color: var(--ink-soft, #888); }
  .setup-handle-hint code { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); padding: .05rem .35rem; border-radius: 6px; white-space: nowrap; }
</style>
<script>
(function () {
  var u = document.getElementById('setup-username'), out = document.getElementById('setup-handle');
  if (!u || !out) return;
  function upd() {
    var v = (u.value || '').toLowerCase().replace(/[^a-z0-9_-]/g, '') || 'username';
    out.textContent = '@' + v + '@' + location.host;
  }
  u.addEventListener('input', upd);
  upd();
})();
</script>