{% extends "base.html" %}

{% block title %}Sign in{% endblock %}

{% block content %}

{# The mark (docs/backgrounds.md §2): brand only, no data. #}

<script type="application/json" id="backdrop-data">{"scene":"mark"}</script>

{% include "backdrop.html" %}

<div class="head"><h1>Sign in <small>{{ shell.site }}</small></h1></div>

{% if reset %}<p class="note">Your password is set. Sign in with it; every other session was signed out.</p>{% endif %}

{% if let Some(e) = error %}<p class="error">{{ e }}</p>{% endif %}

<div class="signin-layout{% if !providers.is_empty() && totp_for.is_none() %} with-providers{% endif %}">

<form class="card" method="post" action="/login">

  <input type="hidden" name="next" value="{{ next }}">

  {% if let Some(u) = totp_for %}

  <input type="hidden" name="username" value="{{ u }}">

  <input type="hidden" name="pending" value="{{ pending }}">

  {% if let Some((id, number)) = approval %}

  {# Waiting on the phone (oxygenhub#356): the page asks what became of it and signs in once it is approved. #}

  <input type="hidden" name="approval" value="{{ id }}">

  <div class="approve-wait" data-approval-poll="/login/approval" data-approval-id="{{ id }}" aria-live="polite">

    <p>Password accepted for <strong>{{ u }}</strong>. 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>

  <button type="submit" name="use_code" value="1" class="small" formnovalidate>Use a code instead</button>

  {% else %}

  <p>Password accepted for <strong>{{ u }}</strong>. Enter the six-digit code from your authenticator app, or a recovery code.</p>

  <label for="code">Code</label><input type="text" id="code" name="code" autocomplete="one-time-code" inputmode="numeric" autofocus>

  {% endif %}

  {% else %}

  <label for="username">Username</label><input type="text" id="username" name="username" autocomplete="username" autofocus required>

  <label for="password">Password</label><input type="password" id="password" name="password" autocomplete="current-password" required>

  {% endif %}

  {% if approval.is_none() %}<button type="submit">SIGN IN</button>{% endif %}

  {% if totp_for.is_some() && approval.is_none() && phones %}<button type="submit" name="phone" value="1" class="small" formnovalidate>Approve on my phone instead</button>{% endif %}

</form>

{% if !providers.is_empty() && totp_for.is_none() %}<div class="signin-or" aria-hidden="true"><span>or</span></div>

{% let verb = "Sign in" %}{% let suffix = "" %}{% include "signin_buttons.html" %}{% endif %}

</div>

<p class="small mute"><a href="/login/reset">Forgot your password?</a> · No account? <a href="/register">Register</a>.</p>

{% endblock %}