{% extends "base.html" %}
{% block title %}Two-factor authentication{% endblock %}
{% block content %}
{% if mode == 'verify' %}
<div class="auth panel">
  <h1>Two-step verification</h1><p class="sub">Enter the 6-digit code from your authenticator app, or one of your recovery codes.</p>
  {% if error %}<div class="flash err">{{ error }}</div>{% endif %}
  <form method="post" action="/login/2fa">
    <input type="hidden" name="csrf" value="{{ csrf }}">
    <div class="row"><label>Code</label><input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" placeholder="123456 or xxxxx-xxxxx" required autofocus></div>
    <button class="btn primary block">Continue</button>
  </form>
  <p class="small muted" style="margin-top:16px">Lost your phone? Use a recovery code. Lost those too? <a href="mailto:hello@puzaricloud.in">Contact support</a>. <a href="/login">Start over</a></p>
</div>
{% else %}
<h1>Two-factor authentication</h1>
<p class="sub">A second step at login, using a code from Google Authenticator, 1Password, Authy or any TOTP app. <a href="/app/settings">Back to settings</a></p>
{% if required and mode == 'setup' %}<div class="flash warn">Your workspace requires two-factor authentication for every member. Set it up to continue using {{ app_name }}.</div>{% endif %}
{% if error %}<div class="flash err">{{ error }}</div>{% endif %}
{% if notice %}<div class="flash ok">{{ notice }}</div>{% endif %}

{% if mode == 'setup' %}
<div class="grid g2" style="align-items:start">
  <div class="panel">
    <h2>1. Scan this code</h2>
    <p class="small muted">Open your authenticator app, add an account and scan the QR code.</p>
    <div style="background:#fff;display:inline-block;padding:8px;border-radius:10px;line-height:0">{{ qr|safe }}</div>
    <p class="small muted" style="margin-top:12px">Can't scan? Enter this key manually (time-based, 6 digits):</p>
    <pre class="code">{{ secret_spaced }}</pre>
    <form method="post" action="/app/settings/2fa" class="inline"><input type="hidden" name="csrf" value="{{ csrf }}"><input type="hidden" name="action" value="reset"><button class="btn ghost sm" style="padding-left:0">Generate a different key</button></form>
  </div>
  <div class="panel">
    <h2>2. Confirm</h2>
    <p class="small muted">Enter the code your app shows now to turn two-factor on. You'll then get 8 recovery codes for when your phone is unavailable.</p>
    <form method="post" action="/app/settings/2fa">
      <input type="hidden" name="csrf" value="{{ csrf }}"><input type="hidden" name="action" value="enable">
      <div class="row"><label>6-digit code</label><input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9 ]{6,7}" required autofocus></div>
      <button class="btn primary">Turn on two-factor</button>
    </form>
  </div>
</div>

{% elif mode == 'codes' %}
<div class="panel" style="max-width:560px">
  <h2>Recovery codes</h2>
  <p class="small muted">Each code works once, in place of your authenticator. Store them somewhere safe (a password manager), not in email.</p>
  <pre class="code" style="font-size:15px;line-height:1.9">{% for c in codes %}{{ c }}{% if not loop.last %}
{% endif %}{% endfor %}</pre>
  <div class="actions" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
    <button type="button" class="btn sm" onclick="navigator.clipboard&&navigator.clipboard.writeText({{ codes|join('\n')|tojson }});this.textContent='Copied'">Copy codes</button>
    <a class="btn primary sm" href="/app/settings/2fa">I've saved them</a>
  </div>
</div>

{% else %}
<div class="grid g2" style="align-items:start">
  <div class="panel">
    <h2>Status <span class="pill ok">on</span></h2>
    <dl class="kv"><dt>Enabled</dt><dd>{{ user.totp_enabled_at|dt }}</dd><dt>Recovery codes</dt><dd>{{ codes_left }} of 8 unused{% if codes_left <= 2 %} <span class="pill warn">running low</span>{% endif %}</dd></dl>
    <h3 style="margin-top:18px">New recovery codes</h3>
    <p class="small muted">Replaces all existing codes. Needs a current code from your app.</p>
    <form method="post" action="/app/settings/2fa">
      <input type="hidden" name="csrf" value="{{ csrf }}"><input type="hidden" name="action" value="regenerate">
      <div class="row"><label>Authenticator code</label><input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" required></div>
      <button class="btn">Generate new recovery codes</button>
    </form>
  </div>
  <div class="panel">
    <h2>Turn off</h2>
    {% if required %}<div class="callout" style="margin-bottom:12px">Your workspace requires two-factor authentication. If you turn it off you will be asked to set it up again before using the app.</div>{% endif %}
    <p class="small muted">{% if has_password %}Confirm with your current password.{% else %}This account has no password, so confirm with a current authenticator code.{% endif %}</p>
    <form method="post" action="/app/settings/2fa" onsubmit="return confirm('Turn off two-factor authentication?')">
      <input type="hidden" name="csrf" value="{{ csrf }}"><input type="hidden" name="action" value="disable">
      {% if has_password %}<div class="row"><label>Current password</label><input type="password" name="password" autocomplete="current-password" required></div>
      {% else %}<div class="row"><label>Authenticator code</label><input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" required></div>{% endif %}
      <button class="btn danger">Turn off two-factor</button>
    </form>
  </div>
</div>
{% endif %}
{% endif %}
{% endblock %}