`views/enroll-totp.ejs`

27 lines
<%- include('partials/header', { title: 'Set up 2FA' }) %>

<section class="auth-card glass">
  <h1>Enroll two-factor authentication</h1>
  <p class="subtle">Scan the QR with Google Authenticator, 1Password, Authy, or any TOTP app. Then enter the 6-digit code to confirm.</p>

  <% if (error) { %><p class="error-banner"><%= error %></p><% } %>

  <div class="totp-enroll">
    <img class="qr" src="<%= qr %>" alt="TOTP QR code">
    <details class="totp-secret">
      <summary>Or enter the secret manually</summary>
      <code><%= secret.match(/.{1,4}/g).join(' ') %></code>
    </details>
  </div>

  <form method="post" action="/enroll-totp" autocomplete="off">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <label>6-digit code from your app
      <input type="text" name="token" inputmode="numeric" pattern="[0-9 ]{6,8}" maxlength="8" required autofocus>
    </label>
    <button class="button primary" type="submit">Confirm 2FA</button>
  </form>
</section>

<%- include('partials/footer') %>