add barcode to profile

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",

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..."

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...");
   })