{% extends "base.html" %}
{% block content %}
<div id="page-data"
     data-url-change-password="{{ url_for('change_password', _external=True, _scheme='https') }}"
     data-url-change-pin="{{ url_for('change_pin', _external=True, _scheme='https') }}"
     data-url-change-language="{{ url_for('change_language', _external=True, _scheme='https') }}"
     data-url-list-device-tokens="{{ url_for('list_device_tokens', _external=True, _scheme='https') }}"
     data-url-add-device-token="{{ url_for('add_device_token', _external=True, _scheme='https') }}"
     data-url-del-device-token="{{ url_for('del_device_token', _external=True, _scheme='https') }}"
     data-url-toggle-device-token="{{ url_for('toggle_device_token', _external=True, _scheme='https') }}"
     data-url-list-passkeys="{{ url_for('list_passkeys', _external=True, _scheme='https') }}"
     data-url-passkey-register-begin="{{ url_for('passkey_register_begin', _external=True, _scheme='https') }}"
     data-url-passkey-register-complete="{{ url_for('passkey_register_complete', _external=True, _scheme='https') }}"
     data-url-del-passkey="{{ url_for('del_passkey', _external=True, _scheme='https') }}"
     data-url-toggle-passkey="{{ url_for('toggle_passkey', _external=True, _scheme='https') }}"
     data-url-list-tiqr="{{ url_for('list_tiqr_tokens', _external=True, _scheme='https') }}"
     data-url-tiqr-enroll-begin="{{ url_for('tiqr_enroll_begin', _external=True, _scheme='https') }}"
     data-url-tiqr-enroll-status="{{ url_for('tiqr_enroll_status', _external=True, _scheme='https') }}"
     data-url-del-tiqr="{{ url_for('del_tiqr_token', _external=True, _scheme='https') }}"
     data-url-toggle-tiqr="{{ url_for('toggle_tiqr_token', _external=True, _scheme='https') }}"
     data-url-promote-token="{{ url_for('promote_token', _external=True, _scheme='https') }}"
     data-url-list-fido2="{{ url_for('list_fido2_tokens', _external=True, _scheme='https') }}"
     data-url-fido2-add-begin="{{ url_for('fido2_add_begin', _external=True, _scheme='https') }}"
     data-url-fido2-add-complete="{{ url_for('fido2_add_complete', _external=True, _scheme='https') }}"
     data-url-del-fido2="{{ url_for('del_fido2_token', _external=True, _scheme='https') }}"
     data-url-toggle-fido2="{{ url_for('toggle_fido2_token', _external=True, _scheme='https') }}"
     data-url-get-admin-access="{{ url_for('get_admin_access_state', _external=True, _scheme='https') }}"
     data-url-set-admin-access="{{ url_for('set_admin_access_state', _external=True, _scheme='https') }}"
     data-url-get-recovery-mail="{{ url_for('get_recovery_mail', _external=True, _scheme='https') }}"
     data-url-set-recovery-mail="{{ url_for('set_recovery_mail', _external=True, _scheme='https') }}"
     data-url-reauth="{{ url_for('reauth', _external=True, _scheme='https') }}"
     data-settings-path="{{ url_for('settings', _external=True, _scheme='https') }}"></div>
<!-- Labels the JS picks up from dataset. A message containing a double
     quote needs |forceescape: Jinja's newstyle gettext hands back a
     Markup, i.e. already-safe, so autoescape leaves the quote alone and
     it ends the attribute right there. What reached the browser was
     'Make ' instead of the whole sentence, and every confirm dialog
     built that way was cut off the same way. Same applies to '&'. -->
