From 5038af9e341bf9046d5a933a2ce43491340875d3 Mon Sep 17 00:00:00 2001
From: otthorn <otthorn@crans.org>
Date: Tue, 22 Mar 2022 14:58:26 +0100
Subject: [PATCH] Final html template

---
 apps/member/templates/member/qr_code.html | 27 ++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/apps/member/templates/member/qr_code.html b/apps/member/templates/member/qr_code.html
index 69b2a351..da9d6042 100644
--- a/apps/member/templates/member/qr_code.html
+++ b/apps/member/templates/member/qr_code.html
@@ -5,7 +5,32 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% 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>
 
-Affichage du QR Code ici
 
 {% 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 }}",
+		width: 1024,
+		height: 1024
+	});
+</script>
+{% endblock %}
+
+{% block extracss %}
+<style>
+img {
+    width: 100%
+}
+</style>
+{% endblock %}