Merge branch 'qrcode' into 'main'

Draft: Qrcode

See merge request bde/nk20!196

apps/activity/templates/activity/activity_entry.html

@@ -38,6 +38,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
 </a>
 
 <input id="alias" type="text" class="form-control" placeholder="Nom/note ...">
+<button id="trigger" class="btn btn-secondary">Click me !</button>
 
 <hr>
 
@@ -63,15 +64,46 @@ SPDX-License-Identifier: GPL-3.0-or-later
         refreshBalance();
     }
 
+    function process_qrcode() {
+        let name = alias_obj.val();
+        $.get("/api/note/note?search=" + name + "&format=json").done(
+            function (res) {
+                let note = res.results[0];
+                $.post("/api/activity/entry/?format=json", {
+                    csrfmiddlewaretoken: CSRF_TOKEN,
+                    activity: {{ activity.id }},
+                    note: note.id,
+                    guest: null
+                }).done(function () {
+                    addMsg(interpolate(gettext(
+                        "Entry made for %s whose balance is %s €"),
+                        [note.name, note.balance / 100]), "success", 4000);
+                    reloadTable(true);
+                }).fail(function (xhr) {
+                    errMsg(xhr.responseJSON, 4000);
+                });
+            }).fail(function (xhr) {
+                errMsg(xhr.responseJSON, 4000);
+            });
+    }
+
     alias_obj.keyup(function(event) {
         let code = event.originalEvent.keyCode
         if (65 <= code <= 122 || code === 13) {
             debounce(reloadTable)()
         }
+        if (code === 0)
+            process_qrcode();
     });
 
     $(document).ready(init);
 
+    alias_obj2 = document.getElementById("alias");
+    $("#trigger").click(function (e) {
+        addMsg("Clicked", "success", 1000);
+        alias_obj.val(alias_obj.val() + "\0");
+        alias_obj2.dispatchEvent(new KeyboardEvent('keyup'));
+    })
     function init() {
         $(".table-row").click(function (e) {
             let target = e.target.parentElement;
@@ -168,4 +200,4 @@ SPDX-License-Identifier: GPL-3.0-or-later
         });
     }
 </script>
-{% endblock %}
+{% endblock %}

apps/member/forms.py

@@ -10,7 +10,6 @@ from django.contrib.auth.forms import AuthenticationForm
 from django.contrib.auth.models import User
 from django.db import transaction
 from django.forms import CheckboxSelectMultiple
-from phonenumber_field.formfields import PhoneNumberField
 from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
 from note.models import NoteSpecial, Alias
@@ -46,11 +45,6 @@ class ProfileForm(forms.ModelForm):
     A form for the extras field provided by the :model:`member.Profile` model.
     """
     # Remove widget=forms.HiddenInput() if you want to use report frequency.
-    phone_number = PhoneNumberField(
-        widget=forms.TextInput(attrs={"type": "tel", "class": "form-control"}),
-        required=False
-    )
-
     report_frequency = forms.IntegerField(required=False, initial=0, label=_("Report frequency"))
 
     last_report = forms.DateTimeField(required=False, disabled=True, label=_("Last report date"))
@@ -78,12 +72,7 @@ class ProfileForm(forms.ModelForm):
         if not self.instance.section or (("department" in self.changed_data
                                          or "promotion" in self.changed_data) and "section" not in self.changed_data):
             self.instance.section = self.instance.section_generated
-        instance = super().save(commit=False)
-        if instance.phone_number:
-            instance.phone_number = instance.phone_number.as_e164
-        if commit:
-            instance.save()
-        return instance
+        return super().save(commit)
 
     class Meta:
         model = Profile

apps/member/templates/member/includes/profile_info.html

@@ -60,7 +60,10 @@
 {% if user_object.pk == user.pk %}
     <div class="text-center">
         <a class="small badge badge-secondary" href="{% url 'member:auth_token' %}">
-            <i class="fa fa-cogs"></i>{% trans 'API token' %}
+            <i class="fa fa-cogs"></i>&nbsp;{% trans 'API token' %}
+        </a>
+        <a class="small badge badge-secondary" href="{% url 'member:qr_code' user_object.pk %}">
+            <i class="fa fa-qrcode"></i>&nbsp;{% trans 'QR Code' %}
         </a>
     </div>
 {% endif %}

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" id="profile-form">
+        <form method="post">
             {% csrf_token %}
             {{ form | crispy }}
             {{ profile_form | crispy }}
@@ -20,46 +20,4 @@ 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 %}

apps/member/templates/member/qr_code.html

@@ -0,0 +1,36 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n %}
+
+{% block content %}
+<div class="card bg-light">
+  	<h3 class="card-header text-center">
+		{% trans "QR Code for" %} {{ user_object.username }} ({{ user_object.first_name }} {{user_object.last_name }})
+  	</h3>
+  	<div class="text-center" id="qrcode">
+  	</div>
+</div>
+
+
+{% endblock %}
+
+{% block extrajavascript %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>
+	var qrc = new QRCode(document.getElementById("qrcode"), {
+		text: "{{ user_object.pk }}\0",
+		width: 1024,
+		height: 1024
+	});
+</script>
+{% endblock %}
+
+{% block extracss %}
+<style>
+img {
+    width: 100%
+}
+</style>
+{% endblock %}

apps/member/urls.py

@@ -25,4 +25,5 @@ urlpatterns = [
     path('user/<int:pk>/aliases/', views.ProfileAliasView.as_view(), name="user_alias"),
     path('user/<int:pk>/trust', views.ProfileTrustView.as_view(), name="user_trust"),
     path('manage-auth-token/', views.ManageAuthTokens.as_view(), name='auth_token'),
+    path('user/<int:pk>/qr_code/', views.QRCodeView.as_view(), name='qr_code'),
 ]

apps/member/views.py

@@ -402,6 +402,14 @@ class ManageAuthTokens(LoginRequiredMixin, TemplateView):
         context['token'] = Token.objects.get_or_create(user=self.request.user)[0]
         return context
 
+class QRCodeView(LoginRequiredMixin, DetailView):
+    """
+    Affiche le QR Code
+    """
+    model = User
+    context_object_name = "user_object"
+    template_name = "member/qr_code.html"
+    extra_context = {"title": _("QR Code")}
 
 # ******************************* #
 #              CLUB               #

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 id="registration-form" method="post">
+        <form method="post">
             {% csrf_token %}
             {{ form|crispy }}
             {{ membership_form|crispy }}
@@ -22,46 +22,6 @@ 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 () {

note_kfet/settings/base.py

@@ -305,8 +305,8 @@ PIC_WIDTH = 200
 PIC_RATIO = 1
 
 # Custom phone number format
-PHONENUMBER_DB_FORMAT = 'E164'
-PHONENUMBER_DEFAULT_REGION = None
+PHONENUMBER_DB_FORMAT = 'NATIONAL'
+PHONENUMBER_DEFAULT_REGION = 'FR'
 
 # We add custom information to CAS, in order to give a normalized name to other services
 CAS_AUTH_CLASS = 'member.auth.CustomAuthUser'

note_kfet/templates/base.html

@@ -29,8 +29,6 @@ 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>
@@ -43,8 +41,6 @@ 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 }}

note_kfet/templates/registration/signup.html

@@ -19,7 +19,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
             {% endblocktrans %}
         </div>
 
-        <form method="post" id="profile_form">
+        <form method="post">
             {% csrf_token %}
             {{ form|crispy }}
             {{ profile_form|crispy }}
@@ -31,45 +31,3 @@ 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 %}