From 00f31d845830b862d70454e465a91d8bf5ad730b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexis=20M=C3=83taireau?= <alexis@notmyidea.org>
Date: Sun, 7 Jun 2020 19:35:19 +0200
Subject: [PATCH] Prettify phone number input formatting. Fixes #2

---
 copanier/static/js/app.js                    | 15 +++++++++++++++
 copanier/templates/base.html                 |  1 +
 copanier/templates/delivery/place_order.html |  2 +-
 copanier/views/products.py                   |  1 -
 4 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 copanier/static/js/app.js

diff --git a/copanier/static/js/app.js b/copanier/static/js/app.js
new file mode 100644
index 0000000..228e2c7
--- /dev/null
+++ b/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;
+}
diff --git a/copanier/templates/base.html b/copanier/templates/base.html
index 542d6a6..888d692 100644
--- a/copanier/templates/base.html
+++ b/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] }}", {
diff --git a/copanier/templates/delivery/place_order.html b/copanier/templates/delivery/place_order.html
index d0226e9..fbdf966 100644
--- a/copanier/templates/delivery/place_order.html
+++ b/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">
diff --git a/copanier/views/products.py b/copanier/views/products.py
index 204a91f..ac58d40 100644
--- a/copanier/views/products.py
+++ b/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"],