Better phone input (no invalid number)

apps/member/templates/member/profile_update.html

@@ -10,7 +10,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
         {{ title }}
     </h3>
     <div class="card-body">
-        <form method="post">
+        <form method="post" id="profile-form">
             {% csrf_token %}
             {{ form | crispy }}
             {{ profile_form | crispy }}
@@ -20,4 +20,46 @@ SPDX-License-Identifier: GPL-3.0-or-later
         </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 %}