{% 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') }}"></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...') }}"
     class="is-hidden"></div>
<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 %}

        {# In reauth mode the label + button set follow the SSO token
           the user actually logged in with -- OTP tokens get an OTP
           label, smartcard/FIDO2 hides the password field entirely
           because a static password wouldn't verify against them. #}
        {% if not reauth or reauth_token_pass_type != 'smartcard' %}
          <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 not reauth or reauth_token_pass_type != 'smartcard' %}
            <input type="submit" value="{% if reauth %}{{ gettext('Re-authenticate') }}{% else %}{{ gettext('Sign In') }}{% endif %}" class="btn btn-primary">
          {% endif %}
          <button type="button" id="fido2LoginBtn" class="btn btn-secondary">{{ gettext("Security Key") }}</button>
        </div>
    </form>
    {% if not reauth and show_recover_link %}
    <div class="login-recover-link">
      <a href="{{ url_for('recover', _external=True, _scheme='https') }}">{{ gettext("Lost access to your SSO token?") }}</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 %}