Prettify phone number input formatting. Fixes #2

copanier/static/js/app.js

@@ -0,0 +1,15 @@
+/* Handle nice phone number formatting */
+function prettifyPhoneNumber(selector) {
+    input = document.getElementById(selector)
+    var phone = input.value;
+
+    phone = phone.replace(/[^0-9]/g, '') // Only keep digits.
+    phone = (function addSpaces(phone) {
+        if (phone.length <= 2) {
+            return phone
+        }
+        return phone.substring(0, 2) + ' ' + addSpaces(phone.substring(2))
+    }(phone))
+
+    input.value = phone;
+}

copanier/templates/base.html

@@ -61,6 +61,7 @@
     
     
     <script src="/static/js/flash.min.js"></script>
+    <script src="/static/js/app.js"></script>
     {% if message %}
     <script>
     new window.FlashMessage("{{ message[0] }}", "{{ message[1] }}", {

copanier/templates/delivery/place_order.html

@@ -56,7 +56,7 @@
     {%- endif %}
     {% endfor %}
     <p>On y est presque ! Est-ce que tu peux entrer un numéro de téléphone au cas où on ait besoin de vous joindre ?</p>
-    <input type="text" name="phone_number" value="{{ order.phone_number }}" placeholder="Ton numéro de téléphone" required>
+    <input id="phone" type="text" onInput="prettifyPhoneNumber('phone')" name="phone_number" value="{{ order.phone_number }}" placeholder="Ton numéro de téléphone" required>
     <input type="hidden" name="email" value="{{ person.email }}">
     {% if delivery.status != delivery.CLOSED or request.user.is_staff %}
     <input type="submit" value="Enregistrer la commande" class="primary">

copanier/views/products.py

@@ -213,7 +213,6 @@ async def delete_product(request, response, delivery_id, producer_id, product_re
     response.redirect = f"/produits/{delivery_id}/producteurs/{producer_id}"
 
 
-
 @app.route(
     "/produits/{delivery_id}/producteurs/{producer_id}/frais-de-livraison",
     methods=["GET", "POST"],