mirror of
https://gitlab.crans.org/bde/nk20
synced 2025-08-31 08:55:26 +02:00
Better phone input (no invalid number)
This commit is contained in:
@@ -305,8 +305,8 @@ PIC_WIDTH = 200
|
||||
PIC_RATIO = 1
|
||||
|
||||
# Custom phone number format
|
||||
PHONENUMBER_DB_FORMAT = 'NATIONAL'
|
||||
PHONENUMBER_DEFAULT_REGION = 'FR'
|
||||
PHONENUMBER_DB_FORMAT = 'E164'
|
||||
PHONENUMBER_DEFAULT_REGION = None
|
||||
|
||||
# We add custom information to CAS, in order to give a normalized name to other services
|
||||
CAS_AUTH_CLASS = 'member.auth.CustomAuthUser'
|
||||
|
@@ -29,6 +29,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
|
||||
<link rel="stylesheet" href="{% static "bootstrap4/css/bootstrap.min.css" %}">
|
||||
<link rel="stylesheet" href="{% static "font-awesome/css/font-awesome.min.css" %}">
|
||||
<link rel="stylesheet" href="{% static "css/custom.css" %}">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.2/build/css/intlTelInput.css">
|
||||
|
||||
{# JQuery, Bootstrap and Turbolinks JavaScript #}
|
||||
<script src="{% static "jquery/jquery.min.js" %}"></script>
|
||||
@@ -41,6 +43,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
|
||||
{# Translation in javascript files #}
|
||||
<script src="{% static "js/jsi18n/"|add:LANGUAGE_CODE|add:".js" %}"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.5.2/build/js/intlTelInput.min.js"></script>
|
||||
|
||||
{# If extra ressources are needed for a form, load here #}
|
||||
{% if form.media %}
|
||||
{{ form.media }}
|
||||
|
@@ -31,3 +31,45 @@ SPDX-License-Identifier: GPL-3.0-or-later
|
||||
</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 %}
|
Reference in New Issue
Block a user