<h1>Set up multi-factor authentication</h1>

<div class="card" style="max-width:480px">
  <% if (backupCodes) { %>
    <div class="alert alert-ok">MFA is now enabled on your account.</div>
    <p>Store these backup codes somewhere safe — each can be used once if you lose access to your authenticator app. <strong>They will not be shown again.</strong></p>
    <div class="backup-codes">
      <% for (const c of backupCodes) { %><code class="mono"><%= c %></code><% } %>
    </div>
    <a class="btn" href="/">Continue to dashboard</a>
  <% } else { %>
    <p>MFA is required for every admin-console account. Scan this into your authenticator app (Google Authenticator, 1Password, Authy, etc.), or enter the secret manually:</p>
    <% if (error) { %><div class="alert alert-danger"><%= error %></div><% } %>
    <% if (qrCodeDataUrl) { %>
      <img src="<%= qrCodeDataUrl %>" alt="MFA QR code" width="200" height="200">
    <% } %>
    <% if (secret) { %>
      <p><code class="mono"><%= secret %></code></p>
      <p class="muted" style="font-size:12px;word-break:break-all"><%= otpauthUrl %></p>
    <% } %>
    <form method="post" action="/mfa/enroll">
      <label>Code from your authenticator app</label>
      <input type="text" name="token" inputmode="numeric" pattern="\d{6}" maxlength="6" required autofocus>
      <button class="btn" type="submit" style="width:100%;margin-top:20px">Confirm &amp; enable MFA</button>
    </form>
  <% } %>
</div>
