{% 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 %}