loko/streetup/authorizations/templates/authorizations/email_verify_code.html

{% load i18n %}
{% load static %}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% translate "Vérification de votre email" %}{% if organization_name %} – {{ organization_name }}{% endif %}</title>
    <link href="{% static 'common/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'common/bootstrap-icons.min.css' %}" rel="stylesheet">
    <style>
        body { background-color: #f8f9fa; }
        .page-header {
            background: linear-gradient(135deg, #1a3a6e 0%, #2b4fa8 100%);
            color: #fff;
            padding: 1.5rem 0;
        }
        .page-header img { height: 52px; }
        .code-input {
            font-size: 2rem;
            letter-spacing: 0.5rem;
            text-align: center;
            font-family: monospace;
            max-width: 220px;
        }
    </style>
</head>
<body>
<header class="page-header mb-5">
    <div class="container d-flex align-items-center gap-3">
        <img src="{% static organization_logo_header %}" alt="{{ organization_name }}">
        <div>
            <div class="fw-bold fs-5">{{ organization_name }}</div>
            <div class="fs-6 opacity-75">{% translate "Demande d'occupation de l'espace public" %}</div>
        </div>
    </div>
</header>

<div class="container" style="max-width: 560px;">

    {% if error == 'expired' %}
    <div class="text-center mb-4">
        <i class="bi bi-clock-history text-danger" style="font-size: 4rem;"></i>
    </div>
    <h1 class="h3 text-center mb-3">{% translate "Code expiré" %}</h1>
    <p class="text-center text-muted mb-4">
        {% blocktranslate trimmed %}
        Le code de vérification est arrivé à expiration (validité&nbsp;: 10&nbsp;minutes).
        Veuillez soumettre une nouvelle demande pour recevoir un nouveau code.
        {% endblocktranslate %}
    </p>
    <div class="d-flex justify-content-center">
        <a href="{% url 'authorizations:new_authorization' %}" class="btn btn-primary">
            <i class="bi bi-arrow-left"></i> {% translate "Nouvelle demande" %}
        </a>
    </div>

    {% elif error == 'locked' %}
    <div class="text-center mb-4">
        <i class="bi bi-shield-lock-fill text-danger" style="font-size: 4rem;"></i>
    </div>
    <h1 class="h3 text-center mb-3">{% translate "Trop de tentatives" %}</h1>
    <p class="text-center text-muted mb-4">
        {% blocktranslate trimmed %}
        Le nombre maximum de tentatives a été atteint. Votre code est bloqué.
        Veuillez soumettre une nouvelle demande.
        {% endblocktranslate %}
    </p>
    <div class="d-flex justify-content-center">
        <a href="{% url 'authorizations:new_authorization' %}" class="btn btn-primary">
            <i class="bi bi-arrow-left"></i> {% translate "Nouvelle demande" %}
        </a>
    </div>

    {% else %}
    <div class="text-center mb-4">
        <i class="bi bi-shield-lock text-primary" style="font-size: 4rem;"></i>
    </div>
    <h1 class="h3 text-center mb-3">{% translate "Entrez votre code de vérification" %}</h1>
    <p class="text-center text-muted mb-4">
        {% blocktranslate trimmed with email=authorization.applicant_email %}
        Un code à 6 chiffres a été envoyé à <strong>{{ email }}</strong>.
        Saisissez-le ci-dessous. Il est valable 10&nbsp;minutes.
        {% endblocktranslate %}
    </p>

    {% if error == 'wrong_code' %}
    <div class="alert alert-danger d-flex align-items-center gap-2 mb-4">
        <i class="bi bi-x-circle-fill flex-shrink-0"></i>
        <div>
            {% blocktranslate trimmed with remaining=token_obj.MAX_ATTEMPTS|add:"-1"|add:"-"|add:token_obj.attempts %}
            Code incorrect. Vérifiez l'email reçu et réessayez.
            {% endblocktranslate %}
        </div>
    </div>
    {% endif %}

    <form method="post" novalidate>
        {% csrf_token %}
        <div class="d-flex flex-column align-items-center gap-3">
            <input
                type="text"
                name="code"
                id="id_code"
                class="form-control code-input{% if error == 'wrong_code' %} is-invalid{% endif %}"
                maxlength="6"
                minlength="6"
                pattern="[0-9]{6}"
                inputmode="numeric"
                autocomplete="one-time-code"
                placeholder="000000"
                autofocus
                required
                aria-label="{% translate 'Code de vérification à 6 chiffres' %}"
            >
            <button type="submit" class="btn btn-primary px-5">
                <i class="bi bi-check-circle"></i> {% translate "Vérifier" %}
            </button>
        </div>
    </form>

    <p class="text-center text-muted mt-4 small">
        {% blocktranslate trimmed %}
        Vous n'avez pas reçu l'email ? Vérifiez votre dossier de courrier indésirable (spam).
        {% endblocktranslate %}
    </p>
    {% endif %}

</div>

<script src="{% static 'common/bootstrap.bundle.min.js' %}"></script>
<script>
    // Auto-submit when 6 digits are entered
    const codeInput = document.getElementById('id_code');
    if (codeInput) {
        codeInput.addEventListener('input', function () {
            this.value = this.value.replace(/\D/g, '').slice(0, 6);
            if (this.value.length === 6) {
                this.closest('form').submit();
            }
        });
    }
</script>
</body>
</html>