{% extends "base.html" %}

{% block content %}
<div id="page-data"
     data-url-fido2-begin="{{ url_for('fido2_auth_begin', _external=True, _scheme='https') }}"
     data-url-fido2-complete="{{ url_for('fido2_auth_complete', _external=True, _scheme='https') }}"
     data-url-tiqr-begin="{{ url_for('tiqr_auth_begin', _external=True, _scheme='https') }}"
     data-url-tiqr-status="{{ url_for('tiqr_auth_status', _external=True, _scheme='https') }}"
     data-url-tiqr-otp="{{ url_for('tiqr_auth_otp', _external=True, _scheme='https') }}"></div>
<div id="page-i18n"
     data-label-need-username="{{ gettext('Please enter your username first.') }}"
     data-label-https-required="{{ gettext('WebAuthn requires HTTPS. Please access this page via HTTPS.') }}"
     data-label-webauthn-unsupported="{{ gettext('WebAuthn is not supported in this browser.') }}"
     data-label-requesting-challenge="{{ gettext('Requesting authentication challenge...') }}"
     data-label-failed-start="{{ gettext('Failed to start authentication.') }}"
     data-label-touch-key="{{ gettext('Please touch your security key...') }}"
     data-label-verifying="{{ gettext('Verifying...') }}"
     data-label-auth-failed="{{ gettext('Authentication failed.') }}"
     data-label-login-success="{{ gettext('Login successful! Redirecting...') }}"
     data-label-tiqr-scan="{{ gettext('Scan the code with the tiqr app, or tap it if you are on your phone.') }}"
     data-label-tiqr-waiting="{{ gettext('Waiting for your phone...') }}"
     data-label-tiqr-expired="{{ gettext('The code expired. Please try again.') }}"
     data-label-tiqr-failed="{{ gettext('Failed to start tiqr authentication.') }}"
     data-label-tiqr-otp-required="{{ gettext('Please enter the code from your app.') }}"
     class="is-hidden"></div>
{# Which controls the mask offers.

   Signing in: the password form always, the two credential buttons as
   the site configured them (sso_show_fido2_button /
   sso_show_tiqr_button). Whether a method may actually be used is
   sso_allow_fido2 / sso_allow_tiqr, decided ssod-side once the user is
   known -- these only decide what is drawn.

   Re-authenticating: the user is known, and so is the token they
   signed in with. Only the one control that token can answer is drawn.
   Offering a password field to somebody whose token is a phone or a
   security key gives them something that cannot succeed, and offering
   the buttons to somebody who typed a password sends them looking for
   a device they never enrolled.

   A pass type we do not recognise -- or a session from before the
   field existed -- falls back to offering everything, so nobody ends
   up on a page with no way forward. #}
{% if reauth and reauth_token_pass_type %}
  {% set show_password_form = reauth_token_pass_type not in ('smartcard', 'tiqr') %}
  {% set show_fido2 = reauth_token_pass_type == 'smartcard' %}
  {% set show_tiqr = reauth_token_pass_type == 'tiqr' %}
{% elif reauth %}
  {% set show_password_form = true %}
  {% set show_fido2 = true %}
  {% set show_tiqr = true %}
{% else %}
  {% set show_password_form = true %}
  {% set show_fido2 = show_fido2_button %}
  {% set show_tiqr = show_tiqr_button %}
{% endif %}
<div class="login-wrapper">
  <div class="login-card">
    <h1>{% if reauth %}{{ gettext("Re-authenticate") }}{% else %}{{ gettext("Sign In") }}{% endif %}</h1>
    {% if reauth %}
      <p>{{ gettext("Please verify your identity to continue.") }}</p>
    {% endif %}
    <form action="{{ url_for('login', _external=True, _scheme='https') }}" method="post" name="login" id="loginForm">
        {{ form.hidden_tag() }}
        <label for="username">{{ gettext("Username") }}</label>
        {% if reauth %}
          {{ form.username(size=80, id="username", class="", readonly=true, value=reauth_username) }}
        {% else %}
          {{ form.username(size=80, id="username", class="") }}
        {% endif %}
        {% for error in form.username.errors %}
          <span class="error-msg">[{{ error }}]</span>
        {% endfor %}

        {# The label follows the token too: an OTP token gets an OTP
           label rather than being asked for a password it does not
           have. #}
        {% if show_password_form %}
          <label for="password">
            {% if reauth and reauth_token_pass_type == 'otp' %}
              {{ gettext("One-Time Password") }}
            {% else %}
              {{ gettext("Password") }}
            {% endif %}
          </label>
          {{ form.password(size=80, id="password", class="") }}
          {% for error in form.password.errors %}
            <span class="error-msg">[{{ error }}]</span>
          {% endfor %}
        {% endif %}

        <div class="login-buttons">
          {% if show_password_form %}
            <input type="submit" value="{% if reauth %}{{ gettext('Re-authenticate') }}{% else %}{{ gettext('Sign In') }}{% endif %}" class="btn btn-primary">
          {% endif %}
          {% if show_fido2 %}
          <button type="button" id="fido2LoginBtn" class="btn btn-secondary">{{ gettext("Security Key") }}</button>
          {% endif %}
          {% if show_tiqr %}
          <button type="button" id="tiqrLoginBtn" class="btn btn-secondary">{{ gettext("Smartphone Authentication App (tiqr)") }}</button>
          {% endif %}
        </div>
    </form>

    <!-- tiqr: the QR image and the button carry the same tiqrauth://
         URL. Scan it from a second device, tap it when this browser is
         on the phone itself. The manual field below is for when the
         app cannot reach the server and shows the response instead;
         polling keeps running while it is open, because the user may
         still be about to scan. -->
    <div class="is-hidden" id="tiqrBox">
      <p class="status-msg" id="tiqrHint"></p>
      <div class="qr-container">
        <a id="tiqrAuthLink" href="#"><img id="tiqrQrcodeImg" alt="{{ gettext('tiqr login code') }}"></a>
      </div>
      <div class="login-buttons">
        <a id="tiqrOpenBtn" class="btn btn-primary" href="#">{{ gettext("Open tiqr app") }}</a>
        <button type="button" id="tiqrManualBtn" class="btn btn-secondary">{{ gettext("Enter code manually") }}</button>
        <button type="button" id="tiqrCancelBtn" class="btn btn-secondary">{{ gettext("Cancel") }}</button>
      </div>
      <div class="is-hidden" id="tiqrOtpForm">
        <label for="tiqrOtp">{{ gettext("Code from your app") }}</label>
        <input type="text" id="tiqrOtp" inputmode="numeric" autocomplete="one-time-code" autocapitalize="off" spellcheck="false">
        <button type="button" id="tiqrOtpBtn" class="btn btn-primary">{{ gettext("Sign In") }}</button>
      </div>
    </div>
    {% if not reauth and show_recover_link %}
    <div class="login-recover-link">
      <a href="{{ url_for('recover', _external=True, _scheme='https') }}">{# Plain words on purpose: before signing in there is no context for
   "default token", and the person has lost a phone, a key or a
   password -- naming any one of them would be wrong for the others. #}
{{ gettext("Can't sign in?") }}</a>
    </div>
    {% endif %}
    <div class="status-msg" id="fido2Status"></div>
    <div class="error-msg" id="fido2Error"></div>
    <div class="logo-container">
      <img src="{{ url_for('static', filename='otpme.png') }}" alt="OTPme Logo" class="logo">
    </div>
  </div>
</div>

<script src="{{ url_for('static', filename='login.js') }}"></script>
{% endblock %}