From 851190e6a7f8b9cccbf05e60f9b50b96c196959c Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Wed, 1 Feb 2023 14:48:06 +0100
Subject: [PATCH] add barcode to profile

---
 package.json          |  1 +
 src/locales/de.json   |  1 +
 src/views/Profile.vue | 11 +++++++++++
 3 files changed, 13 insertions(+)

diff --git a/package.json b/package.json
index 2f1ddb9..e53a17d 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
 		"postbuild": "node env_fix.js"
 	},
 	"dependencies": {
+		"jsbarcode": "^3.11.5",
 		"marked": "2.0.3",
 		"redaxios": "0.4.1",
 		"toastify-js": "1.10.0",
diff --git a/src/locales/de.json b/src/locales/de.json
index d228670..f7a0078 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -52,6 +52,7 @@
     "tos": "AGBs",
     "total": "Gesamt",
     "view_my_data": "Meine Läuferdaten einsehen",
+    "registrierungscode": "Registrierungscode",
     "vorname": "Vorname",
     "you_have_been_registered": "Sie wurden registriert!",
     "you_have_not_provided_a_valid_access_key": "Sie haben keinen gültigen Zugangsschlüssel angegeben..."
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 0e0fbc3..34ba680 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -153,6 +153,8 @@
                 <form class="form flex flex-wrap w-full">
                   <div class="w-full">
                     <div class="form-element">
+                      <div class="text-lg">{{ $t('registrierungscode') }}</div>
+                      <img alt="Registrierungscode" :src="state.barcode">
                       <div class="text-lg">{{ $t('vorname') }}</div>
                       <p
                         class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
@@ -329,8 +331,16 @@
 import { reactive } from "vue";
 import { TYPE, useToast } from "vue-toastification";
 import axios from "redaxios";
+import JsBarcode from "jsbarcode";
+
+function textToBase64Barcode(text){
+  var canvas = document.createElement("canvas");
+  JsBarcode(canvas, text, {format: "CODE128", displayValue:false});
+  return canvas.toDataURL("image/png");
+}
 
 const state = reactive({
+  barcode: "",
   phone: "",
   email: "",
   firstname: "",
@@ -358,6 +368,7 @@ axios.get(`${config.baseurl}api/runners/me/${accesstoken}`)
     state.group = data.group;
     state.sponsorings = data.distanceDonations;
     state.fullobject = data;
+    state.barcode = textToBase64Barcode(state.fullobject.id);
   }).catch((error) => {
     toast.error("Profil konnte nicht geladen werden...");
   })