{% extends "base.html" %}
{% block content %}
<div id="page-data"
     data-url-deploy-begin="{{ url_for('deploy_begin', _external=True, _scheme='https') }}"
     data-url-deploy-verify="{{ url_for('deploy_verify', _external=True, _scheme='https') }}"
     data-url-fido2-register-begin="{{ url_for('fido2_register_begin', _external=True, _scheme='https') }}"
     data-url-fido2-register-complete="{{ url_for('fido2_register_complete', _external=True, _scheme='https') }}"
     data-url-reauth="{{ url_for('reauth', _external=True, _scheme='https') }}"
     data-deploy-path="{{ url_for('deploy') }}"></div>
<div id="page-i18n"
     data-label-creating-token="{{ gettext('Creating token...') }}"
     data-label-deployment-failed="{{ gettext('Deployment failed.') }}"
     data-label-https-required="{{ gettext('WebAuthn requires HTTPS.') }}"
     data-label-webauthn-unsupported="{{ gettext('WebAuthn is not supported in this browser.') }}"
     data-label-need-device-name="{{ gettext('Please enter a name for your phone.') }}"
     data-label-need-key-name="{{ gettext('Please enter a name for your security key.') }}"
     data-placeholder-device-name="{{ gettext('e.g. my phone') }}"
     data-placeholder-key-name="{{ gettext('e.g. my security key') }}"
     data-label-waiting-phone="{{ gettext('Waiting for your phone...') }}"
     data-label-tiqr-expired="{{ gettext('The code expired. Please try again.') }}"
     data-label-preparing-key="{{ gettext('Preparing security key registration...') }}"
     data-label-failed-start-reg="{{ gettext('Failed to start registration.') }}"
     data-label-touch-key="{{ gettext('Please touch your security key...') }}"
     data-label-completing-reg="{{ gettext('Completing registration...') }}"
     data-label-reg-failed="{{ gettext('Registration failed.') }}"
     data-label-finalizing="{{ gettext('Finalizing deployment...') }}"
     data-label-need-otp="{{ gettext('Please enter the OTP from your authenticator app.') }}"
     data-label-verifying-otp="{{ gettext('Verifying OTP...') }}"
     data-label-verify-failed="{{ gettext('Verification failed.') }}"
     data-label-scan-qr="{{ gettext('Scan the QR code, then enter the OTP below.') }}"
     class="is-hidden"></div>
<div class="login-wrapper">
  <div class="deploy-card">
    <h1>{{ gettext("Token Enrollment") }}</h1>
    {% if not deploy_optional %}
    <p class="deploy-desc">{{ gettext("Your account requires a new authentication token.") }}</p>
    {% endif %}

    <!-- Step 1: Choose token type and start -->
    <div id="step-start">
      {% if deploy_maintenance %}
      <p class="deploy-hint">{{ gettext("Your login token cannot be set up while the site is in maintenance. Please try again later.") }}</p>
      {% elif deploy_token_types|length == 0 %}
      <p class="deploy-hint">{{ gettext("Token enrollment is currently disabled. Please contact your administrator.") }}</p>
      {% elif deploy_token_types|length > 1 %}
      <p class="deploy-hint mb-14">{{ gettext("Choose your preferred authentication method:") }}</p>
      <div class="token-choice">
        {% for tt in deploy_token_types %}
        <button type="button" class="btn btn-secondary token-choice-btn" data-token-type="{{ tt }}" id="btn-{{ tt }}">
          {% if tt == "totp" %}
          {{ gettext("Authenticator App (TOTP)") }}
          {% elif tt == "fido2" %}
          {{ gettext("Security Key (FIDO2)") }}
          {% elif tt == "tiqr" %}
          {{ gettext("Smartphone Authentication App (tiqr)") }}
          {% else %}
          {{ tt|upper }}
          {% endif %}
        </button>
        {% endfor %}
      </div>
      {% else %}
      <button type="button" id="deployBtn" data-token-type="{{ deploy_token_types[0] }}" class="btn btn-primary w-full">
        {% if deploy_token_types[0] == "fido2" %}
        {{ gettext("Register Security Key") }}
        {% elif deploy_token_types[0] == "tiqr" %}
        {{ gettext("Set Up Smartphone Authentication App") }}
        {% else %}
        {{ gettext("Set Up Authenticator App") }}
        {% endif %}
      </button>
      {% endif %}
    </div>

    <!-- Step 1b: a name for the thing being enrolled, asked before
         anything is created. For tiqr it also becomes the token name
         of the enrollment; for both it is what the entry is called if
         the SSO role is ever handed to another token later. The
         placeholder is set from JS, because a phone and a security key
         want different examples. -->
    <div id="step-device-name" class="is-hidden">
      <label for="deployDeviceName">{{ gettext("Device Name") }}</label>
      <input type="text" id="deployDeviceName" autocomplete="off">
      <button type="button" id="deployDeviceNameBtn" class="btn btn-primary w-full">{{ gettext("Continue") }}</button>
    </div>

    <!-- Step 2c: tiqr enrollment. Code only, no tap-through link: the
         enrollment URL is tiqrenroll://https://host/... and a browser
         will not deliver that. Its URL parser reads "https:" as a host
         with an empty port and drops the empty port, so the app gets
         tiqrenroll://https//... and refuses it. Tested in every shape
         that survives the parser; none is accepted. The login page is
         different -- that URL has a proper authority and no embedded
         URL, so the link there works.
         Nothing to type afterwards: the page polls until the phone is
         done. -->
    <div id="step-tiqr" class="is-hidden">
      <div class="qr-container">
        <img id="tiqrDeployQrcodeImg" src="" alt="{{ gettext('tiqr enrollment code') }}">
      </div>
      <p class="deploy-hint">{{ gettext("Scan the code with the tiqr app. You need the code on a different screen from the phone: the app only takes it through its own scanner. Waiting for your phone...") }}</p>
    </div>

    <!-- Step 2a: QR code for OATH tokens -->
    <div id="step-qrcode" class="is-hidden">
      <div class="qr-container"><img id="qrcodeImg" src="" alt="{{ gettext('QR Code') }}" class="img-pixelated"></div>
      <div class="deploy-info">
        <div class="info-row">
          <span class="info-label">{{ gettext("PIN:") }}</span>
          <code class="info-value" id="pinDisplay"></code>
        </div>
        <div class="info-row">
          <span class="info-label">{{ gettext("Secret:") }}</span>
          <code class="info-value info-secret" id="secretDisplay"></code>
        </div>
      </div>
      <p class="deploy-hint">{{ gettext("Scan the QR code with your authenticator app (e.g. Google Authenticator, Authy). Then enter the OTP shown in your app to verify.") }}</p>

      <label for="otpInput">{{ gettext("One-Time Password") }}</label>
      <input type="text" id="otpInput" maxlength="10" autocomplete="one-time-code" placeholder="{{ gettext('Enter OTP from app') }}">
      <button type="button" id="verifyBtn" class="btn btn-primary w-full">{{ gettext("Verify & Activate") }}</button>
    </div>

    <div class="status-msg" id="deployStatus"></div>
    <div class="error-msg" id="deployError"></div>
  </div>
</div>

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