{% extends "base.html" %}
{% block title %}Confirm it is you{% endblock %}
{% block content %}
<div class="head"><h1>Confirm it is you</h1></div>
<p class="mute">This change needs a fresh proof that it is you. It lasts 15 minutes; then go back and make the change again.</p>
{% if let Some(e) = error %}<p class="error">{{ e }}</p>{% endif %}
{% if let Some((id, number)) = approval %}
<section class="card-box">
  <div class="approve-wait pad" data-approval-poll="/sudo/approval/{{ id }}" data-approval-next="{{ next }}" aria-live="polite">
    <p>Open OxygenHub on your phone and pick</p>
    <p class="approve-number" aria-label="the number {{ number }}">{{ number }}</p>
    <p class="small mute" data-approval-status>Waiting for your phone…</p>
  </div>
</section>
{% else %}
{% if phones %}<section class="card-box">
  <form class="pad sec-form sec-split" method="post" action="/sudo/phone">
    <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
    <input type="hidden" name="next" value="{{ next }}">
    <p>Approve on your phone, with your fingerprint, face or PIN.</p>
    <button type="submit">APPROVE ON MY PHONE</button>
  </form>
</section>{% endif %}
{% endif %}
<section class="card-box">
  <form class="pad sec-form" method="post" action="/sudo">
    <input type="hidden" name="_csrf" value="{{ shell.csrf }}">
    <input type="hidden" name="next" value="{{ next }}">
    {% if totp %}
    <div class="sec-row"><label for="code">{% if phones %}Or a code{% else %}A code{% endif %} from your authenticator app, or a recovery code</label><input type="text" id="code" name="code" inputmode="numeric" autocomplete="one-time-code"{% if !phones %} autofocus{% endif %} required><button type="submit">CONFIRM</button></div>
    {% else if password %}
    <div class="sec-row"><label for="password">Your password</label><input type="password" id="password" name="password" autocomplete="current-password" autofocus required><button type="submit">CONFIRM</button></div>
    <p class="small mute">With two-factor authentication on (Settings › Security), a code or your phone confirms instead.</p>
    {% else %}
    <p>Your account signs in through another service and has no password here: sign out and sign in again to confirm.</p>
    {% endif %}
  </form>
</section>
<p class="small"><a href="{{ next }}">Go back</a></p>
{% endblock %}