Better phone input (no invalid number)

apps/wei/templates/wei/weiregistration_form.html

@@ -11,7 +11,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
         {{ title }}
     </h3>
     <div class="card-body">
-        <form method="post">
+        <form id="registration-form" method="post">
             {% csrf_token %}
             {{ form|crispy }}
             {{ membership_form|crispy }}
@@ -22,6 +22,46 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% endblock %}
 
 {% block extrajavascript %}
+<!-- intl-tel-input CSS/JS -->
+<script>
+(() => {
+    const input = document.querySelector("input[name='emergency_contact_phone']");
+    const form = document.querySelector("#registration-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>
+
 {% if not object.membership %}
 <script>
     $(document).ready(function () {