{% extends "Admin.html" %}


{% set disable_navigation = True %}


{% block title %}

{% translate %}
Login
{% endtranslate %}

{% endblock title %}


{% block _uproot_scripts %}

<style>
#uproot-title {
    display: none;
}
</style>

<script>
async function solvePoW(challenge, user, difficulty) {
    const encoder = new TextEncoder();
    const prefix = challenge + ":" + user + ":";
    for (let counter = 0; ; counter++) {
        const input = encoder.encode(prefix + counter);
        const hash = await crypto.subtle.digest("SHA-256", input);
        const bytes = new Uint8Array(hash);
        let hex = "";
        for (const b of bytes) hex += b.toString(16).padStart(2, "0");
        if (hex.endsWith(difficulty)) return counter.toString();
    }
}

document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById("uproot-form");

    // Manual login: solve PoW before letting the form submit.  Calling
    // form.submit() from the handler bypasses this listener, so the
    // recursive call below (and the auto-login path) won't re-enter.
    form.addEventListener("submit", async (event) => {
        const solutionField = document.getElementById("pow_solution");
        if (solutionField.value !== "") return;

        event.preventDefault();

        const button = form.querySelector("button[type='submit']");
        if (!button) return;

        const originalText = button.textContent;
        button.disabled = true;
        button.textContent = "\u2026";

        const challenge = document.getElementById("pow_challenge").value;
        const difficulty = document.getElementById("pow_difficulty").value;
        const user = document.getElementById("user").value;
        solutionField.value = await solvePoW(challenge, user, difficulty);

        button.disabled = false;
        button.textContent = originalText;
        form.submit();
    });

    // Auto-login via URL fragment: LOGIN_TOKEN is itself a strong shared
    // secret, so the server accepts it without PoW.  form.submit() bypasses
    // the listener above, matching that server-side behavior.
    if (window.location.hash) {
        const token = window.location.hash.substring(1);

        if (token) {
            document.getElementById("token").value = token;
            document.getElementById("user").value = "admin";
            document.getElementById("pw").value = "";

            history.replaceState(null, null, window.location.pathname + window.location.search);

            form.submit();
        }
    }
});
</script>

{% endblock _uproot_scripts %}


{% block main %}

<input type="hidden" id="token" name="token" value="">
<input type="hidden" id="pow_challenge" name="pow_challenge" value="{{ pow_challenge }}">
<input type="hidden" id="pow_difficulty" value="{{ pow_difficulty }}">
<input type="hidden" id="pow_solution" name="pow_solution" value="">

{% if login_token_enabled %}
<input type="hidden" id="user" name="user" value="">
<input type="hidden" id="pw" name="pw" value="">

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card mt-5 shadow">
            <div class="card-body p-4">
                <i>{% translate %}Here be dragons.{% endtranslate %}</i>
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card mt-5 shadow">
            <div class="card-body p-4">
                <h3 class="card-title mb-4">
                    {% translate %}
                    Login
                    {% endtranslate %}
                </h3>
                {% if bad %}
                <div class="alert alert-danger" role="alert">
                    {% translate %}
                    You provided invalid credentials.
                    {% endtranslate %}
                </div>
                {% endif %}
                <div class="mb-3">
                    <label for="user" class="form-label">
                        {% translate %}
                        Username
                        {% endtranslate %}
                    </label>
                    <input type="text" class="form-control" id="user" name="user" required>
                </div>
                <div class="mb-3">
                    <label for="pw" class="form-label">
                        {% translate %}
                        Password
                        {% endtranslate %}
                    </label>
                    <input type="password" class="form-control" id="pw" name="pw" required>
                </div>
                <div class="d-grid pt-2">
                    <button type="submit" class="btn btn-uproot">
                        {% translate %}
                        Submit
                        {% endtranslate %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock main %}