<div id="page-i18n"
     data-label-changing-password="{{ gettext('Changing password...') }}"
     data-label-password-failed="{{ gettext('Password change failed.') }}"
     data-label-password-success="{{ gettext('Password changed successfully.') }}"
     data-label-all-fields-required="{{ gettext('All fields are required.') }}"
     data-label-new-passwords-mismatch="{{ gettext('New passwords do not match.') }}"
     data-label-changing-pin="{{ gettext('Changing PIN...') }}"
     data-label-pin-failed="{{ gettext('PIN change failed.') }}"
     data-label-pin-success="{{ gettext('PIN changed successfully.') }}"
     data-label-new-pins-mismatch="{{ gettext('New PINs do not match.') }}"
     data-label-saving="{{ gettext('Saving...') }}"
     data-label-failed-save-language="{{ gettext('Failed to save language.') }}"
     data-label-failed-load-device-tokens="{{ gettext('Failed to load device tokens.') }}"
     data-label-failed-add-device-token="{{ gettext('Failed to add device token.') }}"
     data-label-failed-delete-device-token="{{ gettext('Failed to delete device token.') }}"
     data-label-failed-toggle-device-token="{{ gettext('Failed to update device token.') }}"
     data-label-device-name-required="{{ gettext('Device name is required.') }}"
     data-label-adding-device-token="{{ gettext('Adding device token...') }}"
     data-label-device-token-created="{{ gettext('Device token created.') }}"
     data-label-confirm-delete-device-token="{{ gettext('Delete device token \"{name}\"?')|forceescape }}"
     data-label-password-copied="{{ gettext('Password copied to clipboard.') }}"
     data-label-failed-copy-password="{{ gettext('Failed to copy password.') }}"
     data-label-failed-load-passkeys="{{ gettext('Failed to load passkeys.') }}"
     data-label-no-passkeys="{{ gettext('No passkeys yet.') }}"
     data-label-delete-btn="{{ gettext('Delete') }}"
     data-label-passkey-name-required="{{ gettext('Passkey name is required.') }}"
     data-label-https-required="{{ gettext('WebAuthn requires HTTPS.') }}"
     data-label-webauthn-unsupported="{{ gettext('WebAuthn is not supported in this browser.') }}"
     data-label-preparing-passkey="{{ gettext('Preparing passkey registration...') }}"
     data-label-failed-start-passkey="{{ gettext('Failed to start passkey registration.') }}"
     data-label-confirm-passkey="{{ gettext('Confirm on your device to create the passkey...') }}"
     data-label-completing-passkey="{{ gettext('Completing registration...') }}"
     data-label-passkey-reg-failed="{{ gettext('Passkey registration failed.') }}"
     data-label-passkey-added="{{ gettext('Passkey added.') }}"
     {# Shown as a dialog after a token was added, and only when ssod
        says there is something to wait for. The token exists at once,
        but signing in with it is decided on the site the account
        belongs to, and the assignment has to reach it first. For an
        account on this site that is instant and nothing is shown. #}
     data-label-token-sync-hint="{{ gettext('Your new token was created. It can take up to a minute before you can sign in with it.') }}"
     data-label-failed-add-passkey="{{ gettext('Failed to add passkey.') }}"
     data-label-confirm-delete-passkey="{{ gettext('Delete passkey \"{name}\"?')|forceescape }}"
     data-label-failed-delete-passkey="{{ gettext('Failed to delete passkey.') }}"
     data-label-passkey-deleted="{{ gettext('Passkey deleted.') }}"
     data-label-failed-toggle-passkey="{{ gettext('Failed to update passkey.') }}"
     data-label-failed-load-tiqr="{{ gettext('Failed to load phones.') }}"
     data-label-no-tiqr="{{ gettext('No phones enrolled yet.') }}"
     data-label-tiqr-name-required="{{ gettext('Device name is required.') }}"
     data-label-preparing-tiqr="{{ gettext('Preparing enrollment...') }}"
     data-label-failed-start-tiqr="{{ gettext('Failed to start tiqr enrollment.') }}"
     data-label-waiting-tiqr="{{ gettext('Waiting for your phone...') }}"
     data-label-tiqr-added="{{ gettext('Phone enrolled.') }}"
     data-label-tiqr-timeout="{{ gettext('The code expired. Please try again.') }}"
     data-label-confirm-delete-tiqr="{{ gettext('Remove phone \"{name}\"?')|forceescape }}"
     data-label-failed-delete-tiqr="{{ gettext('Failed to remove phone.') }}"
     data-label-tiqr-deleted="{{ gettext('Phone removed.') }}"
     data-label-failed-toggle-tiqr="{{ gettext('Failed to update phone.') }}"
     data-label-sso-token="{{ gettext('Default token') }}"
     data-label-make-sso-token="{{ gettext('Make default token') }}"
     data-label-confirm-promote-tiqr="{{ gettext('Make \"{name}\" your default token? Your current one keeps working under a new name.')|forceescape }}"
     data-label-prompt-old-tiqr-name="{{ gettext('Name for your current default token (\"{name}\"), which keeps working:')|forceescape }}"
     data-label-failed-load-fido2="{{ gettext('Failed to load security keys.') }}"
     data-label-no-fido2="{{ gettext('No security keys registered yet.') }}"
     data-label-key-name-required="{{ gettext('Key name is required.') }}"
     data-label-touch-key="{{ gettext('Touch your security key...') }}"
     data-label-adding-fido2="{{ gettext('Registering security key...') }}"
     data-label-fido2-added="{{ gettext('Security key registered.') }}"
     data-label-failed-add-fido2="{{ gettext('Failed to register security key.') }}"
     data-label-failed-delete-fido2="{{ gettext('Failed to delete security key.') }}"
     data-label-failed-toggle-fido2="{{ gettext('Failed to update security key.') }}"
     data-label-confirm-delete-fido2="{{ gettext('Delete security key \"{name}\"?')|forceescape }}"
     data-label-current-token-no-delete="{{ gettext('You are signed in with this one. Sign in with another factor to remove it.') }}"
     data-label-current-token-no-disable="{{ gettext('You are signed in with this one. Sign in with another factor to switch it off.') }}"
     data-label-need-old-tiqr-name="{{ gettext('Please enter a name for your current default token.') }}"
     data-label-failed-promote-tiqr="{{ gettext('Failed to change the default token.') }}"
     data-label-tiqr-promoted="{{ gettext('Default token changed.') }}"
     data-label-token-enabled="{{ gettext('Enabled') }}"
     data-label-token-disabled="{{ gettext('Disabled') }}"
     data-label-failed-load-consents="{{ gettext('Failed to load consents.') }}"
     data-label-no-connected-apps="{{ gettext('No connected applications.') }}"
     data-label-scopes-prefix="{{ gettext('Scopes:') }}"
     data-label-granted-prefix="{{ gettext('Granted:') }}"
     data-label-disconnect-btn="{{ gettext('Disconnect') }}"
     data-label-confirm-revoke="{{ gettext('Disconnect \"{name}\"? Active sessions for this application will be terminated.')|forceescape }}"
     data-label-failed-revoke="{{ gettext('Failed to revoke consent.') }}"
     data-label-disconnected="{{ gettext('Disconnected.') }}"
     data-label-admin-access-failed-load="{{ gettext('Failed to load admin access state.') }}"
     data-label-admin-access-failed-save="{{ gettext('Failed to update admin access.') }}"
     data-label-admin-access-on="{{ gettext('Admin access enabled.') }}"
     data-label-admin-access-off="{{ gettext('Admin access disabled.') }}"
     data-label-recovery-mail-failed-load="{{ gettext('Failed to load recovery mail.') }}"
     data-label-recovery-mail-failed-save="{{ gettext('Failed to save recovery mail.') }}"
     data-label-recovery-mail-saved="{{ gettext('Recovery mail saved.') }}"
     data-label-recovery-mail-cleared="{{ gettext('Recovery mail removed.') }}"
     data-label-recovery-mail-invalid="{{ gettext('Please enter a valid e-mail address.') }}"
     data-label-recovery-mail-none="{{ gettext('No recovery address set.') }}"
     data-label-confirm-remove-recovery-mail="{{ gettext('Remove your recovery e-mail address?') }}"
     class="is-hidden"></div>
{# Covers the page until every loader has settled. Rendered visible
   rather than switched on from JS: the cards below are revealed one
   by one as their requests come back, each one changing the page
   height, and somebody who starts scrolling into that lands somewhere
   else a moment later. settings.js removes it at the same point it
   restores the saved scroll position. #}
<div class="page-loading" id="settingsLoading">
  <div class="page-loading-box">
    <div class="page-loading-spinner"></div>
    <p>{{ gettext("Loading your settings...") }}</p>
  </div>
</div>
<div class="portal-wrapper">
    <h2>{{ gettext("Settings") }}</h2>

    <!-- Password Change -->
    {% if show_password_change %}
    <div class="settings-card">
        <h3>{{ gettext("Change Password") }}</h3>
        <div class="settings-form">
            <label for="currentPassword">{{ gettext("Current Password") }}</label>
            <input type="password" id="currentPassword" autocomplete="current-password">

            <label for="newPassword">{{ gettext("New Password") }}</label>
            <input type="password" id="newPassword" autocomplete="new-password">

            <label for="confirmPassword">{{ gettext("Confirm New Password") }}</label>
            <input type="password" id="confirmPassword" autocomplete="new-password">

            <button type="button" id="changePwBtn" class="btn btn-primary mt-8">{{ gettext("Change Password") }}</button>
            <div class="status-msg" id="pwStatus"></div>
            <div class="error-msg" id="pwError"></div>
        </div>
    </div>
    {% endif %}

    <!-- PIN Change -->
    {% if show_pin_change %}
    <div class="settings-card">
        <h3>{{ gettext("Change PIN") }}</h3>
        <div class="settings-form">
            <label for="currentPin">{{ gettext("Current PIN") }}</label>
            <input type="password" id="currentPin" autocomplete="current-password" inputmode="numeric">

            <label for="newPin">{{ gettext("New PIN") }}</label>
            <input type="password" id="newPin" autocomplete="new-password" inputmode="numeric">

            <label for="confirmPin">{{ gettext("Confirm New PIN") }}</label>
            <input type="password" id="confirmPin" autocomplete="new-password" inputmode="numeric">

            <button type="button" id="changePinBtn" class="btn btn-primary mt-8">{{ gettext("Change PIN") }}</button>
            <div class="status-msg" id="pinStatus"></div>
            <div class="error-msg" id="pinError"></div>
        </div>
    </div>
    {% endif %}

    <!-- Login Token Re-Deploy -->
    {% if show_redeploy %}
    <div class="settings-card">
        <h3>{{ gettext("Login Token") }}</h3>
        <p class="settings-desc">{{ gettext("Re-deploy your login token. This will replace your current login token with a new one.") }}</p>
        <a href="{{ url_for('settings_redeploy', _external=True, _scheme='https') }}" class="btn btn-secondary btn-small">{{ gettext("Re-deploy Login Token") }}</a>
    </div>
    {% endif %}

    <!-- Language -->
    <div class="settings-card">
        <h3>{{ gettext("Language") }}</h3>
        <p class="settings-desc">{{ gettext("Choose your preferred language. \"Browser default\" follows the language sent by your browser.") }}</p>
        <div class="settings-form">
            <label for="languageSelect">{{ gettext("Language") }}</label>
            <select id="languageSelect">
                <option value="default" {% if current_language == "default" %}selected{% endif %}>{{ gettext("Browser default") }}</option>
                {% for loc in locale_choices %}
                <option value="{{ loc.code }}" {% if current_language == loc.code %}selected{% endif %}>{{ loc.label }}</option>
                {% endfor %}
            </select>
            <button type="button" id="saveLanguageBtn" class="btn btn-primary mt-8">{{ gettext("Save") }}</button>
            <div class="status-msg" id="languageStatus"></div>
            <div class="error-msg" id="languageError"></div>
        </div>
    </div>

    <!-- Device Tokens (one card per configured device_token_roles role).
         When device_token_roles is not configured, nothing is rendered at
         all — the section just disappears from the settings page. -->
    <div id="deviceRolesContainer"></div>
    <div id="deviceI18n"
         data-label-device-tokens="{{ gettext('Device Tokens') }}"
         data-label-device-name="{{ gettext('Device Name') }}"
         data-label-device-name-placeholder="{{ gettext('e.g. my phone, work laptop') }}"
         data-label-add-device-token="{{ gettext('Add Device Token') }}"
         data-label-existing-device-tokens="{{ gettext('Existing Device Tokens') }}"
         data-label-no-device-tokens="{{ gettext('No device tokens yet.') }}"
         data-label-new-password="{{ gettext('New password:') }}"
         data-label-copy="{{ gettext('Copy') }}"
         data-label-shown-once="{{ gettext('This password is shown only once. Copy it now.') }}"
         data-label-delete="{{ gettext('Delete') }}"
         class="is-hidden"></div>

    <!-- Passkeys (WebAuthn discoverable credentials).
         Hidden by default; revealed by loadPasskeys() when the server
         reports allowed=true (sso_allow_passkeys config parameter). -->
    <div class="settings-card is-hidden" id="passkeyCard">
        <h3>{{ gettext("Passkeys") }}</h3>
        <p class="settings-desc">{{ gettext("Sign in without a password using a passkey on this device or a synced credential provider (iCloud Keychain, Google Password Manager, 1Password, ...).") }}</p>
        <div class="settings-form" id="passkeyAddForm">
            <label for="passkeyName">{{ gettext("Passkey Name") }}</label>
            <input type="text" id="passkeyName" placeholder="{{ gettext('e.g. my iPhone, work laptop') }}" autocomplete="off">
            <button type="button" id="addPasskeyBtn" class="btn btn-primary mt-8">{{ gettext("Add Passkey") }}</button>
            <div class="status-msg" id="passkeyStatus"></div>
            <div class="error-msg" id="passkeyError"></div>
        </div>
        <h4>{{ gettext("Existing Passkeys") }}</h4>
        <ul id="passkeyList" class="device-token-list"></ul>
    </div>

    <!-- FIDO2 security keys. Hidden until loadFido2Tokens() sees
         allowed=true (sso_allow_fido2), which also governs signing in
         with one. Same shape as the tiqr card below, including the SSO
         token being listed and promotable rather than deletable. -->
    <div class="settings-card is-hidden" id="fido2Card">
        <h3>{{ gettext("Security Keys (FIDO2)") }}</h3>
        <p class="settings-desc">{{ gettext("Sign in with a hardware security key (YubiKey, Nitrokey, Titan, ...). The key is plugged in or held to the device, and never leaves your hands.") }}</p>
        <div class="settings-form" id="fido2AddForm">
            <label for="fido2DeviceName">{{ gettext("Key Name") }}</label>
            <input type="text" id="fido2DeviceName" placeholder="{{ gettext('e.g. my YubiKey, backup key') }}" autocomplete="off">
            <button type="button" id="addFido2Btn" class="btn btn-primary mt-8">{{ gettext("Add Security Key") }}</button>
            <div class="status-msg" id="fido2Status"></div>
            <div class="error-msg" id="fido2Error"></div>
        </div>
        <h4>{{ gettext("Registered Keys") }}</h4>
        <ul id="fido2List" class="device-token-list"></ul>
    </div>

    <!-- tiqr: phones enrolled for challenge-response login. The list
         includes the SSO token when that is a tiqr one, marked and
         without a delete button -- removing it would take the recovery
         flow with it, which looks up a token of that name. Moving that
         role to another phone is what the "Make SSO token" button
         does; it renames rather than deletes, so no phone is lost. -->
    <div class="settings-card is-hidden" id="tiqrCard">
        <h3>{{ gettext("Smartphone Authentication App (tiqr)") }}</h3>
        <p class="settings-desc">{{ gettext("Sign in by confirming on your phone. Scan the code with the tiqr app, or tap the link if you are reading this on the phone itself.") }}</p>
        <div class="settings-form" id="tiqrAddForm">
            <label for="tiqrDeviceName">{{ gettext("Device Name") }}</label>
            <input type="text" id="tiqrDeviceName" placeholder="{{ gettext('e.g. my phone, work phone') }}" autocomplete="off">
            <button type="button" id="addTiqrBtn" class="btn btn-primary mt-8">{{ gettext("Add Phone") }}</button>
            <div class="status-msg" id="tiqrStatus"></div>
            <div class="error-msg" id="tiqrError"></div>
        </div>
        <div class="is-hidden" id="tiqrEnrollBox">
            {# No tap-through link here, unlike the login page. The
               enrollment URL is tiqrenroll://https://host/... and a
               browser will not hand that to the app: its URL parser
               reads "https:" as a host with an empty port, drops the
               empty port, and the app receives tiqrenroll://https//...
               which it rejects. Tested against the app in every shape
               that survives the parser -- none is accepted. The login
               URL has no such problem (proper authority, no embedded
               URL), which is why that page still offers the link. #}
            <p class="settings-desc">{{ gettext("Scan this 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 class="qr-container">
                <img id="tiqrQrcodeImg" alt="{{ gettext('tiqr enrollment code') }}">
            </div>
            <div class="login-buttons">
                <button type="button" id="tiqrCancelBtn" class="btn btn-secondary">{{ gettext("Cancel") }}</button>
            </div>
        </div>
        <h4>{{ gettext("Enrolled Phones") }}</h4>
        <ul id="tiqrList" class="device-token-list"></ul>
    </div>

    <!-- Recovery mail: address the SSO token recovery link is sent to.
         Address lives on the user object as otpmeRecoveryMail (LDIF
         attribute). Editing requires a fresh step-up reauth (within
         STEP_UP_MAX_AGE seconds of /reauth) so a forgotten-unlocked
         browser cannot silently pivot into an account-takeover
         setting. Display mode shows current address + small Edit
         button; Edit click redirects to /reauth?next=/settings#recoveryMailCard
         and after return the row swaps to input + small Save/Remove
         /Cancel. -->
    <div class="settings-card" id="recoveryMailCard">
        <h3>{{ gettext("Recovery E-Mail") }}</h3>
        <p class="settings-desc">{{ gettext("If you lose access to your default token, a re-deploy link is sent to this address. Keep it under an account only you control (private mailbox, not your work address). Editing requires re-authentication.") }}</p>
        <div class="settings-form">
            <div class="recovery-mail-display" id="recoveryMailDisplay">
                <span class="recovery-mail-value" id="recoveryMailValue"></span>
                <button type="button" id="editRecoveryMailBtn" class="btn btn-secondary btn-small">{{ gettext("Edit") }}</button>
            </div>
            <div class="recovery-mail-edit is-hidden" id="recoveryMailEdit">
                <input type="email" id="recoveryMailInput" autocomplete="email" spellcheck="false" placeholder="you@example.com">
                <div class="recovery-mail-actions">
                    <button type="button" id="saveRecoveryMailBtn" class="btn btn-primary btn-small">{{ gettext("Save") }}</button>
                    <button type="button" id="removeRecoveryMailBtn" class="btn btn-secondary btn-small">{{ gettext("Remove") }}</button>
                    <button type="button" id="cancelRecoveryMailBtn" class="btn btn-secondary btn-small">{{ gettext("Cancel") }}</button>
                </div>
            </div>
            <div class="status-msg" id="recoveryMailStatus"></div>
            <div class="error-msg" id="recoveryMailError"></div>
        </div>
    </div>

    <!-- Admin access: opt-in. Hidden by default; revealed by
         loadAdminAccess() when the server reports available=true
         (admin_access_role config parameter resolvable on the home
         site). Toggling flips allow_temp_passwords on the user and
         grants/revokes the set_temp_password ACL (recursive over
         tokens) to the configured role. -->
    <div class="settings-card is-hidden" id="adminAccessCard">
        <h3>{{ gettext("Admin Access") }}</h3>
        <p class="settings-desc">{{ gettext("Allow administrators to set a temporary password on your account for support purposes. Turn off when no longer needed.") }}</p>
        <div class="settings-form">
            <label class="toggle-label" for="adminAccessToggle">
                <span class="toggle-switch">
                    <input type="checkbox" id="adminAccessToggle" role="switch">
                    <span class="toggle-track" aria-hidden="true"></span>
                </span>
                <span class="toggle-text">{{ gettext("Allow admin access") }}</span>
            </label>
            <div class="status-msg" id="adminAccessStatus"></div>
            <div class="error-msg" id="adminAccessError"></div>
        </div>
    </div>

    <!-- Connected applications (OIDC consents) -->
    <div class="settings-card">
        <h3>{{ gettext("Connected Applications") }}</h3>
        <p class="settings-desc">
            {{ gettext("Applications you have granted access to your account. Disconnecting removes the approval and terminates the application's active session.") }}
        </p>
        <div class="status-msg" id="consentStatus"></div>
        <div class="error-msg" id="consentError"></div>
        <ul id="oidcConsentList" class="device-token-list"></ul>
    </div>
</div>

<div id="oidc-consent-urls"
     data-url-list="{{ url_for('list_oidc_consents', _external=True, _scheme='https') }}"
     data-url-revoke="{{ url_for('revoke_oidc_consent', _external=True, _scheme='https') }}"
     class="is-hidden"></div>

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