{% extends "base.html" %}

{% block content %}
<div id="page-data"
     data-url-begin="{{ url_for('recover_complete_begin', _external=True, _scheme='https') }}"
     data-url-fido2-begin="{{ url_for('recover_complete_fido2_begin', _external=True, _scheme='https') }}"
     data-url-fido2-complete="{{ url_for('recover_complete_fido2_complete', _external=True, _scheme='https') }}"
     data-url-verify="{{ url_for('recover_complete_verify', _external=True, _scheme='https') }}"
     data-recovery-username="{{ recovery_username }}"
     data-recovery-token="{{ recovery_token }}"
     data-sso-token-name="{{ sso_token_name }}"
     data-sso-token-type="{{ sso_token_type }}"></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-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.') }}"
     data-label-need-password="{{ gettext('Please enter a new password.') }}"
     data-label-password-mismatch="{{ gettext('Passwords do not match.') }}"
     data-label-saving-password="{{ gettext('Setting new password...') }}"
     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-label-bad-device-name="{{ gettext('Please use letters or digits in the name.') }}"
     data-placeholder-device-name="{{ gettext('e.g. my phone') }}"
     data-placeholder-key-name="{{ gettext('e.g. my security key') }}"
     data-label-checking-phone="{{ gettext('Checking your phone...') }}"
     class="is-hidden"></div>
<div class="login-wrapper">
  <div class="deploy-card">
    <h1>{{ gettext("Recover Your Account") }}</h1>
    <p class="deploy-desc">{{ gettext("Re-deploying token '{token_name}' for user '{user_name}'.").format(token_name=sso_token_name, user_name=recovery_username) }}</p>

    <!-- Step 1: choose a deploy type (same shape as /deploy). The
         admin controls the list via sso_allow_*_deploy site/unit/
         user config; the previous SSO-token type does NOT constrain
         it, so a fido2 user can recover as password when policy
         allows. -->
    <div id="step-start">
      {% if 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)") }}
          {% elif tt == "password" %}
          {{ gettext("Password") }}
          {% 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") }}
        {% elif deploy_token_types[0] == "password" %}
        {{ gettext("Set New Password") }}
        {% else %}
        {{ gettext("Set Up Authenticator App") }}
        {% endif %}
      </button>
      {% endif %}
    </div>

    <!-- Step 1b: a name for the thing being enrolled, asked before
         anything is created. It is what this token is renamed to if
         the SSO role is later handed to another one, so the server
         checks it is usable and still free. The placeholder comes
         from JS: 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. Unlike /deploy this page does not
         poll: the recovery endpoints share one tight per-username
         rate limit (sso_rate_limit_recover), and a recovery is meant
         to be a handful of requests. So the user taps Continue once
         the app says it is done. -->
    <div id="step-tiqr" class="is-hidden">
      {# Code only, no tap-through link -- see the same block in
         deploy.html for why a browser cannot deliver a
         tiqrenroll:// URL to the app. #}
      <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. Then come back here and continue.") }}</p>
      <button type="button" id="tiqrDeployDoneBtn" class="btn btn-primary w-full">{{ gettext("I have added the account") }}</button>
    </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>

    <!-- Step 2b: password entry for password tokens -->
    <div id="step-password" class="is-hidden">
      <p class="deploy-hint">{{ gettext("Choose a new password to sign in with.") }}</p>
      <label for="newPasswordInput">{{ gettext("New Password") }}</label>
      <input type="password" id="newPasswordInput" autocomplete="new-password">
      <label for="newPasswordConfirmInput">{{ gettext("Confirm New Password") }}</label>
      <input type="password" id="newPasswordConfirmInput" autocomplete="new-password">
      <button type="button" id="savePasswordBtn" class="btn btn-primary w-full">{{ gettext("Set Password") }}</button>
    </div>

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

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