nk20/note_kfet/templates/registration/signup.html

{% extends 'base.html' %}
{% comment %}
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n crispy_forms_tags %}
{% block title %}{% trans "Sign up" %}{% endblock %}

{% block content %}
<div class="card bg-light">
    <h3 class="card-header text-center">
        {% trans "Sign up" %}
    </h3>
    <div class="card-body">
        <div class="alert alert-warning">
            {% blocktrans trimmed %}
            If you already signed up, your registration is taken into account. The BDE must validate
            your account before your can log in. You have to go to the Kfet and pay the registration fee. You must also
            validate your email address by following the link you received.
            {% endblocktrans %}
        </div>

        <form method="post" id="profile_form">
            {% csrf_token %}
            {{ form|crispy }}
            {{ profile_form|crispy }}
            {% comment "Soge not for membership (only WEI)" %} {{ soge_form|crispy }} {% endcomment %}
            <button class="btn btn-success" type="submit">
                {% trans "Sign up" %}
            </button>
        </form>
    </div>
</div>
{% endblock %}

{% block extrajavascript %}
<!-- intl-tel-input CSS/JS -->
<script>
(() => {
    const input = document.querySelector("input[name='phone_number']");
    const form = document.querySelector("#profile_form");

    if (!input || !form) {
        console.error("Input phone_number ou form introuvable.");
    }

    const iti = window.intlTelInput(input, {
        initialCountry: "auto",
        nationalMode: false,
        autoPlaceholder: "off",
        geoIpLookup: callback => {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => callback(data.country_code))
                .catch(() => callback("fr"));
        },
        loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.2/build/js/utils.js"),
    });

    form.addEventListener("submit", function(e){
        if (!input.value.trim()) {
            return;
        }

        const number = iti.getNumber(intlTelInput.utils.numberFormat.E164);
        if (number) {
            input.value = number;
            form.submit();
        } else {
            e.preventDefault();
            input.focus();
        }
    });
})();
</script>
{% endblock %}