From c8db78df6ffd5b4bdeb53893f363659ae2eefd45 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 27 Feb 2021 19:09:14 +0100
Subject: [PATCH 01/48] =?UTF-8?q?=F0=9F=9A=80Bumped=20version=20to=20v0.0.?=
 =?UTF-8?q?1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index caeef94..0b17e76 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@odit/lfk-selfservice",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

From d18dbc3a1fdf1bc9f2e8c5b37cc2d3044857410a Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 17:31:12 +0100
Subject: [PATCH 02/48] =?UTF-8?q?=F0=9F=8E=89=20working=20vue=20reactivity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 6d83529..eda3c37 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -64,10 +64,7 @@
         />
         <p v-if="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
         <!--  -->
-        <label
-          for="phone"
-          class="select-none block font-medium"
-        >{{ $t('phone_number') }}</label>
+        <label for="phone" class="select-none block font-medium">{{ $t('phone_number') }}</label>
         <input
           v-model="userdetails.phone"
           name="phone"
@@ -102,6 +99,7 @@
             <div class="col-span-6">
               <label for="street" class="block font-medium">{{ $t('strasse') }}</label>
               <input
+                v-model="userdetails.address.street"
                 type="text"
                 name="street"
                 :placeholder="[[$t('strasse')]]"
@@ -113,6 +111,7 @@
             <div class="col-span-6 sm:col-span-6 lg:col-span-2">
               <label for="city" class="block font-medium">{{ $t('ort') }}</label>
               <input
+                v-model="userdetails.address.city"
                 type="text"
                 name="city"
                 :placeholder="[[$t('ort')]]"
@@ -123,6 +122,7 @@
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
               <label for="postal_code" class="block font-medium">{{ $t('plz') }}</label>
               <input
+                v-model="userdetails.address.zipcode"
                 type="text"
                 name="postal_code"
                 :placeholder="[[$t('plz')]]"
@@ -153,8 +153,8 @@
         <div class="mt-6">
           <button
             @click="login"
-            :disabled="(agb_accepted === false)"
-            :class="{ 'opacity-50': (agb_accepted === false), 'cursor-not-allowed': (agb_accepted === false) }"
+            :disabled="(!state.submit_enabled)"
+            :class="{ 'opacity-50': (!state.submit_enabled), 'cursor-not-allowed': (!state.submit_enabled) }"
             class="text-white block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
           >{{ $t('registrieren') }}</button>
         </div>
@@ -180,16 +180,21 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref, reactive, watch } from "vue";
 import axios from "redaxios";
-import Toastify from "toastify-js";
 import isEmail from 'validator/es/lib/isEmail';
 import isMobilePhone from 'validator/es/lib/isMobilePhone';
 import { useToast } from "vue-toastification";
 
-let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "" });
+let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", city: "", zipcode: "" } });
 let provide_address = ref(false);
 let agb_accepted = ref(false);
+// 
+const state = reactive({
+  submit_enabled: computed(() => agb_accepted.value === true && isEmail(userdetails.value.mail)
+    && userdetails.value.firstname
+    && userdetails.value.lastname && (provide_address.value === false || provide_address.value === true && (userdetails.value.address.street.trim() && userdetails.value.address.city.trim() && userdetails.value.address.zipcode.trim())))
+})
 const toast = useToast();
 function login() {
   userdetails = userdetails.value;
@@ -205,6 +210,14 @@ function login() {
       if (isMobilePhone(userdetails.phone)) {
         postdata.phone = userdetails.phone;
       }
+      if (provide_address.value === true) {
+        // TODO: fix address keys/ values
+        postdata.address = {
+          street: userdetails.value.address.street,
+          city: userdetails.value.address.city,
+          zipcode: userdetails.value.address.zipcode,
+        }
+      }
       toast("registration in progress...");
       axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register', postdata)
         .then((response) => {

From 215394489461e17760263cebf606475938500e6b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 17:51:40 +0100
Subject: [PATCH 03/48] =?UTF-8?q?=F0=9F=93=8D=F0=9F=8F=A0=20added=20addres?=
 =?UTF-8?q?s2=20field=20to=20Register?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 26 +++++++++++++++++++++-----
 src/locales/de.json         |  1 +
 src/locales/en.json         |  1 +
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index eda3c37..cd3319d 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -108,8 +108,23 @@
                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
+            <div class="col-span-6">
+              <label for="address2" class="block font-medium">{{ $t('apartment_suite_etc') }}</label>
+              <input
+                v-model="userdetails.address.address2"
+                type="text"
+                name="address2"
+                :placeholder="[[$t('apartment_suite_etc')]]"
+                id="address2"
+                autocomplete="street-address"
+                class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
+              />
+            </div>
             <div class="col-span-6 sm:col-span-6 lg:col-span-2">
-              <label for="city" class="block font-medium">{{ $t('ort') }}</label>
+              <label for="city" class="block font-medium">
+                {{ $t('ort') }}
+                <span class="font-bold">*</span>
+              </label>
               <input
                 v-model="userdetails.address.city"
                 type="text"
@@ -186,7 +201,7 @@ import isEmail from 'validator/es/lib/isEmail';
 import isMobilePhone from 'validator/es/lib/isMobilePhone';
 import { useToast } from "vue-toastification";
 
-let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", city: "", zipcode: "" } });
+let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } });
 let provide_address = ref(false);
 let agb_accepted = ref(false);
 // 
@@ -211,11 +226,12 @@ function login() {
         postdata.phone = userdetails.phone;
       }
       if (provide_address.value === true) {
-        // TODO: fix address keys/ values
         postdata.address = {
-          street: userdetails.value.address.street,
+          address1: userdetails.value.address.street,
+          address2: userdetails.value.address.address2 || "",
           city: userdetails.value.address.city,
-          zipcode: userdetails.value.address.zipcode,
+          postalcode: userdetails.value.address.zipcode,
+          country: "DE",
         }
       }
       toast("registration in progress...");
diff --git a/src/locales/de.json b/src/locales/de.json
index a009b3b..4ea8b12 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1,5 +1,6 @@
 {
     "already_have_an_account": "Sie haben bereits einen Account?",
+    "apartment_suite_etc": "Addresszeile 2",
     "e_mail_adress": "E-Mail Adresse",
     "go_to_login": "Zum Login",
     "main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
diff --git a/src/locales/en.json b/src/locales/en.json
index fc75953..4d4c680 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,5 +1,6 @@
 {
     "already_have_an_account": "Already have an account?",
+    "apartment_suite_etc": "Apartment, suite, etc.",
     "e_mail_adress": "mail address",
     "go_to_login": "Go To Login",
     "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",

From 2822fcdeba3c5f559c165d512a2743949bf9c61e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 17:52:04 +0100
Subject: [PATCH 04/48] =?UTF-8?q?=F0=9F=8C=9F=20added=20requirement=20star?=
 =?UTF-8?q?s=20to=20Register=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index cd3319d..a51cb4b 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -97,7 +97,10 @@
           </div>
           <div v-if="provide_address === true" class="col-span-6">
             <div class="col-span-6">
-              <label for="street" class="block font-medium">{{ $t('strasse') }}</label>
+              <label for="street" class="block font-medium">
+                {{ $t('strasse') }}
+                <span class="font-bold">*</span>
+              </label>
               <input
                 v-model="userdetails.address.street"
                 type="text"
@@ -135,7 +138,10 @@
               />
             </div>
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
-              <label for="postal_code" class="block font-medium">{{ $t('plz') }}</label>
+              <label for="postal_code" class="block font-medium">
+                {{ $t('plz') }}
+                <span class="font-bold">*</span>
+              </label>
               <input
                 v-model="userdetails.address.zipcode"
                 type="text"
@@ -162,6 +168,7 @@
             <label for="agb_accepted" class="font-medium text-gray-400 select-none">
               Ich habe die
               <a target="_blank" rel="noreferrer,noopener" href class="underline">AGBs</a> gelesen und akzeptiert.
+              <span class="font-bold">*</span>
             </label>
           </div>
         </div>

From 9d970b02b8a7ab54109fc3df2c652d01e0c99a8e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 18:10:26 +0100
Subject: [PATCH 05/48] =?UTF-8?q?=F0=9F=90=9E=20fix=20for=20address=20subm?=
 =?UTF-8?q?itting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index a51cb4b..9bf7738 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -234,10 +234,10 @@ function login() {
       }
       if (provide_address.value === true) {
         postdata.address = {
-          address1: userdetails.value.address.street,
-          address2: userdetails.value.address.address2 || "",
-          city: userdetails.value.address.city,
-          postalcode: userdetails.value.address.zipcode,
+          address1: userdetails.address.street,
+          address2: userdetails.address.address2 || "",
+          city: userdetails.address.city,
+          postalcode: userdetails.address.zipcode,
           country: "DE",
         }
       }

From b5eade9633fb88659cdfe882220db0579e39ada1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 18:31:19 +0100
Subject: [PATCH 06/48] =?UTF-8?q?=E2=9C=85=20added=20zipcode=20validation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 10 ++++++++--
 src/locales/de.json         |  1 +
 src/locales/en.json         |  1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 9bf7738..45a116a 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -149,9 +149,14 @@
                 :placeholder="[[$t('plz')]]"
                 id="postal_code"
                 autocomplete="postal-code"
+                :class="{ 'border-red-500': (!isPostalCode(userdetails.address.zipcode, 'DE')), 'border-green-300': (isPostalCode(userdetails.address.zipcode, 'DE')) }"
                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
+            <p
+              v-if="!isPostalCode(userdetails.address.zipcode, 'DE')"
+              class="text-sm"
+            >{{ $t('please_provide_a_valid_zipcode') }}</p>
           </div>
         </div>
         <div class="flex items-start mt-6">
@@ -206,6 +211,7 @@ import { computed, ref, reactive, watch } from "vue";
 import axios from "redaxios";
 import isEmail from 'validator/es/lib/isEmail';
 import isMobilePhone from 'validator/es/lib/isMobilePhone';
+import isPostalCode from 'validator/es/lib/isPostalCode';
 import { useToast } from "vue-toastification";
 
 let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } });
@@ -215,7 +221,7 @@ let agb_accepted = ref(false);
 const state = reactive({
   submit_enabled: computed(() => agb_accepted.value === true && isEmail(userdetails.value.mail)
     && userdetails.value.firstname
-    && userdetails.value.lastname && (provide_address.value === false || provide_address.value === true && (userdetails.value.address.street.trim() && userdetails.value.address.city.trim() && userdetails.value.address.zipcode.trim())))
+    && userdetails.value.lastname && (provide_address.value === false || provide_address.value === true && (userdetails.value.address.street.trim() && userdetails.value.address.city.trim() && isPostalCode(userdetails.value.address.zipcode, "DE"))))
 })
 const toast = useToast();
 function login() {
@@ -237,7 +243,7 @@ function login() {
           address1: userdetails.address.street,
           address2: userdetails.address.address2 || "",
           city: userdetails.address.city,
-          postalcode: userdetails.address.zipcode,
+          postalcode: isPostalCode(userdetails.address.zipcode),
           country: "DE",
         }
       }
diff --git a/src/locales/de.json b/src/locales/de.json
index 4ea8b12..53d3c90 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -8,6 +8,7 @@
     "nachname": "Nachname",
     "ort": "Ort",
     "phone_number": "Telefonnummer",
+    "please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",
     "please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
     "plz": "PLZ",
     "provide_address": "Adresse angeben?",
diff --git a/src/locales/en.json b/src/locales/en.json
index 4d4c680..b549331 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -8,6 +8,7 @@
     "nachname": "Lastname",
     "ort": "City",
     "phone_number": "Phone Number",
+    "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
     "please_provide_valid_mail": "Please provide a valid mail address.",
     "plz": "zipcode",
     "provide_address": "Provide a postal address?",

From 3404fc06bf8e7163319680991f8d98208869478c Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 18:42:00 +0100
Subject: [PATCH 07/48] =?UTF-8?q?=F0=9F=90=9E=20Register=20-=20display=20e?=
 =?UTF-8?q?rror=20state=20for=20empty=20+=20required=20address=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 45a116a..68a25ef 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -91,7 +91,7 @@
             <div class="ml-3 text-sm">
               <label
                 for="address_activated"
-                class="font-medium text-gray-400"
+                class="font-medium text-gray-400 select-none"
               >{{ $t('provide_address') }}</label>
             </div>
           </div>
@@ -108,6 +108,7 @@
                 :placeholder="[[$t('strasse')]]"
                 id="street"
                 autocomplete="street-address"
+                :class="{ 'border-red-500': (!userdetails.address.street.trim()), 'border-green-300': (userdetails.address.street.trim()) }"
                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
@@ -134,6 +135,7 @@
                 name="city"
                 :placeholder="[[$t('ort')]]"
                 id="city"
+                :class="{ 'border-red-500': (!userdetails.address.city.trim()), 'border-green-300': (userdetails.address.city.trim()) }"
                 class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>

From 43ee4b51f9973a20fbb2f4f7774763f5c089b0e1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 18:45:37 +0100
Subject: [PATCH 08/48] =?UTF-8?q?=F0=9F=90=9E=20Register=20-=20fix=20zipco?=
 =?UTF-8?q?de=20submitting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 68a25ef..921ea5b 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -245,7 +245,7 @@ function login() {
           address1: userdetails.address.street,
           address2: userdetails.address.address2 || "",
           city: userdetails.address.city,
-          postalcode: isPostalCode(userdetails.address.zipcode),
+          postalcode: userdetails.address.zipcode,
           country: "DE",
         }
       }

From e633ad6cea5d1fe8596cb67319ca7da7548bc770 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 17:18:34 +0100
Subject: [PATCH 09/48] =?UTF-8?q?=E2=9C=A8=20Register=20-=20invalid=20phon?=
 =?UTF-8?q?e=20number=20error=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 4 ++++
 src/locales/de.json         | 1 +
 src/locales/en.json         | 1 +
 3 files changed, 6 insertions(+)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 921ea5b..02345bf 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -75,6 +75,10 @@
           :class="{ 'border-red-500': (!isMobilePhone(userdetails.phone) && userdetails.phone.trim()), 'border-green-300': (isMobilePhone(userdetails.phone) && userdetails.phone.trim()) }"
           class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2"
         />
+        <p
+          v-if="(!isMobilePhone(userdetails.phone) && userdetails.phone.trim())"
+          class="text-sm"
+        >{{ $t('this_is_not_a_valid_international_phone_number') }}</p>
         <!--  -->
         <div class="grid grid-cols-6 mt-6">
           <div class="col-span-6"></div>
diff --git a/src/locales/de.json b/src/locales/de.json
index 53d3c90..198b5a6 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -18,6 +18,7 @@
     "register_now": "Jetzt registrieren!",
     "registrieren": "Registrieren",
     "strasse": "Straße",
+    "this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
     "view_my_data": "Meine Läuferdaten einsehen",
     "vorname": "Vorname"
 }
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index b549331..a8c8b44 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -18,6 +18,7 @@
     "register_now": "Register now!",
     "registrieren": "Register Now",
     "strasse": "Street/ Block",
+    "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
     "view_my_data": "View my data",
     "vorname": "Firstname"
 }
\ No newline at end of file

From e8583340c761663067aa51a4937d0795b75d21f1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 17:21:47 +0100
Subject: [PATCH 10/48] =?UTF-8?q?=E2=9C=A8=20Register=20-=20disable=20regi?=
 =?UTF-8?q?ster=20button=20when=20invalid=20phone=20number=20is=20set?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 02345bf..9622b5a 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -225,7 +225,7 @@ let provide_address = ref(false);
 let agb_accepted = ref(false);
 // 
 const state = reactive({
-  submit_enabled: computed(() => agb_accepted.value === true && isEmail(userdetails.value.mail)
+  submit_enabled: computed(() => agb_accepted.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && isEmail(userdetails.value.mail)
     && userdetails.value.firstname
     && userdetails.value.lastname && (provide_address.value === false || provide_address.value === true && (userdetails.value.address.street.trim() && userdetails.value.address.city.trim() && isPostalCode(userdetails.value.address.zipcode, "DE"))))
 })

From 2b9c454395a4789236878b7e2a77dc1fa230eafe Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 17:55:51 +0100
Subject: [PATCH 11/48] use new flex grid for responsive displaying action
 buttons

ref #6
---
 src/components/Profile.vue | 86 +++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 47 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index d5d0718..27cc3f3 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -1,50 +1,43 @@
 <template>
   <div class="min-h-screen w-full p-4">
-    <!-- <div class="section-title w-full mb-6 pt-3">
-      <div class="flex flex-row items-center justify-between mb-4">
-        <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-gray-500">Pages</div>
-          <div class="text-xl font-bold">User profile</div>
+    <section class="text-white body-font">
+      <div class="container mx-auto flex items-center md:flex-row flex-col">
+        <div
+          class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center"
+        >
+          <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
+          <p class="text-md text-gray-200 whitespace-nowrap">Musterfirma > PR</p>
+        </div>
+        <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
+          <button
+            type="button"
+            class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="feather feather-download"
+              style="display: inline;height: 1rem;vertical-align: sub;"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg> Urkunde herunterladen
+          </button>
+          <button
+            type="button"
+            class="inline-flex focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
+          >Änderungen speichern</button>
         </div>
       </div>
-    </div>
-    <div
-      class="w-full p-4 mb-4 rounded-lg bg-white border border-gray-100 dark:bg-gray-900 dark:border-gray-800"
-    >-->
-    <div class="flex flex-row items-center justify-start p-4">
-      <div class="py-2 px-2">
-        <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
-        <p class="text-md text-gray-500 whitespace-nowrap">Musterfirma > PR</p>
-      </div>
-      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
-        <button
-          type="button"
-          class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
-        >
-          <svg
-            style="display:inline;"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="feather feather-download"
-          >
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <polyline points="7 10 12 15 17 10" />
-            <line x1="12" y1="15" x2="12" y2="3" />
-          </svg> Urkunde herunterladen
-        </button>
-        <button
-          type="button"
-          class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
-        >Änderungen speichern</button>
-      </div>
-    </div>
+    </section>
     <div class="flex flex-wrap">
       <div class="w-full p-4">
         <div class="flex flex-wrap flex-col w-full tabs">
@@ -53,13 +46,13 @@
               <button
                 class="tab tab-underline tab-active py-4 px-6 block border-b-2 font-medium border-blue-500"
                 type="button"
-              >Mein Profil</button>
+              >Profil</button>
             </div>
             <div class="flex-none">
-              <button class="tab tab-underline py-4 px-6 block" type="button">Meine Rundenzeiten</button>
+              <button class="tab tab-underline py-4 px-6 block" type="button">Rundenzeiten</button>
             </div>
             <div class="flex-none">
-              <button class="tab tab-underline py-4 px-6 block" type="button">Meine Spender</button>
+              <button class="tab tab-underline py-4 px-6 block" type="button">Spender</button>
             </div>
           </div>
           <div class="tab-content block">
@@ -240,7 +233,6 @@
       </div>
     </div>
   </div>
-  <!-- </div> -->
 </template>
 
 <script setup>

From 13543c3cd2792b3f7829a2e0d5d64e73852d7feb Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 18:18:29 +0100
Subject: [PATCH 12/48] Profile - basic ui reactivity logic

ref #5
---
 src/components/Profile.vue | 175 +++++++++++--------------------------
 1 file changed, 52 insertions(+), 123 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index d5d0718..a80c71c 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -45,24 +45,37 @@
         >Änderungen speichern</button>
       </div>
     </div>
+    {{ activetab }}
     <div class="flex flex-wrap">
       <div class="w-full p-4">
         <div class="flex flex-wrap flex-col w-full tabs">
           <div class="flex lg:flex-wrap flex-row lg:space-x-2">
             <div class="flex-none">
               <button
-                class="tab tab-underline tab-active py-4 px-6 block border-b-2 font-medium border-blue-500"
+                @click="() => { activetab = 'profile' }"
+                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'profile') }"
+                class="tab tab-underline py-4 px-6 block"
                 type="button"
               >Mein Profil</button>
             </div>
             <div class="flex-none">
-              <button class="tab tab-underline py-4 px-6 block" type="button">Meine Rundenzeiten</button>
+              <button
+                @click="() => { activetab = 'laptimes' }"
+                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'laptimes') }"
+                class="tab tab-underline py-4 px-6 block"
+                type="button"
+              >Meine Rundenzeiten</button>
             </div>
             <div class="flex-none">
-              <button class="tab tab-underline py-4 px-6 block" type="button">Meine Spender</button>
+              <button
+                @click="() => { activetab = 'sponsorings' }"
+                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'sponsorings') }"
+                class="tab tab-underline py-4 px-6 block"
+                type="button"
+              >Meine Spender</button>
             </div>
           </div>
-          <div class="tab-content block">
+          <div v-if="(activetab === 'profile')" class="tab-content block">
             <div class="py-4 w-full">
               <div class="flex flex-col">
                 <form class="form flex flex-wrap w-full">
@@ -117,134 +130,50 @@
               </div>
             </div>
           </div>
-          <div class="tab-content hidden">
-            <div class="py-4 w-full lg:w-1/2">
-              <div class="flex flex-col">
-                <form class="form flex flex-wrap w-full">
-                  <div class="w-full">
-                    <div class="form-element">
-                      <div class="form-label">Current email</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="current email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">New email</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="new email address"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Daily updates</div>
-                      <div class="flex items-center justify-start space-x-2">
-                        <label class="flex items-center justify-start space-x-2">
-                          <input
-                            type="radio"
-                            name="daily-updates"
-                            class="form-radio h-4 w-4"
-                            value="yes"
-                          />
-                          <span class>Yes</span>
-                        </label>
-                        <label class="flex items-center justify-start space-x-2">
-                          <input
-                            type="radio"
-                            name="daily-updates"
-                            class="form-radio h-4 w-4"
-                            value="no"
-                          />
-                          <span class>No</span>
-                        </label>
-                      </div>
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Weekly updates</div>
-                      <div class="flex items-center justify-start space-x-2">
-                        <label class="flex items-center justify-start space-x-2">
-                          <input
-                            type="radio"
-                            name="weekle-updates"
-                            class="form-radio h-4 w-4"
-                            value="yes"
-                          />
-                          <span class>Yes</span>
-                        </label>
-                        <label class="flex items-center justify-start space-x-2">
-                          <input
-                            type="radio"
-                            name="weekle-updates"
-                            class="form-radio h-4 w-4"
-                            value="no"
-                          />
-                          <span class>No</span>
-                        </label>
-                      </div>
-                    </div>
+          <div v-if="(activetab === 'laptimes')" class="tab-content block">
+            <div class="py-4 w-full">
+              <section class="text-gray-400 bg-gray-900 body-font">
+                <div class="container px-5 mx-auto">
+                  <div class="lg:w-2/3 w-screen mx-auto overflow-auto">
+                    <table class="table-auto w-full text-left whitespace-no-wrap">
+                      <thead>
+                        <tr>
+                          <th
+                            class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl"
+                          >Distanz</th>
+                          <th
+                            class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800"
+                          >Rundenzeit</th>
+                          <th
+                            class="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"
+                          ></th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">1000m</td>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">2min / 120s</td>
+                        </tr>
+                      </tbody>
+                    </table>
                   </div>
-                  <input
-                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                  />
-                </form>
-              </div>
-            </div>
-          </div>
-          <div class="tab-content hidden">
-            <div class="py-4 w-full lg:w-1/2">
-              <div class="flex flex-col">
-                <form class="form flex flex-wrap w-full">
-                  <div class="w-full">
-                    <div class="form-element">
-                      <div class="form-label">Current password</div>
-                      <input
-                        name="current-password"
-                        type="password"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="Enter your current password"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">New password</div>
-                      <input
-                        name="new-password"
-                        type="password"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="Enter your new password"
-                      />
-                    </div>
-                    <div class="form-element">
-                      <div class="form-label">Confirm new password</div>
-                      <input
-                        name="confirm-new-password"
-                        type="password"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="Enter your new password confirmation"
-                      />
-                    </div>
-                  </div>
-                  <input
-                    type="submit"
-                    class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
-                  />
-                </form>
-              </div>
+                </div>
+              </section>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <!-- </div> -->
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref, reactive, watch } from "vue";
 import axios from "redaxios";
-import Toastify from "toastify-js";
+import isEmail from 'validator/es/lib/isEmail';
+import isMobilePhone from 'validator/es/lib/isMobilePhone';
+import isPostalCode from 'validator/es/lib/isPostalCode';
+import { useToast } from "vue-toastification";
+// 
+let activetab = ref("profile");
 </script>
\ No newline at end of file

From e499357d6f151eaa8885ebfb78150e709ba4e753 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 18:19:58 +0100
Subject: [PATCH 13/48] added sponsorings tab

ref #5
---
 src/components/Profile.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index a80c71c..384ebeb 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -56,7 +56,7 @@
                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'profile') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
-              >Mein Profil</button>
+              >Profil</button>
             </div>
             <div class="flex-none">
               <button
@@ -64,7 +64,7 @@
                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'laptimes') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
-              >Meine Rundenzeiten</button>
+              >Rundenzeiten</button>
             </div>
             <div class="flex-none">
               <button
@@ -72,7 +72,7 @@
                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'sponsorings') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
-              >Meine Spender</button>
+              >Spender</button>
             </div>
           </div>
           <div v-if="(activetab === 'profile')" class="tab-content block">
@@ -161,6 +161,9 @@
               </section>
             </div>
           </div>
+          <div v-if="(activetab === 'sponsorings')" class="tab-content block">
+            <div class="py-4 w-full">coming soon...</div>
+          </div>
         </div>
       </div>
     </div>

From 7fa459b71b2bdd96d4a5104b5356441e1232e5e8 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 18:24:00 +0100
Subject: [PATCH 14/48] merge #6 into #5

---
 src/components/Profile.vue | 80 +++++++++++++++++---------------------
 1 file changed, 36 insertions(+), 44 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 384ebeb..16cbf1c 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -1,51 +1,43 @@
 <template>
   <div class="min-h-screen w-full p-4">
-    <!-- <div class="section-title w-full mb-6 pt-3">
-      <div class="flex flex-row items-center justify-between mb-4">
-        <div class="flex flex-col">
-          <div class="text-xs uppercase font-light text-gray-500">Pages</div>
-          <div class="text-xl font-bold">User profile</div>
+    <section class="text-white body-font">
+      <div class="container mx-auto flex items-center md:flex-row flex-col">
+        <div
+          class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center"
+        >
+          <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
+          <p class="text-md text-gray-200 whitespace-nowrap">Musterfirma > PR</p>
+        </div>
+        <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
+          <button
+            type="button"
+            class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="feather feather-download"
+              style="display: inline;height: 1rem;vertical-align: sub;"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg> Urkunde herunterladen
+          </button>
+          <button
+            type="button"
+            class="inline-flex focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
+          >Änderungen speichern</button>
         </div>
       </div>
-    </div>
-    <div
-      class="w-full p-4 mb-4 rounded-lg bg-white border border-gray-100 dark:bg-gray-900 dark:border-gray-800"
-    >-->
-    <div class="flex flex-row items-center justify-start p-4">
-      <div class="py-2 px-2">
-        <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
-        <p class="text-md text-gray-500 whitespace-nowrap">Musterfirma > PR</p>
-      </div>
-      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
-        <button
-          type="button"
-          class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
-        >
-          <svg
-            style="display:inline;"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="feather feather-download"
-          >
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <polyline points="7 10 12 15 17 10" />
-            <line x1="12" y1="15" x2="12" y2="3" />
-          </svg> Urkunde herunterladen
-        </button>
-        <button
-          type="button"
-          class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
-        >Änderungen speichern</button>
-      </div>
-    </div>
-    {{ activetab }}
+    </section>
     <div class="flex flex-wrap">
       <div class="w-full p-4">
         <div class="flex flex-wrap flex-col w-full tabs">

From 503aafba06d0d72fd980dedd9a56905c6673ce28 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 18:25:30 +0100
Subject: [PATCH 15/48] =?UTF-8?q?=E2=9C=A8=20Profile=20-=20lap=20times=20t?=
 =?UTF-8?q?able=20responsiveness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #5
---
 src/components/Profile.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 16cbf1c..ae1c538 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -125,8 +125,8 @@
           <div v-if="(activetab === 'laptimes')" class="tab-content block">
             <div class="py-4 w-full">
               <section class="text-gray-400 bg-gray-900 body-font">
-                <div class="container px-5 mx-auto">
-                  <div class="lg:w-2/3 w-screen mx-auto overflow-auto">
+                <div class="container mx-auto">
+                  <div class="lg:w-2/3 w-full mx-auto overflow-auto">
                     <table class="table-auto w-full text-left whitespace-no-wrap">
                       <thead>
                         <tr>

From b518730fab90927b111f1708b532c5eb34e2aee2 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 18:33:36 +0100
Subject: [PATCH 16/48] =?UTF-8?q?=F0=9F=8C=8E=20Profile=20-=20i18n=20compa?=
 =?UTF-8?q?tibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #5
---
 src/components/Profile.vue | 31 ++++++++++++++++---------------
 src/locales/de.json        |  5 +++++
 src/locales/en.json        |  5 +++++
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index ae1c538..f93818b 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -29,12 +29,13 @@
               <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
               <polyline points="7 10 12 15 17 10" />
               <line x1="12" y1="15" x2="12" y2="3" />
-            </svg> Urkunde herunterladen
+            </svg>
+            {{ $t('download_certificate') }}
           </button>
           <button
             type="button"
             class="inline-flex focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
-          >Änderungen speichern</button>
+          >{{ $t('save_changes') }}</button>
         </div>
       </div>
     </section>
@@ -48,7 +49,7 @@
                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'profile') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
-              >Profil</button>
+              >{{ $t('profile') }}</button>
             </div>
             <div class="flex-none">
               <button
@@ -56,7 +57,7 @@
                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'laptimes') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
-              >Rundenzeiten</button>
+              >{{ $t('lap_times') }}</button>
             </div>
             <div class="flex-none">
               <button
@@ -64,7 +65,7 @@
                 :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'sponsorings') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
-              >Spender</button>
+              >{{ $t('sponsoring') }}</button>
             </div>
           </div>
           <div v-if="(activetab === 'profile')" class="tab-content block">
@@ -73,48 +74,48 @@
                 <form class="form flex flex-wrap w-full">
                   <div class="w-full">
                     <div class="form-element">
-                      <div class="form-label">First name</div>
+                      <div class="form-label">{{ $t('vorname') }}</div>
                       <input
                         name="first-name"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                         type="text"
-                        placeholder="first name"
+                        :placeholder="[[$t('vorname')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">middle name</div>
+                      <div class="form-label">{{ $t('mittelname') }}</div>
                       <input
                         name="middle-name"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                         type="text"
-                        placeholder="middle name"
+                        :placeholder="[[$t('mittelname')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Last name</div>
+                      <div class="form-label">{{ $t('nachname') }}</div>
                       <input
                         name="last-name"
                         type="text"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="last name"
+                        :placeholder="[[$t('nachname')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">Email address</div>
+                      <div class="form-label">{{ $t('e_mail_adress') }}</div>
                       <input
                         name="email"
                         type="email"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="email address"
+                        :placeholder="[[$t('e_mail_adress')]]"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">phone number</div>
+                      <div class="form-label">{{ $t('phone_number') }}</div>
                       <input
                         name="tel"
                         type="tel"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        placeholder="phone number"
+                        :placeholder="[[$t('phone_number')]]"
                       />
                     </div>
                   </div>
diff --git a/src/locales/de.json b/src/locales/de.json
index 198b5a6..eefa775 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1,8 +1,10 @@
 {
     "already_have_an_account": "Sie haben bereits einen Account?",
     "apartment_suite_etc": "Addresszeile 2",
+    "download_certificate": "Urkunde herunterladen",
     "e_mail_adress": "E-Mail Adresse",
     "go_to_login": "Zum Login",
+    "lap_times": "Rundenzeiten",
     "main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
     "mittelname": "Mittelname",
     "nachname": "Nachname",
@@ -11,12 +13,15 @@
     "please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",
     "please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
     "plz": "PLZ",
+    "profile": "Profil",
     "provide_address": "Adresse angeben?",
     "register": {
         "register_now": "Jetzt für den Lauf für Kaya! 2021 registrieren."
     },
     "register_now": "Jetzt registrieren!",
     "registrieren": "Registrieren",
+    "save_changes": "Änderungen speichern",
+    "sponsoring": "Sponsoring",
     "strasse": "Straße",
     "this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
     "view_my_data": "Meine Läuferdaten einsehen",
diff --git a/src/locales/en.json b/src/locales/en.json
index a8c8b44..1dead48 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,8 +1,10 @@
 {
     "already_have_an_account": "Already have an account?",
     "apartment_suite_etc": "Apartment, suite, etc.",
+    "download_certificate": "Download certificate",
     "e_mail_adress": "mail address",
     "go_to_login": "Go To Login",
+    "lap_times": "Lap times",
     "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
     "mittelname": "Middlename",
     "nachname": "Lastname",
@@ -11,12 +13,15 @@
     "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
     "please_provide_valid_mail": "Please provide a valid mail address.",
     "plz": "zipcode",
+    "profile": "Profile",
     "provide_address": "Provide a postal address?",
     "register": {
         "register_now": "Register now for Lauf für Kaya! 2021."
     },
     "register_now": "Register now!",
     "registrieren": "Register Now",
+    "save_changes": "Save changes",
+    "sponsoring": "Sponsoring",
     "strasse": "Street/ Block",
     "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
     "view_my_data": "View my data",

From cf5c279eacde5d62b62c030b21ba51caad56eac4 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 18:35:41 +0100
Subject: [PATCH 17/48] =?UTF-8?q?=F0=9F=8C=8E=20translation=20for=20lap=20?=
 =?UTF-8?q?times=20+=20distance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #6
---
 src/components/Profile.vue | 4 ++--
 src/locales/de.json        | 2 ++
 src/locales/en.json        | 2 ++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index f93818b..7e9cc95 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -133,10 +133,10 @@
                         <tr>
                           <th
                             class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl"
-                          >Distanz</th>
+                          >{{ $t('distance') }}</th>
                           <th
                             class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800"
-                          >Rundenzeit</th>
+                          >{{ $t('lap_time') }}</th>
                           <th
                             class="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"
                           ></th>
diff --git a/src/locales/de.json b/src/locales/de.json
index eefa775..36c48b1 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1,9 +1,11 @@
 {
     "already_have_an_account": "Sie haben bereits einen Account?",
     "apartment_suite_etc": "Addresszeile 2",
+    "distance": "Disttanz",
     "download_certificate": "Urkunde herunterladen",
     "e_mail_adress": "E-Mail Adresse",
     "go_to_login": "Zum Login",
+    "lap_time": "Rundenzeit",
     "lap_times": "Rundenzeiten",
     "main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
     "mittelname": "Mittelname",
diff --git a/src/locales/en.json b/src/locales/en.json
index 1dead48..d5b6ac7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,9 +1,11 @@
 {
     "already_have_an_account": "Already have an account?",
     "apartment_suite_etc": "Apartment, suite, etc.",
+    "distance": "Distance",
     "download_certificate": "Download certificate",
     "e_mail_adress": "mail address",
     "go_to_login": "Go To Login",
+    "lap_time": "Lap time",
     "lap_times": "Lap times",
     "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
     "mittelname": "Middlename",

From c8bf0b2685f1e0db4df5e4ce405268865775eb41 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 18:39:51 +0100
Subject: [PATCH 18/48] added more example laps

ref #5
---
 src/components/Profile.vue | 16 ++++++++++++++--
 src/locales/de.json        |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 7e9cc95..ba9429c 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -144,8 +144,20 @@
                       </thead>
                       <tbody>
                         <tr>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">1000m</td>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">2min / 120s</td>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">0min 57s</td>
+                        </tr>
+                        <tr>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">1min 15s</td>
+                        </tr>
+                        <tr>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">2min 50s</td>
+                        </tr>
+                        <tr>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
+                          <td class="border-t-2 border-gray-800 px-4 py-3">3min 00s</td>
                         </tr>
                       </tbody>
                     </table>
diff --git a/src/locales/de.json b/src/locales/de.json
index 36c48b1..7f924ad 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1,7 +1,7 @@
 {
     "already_have_an_account": "Sie haben bereits einen Account?",
     "apartment_suite_etc": "Addresszeile 2",
-    "distance": "Disttanz",
+    "distance": "Distanz",
     "download_certificate": "Urkunde herunterladen",
     "e_mail_adress": "E-Mail Adresse",
     "go_to_login": "Zum Login",

From 747c1d2a906ed46325b999ebc0f079265ad81eeb Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Wed, 3 Mar 2021 18:20:53 +0100
Subject: [PATCH 19/48] =?UTF-8?q?=E2=9C=A8=20basic=20env.js=20file=20for?=
 =?UTF-8?q?=20api=20baseurl,=20documentserver=5Fkey?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #3
---
 .gitignore                  | 3 ++-
 index.html                  | 1 +
 public/env.sample.js        | 6 ++++++
 src/components/Register.vue | 2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 public/env.sample.js

diff --git a/.gitignore b/.gitignore
index dc24894..979299d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -182,4 +182,5 @@ docs/_book
 test/
 
 /package-lock.json
-/yarn.lock
\ No newline at end of file
+/yarn.lock
+/public/env.js
\ No newline at end of file
diff --git a/index.html b/index.html
index 8a98ae3..2e151b8 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
 
 <body class="dark:bg-gray-900 text-black dark:text-white p-0">
   <div id="app"></div>
+  <script src="/env.js"></script>
   <script type="module" src="/src/main.js"></script>
 </body>
 
diff --git a/public/env.sample.js b/public/env.sample.js
new file mode 100644
index 0000000..fc95691
--- /dev/null
+++ b/public/env.sample.js
@@ -0,0 +1,6 @@
+const config = {
+	documentserver_key: '',
+	baseurl: '',
+	url_imprint: '',
+	url_privacy: ''
+};
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 9622b5a..a8a6673 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -254,7 +254,7 @@ function login() {
         }
       }
       toast("registration in progress...");
-      axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register', postdata)
+      axios.post(`${config.baseurl}api/runners/register`, postdata)
         .then((response) => {
           response = response.data;
           const token = response.token;

From 5a5261d6b0d4adc62c100a29cebd07d25b89028d Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Wed, 3 Mar 2021 19:14:26 +0100
Subject: [PATCH 20/48] basic markdown rendering + routing for /imprint and
 /privacy

ref #3
---
 package.json               |  1 +
 public/imprint_en.md       |  1 +
 public/privacy_en.md       |  1 +
 src/components/Footer.vue  | 14 ++++++++++++--
 src/components/Imprint.vue | 38 ++++++++++++++++++++++++++++++++++++++
 src/components/Privacy.vue | 38 ++++++++++++++++++++++++++++++++++++++
 src/components/simple.css  |  1 +
 src/locales/en.json        |  2 ++
 src/main.js                |  4 ++++
 9 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 public/imprint_en.md
 create mode 100644 public/privacy_en.md
 create mode 100644 src/components/Imprint.vue
 create mode 100644 src/components/Privacy.vue
 create mode 100644 src/components/simple.css

diff --git a/package.json b/package.json
index 0b17e76..db9b0fc 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "got": "^11.8.2",
+    "marked": "^2.0.1",
     "redaxios": "^0.4.1",
     "toastify-js": "^1.9.3",
     "validator": "^13.5.2",
diff --git a/public/imprint_en.md b/public/imprint_en.md
new file mode 100644
index 0000000..12e65a1
--- /dev/null
+++ b/public/imprint_en.md
@@ -0,0 +1 @@
+TODO: 
\ No newline at end of file
diff --git a/public/privacy_en.md b/public/privacy_en.md
new file mode 100644
index 0000000..12e65a1
--- /dev/null
+++ b/public/privacy_en.md
@@ -0,0 +1 @@
+TODO: 
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 168f42f..96b88f6 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -14,16 +14,26 @@
         <a
           target="_blank"
           rel="noopener,noreferrer"
-          href="/impressum/"
+          :href="[[imprint_url]]"
           class="ml-3 text-gray-400 underline"
         >Impressum</a>
         <a
           target="_blank"
           rel="noopener,noreferrer"
-          href="/datenschutz/"
+          :href="[[privacy_url]]"
           class="ml-3 text-gray-400 underline"
         >Datenschutzerklärung</a>
       </span>
     </div>
   </footer>
 </template>
+<script>
+export default {
+  data() {
+    return {
+      imprint_url: config.url_imprint || "/imprint/"
+      , privacy_url: config.url_privacy || "/privacy/"
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Imprint.vue b/src/components/Imprint.vue
new file mode 100644
index 0000000..8fa9046
--- /dev/null
+++ b/src/components/Imprint.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="container px-4 py-24 mx-auto">
+    <div class="simplecontent">
+      <div class="mb-24 text-left md:text-center">
+        <h1
+          class="mb-4 text-4xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-5xl"
+        >{{$t('imprint')}}</h1>
+      </div>
+      <div class="mx-auto prose" v-html="content"></div>
+    </div>
+  </section>
+</template>
+<style src="./simple.css">
+</style>
+<script>
+import marked from "marked";
+export default {
+  data() {
+    return {
+      content: ""
+    }
+  },
+  async beforeMount() {
+    const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2);
+    let md = "";
+    try {
+      md = await fetch(`/imprint_${browserlocale}.md`);
+    } catch (error) {
+      try {
+        md = await fetch(`/imprint_en.md`);
+      } catch (error) {
+        md = "Error loading Imprint";
+      }
+    }
+    this.content = marked(await md.text());
+  },
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Privacy.vue b/src/components/Privacy.vue
new file mode 100644
index 0000000..94394c8
--- /dev/null
+++ b/src/components/Privacy.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="container px-4 py-24 mx-auto">
+    <div class="simplecontent">
+      <div class="mb-24 text-left md:text-center">
+        <h1
+          class="mb-4 text-4xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-5xl"
+        >{{ $t('privacy_policy') }}</h1>
+      </div>
+      <div class="mx-auto prose" v-html="content"></div>
+    </div>
+  </section>
+</template>
+<style src="./simple.css">
+</style>
+<script>
+import marked from "marked";
+export default {
+  data() {
+    return {
+      content: ""
+    }
+  },
+  async beforeMount() {
+    const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2);
+    let md = "";
+    try {
+      md = await fetch(`/privacy_${browserlocale}.md`);
+    } catch (error) {
+      try {
+        md = await fetch(`/privacy_en.md`);
+      } catch (error) {
+        md = "Error loading Privacy Policy";
+      }
+    }
+    this.content = marked(await md.text());
+  },
+}
+</script>
\ No newline at end of file
diff --git a/src/components/simple.css b/src/components/simple.css
new file mode 100644
index 0000000..671acf9
--- /dev/null
+++ b/src/components/simple.css
@@ -0,0 +1 @@
+.simplecontent *{margin:0;padding:0}.simplecontent address,.simplecontent area,.simplecontent article,.simplecontent aside,.simplecontent audio,.simplecontent blockquote,.simplecontent datalist,.simplecontent details,.simplecontent dl,.simplecontent fieldset,.simplecontent figure,.simplecontent form,.simplecontent iframe,.simplecontent img,.simplecontent input,.simplecontent meter,.simplecontent nav,.simplecontent ol,.simplecontent optgroup,.simplecontent option,.simplecontent output,.simplecontent p,.simplecontent pre,.simplecontent progress,.simplecontent ruby,.simplecontent section,.simplecontent table,.simplecontent textarea,.simplecontent ul,.simplecontent video{margin-bottom:1rem}.simplecontent button,.simplecontent html,.simplecontent input,.simplecontent select{font-family:var(--nc-font-sans)}.simplecontent body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}.simplecontent h1,.simplecontent h2,.simplecontent h3,.simplecontent h4,.simplecontent h5,.simplecontent h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}.simplecontent h1,.simplecontent h2,.simplecontent h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}.simplecontent h4,.simplecontent h5,.simplecontent h6{margin-bottom:.3rem}.simplecontent h1{font-size:2.25rem}.simplecontent h2{font-size:1.85rem}.simplecontent h3{font-size:1.55rem}.simplecontent h4{font-size:1.25rem}.simplecontent h5{font-size:1rem}.simplecontent h6{font-size:.875rem}.simplecontent a{color:#3d5af1}.simplecontent a:hover{color:var(--nc-lk-2)}.simplecontent abbr:hover{cursor:help}.simplecontent blockquote{padding:1.5rem;background:#ddd;border-left:5px solid var(--nc-bg-3)}.simplecontent abbr{cursor:help}.simplecontent blockquote :last-child{padding-bottom:0;margin-bottom:0}.simplecontent header{background:#ddd;border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}.simplecontent header h1,.simplecontent header h2,.simplecontent header h3{padding-bottom:0;border-bottom:0}.simplecontent header>:first-child{margin-top:0;padding-top:0}.simplecontent header>:last-child{margin-bottom:0}.simplecontent a button,.simplecontent button,.simplecontent input[type=button],.simplecontent input[type=reset],.simplecontent input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:#3d5af1;color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}.simplecontent a button[disabled],.simplecontent button[disabled],.simplecontent input[type=button][disabled],.simplecontent input[type=reset][disabled],.simplecontent input[type=submit][disabled]{cursor:default;opacity:.5;cursor:not-allowed}.simplecontent .button:focus,.simplecontent .button:hover,.simplecontent button:focus,.simplecontent button:hover,.simplecontent input[type=button]:focus,.simplecontent input[type=button]:hover,.simplecontent input[type=reset]:focus,.simplecontent input[type=reset]:hover,.simplecontent input[type=submit]:focus,.simplecontent input[type=submit]:hover{background:var(--nc-lk-2)}.simplecontent code,.simplecontent kbd,.simplecontent pre,.simplecontent samp{font-family:var(--nc-font-mono)}.simplecontent code,.simplecontent kbd,.simplecontent pre,.simplecontent samp{background:#ddd;border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}.simplecontent kbd{border-bottom:3px solid var(--nc-bg-3)}.simplecontent pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}.simplecontent pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}.simplecontent code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}.simplecontent details{padding:.6rem 1rem;background:#ddd;border:1px solid var(--nc-bg-3);border-radius:4px}.simplecontent summary{cursor:pointer;font-weight:700}.simplecontent details[open]{padding-bottom:.75rem}.simplecontent details[open] summary{margin-bottom:6px}.simplecontent details[open]>:last-child{margin-bottom:0}.simplecontent dt{font-weight:700}.simplecontent dd::before{content:"→ "}.simplecontent hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}.simplecontent fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}.simplecontent legend{padding:auto .5rem}.simplecontent table{border-collapse:collapse;width:100%}.simplecontent td,.simplecontent th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}.simplecontent th{background:#ddd}.simplecontent tr:nth-child(even){background:#ddd}.simplecontent table caption{font-weight:700;margin-bottom:.5rem}.simplecontent textarea{max-width:100%}.simplecontent ol,.simplecontent ul{padding-left:2rem}.simplecontent li{margin-top:.4rem}.simplecontent ol ol,.simplecontent ol ul,.simplecontent ul ol,.simplecontent ul ul{margin-bottom:0}.simplecontent mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}.simplecontent input,.simplecontent select,.simplecontent textarea{padding:6px 12px;margin-bottom:.5rem;background:#ddd;color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}.simplecontent img{max-width:100%}.simplecontent blockquote{background:#ececec;}.simplecontent ol{list-style-type: decimal;} .simplecontent ul{list-style-type: circle;}
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index d5b6ac7..70b0021 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -5,6 +5,7 @@
     "download_certificate": "Download certificate",
     "e_mail_adress": "mail address",
     "go_to_login": "Go To Login",
+    "imprint": "Imprint",
     "lap_time": "Lap time",
     "lap_times": "Lap times",
     "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
@@ -15,6 +16,7 @@
     "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
     "please_provide_valid_mail": "Please provide a valid mail address.",
     "plz": "zipcode",
+    "privacy_policy": "Privacy Policy",
     "profile": "Profile",
     "provide_address": "Provide a postal address?",
     "register": {
diff --git a/src/main.js b/src/main.js
index 78f8eb0..59bcfe3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,6 +22,8 @@ const i18n = createI18n({
 
 // ---------------
 const Home = import('./components/Home.vue');
+const Imprint = import('./components/Imprint.vue');
+const Privacy = import('./components/Privacy.vue');
 const Register = import('./components/Register.vue');
 const Profile = import('./components/Profile.vue');
 //
@@ -29,6 +31,8 @@ const router = createRouter({
 	history: createWebHistory(),
 	routes: [
 		{ path: '/', component: Home },
+		{ path: '/imprint', component: Imprint },
+		{ path: '/privacy', component: Privacy },
 		{ path: '/register', component: Register },
 		{ path: '/profile', component: Profile }
 	]

From 20229ab14252e20ffb3ac0e3e8b9d8f7f31819a3 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Thu, 4 Mar 2021 17:09:47 +0100
Subject: [PATCH 21/48] fallback for env config errors

ref #3
---
 src/components/EnvError.vue |  7 +++++++
 src/main.js                 | 15 +++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 src/components/EnvError.vue

diff --git a/src/components/EnvError.vue b/src/components/EnvError.vue
new file mode 100644
index 0000000..5e5e93a
--- /dev/null
+++ b/src/components/EnvError.vue
@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+// 
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 59bcfe3..a733e63 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,21 +21,28 @@ const i18n = createI18n({
 });
 
 // ---------------
+const EnvError = import('./components/EnvError.vue');
 const Home = import('./components/Home.vue');
 const Imprint = import('./components/Imprint.vue');
 const Privacy = import('./components/Privacy.vue');
 const Register = import('./components/Register.vue');
 const Profile = import('./components/Profile.vue');
 //
-const router = createRouter({
-	history: createWebHistory(),
-	routes: [
+let routes = [];
+if (config.baseurl && config.documentserver_key) {
+	routes = [
 		{ path: '/', component: Home },
 		{ path: '/imprint', component: Imprint },
 		{ path: '/privacy', component: Privacy },
 		{ path: '/register', component: Register },
 		{ path: '/profile', component: Profile }
-	]
+	];
+} else {
+	routes = [ { path: '/*', component: EnvError } ];
+}
+const router = createRouter({
+	history: createWebHistory(),
+	routes
 });
 // ---------------
 createApp(App).use(Toast).use(i18n).use(router).mount('#app');

From c92d5bf5f2ff7642e2a55abe0002ff94f2d64d3e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Thu, 4 Mar 2021 19:56:17 +0100
Subject: [PATCH 22/48] added ui for configuration errors page

ref #3
---
 src/components/EnvError.vue | 34 ++++++++++++++++++++++++++++------
 src/locales/de.json         |  5 +++++
 src/locales/en.json         |  3 +++
 src/main.js                 |  2 +-
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/EnvError.vue b/src/components/EnvError.vue
index 5e5e93a..c326305 100644
--- a/src/components/EnvError.vue
+++ b/src/components/EnvError.vue
@@ -1,7 +1,29 @@
 <template>
-  <div></div>
-</template>
-
-<script setup>
-// 
-</script>
\ No newline at end of file
+  <section class="container px-4 py-32 mx-auto">
+    <div class="w-full mx-auto lg:w-1/3">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="h-20 feather feather-alert-triangle"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"
+        />
+      </svg>
+      <p
+        class="mt-5 mb-3 text-xl font-bold text-black dark:text-gray-50 md:text-2xl"
+      >{{ $t('configuration_error') }}</p>
+      <p class="mb-3 text-base font-medium text-gray-700 dark:text-gray-400">
+        {{ $t('the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help') }}
+        <br />
+        <br />
+        {{ $t('if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance') }}
+      </p>
+    </div>
+  </section>
+</template>
\ No newline at end of file
diff --git a/src/locales/de.json b/src/locales/de.json
index 7f924ad..f71699c 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1,10 +1,13 @@
 {
     "already_have_an_account": "Sie haben bereits einen Account?",
     "apartment_suite_etc": "Addresszeile 2",
+    "configuration_error": "Konfigurationsfehler",
     "distance": "Distanz",
     "download_certificate": "Urkunde herunterladen",
     "e_mail_adress": "E-Mail Adresse",
     "go_to_login": "Zum Login",
+    "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "Wenn Sie der Systemadministrator sind, finden Sie Konfigurationsanweisungen in der offiziellen Produktdokumentation / README.",
+    "imprint": "Impressum",
     "lap_time": "Rundenzeit",
     "lap_times": "Rundenzeiten",
     "main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
@@ -15,6 +18,7 @@
     "please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",
     "please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
     "plz": "PLZ",
+    "privacy_policy": "Datenschutzerklärung",
     "profile": "Profil",
     "provide_address": "Adresse angeben?",
     "register": {
@@ -25,6 +29,7 @@
     "save_changes": "Änderungen speichern",
     "sponsoring": "Sponsoring",
     "strasse": "Straße",
+    "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "Das System ist nicht richtig konfiguriert. Bitte wenden Sie sich an den Systemadministrator, um Hilfe zu erhalten.",
     "this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
     "view_my_data": "Meine Läuferdaten einsehen",
     "vorname": "Vorname"
diff --git a/src/locales/en.json b/src/locales/en.json
index 70b0021..7ce8dba 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,10 +1,12 @@
 {
     "already_have_an_account": "Already have an account?",
     "apartment_suite_etc": "Apartment, suite, etc.",
+    "configuration_error": "Configuration error",
     "distance": "Distance",
     "download_certificate": "Download certificate",
     "e_mail_adress": "mail address",
     "go_to_login": "Go To Login",
+    "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "If you are the system administrator, please refer to the official product documentation/ README for configuration guidance.",
     "imprint": "Imprint",
     "lap_time": "Lap time",
     "lap_times": "Lap times",
@@ -27,6 +29,7 @@
     "save_changes": "Save changes",
     "sponsoring": "Sponsoring",
     "strasse": "Street/ Block",
+    "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "The system is not properly configured. Please contact the system administrator for help.",
     "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
     "view_my_data": "View my data",
     "vorname": "Firstname"
diff --git a/src/main.js b/src/main.js
index a733e63..993a4aa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,7 +38,7 @@ if (config.baseurl && config.documentserver_key) {
 		{ path: '/profile', component: Profile }
 	];
 } else {
-	routes = [ { path: '/*', component: EnvError } ];
+	routes = [ { path: '/', component: EnvError } ];
 }
 const router = createRouter({
 	history: createWebHistory(),

From 987ac4d02cf63af5acdcc60f0ee2ec54534773cb Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 5 Mar 2021 18:47:15 +0100
Subject: [PATCH 23/48] =?UTF-8?q?=F0=9F=90=9E=20bugfix=20for=20non-existan?=
 =?UTF-8?q?t=20env.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #3
---
 src/main.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/main.js b/src/main.js
index 993a4aa..bd77f66 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,17 +28,17 @@ const Privacy = import('./components/Privacy.vue');
 const Register = import('./components/Register.vue');
 const Profile = import('./components/Profile.vue');
 //
-let routes = [];
-if (config.baseurl && config.documentserver_key) {
-	routes = [
-		{ path: '/', component: Home },
-		{ path: '/imprint', component: Imprint },
-		{ path: '/privacy', component: Privacy },
-		{ path: '/register', component: Register },
-		{ path: '/profile', component: Profile }
-	];
-} else {
-	routes = [ { path: '/', component: EnvError } ];
+let routes = [ { path: '/', component: EnvError } ];
+if (typeof config !== 'undefined') {
+	if (config.baseurl && config.documentserver_key) {
+		routes = [
+			{ path: '/', component: Home },
+			{ path: '/imprint', component: Imprint },
+			{ path: '/privacy', component: Privacy },
+			{ path: '/register', component: Register },
+			{ path: '/profile', component: Profile }
+		];
+	}
 }
 const router = createRouter({
 	history: createWebHistory(),

From 4c78712f83565f21f3cdee2168f9221e2a007951 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 5 Mar 2021 18:59:21 +0100
Subject: [PATCH 24/48] =?UTF-8?q?=F0=9F=93=83=20updated=20README?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #3
---
 README.md            | 21 ++++++++++++++++++++-
 public/env.sample.js |  4 ++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ca13970..5eda5c2 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,22 @@
 # @lfk/selfservice
 
-runner selfservice portal
\ No newline at end of file
+runner selfservice portal
+
+## ⚡ Development
+### Requirements
+- Node.js v14.15.0 or newer
+- yarn package manager >= v1.22.10 < 2
+
+### Recommended Extensions
+- will be automatically recommended via `./vscode/extensions.json`
+- we also provide a config for i18n-ally in the `./vscode/` folder
+
+### Fastest Dev Environment
+- You can install the [Remote - Containers](https://github.com/Microsoft/vscode-remote-release) extension and use all recommended extensions and editor settings via the provided `./devcontainer/` config
+
+## 🔨 environment config
+- copy the `/public/env.sample.js` file to `/public/env.js`
+- set the required environment variables
+  - `documentserver_key`: url to the [document server](https://git.odit.services/lfk/document-server) instance
+  - `baseurl`: url to the main instance
+  - see [@lfk/deployment](https://git.odit.services/lfk/deployment) for a complete deployment guide
\ No newline at end of file
diff --git a/public/env.sample.js b/public/env.sample.js
index fc95691..1852851 100644
--- a/public/env.sample.js
+++ b/public/env.sample.js
@@ -1,6 +1,10 @@
 const config = {
+	// required
 	documentserver_key: '',
+	// required
 	baseurl: '',
+	// optional, will fallback to /imprint
 	url_imprint: '',
+	// optional, will fallback to /privacy
 	url_privacy: ''
 };

From 335109285912a4df16d4f0aea90c0ba054089762 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 5 Mar 2021 19:27:44 +0100
Subject: [PATCH 25/48] fix accessibility in Profile component

---
 src/components/Profile.vue | 43 +++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index ba9429c..0f883f1 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -3,10 +3,10 @@
     <section class="text-white body-font">
       <div class="container mx-auto flex items-center md:flex-row flex-col">
         <div
-          class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center"
+          class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center text-black dark:text-gray-200"
         >
           <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
-          <p class="text-md text-gray-200 whitespace-nowrap">Musterfirma > PR</p>
+          <p class="text-md whitespace-nowrap">Musterfirma > PR</p>
         </div>
         <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
           <button
@@ -125,39 +125,38 @@
           </div>
           <div v-if="(activetab === 'laptimes')" class="tab-content block">
             <div class="py-4 w-full">
-              <section class="text-gray-400 bg-gray-900 body-font">
+              <section class="text-gray-400 dark:bg-gray-900 body-font">
                 <div class="container mx-auto">
                   <div class="lg:w-2/3 w-full mx-auto overflow-auto">
                     <table class="table-auto w-full text-left whitespace-no-wrap">
-                      <thead>
+                      <thead
+                        class="text-black bg-gray-300 dark:text-white text-sm dark:bg-gray-800"
+                      >
                         <tr>
                           <th
-                            class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl"
+                            class="px-4 py-3 title-font tracking-wider font-medium"
                           >{{ $t('distance') }}</th>
                           <th
-                            class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800"
+                            class="px-4 py-3 title-font tracking-wider font-medium"
                           >{{ $t('lap_time') }}</th>
-                          <th
-                            class="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"
-                          ></th>
                         </tr>
                       </thead>
-                      <tbody>
-                        <tr>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">0min 57s</td>
+                      <tbody class="text-gray-900 dark:text-gray-50">
+                        <tr class="border-t-2 border-gray-800">
+                          <td class="px-4 py-3">400m</td>
+                          <td class="px-4 py-3">0min 57s</td>
                         </tr>
-                        <tr>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">1min 15s</td>
+                        <tr class="border-t-2 border-gray-800">
+                          <td class="px-4 py-3">400m</td>
+                          <td class="px-4 py-3">1min 15s</td>
                         </tr>
-                        <tr>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">2min 50s</td>
+                        <tr class="border-t-2 border-gray-800">
+                          <td class="px-4 py-3">1km</td>
+                          <td class="px-4 py-3">2min 50s</td>
                         </tr>
-                        <tr>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">3min 00s</td>
+                        <tr class="border-t-2 border-gray-800">
+                          <td class="px-4 py-3">1km</td>
+                          <td class="px-4 py-3">3min 00s</td>
                         </tr>
                       </tbody>
                     </table>

From f8ceec492d720ced359da9001088bf691cb8c28f Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 13:21:43 +0100
Subject: [PATCH 26/48] =?UTF-8?q?=E2=9C=A8=20Profile=20-=20basic=20parsing?=
 =?UTF-8?q?=20for=20hash=20based=20query=20params?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #10
---
 src/components/Profile.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 0f883f1..9af3209 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -175,7 +175,7 @@
 </template>
 
 <script setup>
-import { computed, ref, reactive, watch } from "vue";
+import { computed, ref, reactive, watch, defineProps } from "vue";
 import axios from "redaxios";
 import isEmail from 'validator/es/lib/isEmail';
 import isMobilePhone from 'validator/es/lib/isMobilePhone';
@@ -183,4 +183,6 @@ import isPostalCode from 'validator/es/lib/isPostalCode';
 import { useToast } from "vue-toastification";
 // 
 let activetab = ref("profile");
+const token = location.hash.substr(1).split('&')[0].split('=')[1];
+console.log(token);
 </script>
\ No newline at end of file

From ac9f1ba2aca43d38d67604a4f6e77c5b29a670af Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 13:30:05 +0100
Subject: [PATCH 27/48] routing import fix

ref #10
---
 src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index bd77f66..188d3ff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,7 +26,7 @@ const Home = import('./components/Home.vue');
 const Imprint = import('./components/Imprint.vue');
 const Privacy = import('./components/Privacy.vue');
 const Register = import('./components/Register.vue');
-const Profile = import('./components/Profile.vue');
+const Profile = () => import('./components/Profile.vue');
 //
 let routes = [ { path: '/', component: EnvError } ];
 if (typeof config !== 'undefined') {

From 0929f2bbc7037106bc6c9a4c948f51c59148a10b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 13:30:23 +0100
Subject: [PATCH 28/48] Profile - fetch user profile data from api

ref #10
---
 src/components/Profile.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 9af3209..9ee3205 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -80,6 +80,7 @@
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                         type="text"
                         :placeholder="[[$t('vorname')]]"
+                        v-model="state.firstname"
                       />
                     </div>
                     <div class="form-element">
@@ -89,6 +90,7 @@
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                         type="text"
                         :placeholder="[[$t('mittelname')]]"
+                        v-model="state.middlename"
                       />
                     </div>
                     <div class="form-element">
@@ -98,6 +100,7 @@
                         type="text"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                         :placeholder="[[$t('nachname')]]"
+                        v-model="state.lastname"
                       />
                     </div>
                     <div class="form-element">
@@ -107,6 +110,7 @@
                         type="email"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                         :placeholder="[[$t('e_mail_adress')]]"
+                        v-model="state.email"
                       />
                     </div>
                     <div class="form-element">
@@ -116,6 +120,7 @@
                         type="tel"
                         class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
                         :placeholder="[[$t('phone_number')]]"
+                        v-model="state.phone"
                       />
                     </div>
                   </div>
@@ -176,13 +181,30 @@
 
 <script setup>
 import { computed, ref, reactive, watch, defineProps } from "vue";
+import { useToast } from "vue-toastification";
 import axios from "redaxios";
 import isEmail from 'validator/es/lib/isEmail';
 import isMobilePhone from 'validator/es/lib/isMobilePhone';
 import isPostalCode from 'validator/es/lib/isPostalCode';
-import { useToast } from "vue-toastification";
 // 
+const state = reactive({
+  phone: "",
+  email: "",
+  firstname: "",
+  middlename: "",
+  lastname: "",
+})
 let activetab = ref("profile");
+const toast = useToast();
 const token = location.hash.substr(1).split('&')[0].split('=')[1];
-console.log(token);
+axios.get(`${config.baseurl}api/runners/me/${token}`)
+  .then(({ data }) => {
+    state.phone = data.phone;
+    state.email = data.email;
+    state.firstname = data.firstname;
+    state.middlename = data.middlename;
+    state.lastname = data.lastname;
+  }).catch((error) => {
+    toast.error("An error occured while loading your profile data");
+  })
 </script>
\ No newline at end of file

From b30277b617c1329702cb538b7e98d98929ca2346 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 13:46:25 +0100
Subject: [PATCH 29/48] display user name in Profile title

ref #10
---
 src/components/Profile.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 9ee3205..ccf280d 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -5,7 +5,10 @@
         <div
           class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center text-black dark:text-gray-200"
         >
-          <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
+          <p
+            class="text-3xl font-bold whitespace-nowrap"
+            v-text="(state.firstname || '') + ' ' + (state.middlename || '') + ' ' + (state.lastname || '')"
+          ></p>
           <p class="text-md whitespace-nowrap">Musterfirma > PR</p>
         </div>
         <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">

From 8205c11bd9a38c49608b0641dd89df22f492efd0 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 13:49:56 +0100
Subject: [PATCH 30/48] Profile - remove form styling. data is not editable yet

ref #10
---
 src/components/Profile.vue | 63 +++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 39 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index ccf280d..7d60dcf 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -77,53 +77,38 @@
                 <form class="form flex flex-wrap w-full">
                   <div class="w-full">
                     <div class="form-element">
-                      <div class="form-label">{{ $t('vorname') }}</div>
-                      <input
-                        name="first-name"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        type="text"
-                        :placeholder="[[$t('vorname')]]"
-                        v-model="state.firstname"
+                      <div class="text-lg">{{ $t('vorname') }}</div>
+                      <p
+                        class="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"
+                        v-text="state.firstname"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('mittelname') }}</div>
-                      <input
-                        name="middle-name"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        type="text"
-                        :placeholder="[[$t('mittelname')]]"
-                        v-model="state.middlename"
+                      <div class="text-lg">{{ $t('mittelname') }}</div>
+                      <p
+                        class="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"
+                        v-text="state.middlename"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('nachname') }}</div>
-                      <input
-                        name="last-name"
-                        type="text"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        :placeholder="[[$t('nachname')]]"
-                        v-model="state.lastname"
+                      <div class="text-lg">{{ $t('nachname') }}</div>
+                      <p
+                        class="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"
+                        v-text="state.lastname"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('e_mail_adress') }}</div>
-                      <input
-                        name="email"
-                        type="email"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        :placeholder="[[$t('e_mail_adress')]]"
-                        v-model="state.email"
+                      <div class="text-lg">{{ $t('e_mail_adress') }}</div>
+                      <p
+                        class="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"
+                        v-text="state.email"
                       />
                     </div>
                     <div class="form-element">
-                      <div class="form-label">{{ $t('phone_number') }}</div>
-                      <input
-                        name="tel"
-                        type="tel"
-                        class="w-full dark:bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
-                        :placeholder="[[$t('phone_number')]]"
-                        v-model="state.phone"
+                      <div class="text-lg">{{ $t('phone_number') }}</div>
+                      <p
+                        class="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"
+                        v-text="state.phone"
                       />
                     </div>
                   </div>
@@ -183,12 +168,12 @@
 </template>
 
 <script setup>
-import { computed, ref, reactive, watch, defineProps } from "vue";
+import { ref, reactive } from "vue";
 import { useToast } from "vue-toastification";
 import axios from "redaxios";
-import isEmail from 'validator/es/lib/isEmail';
-import isMobilePhone from 'validator/es/lib/isMobilePhone';
-import isPostalCode from 'validator/es/lib/isPostalCode';
+// import isEmail from 'validator/es/lib/isEmail';
+// import isMobilePhone from 'validator/es/lib/isMobilePhone';
+// import isPostalCode from 'validator/es/lib/isPostalCode';
 // 
 const state = reactive({
   phone: "",

From 14369480ea23e8b0af8548596a6bf3d331de13e5 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 14:04:29 +0100
Subject: [PATCH 31/48] basic lap/ scans ui

ref #11
---
 src/components/Profile.vue | 33 +++++++++---------
 src/locales/en.json        | 71 +++++++++++++++++++-------------------
 2 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 7d60dcf..7a3fb7a 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -121,7 +121,10 @@
               <section class="text-gray-400 dark:bg-gray-900 body-font">
                 <div class="container mx-auto">
                   <div class="lg:w-2/3 w-full mx-auto overflow-auto">
-                    <table class="table-auto w-full text-left whitespace-no-wrap">
+                    <table
+                      v-if="state.scans.length > 0"
+                      class="table-auto w-full text-left whitespace-no-wrap"
+                    >
                       <thead
                         class="text-black bg-gray-300 dark:text-white text-sm dark:bg-gray-800"
                       >
@@ -135,24 +138,15 @@
                         </tr>
                       </thead>
                       <tbody class="text-gray-900 dark:text-gray-50">
-                        <tr class="border-t-2 border-gray-800">
-                          <td class="px-4 py-3">400m</td>
-                          <td class="px-4 py-3">0min 57s</td>
-                        </tr>
-                        <tr class="border-t-2 border-gray-800">
-                          <td class="px-4 py-3">400m</td>
-                          <td class="px-4 py-3">1min 15s</td>
-                        </tr>
-                        <tr class="border-t-2 border-gray-800">
-                          <td class="px-4 py-3">1km</td>
-                          <td class="px-4 py-3">2min 50s</td>
-                        </tr>
-                        <tr class="border-t-2 border-gray-800">
-                          <td class="px-4 py-3">1km</td>
-                          <td class="px-4 py-3">3min 00s</td>
+                        <tr v-for="s in state.scans" :key="s.id">
+                          <td class="px-4 py-3">s.distance</td>
+                          <td class="px-4 py-3">s.time</td>
                         </tr>
                       </tbody>
                     </table>
+                    <div v-else class="text-center font-bold text-black dark:text-white text-2xl">
+                      {{ $t('no_laps_scans_were_recorded_yet') }}
+                    </div>
                   </div>
                 </div>
               </section>
@@ -181,6 +175,7 @@ const state = reactive({
   firstname: "",
   middlename: "",
   lastname: "",
+  scans: []
 })
 let activetab = ref("profile");
 const toast = useToast();
@@ -195,4 +190,10 @@ axios.get(`${config.baseurl}api/runners/me/${token}`)
   }).catch((error) => {
     toast.error("An error occured while loading your profile data");
   })
+axios.get(`${config.baseurl}api/runners/me/${token}/scans`)
+  .then(({ data }) => {
+    state.scans = data;
+  }).catch((error) => {
+    toast.error("An error occured while loading your profile data");
+  })
 </script>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 7ce8dba..e134b50 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,36 +1,37 @@
 {
-    "already_have_an_account": "Already have an account?",
-    "apartment_suite_etc": "Apartment, suite, etc.",
-    "configuration_error": "Configuration error",
-    "distance": "Distance",
-    "download_certificate": "Download certificate",
-    "e_mail_adress": "mail address",
-    "go_to_login": "Go To Login",
-    "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "If you are the system administrator, please refer to the official product documentation/ README for configuration guidance.",
-    "imprint": "Imprint",
-    "lap_time": "Lap time",
-    "lap_times": "Lap times",
-    "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
-    "mittelname": "Middlename",
-    "nachname": "Lastname",
-    "ort": "City",
-    "phone_number": "Phone Number",
-    "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
-    "please_provide_valid_mail": "Please provide a valid mail address.",
-    "plz": "zipcode",
-    "privacy_policy": "Privacy Policy",
-    "profile": "Profile",
-    "provide_address": "Provide a postal address?",
-    "register": {
-        "register_now": "Register now for Lauf für Kaya! 2021."
-    },
-    "register_now": "Register now!",
-    "registrieren": "Register Now",
-    "save_changes": "Save changes",
-    "sponsoring": "Sponsoring",
-    "strasse": "Street/ Block",
-    "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "The system is not properly configured. Please contact the system administrator for help.",
-    "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
-    "view_my_data": "View my data",
-    "vorname": "Firstname"
-}
\ No newline at end of file
+  "already_have_an_account": "Already have an account?",
+  "apartment_suite_etc": "Apartment, suite, etc.",
+  "configuration_error": "Configuration error",
+  "distance": "Distance",
+  "download_certificate": "Download certificate",
+  "e_mail_adress": "mail address",
+  "go_to_login": "Go To Login",
+  "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "If you are the system administrator, please refer to the official product documentation/ README for configuration guidance.",
+  "imprint": "Imprint",
+  "lap_time": "Lap time",
+  "lap_times": "Lap times",
+  "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
+  "mittelname": "Middlename",
+  "nachname": "Lastname",
+  "ort": "City",
+  "phone_number": "Phone Number",
+  "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
+  "please_provide_valid_mail": "Please provide a valid mail address.",
+  "plz": "zipcode",
+  "privacy_policy": "Privacy Policy",
+  "profile": "Profile",
+  "provide_address": "Provide a postal address?",
+  "register": {
+    "register_now": "Register now for Lauf für Kaya! 2021."
+  },
+  "register_now": "Register now!",
+  "registrieren": "Register Now",
+  "save_changes": "Save changes",
+  "sponsoring": "Sponsoring",
+  "strasse": "Street/ Block",
+  "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "The system is not properly configured. Please contact the system administrator for help.",
+  "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
+  "view_my_data": "View my data",
+  "vorname": "Firstname",
+  "no_laps_scans_were_recorded_yet": "No laps/ scans were recorded yet..."
+}

From 49c3507a71a6ca212b0b8ade2b1945ea90db96bc Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 14:04:40 +0100
Subject: [PATCH 32/48] added empty state for scans

ref #11
---
 src/assets/empty_laps.svg  | 1 +
 src/components/Profile.vue | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 src/assets/empty_laps.svg

diff --git a/src/assets/empty_laps.svg b/src/assets/empty_laps.svg
new file mode 100644
index 0000000..17ed002
--- /dev/null
+++ b/src/assets/empty_laps.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="M307.18 117.6c21.3 1.09 42.83 9.39 57.52 22 46.68 39.91 40.22 110.84 5.81 156.19-33.82 44.58-91.54 70.06-147.13 68a153 153 0 01-48.79-9.79c-27.05-10.33-62.88-30.25-73.29-59.11-12.52-34.72 23.7-41.72 47.84-32.89 19.42 7.12 39 19.43 60.05 9.57 23.33-10.91 35.2-36.06 36.4-60.82 1.3-26.77-13.13-55.71 10.43-77.1 13.63-12.33 32.31-17.01 51.16-16.05z" fill="#407bff"/><path d="M307.18 117.6c21.3 1.09 42.83 9.39 57.52 22 46.68 39.91 40.22 110.84 5.81 156.19-33.82 44.58-91.54 70.06-147.13 68a153 153 0 01-48.79-9.79c-27.05-10.33-62.88-30.25-73.29-59.11-12.52-34.72 23.7-41.72 47.84-32.89 19.42 7.12 39 19.43 60.05 9.57 23.33-10.91 35.2-36.06 36.4-60.82 1.3-26.77-13.13-55.71 10.43-77.1 13.63-12.33 32.31-17.01 51.16-16.05z" fill="#fff" opacity=".9"/><ellipse cx="250" cy="416.24" rx="193.89" ry="11.32" fill="#f5f5f5"/><path fill="#407bff" d="M259.8 382.52H79.91L63.12 316H243l16.8 66.52z"/><path fill="#407bff" d="M242.79 316H62.9l-16.8 66.52h179.89l16.8-66.52z"/><path style="isolation:isolate" fill="#fff" opacity=".6" d="M242.79 316H62.9l-16.8 66.52h179.89l16.8-66.52z"/><path fill="#407bff" d="M449.92 382.52H270.03L253.24 316h179.88l16.8 66.52z"/><path fill="#407bff" d="M432.91 316H253.02l-16.8 66.52h179.89l16.8-66.52z"/><path style="isolation:isolate" fill="#fff" opacity=".6" d="M432.91 316H253.02l-16.8 66.52h179.89l16.8-66.52z"/><g><path d="M266 176a11.19 11.19 0 00-11.52-6.35c-9 .83-17.67 12.16-25.83 9.83S221.5 172 221.5 172s-3 7.39 7.17 13.6 24-9.46 35.48-4.8z" fill="#2e353a"/><path d="M266 176a14.65 14.65 0 00-12.52-9.39c-9.62-.75-15.25 11.41-22.62 9.39" fill="none" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-width=".48"/><path d="M288.12 189.65s3.42-14.12-8.43-17-17.19 4.1-19.19 11.79 3 18.4 13.77 16.63 13.42-8.07 13.85-11.42z" fill="#2e353a"/><path d="M292.51 211.59c9.74-4.53 22.54-14.45 22.3-18.06s-10.06-27.9-10.06-27.9a7.65 7.65 0 01-2.26-1.08c-1-.72-2.17-9.66-.72-10.14a44.09 44.09 0 017.49-1.21c1.2 0 .72 8 .24 9.9 0 0 15.58 21.72 14.55 32.12s-25.18 28.47-33.63 31 2.09-14.63 2.09-14.63zM186.81 329.9l2.76-5.88 8.63 2.88 7.92 2.66-2.14 7.51-9.1-3.79-8.07-3.38z" fill="#e4897b"/><path d="M190.54 322.94c.64.32-3.61 8-3.61 8s-7.29 2.56-10.64 6.79-5 .23-2.46-5.09l6.17-13.11c1.79-3.78 3.89.1 10.54 3.41z" fill="#2e353a"/><path d="M183.72 335.61a.55.55 0 01-.18 0 .84.84 0 01-.76-.59c-.28-1.1 2.2-3.2 2.7-3.61a.19.19 0 01.1-.05.34.34 0 01.14.05c.07.07 1.61 1.61 1.55 2.9a1.37 1.37 0 01-.51 1 .8.8 0 01-.92.2c-.4-.22-.56-1-.6-1.79a3.62 3.62 0 01-1 1.69 1 1 0 01-.52.2zm1.55-3.43c-1.05.94-2.17 2.19-2 2.71 0 0 .05.18.4.25a.5.5 0 00.38-.1c.56-.42 1-1.88 1.22-2.86zm.54-.07c-.11 1.39 0 2.82.33 3 .1.06.29-.08.39-.16a.9.9 0 00.35-.68 3.92 3.92 0 00-1.07-2.16z" fill="#407bff"/><path style="isolation:isolate" opacity=".2" d="M194.7 333.19l3.34-6.36 8 2.69-2.1 7.53-9.24-3.86z"/><path d="M288.12 290.82c-3.62 15.68-19.81 69.19-45 67.19S199.5 342.15 199 335.83s1.44-9.8 7.72-9.82 24.71 5.64 32.74 5.07S255 296.41 255 296.41z" fill="#407bff"/><path d="M288.12 290.82c-3.62 15.68-19.81 69.19-45 67.19S199.5 342.15 199 335.83s1.44-9.8 7.72-9.82 24.71 5.64 32.74 5.07S255 296.41 255 296.41z" style="isolation:isolate" opacity=".4"/><path fill="#e4897b" d="M352.37 403.04l-5.97 2.58-4.56-7.88-4.18-7.23 6.58-4.21 4.3 8.86 3.83 7.88z"/><path d="M345 405.79c-.27-.66 8-3.64 8-3.64s7.15 2.91 12.47 2 3.87 3.11-1.53 5.44l-13.34 5.76c-3.84 1.65-2.85-2.68-5.6-9.56z" fill="#2e353a"/><path d="M355 402.91a5.6 5.6 0 00-.61.09h-.13a.68.68 0 01-.21-.11v-.08a.08.08 0 000-.06v-.06s.05-.06.05-.09c0-.09-.11-2.27.79-3.2a1.33 1.33 0 011.07-.42q.68 0 .84.45c.16.43-.23 1.1-.74 1.74a3.68 3.68 0 011.9-.59 1 1 0 01.67.36.93.93 0 01.18 1c-.48.81-2.69.97-3.81.97zm2.8-1.88a6.36 6.36 0 00-2.73 1.32c1.41 0 3.08-.21 3.33-.68 0 0 .08-.17-.13-.45a.47.47 0 00-.36-.18zm-1.87-2c-.27 0-.49.31-.67.5a4.1 4.1 0 00-.63 2.44c1-1 1.88-2.26 1.74-2.63a.6.6 0 00-.4-.31z" fill="#407bff"/><path style="isolation:isolate" opacity=".2" d="M348.62 395.35l-6.71 2.56-4.22-7.32 6.57-4.25 4.36 9.01z"/><path d="M257.71 259.72s-14 20.78-11.11 36.26c3.4 18.27 47.4 38.84 59.4 47.93s17.62 43.42 32.56 50l8.13-2.91s4.14-5.72 1.05-15.45c-13-40.8-23.74-60.3-59.62-84.73 0 0 2.36-19.78 1.37-29.8z" fill="#407bff"/><path d="M257.71 259.72s-14 20.78-11.11 36.26c3.4 18.27 47.4 38.84 59.4 47.93s17.62 43.42 32.56 50l8.13-2.91s4.14-5.72 1.05-15.45c-13-40.8-23.74-60.3-59.62-84.73 0 0 2.36-19.78 1.37-29.8z" style="isolation:isolate" opacity=".3"/><path d="M342.38 392.54l-2 .72c-4.54-5.78-8.25-16.2-12.14-27.14-4.13-11.59-8.4-23.57-13.43-28.33-3.5-3.31-11.26-8.52-20.25-14.56-18.35-12.33-39.16-26.3-40.55-34.82-1.47-9.06 3.16-22 5.93-28.6l2.14.09c-2.63 6.23-7.53 19.41-6.09 28.19 1.25 7.66 23.46 22.59 39.68 33.48 9.07 6.09 16.89 11.34 20.52 14.77 5.37 5.09 9.53 16.75 13.93 29.11 3.8 10.67 7.72 21.68 12.26 27.09z" fill="#407bff"/><path d="M288.12 290.82S280.75 286 271.5 280l13.5 5.41a55.44 55.44 0 004.71-19.48 236.85 236.85 0 01-1.59 24.89z" style="isolation:isolate" opacity=".1"/><path d="M257.71 259.72l32 3.28s7.63-29.4 7.82-54.08c0 0-12.26 4-23.28 2.66s-20.77-7.08-20.77-7.08 5.19 32.19 4.23 55.22z" fill="#2e353a"/><path d="M277.46 218c-7.62-2-9.53-5.58-9.53-5.58 5.51-4 2.45-12.57 2.45-12.57l9.11 2.93a26.07 26.07 0 00-.87 3.88c-.79 5.65 1.76 6 1.76 6 1.24 3.34-2.92 5.34-2.92 5.34z" fill="#e4897b"/><path d="M279.49 202.78a26.07 26.07 0 00-.87 3.88c-6.3-.81-8.24-6.81-8.24-6.81z" style="isolation:isolate" opacity=".2"/><path d="M277.66 176.05c8.16.59 10.47 5.15 10.46 13.6 0 10.57-2.88 17.87-12.93 14.89-13.64-4.06-11.09-29.47 2.47-28.49z" fill="#e4897b"/><path d="M282.88 188.82a16.91 16.91 0 002.13 3.55 2.26 2.26 0 01-2.22.77z" fill="#de5753"/><path d="M277.93 187.79c0 .67-.42 1.19-.87 1.17s-.78-.58-.75-1.25.42-1.2.87-1.18.82.58.75 1.26z" fill="#2e353a"/><path d="M277 186.55l1.49-.5s-.8 1.2-1.49.5zM286.29 188.05c0 .68-.43 1.2-.87 1.18s-.79-.58-.76-1.25.43-1.2.87-1.18.79.58.76 1.25z" fill="#2e353a"/><path d="M285.35 186.82l1.48-.5s-.78 1.19-1.48.5z" fill="#2e353a"/><path d="M278.26 182.14a4.27 4.27 0 00-3.63 1M284.21 182.23a3.84 3.84 0 013.21.9" fill="none" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-width=".696"/><path d="M281.37 196.27a19.93 19.93 0 00-1.16 2.76 4.34 4.34 0 01-.52-.09c-2.36-.41-3.32-1.38-3.67-2.33a3.25 3.25 0 01-.13-1.45 2.92 2.92 0 01.21-.81 11.4 11.4 0 004.46 1.76c.49.11.81.16.81.16z" fill="#2e353a"/><path d="M280.56 196.11l-.36.81c-2.22-.39-3.73-1-4.31-1.76a2.92 2.92 0 01.21-.81 11.4 11.4 0 004.46 1.76z" fill="#fff"/><path d="M279.69 198.94c-2.36-.41-3.32-1.38-3.67-2.33a7.62 7.62 0 012.53 1 2.85 2.85 0 011.14 1.33z" fill="#de5753"/><path d="M267.74 189.16s4.3-6.43 4.1-11.65c0 0 16.65-5.44 16.26 11 0 0 2.64-14.47-11.37-15.81s-15.43 19.2-8.63 25.84c0 .04-3.02-5.36-.36-9.38z" fill="#2e353a"/><path d="M269 191a3.59 3.59 0 00-3.62-3.55c-2.55.09-4.13 5.2 2.07 6.9.84.22 1.42-.62 1.55-3.35zM253.5 204.5s5.74 9.65 2.63 20.12c0 0-22.13-24.63-24.13-30.25s12.41-37.62 12.41-37.62-2.41-6.75-1.91-8.25 6.75-5 8.25-4 1 12 .25 13.5l-.75 1.5s-7.7 29-6.73 31.11 9.98 13.89 9.98 13.89z" fill="#e4897b"/><path d="M282.13 176s-8.76 13.12-20.39 11c0 0-.57-9.94 7.21-12.12a17.63 17.63 0 0113.18 1.12z" fill="#2e353a"/><path d="M280.56 176s3.65 5.48-6.29 9.11M284.37 175.61s4.19 3.84 5.92-1.66" fill="none" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-width=".48"/><path d="M292.09 252.66l.91-1.53s-1.12-.34-3.06-.79c.82-5.59 3.33-26.74-2.8-40.46l-1.14.87s2.84 4.35 3.13 12.88l-21.2-.13s-2.43-11.87-5.44-15.52l-.76.35a88.34 88.34 0 014.46 39.91 62 62 0 00-9.94 1.39l.81 1.5a123.63 123.63 0 0118-.72l11.14 1c1.97.34 3.96.74 5.89 1.25z" fill="#407bff"/><path d="M292.09 252.66l.91-1.53s-1.12-.34-3.06-.79c.82-5.59 3.33-26.74-2.8-40.46l-1.14.87s2.84 4.35 3.13 12.88l-21.2-.13s-2.43-11.87-5.44-15.52l-.76.35a88.34 88.34 0 014.46 39.91 62 62 0 00-9.94 1.39l.81 1.5a123.63 123.63 0 0118-.72l11.14 1c1.97.34 3.96.74 5.89 1.25z" style="isolation:isolate" fill="#fff" opacity=".6"/><path d="M279.51 239.12a4 4 0 01-.82 2.71 3.21 3.21 0 01-2.54.93 3.13 3.13 0 01-2.45-.91 3.73 3.73 0 01-.83-2.61v-.36H275v.5a1.46 1.46 0 00.31 1.07 1.11 1.11 0 00.83.31 1.13 1.13 0 00.9-.36 2.12 2.12 0 00.32-1.36v-2.56a2.07 2.07 0 01-2 1.24 2.13 2.13 0 01-1.83-.82 3.91 3.91 0 01-.61-2.38V232a3.68 3.68 0 01.86-2.61 3.83 3.83 0 015 0 3.68 3.68 0 01.86 2.61zm-3.34-3.4a1.11 1.11 0 00.83-.31 1.46 1.46 0 00.31-1.07v-2.52a1.44 1.44 0 00-.31-1.06 1.3 1.3 0 00-1.66 0 1.44 1.44 0 00-.31 1.06v2.52a1.46 1.46 0 00.31 1.07 1.11 1.11 0 00.83.31zM287.43 239.12a4 4 0 01-.82 2.71 3.21 3.21 0 01-2.54.93 3.13 3.13 0 01-2.45-.91 3.73 3.73 0 01-.83-2.61v-.36h2.08v.5a1.46 1.46 0 00.31 1.07 1.11 1.11 0 00.83.31 1.13 1.13 0 00.9-.36 2.12 2.12 0 00.32-1.36v-2.56a2.07 2.07 0 01-2 1.24 2.13 2.13 0 01-1.83-.82 3.91 3.91 0 01-.61-2.38V232a3.68 3.68 0 01.86-2.61 3.83 3.83 0 015 0 3.68 3.68 0 01.86 2.61zm-3.34-3.4a1.11 1.11 0 00.83-.31 1.46 1.46 0 00.31-1.07v-2.52a1.44 1.44 0 00-.31-1.06 1.3 1.3 0 00-1.66 0 1.44 1.44 0 00-.31 1.06v2.52a1.46 1.46 0 00.31 1.07 1.11 1.11 0 00.83.31z" fill="#407bff"/></g></svg>
\ No newline at end of file
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 7a3fb7a..cc1bdea 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -145,6 +145,11 @@
                       </tbody>
                     </table>
                     <div v-else class="text-center font-bold text-black dark:text-white text-2xl">
+                      <img
+                        src="../assets/empty_laps.svg"
+                        style="height:25rem;"
+                        :alt="[[$t('no_laps_scans_were_recorded_yet')]]"
+                      />
                       {{ $t('no_laps_scans_were_recorded_yet') }}
                     </div>
                   </div>

From 4fb9aee25586cc873f7e276fd44e41458b633b70 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 14:04:56 +0100
Subject: [PATCH 33/48] =?UTF-8?q?re-order=20language=20files=20?=
 =?UTF-8?q?=F0=9F=98=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #11
---
 src/locales/en.json | 72 ++++++++++++++++++++++-----------------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index e134b50..f1be63e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,37 +1,37 @@
 {
-  "already_have_an_account": "Already have an account?",
-  "apartment_suite_etc": "Apartment, suite, etc.",
-  "configuration_error": "Configuration error",
-  "distance": "Distance",
-  "download_certificate": "Download certificate",
-  "e_mail_adress": "mail address",
-  "go_to_login": "Go To Login",
-  "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "If you are the system administrator, please refer to the official product documentation/ README for configuration guidance.",
-  "imprint": "Imprint",
-  "lap_time": "Lap time",
-  "lap_times": "Lap times",
-  "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
-  "mittelname": "Middlename",
-  "nachname": "Lastname",
-  "ort": "City",
-  "phone_number": "Phone Number",
-  "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
-  "please_provide_valid_mail": "Please provide a valid mail address.",
-  "plz": "zipcode",
-  "privacy_policy": "Privacy Policy",
-  "profile": "Profile",
-  "provide_address": "Provide a postal address?",
-  "register": {
-    "register_now": "Register now for Lauf für Kaya! 2021."
-  },
-  "register_now": "Register now!",
-  "registrieren": "Register Now",
-  "save_changes": "Save changes",
-  "sponsoring": "Sponsoring",
-  "strasse": "Street/ Block",
-  "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "The system is not properly configured. Please contact the system administrator for help.",
-  "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
-  "view_my_data": "View my data",
-  "vorname": "Firstname",
-  "no_laps_scans_were_recorded_yet": "No laps/ scans were recorded yet..."
-}
+    "already_have_an_account": "Already have an account?",
+    "apartment_suite_etc": "Apartment, suite, etc.",
+    "configuration_error": "Configuration error",
+    "distance": "Distance",
+    "download_certificate": "Download certificate",
+    "e_mail_adress": "mail address",
+    "go_to_login": "Go To Login",
+    "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "If you are the system administrator, please refer to the official product documentation/ README for configuration guidance.",
+    "imprint": "Imprint",
+    "lap_time": "Lap time",
+    "lap_times": "Lap times",
+    "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
+    "mittelname": "Middlename",
+    "nachname": "Lastname",
+    "no_laps_scans_were_recorded_yet": "No laps/ scans were recorded yet...",
+    "ort": "City",
+    "phone_number": "Phone Number",
+    "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
+    "please_provide_valid_mail": "Please provide a valid mail address.",
+    "plz": "zipcode",
+    "privacy_policy": "Privacy Policy",
+    "profile": "Profile",
+    "provide_address": "Provide a postal address?",
+    "register": {
+        "register_now": "Register now for Lauf für Kaya! 2021."
+    },
+    "register_now": "Register now!",
+    "registrieren": "Register Now",
+    "save_changes": "Save changes",
+    "sponsoring": "Sponsoring",
+    "strasse": "Street/ Block",
+    "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "The system is not properly configured. Please contact the system administrator for help.",
+    "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
+    "view_my_data": "View my data",
+    "vorname": "Firstname"
+}
\ No newline at end of file

From cb3dc13c8acfeea3fad9ba9d5f9f6eade3e2310d Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 14:05:28 +0100
Subject: [PATCH 34/48] center empty state image

ref #11
---
 src/components/Profile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index cc1bdea..2d24e08 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -147,7 +147,7 @@
                     <div v-else class="text-center font-bold text-black dark:text-white text-2xl">
                       <img
                         src="../assets/empty_laps.svg"
-                        style="height:25rem;"
+                        style="height:25rem; margin:0 auto;"
                         :alt="[[$t('no_laps_scans_were_recorded_yet')]]"
                       />
                       {{ $t('no_laps_scans_were_recorded_yet') }}

From 69db350461231123796bc24a2452e6af47a7c83f Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 14:06:11 +0100
Subject: [PATCH 35/48] =?UTF-8?q?=F0=9F=8C=8E=20added=20missing=20translat?=
 =?UTF-8?q?ions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #11
---
 src/locales/de.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/locales/de.json b/src/locales/de.json
index f71699c..0dd38e4 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -13,6 +13,7 @@
     "main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
     "mittelname": "Mittelname",
     "nachname": "Nachname",
+    "no_laps_scans_were_recorded_yet": "Es wurden noch keine Runden / Scans aufgezeichnet ...",
     "ort": "Ort",
     "phone_number": "Telefonnummer",
     "please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",

From c8d462100a660e8edfd3bc46bd0c8abbd002f661 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 14:08:06 +0100
Subject: [PATCH 36/48] use api response object properly

ref #11
---
 src/components/Profile.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 2d24e08..8f566f8 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -139,8 +139,12 @@
                       </thead>
                       <tbody class="text-gray-900 dark:text-gray-50">
                         <tr v-for="s in state.scans" :key="s.id">
-                          <td class="px-4 py-3">s.distance</td>
-                          <td class="px-4 py-3">s.time</td>
+                          <td class="px-4 py-3">
+                            <span v-text="s.distance"></span>m
+                          </td>
+                          <td class="px-4 py-3">
+                            <span v-text="s.lapTime"></span>s
+                          </td>
                         </tr>
                       </tbody>
                     </table>
@@ -198,6 +202,7 @@ axios.get(`${config.baseurl}api/runners/me/${token}`)
 axios.get(`${config.baseurl}api/runners/me/${token}/scans`)
   .then(({ data }) => {
     state.scans = data;
+    // TODO: filter for valid=true scans only
   }).catch((error) => {
     toast.error("An error occured while loading your profile data");
   })

From ff1f43e235ba318008b9c408853231c809760304 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sun, 7 Mar 2021 14:22:03 +0100
Subject: [PATCH 37/48] format lap times + only display valid scans

ref #11
---
 src/components/Profile.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 8f566f8..2263b06 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -142,9 +142,7 @@
                           <td class="px-4 py-3">
                             <span v-text="s.distance"></span>m
                           </td>
-                          <td class="px-4 py-3">
-                            <span v-text="s.lapTime"></span>s
-                          </td>
+                          <td class="px-4 py-3" v-text="s.lapTime"></td>
                         </tr>
                       </tbody>
                     </table>
@@ -201,8 +199,12 @@ axios.get(`${config.baseurl}api/runners/me/${token}`)
   })
 axios.get(`${config.baseurl}api/runners/me/${token}/scans`)
   .then(({ data }) => {
+    data.map(function(s) {
+      s.lapTime = Math.floor(s.lapTime / 60) + 'min ' + (Math.floor(s.lapTime % 60) + "").padStart(2, "0") + "s"
+      return s;
+    })
+    data.filter(s => s.valid === true);
     state.scans = data;
-    // TODO: filter for valid=true scans only
   }).catch((error) => {
     toast.error("An error occured while loading your profile data");
   })

From d405557aafb205c958914c85bd69c364d107370c Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Mon, 8 Mar 2021 22:18:19 +0100
Subject: [PATCH 38/48] i18n support for TOS checkbox

ref #4
---
 src/components/Register.vue | 10 ++++++++--
 src/locales/de.json         |  3 +++
 src/locales/en.json         |  3 +++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index a8a6673..9de89c4 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -177,8 +177,14 @@
           </div>
           <div class="ml-3 text-sm">
             <label for="agb_accepted" class="font-medium text-gray-400 select-none">
-              Ich habe die
-              <a target="_blank" rel="noreferrer,noopener" href class="underline">AGBs</a> gelesen und akzeptiert.
+              {{ $t('i_accept', { tos: $t('tos') }) }}
+              <a
+                target="_blank"
+                rel="noreferrer,noopener"
+                href
+                class="underline"
+              >{{ $t('tos') }}</a>
+              {{ $t('i_accept_end') }}
               <span class="font-bold">*</span>
             </label>
           </div>
diff --git a/src/locales/de.json b/src/locales/de.json
index f71699c..da1e2a1 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -6,6 +6,8 @@
     "download_certificate": "Urkunde herunterladen",
     "e_mail_adress": "E-Mail Adresse",
     "go_to_login": "Zum Login",
+    "i_accept": "Ich habe die ",
+    "i_accept_end": "gelesen und akzeptiert.",
     "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "Wenn Sie der Systemadministrator sind, finden Sie Konfigurationsanweisungen in der offiziellen Produktdokumentation / README.",
     "imprint": "Impressum",
     "lap_time": "Rundenzeit",
@@ -31,6 +33,7 @@
     "strasse": "Straße",
     "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "Das System ist nicht richtig konfiguriert. Bitte wenden Sie sich an den Systemadministrator, um Hilfe zu erhalten.",
     "this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
+    "tos": "AGBs",
     "view_my_data": "Meine Läuferdaten einsehen",
     "vorname": "Vorname"
 }
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 7ce8dba..868a9bb 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -6,6 +6,8 @@
     "download_certificate": "Download certificate",
     "e_mail_adress": "mail address",
     "go_to_login": "Go To Login",
+    "i_accept": "I have read and accepted the ",
+    "i_accept_end": "",
     "if_you_are_the_system_administrator_please_refer_to_the_official_product_documentation_readme_for_configuration_guidance": "If you are the system administrator, please refer to the official product documentation/ README for configuration guidance.",
     "imprint": "Imprint",
     "lap_time": "Lap time",
@@ -31,6 +33,7 @@
     "strasse": "Street/ Block",
     "the_system_is_not_properly_configured_please_contact_the_system_administrator_for_help": "The system is not properly configured. Please contact the system administrator for help.",
     "this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
+    "tos": "Terms of Service",
     "view_my_data": "View my data",
     "vorname": "Firstname"
 }
\ No newline at end of file

From 641e7a0d8ff75ce5756d11f39b583f55731b821c Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Tue, 9 Mar 2021 17:27:48 +0100
Subject: [PATCH 39/48] Profile - display group

ref #10
---
 src/components/Profile.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 7d60dcf..2dc30c7 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -9,7 +9,7 @@
             class="text-3xl font-bold whitespace-nowrap"
             v-text="(state.firstname || '') + ' ' + (state.middlename || '') + ' ' + (state.lastname || '')"
           ></p>
-          <p class="text-md whitespace-nowrap">Musterfirma > PR</p>
+          <p class="text-md whitespace-nowrap">{{ state.group }}</p>
         </div>
         <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
           <button
@@ -48,30 +48,30 @@
           <div class="flex lg:flex-wrap flex-row lg:space-x-2">
             <div class="flex-none">
               <button
-                @click="() => { activetab = 'profile' }"
-                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'profile') }"
+                @click="() => { state.activetab = 'profile' }"
+                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (state.activetab === 'profile') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
               >{{ $t('profile') }}</button>
             </div>
             <div class="flex-none">
               <button
-                @click="() => { activetab = 'laptimes' }"
-                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'laptimes') }"
+                @click="() => { state.activetab = 'laptimes' }"
+                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (state.activetab === 'laptimes') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
               >{{ $t('lap_times') }}</button>
             </div>
             <div class="flex-none">
               <button
-                @click="() => { activetab = 'sponsorings' }"
-                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (activetab === 'sponsorings') }"
+                @click="() => { state.activetab = 'sponsorings' }"
+                :class="{ 'tab-active border-b-2 font-medium border-blue-500': (state.activetab === 'sponsorings') }"
                 class="tab tab-underline py-4 px-6 block"
                 type="button"
               >{{ $t('sponsoring') }}</button>
             </div>
           </div>
-          <div v-if="(activetab === 'profile')" class="tab-content block">
+          <div v-if="(state.activetab === 'profile')" class="tab-content block">
             <div class="py-4 w-full">
               <div class="flex flex-col">
                 <form class="form flex flex-wrap w-full">
@@ -116,7 +116,7 @@
               </div>
             </div>
           </div>
-          <div v-if="(activetab === 'laptimes')" class="tab-content block">
+          <div v-if="(state.activetab === 'laptimes')" class="tab-content block">
             <div class="py-4 w-full">
               <section class="text-gray-400 dark:bg-gray-900 body-font">
                 <div class="container mx-auto">
@@ -158,7 +158,7 @@
               </section>
             </div>
           </div>
-          <div v-if="(activetab === 'sponsorings')" class="tab-content block">
+          <div v-if="(state.activetab === 'sponsorings')" class="tab-content block">
             <div class="py-4 w-full">coming soon...</div>
           </div>
         </div>
@@ -181,8 +181,9 @@ const state = reactive({
   firstname: "",
   middlename: "",
   lastname: "",
+  group: "",
+  activetab: "profile",
 })
-let activetab = ref("profile");
 const toast = useToast();
 const token = location.hash.substr(1).split('&')[0].split('=')[1];
 axios.get(`${config.baseurl}api/runners/me/${token}`)
@@ -192,6 +193,7 @@ axios.get(`${config.baseurl}api/runners/me/${token}`)
     state.firstname = data.firstname;
     state.middlename = data.middlename;
     state.lastname = data.lastname;
+    state.group = data.group;
   }).catch((error) => {
     toast.error("An error occured while loading your profile data");
   })

From 56daa7c501e3f59e988f1912ed397e43d6311572 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Tue, 9 Mar 2021 17:39:20 +0100
Subject: [PATCH 40/48] fix fallback component routing for invalid env config

ref #10
---
 src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 188d3ff..0611093 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,7 +28,7 @@ const Privacy = import('./components/Privacy.vue');
 const Register = import('./components/Register.vue');
 const Profile = () => import('./components/Profile.vue');
 //
-let routes = [ { path: '/', component: EnvError } ];
+let routes = [ { path: '/:pathMatch(.*)*', component: EnvError } ];
 if (typeof config !== 'undefined') {
 	if (config.baseurl && config.documentserver_key) {
 		routes = [

From 36baf174a52e3a5ce21294f7d4e899d6893fd517 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Wed, 24 Mar 2021 17:38:51 +0100
Subject: [PATCH 41/48] =?UTF-8?q?=E2=8F=AB=20dependency=20bump?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index db9b0fc..97685c0 100644
--- a/package.json
+++ b/package.json
@@ -20,13 +20,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.1.5",
-    "@vue/compiler-sfc": "^3.0.6",
-    "autoprefixer": "^10.2.4",
-    "postcss": "^8.2.6",
-    "release-it": "^14.4.1",
-    "tailwindcss": "^2.0.3",
-    "vite": "^2.0.3",
-    "vite-plugin-windicss": "^0.5.4"
+    "@vue/compiler-sfc": "^3.0.7",
+    "autoprefixer": "^10.2.5",
+    "postcss": "^8.2.8",
+    "release-it": "^14.5.0",
+    "tailwindcss": "^2.0.4",
+    "vite": "^2.1.2",
+    "vite-plugin-windicss": "^0.9.11"
   },
   "release-it": {
     "git": {

From 18d1ddacf7e99e67e6572533ebd9add3d0c0592f Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Thu, 25 Mar 2021 19:29:37 +0100
Subject: [PATCH 42/48] basic /register/:token route

ref #15
---
 src/components/Register.vue | 16 +++++++++++++++-
 src/main.js                 |  1 +
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 9de89c4..dd2b3e9 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -219,16 +219,30 @@
 </template>
 
 <script setup>
-import { computed, ref, reactive, watch } from "vue";
+import { computed, ref, reactive, defineProps } from "vue";
 import axios from "redaxios";
 import isEmail from 'validator/es/lib/isEmail';
 import isMobilePhone from 'validator/es/lib/isMobilePhone';
 import isPostalCode from 'validator/es/lib/isPostalCode';
 import { useToast } from "vue-toastification";
 
+const props = defineProps({
+  token: String
+})
+if (props.token) {
+  axios.get(`${config.baseurl}api/organizations/selfservice/${props.token}`)
+    .then(({ data }) => {
+      console.log(data);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+}
+
 let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } });
 let provide_address = ref(false);
 let agb_accepted = ref(false);
+let firma = ref("");
 // 
 const state = reactive({
   submit_enabled: computed(() => agb_accepted.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && isEmail(userdetails.value.mail)
diff --git a/src/main.js b/src/main.js
index 0611093..5e25b3f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,6 +36,7 @@ if (typeof config !== 'undefined') {
 			{ path: '/imprint', component: Imprint },
 			{ path: '/privacy', component: Privacy },
 			{ path: '/register', component: Register },
+			{ path: '/register/:token', component: Register, props: true },
 			{ path: '/profile', component: Profile }
 		];
 	}

From 79d8545ed6b2e0e64ca02194bc7009b48d2c8f2d Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Thu, 25 Mar 2021 19:36:31 +0100
Subject: [PATCH 43/48] working path params for org registration

ref #15
---
 src/components/Register.vue | 12 ++++++++----
 src/main.js                 |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index dd2b3e9..fe95628 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -6,6 +6,10 @@
         class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center"
       >Lauf für Kaya! - {{ $t('registrieren') }}</h1>
       <p class="mx-auto leading-relaxed text-base text-center">{{ $t('register.register_now') }}</p>
+      <p
+        v-if="state.org_name !== ''"
+        class="mx-auto leading-relaxed text-base text-center"
+      >Organization: {{ state.org_name }}</p>
       <div class="mt-4">
         <label for="first_name" class="block font-medium">
           {{ $t('vorname') }}
@@ -233,6 +237,7 @@ if (props.token) {
   axios.get(`${config.baseurl}api/organizations/selfservice/${props.token}`)
     .then(({ data }) => {
       console.log(data);
+      state.org_name = data.name;
     })
     .catch((error) => {
       console.log(error);
@@ -242,9 +247,9 @@ if (props.token) {
 let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } });
 let provide_address = ref(false);
 let agb_accepted = ref(false);
-let firma = ref("");
 // 
 const state = reactive({
+  org_name: "",
   submit_enabled: computed(() => agb_accepted.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && isEmail(userdetails.value.mail)
     && userdetails.value.firstname
     && userdetails.value.lastname && (provide_address.value === false || provide_address.value === true && (userdetails.value.address.street.trim() && userdetails.value.address.city.trim() && isPostalCode(userdetails.value.address.zipcode, "DE"))))
@@ -275,9 +280,8 @@ function login() {
       }
       toast("registration in progress...");
       axios.post(`${config.baseurl}api/runners/register`, postdata)
-        .then((response) => {
-          response = response.data;
-          const token = response.token;
+        .then(({ data }) => {
+          const token = data.token;
           const userid = JSON.parse(atob(token.split(".")[1])).id;
           console.log({ token });
           console.log({ userid });
diff --git a/src/main.js b/src/main.js
index 5e25b3f..c2e9b13 100644
--- a/src/main.js
+++ b/src/main.js
@@ -25,7 +25,7 @@ const EnvError = import('./components/EnvError.vue');
 const Home = import('./components/Home.vue');
 const Imprint = import('./components/Imprint.vue');
 const Privacy = import('./components/Privacy.vue');
-const Register = import('./components/Register.vue');
+const Register = () => import('./components/Register.vue');
 const Profile = () => import('./components/Profile.vue');
 //
 let routes = [ { path: '/:pathMatch(.*)*', component: EnvError } ];

From a39cf75c7fc2e29a5a1a34a7db39355e59ce9476 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Thu, 25 Mar 2021 19:49:35 +0100
Subject: [PATCH 44/48] move profile to path param

ref #15
---
 src/components/Profile.vue  | 9 ++++++---
 src/components/Register.vue | 9 +++++----
 src/main.js                 | 2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 47fe1ff..1b6fdff 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -187,8 +187,11 @@ const state = reactive({
   activetab: "profile",
 })
 const toast = useToast();
-const token = location.hash.substr(1).split('&')[0].split('=')[1];
-axios.get(`${config.baseurl}api/runners/me/${token}`)
+const props = defineProps({
+  token: String
+})
+const accesstoken = atob(props.token);
+axios.get(`${config.baseurl}api/runners/me/${accesstoken}`)
   .then(({ data }) => {
     state.phone = data.phone;
     state.email = data.email;
@@ -199,7 +202,7 @@ axios.get(`${config.baseurl}api/runners/me/${token}`)
   }).catch((error) => {
     toast.error("An error occured while loading your profile data");
   })
-axios.get(`${config.baseurl}api/runners/me/${token}/scans`)
+axios.get(`${config.baseurl}api/runners/me/${accesstoken}/scans`)
   .then(({ data }) => {
     data.map(function(s) {
       s.lapTime = Math.floor(s.lapTime / 60) + 'min ' + (Math.floor(s.lapTime % 60) + "").padStart(2, "0") + "s"
diff --git a/src/components/Register.vue b/src/components/Register.vue
index fe95628..a490ad8 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -10,6 +10,7 @@
         v-if="state.org_name !== ''"
         class="mx-auto leading-relaxed text-base text-center"
       >Organization: {{ state.org_name }}</p>
+      <p v-else class="mx-auto leading-relaxed text-base text-center">Bürgerlauf</p>
       <div class="mt-4">
         <label for="first_name" class="block font-medium">
           {{ $t('vorname') }}
@@ -234,6 +235,7 @@ const props = defineProps({
   token: String
 })
 if (props.token) {
+  props.token = atob(props.token);
   axios.get(`${config.baseurl}api/organizations/selfservice/${props.token}`)
     .then(({ data }) => {
       console.log(data);
@@ -281,10 +283,9 @@ function login() {
       toast("registration in progress...");
       axios.post(`${config.baseurl}api/runners/register`, postdata)
         .then(({ data }) => {
-          const token = data.token;
-          const userid = JSON.parse(atob(token.split(".")[1])).id;
-          console.log({ token });
-          console.log({ userid });
+          const token = btoa(data.token);
+          // const userid = JSON.parse(atob(token.split(".")[1])).id;
+          location.replace("../profile/" + token)
           // 
           toast.success("You have been registered!");
         })
diff --git a/src/main.js b/src/main.js
index c2e9b13..05eae0f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -37,7 +37,7 @@ if (typeof config !== 'undefined') {
 			{ path: '/privacy', component: Privacy },
 			{ path: '/register', component: Register },
 			{ path: '/register/:token', component: Register, props: true },
-			{ path: '/profile', component: Profile }
+			{ path: '/profile/:token', component: Profile, props: true }
 		];
 	}
 }

From 7904151a52af1a1592706e6a468943c8e9c57518 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Thu, 25 Mar 2021 19:51:44 +0100
Subject: [PATCH 45/48] enable org registration

ref #15
---
 src/components/Login.vue     | 3 ---
 src/components/LoginForm.vue | 3 ---
 src/components/Register.vue  | 8 +++++---
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/Login.vue b/src/components/Login.vue
index ef0c89a..e1f680f 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -97,11 +97,8 @@ import Toastify from "toastify-js";
 let mail = ref("");
 let loading = ref(false);
 function login() {
-  console.log("ihi");
-  console.log(mail.value);
   loading.value = true;
   axios.get("").then((res) => {
-    console.log(res.data);
     loading.value = false;
     Toastify({
       text: "This is a toast",
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 9444c6e..49ed64b 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -97,11 +97,8 @@ import Toastify from "toastify-js";
 let mail = ref("");
 let loading = ref(false);
 function login() {
-  console.log("ihi");
-  console.log(mail.value);
   loading.value = true;
   axios.get("").then((res) => {
-    console.log(res.data);
     loading.value = false;
     Toastify({
       text: "This is a toast",
diff --git a/src/components/Register.vue b/src/components/Register.vue
index a490ad8..7394087 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -238,7 +238,6 @@ if (props.token) {
   props.token = atob(props.token);
   axios.get(`${config.baseurl}api/organizations/selfservice/${props.token}`)
     .then(({ data }) => {
-      console.log(data);
       state.org_name = data.name;
     })
     .catch((error) => {
@@ -281,10 +280,13 @@ function login() {
         }
       }
       toast("registration in progress...");
-      axios.post(`${config.baseurl}api/runners/register`, postdata)
+      let url = `${config.baseurl}api/runners/register`;
+      if (props.token) {
+        url = `${config.baseurl}api/runners/register/${props.token}`
+      }
+      axios.post(url, postdata)
         .then(({ data }) => {
           const token = btoa(data.token);
-          // const userid = JSON.parse(atob(token.split(".")[1])).id;
           location.replace("../profile/" + token)
           // 
           toast.success("You have been registered!");

From aca2dff1299ad837ba1e6984cebd543913d64e3d Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Fri, 26 Mar 2021 16:48:34 +0100
Subject: [PATCH 46/48] drop profile data editing

close #20
---
 src/components/Profile.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 1b6fdff..fc7c8f1 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -11,7 +11,7 @@
           ></p>
           <p class="text-md whitespace-nowrap">{{ state.group }}</p>
         </div>
-        <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
+        <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center">
           <button
             type="button"
             class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
@@ -35,10 +35,6 @@
             </svg>
             {{ $t('download_certificate') }}
           </button>
-          <button
-            type="button"
-            class="inline-flex focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
-          >{{ $t('save_changes') }}</button>
         </div>
       </div>
     </section>
@@ -79,35 +75,35 @@
                     <div class="form-element">
                       <div class="text-lg">{{ $t('vorname') }}</div>
                       <p
-                        class="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"
+                        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"
                         v-text="state.firstname"
                       />
                     </div>
                     <div class="form-element">
                       <div class="text-lg">{{ $t('mittelname') }}</div>
                       <p
-                        class="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"
+                        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"
                         v-text="state.middlename"
                       />
                     </div>
                     <div class="form-element">
                       <div class="text-lg">{{ $t('nachname') }}</div>
                       <p
-                        class="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"
+                        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"
                         v-text="state.lastname"
                       />
                     </div>
                     <div class="form-element">
                       <div class="text-lg">{{ $t('e_mail_adress') }}</div>
                       <p
-                        class="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"
+                        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"
                         v-text="state.email"
                       />
                     </div>
                     <div class="form-element">
                       <div class="text-lg">{{ $t('phone_number') }}</div>
                       <p
-                        class="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"
+                        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"
                         v-text="state.phone"
                       />
                     </div>

From aa287cf452e588a41ec0f74063dcbecdb08d476a Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Fri, 26 Mar 2021 17:47:50 +0100
Subject: [PATCH 47/48] add required confirmation of data on registration

---
 src/components/Register.vue | 20 +++++++++++++++++++-
 src/locales/de.json         |  1 +
 src/locales/en.json         |  1 +
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 7394087..99c8ba8 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -194,6 +194,23 @@
             </label>
           </div>
         </div>
+        <div class="flex items-start mt-6">
+          <div class="flex items-center h-5">
+            <input
+              v-model="data_confirmed"
+              id="data_confirmed"
+              name="data_confirmed"
+              type="checkbox"
+              class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+            />
+          </div>
+          <div class="ml-3 text-sm">
+            <label for="data_confirmed" class="font-medium text-gray-400 select-none">
+              {{ $t('confirm_personal_data') }}
+              <span class="font-bold">*</span>
+            </label>
+          </div>
+        </div>
         <div class="mt-6">
           <button
             @click="login"
@@ -248,10 +265,11 @@ if (props.token) {
 let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } });
 let provide_address = ref(false);
 let agb_accepted = ref(false);
+let data_confirmed = ref(false);
 // 
 const state = reactive({
   org_name: "",
-  submit_enabled: computed(() => agb_accepted.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && isEmail(userdetails.value.mail)
+  submit_enabled: computed(() => agb_accepted.value === true && data_confirmed.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && isEmail(userdetails.value.mail)
     && userdetails.value.firstname
     && userdetails.value.lastname && (provide_address.value === false || provide_address.value === true && (userdetails.value.address.street.trim() && userdetails.value.address.city.trim() && isPostalCode(userdetails.value.address.zipcode, "DE"))))
 })
diff --git a/src/locales/de.json b/src/locales/de.json
index d85568d..98a43c4 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -2,6 +2,7 @@
     "already_have_an_account": "Sie haben bereits einen Account?",
     "apartment_suite_etc": "Addresszeile 2",
     "configuration_error": "Konfigurationsfehler",
+    "confirm_personal_data": "Hiermit bestätige ich die Vollständigkeit und Richtigkeit der oben genannten Angaben",
     "distance": "Distanz",
     "download_certificate": "Urkunde herunterladen",
     "e_mail_adress": "E-Mail Adresse",
diff --git a/src/locales/en.json b/src/locales/en.json
index b14e4ee..b50ccef 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,6 +2,7 @@
     "already_have_an_account": "Already have an account?",
     "apartment_suite_etc": "Apartment, suite, etc.",
     "configuration_error": "Configuration error",
+    "confirm_personal_data": "I hereby confirm that the above information is complete and correct",
     "distance": "Distance",
     "download_certificate": "Download certificate",
     "e_mail_adress": "mail address",

From ace5c958f1ce63c1a91ae730b129de45ee9b975a Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Fri, 26 Mar 2021 18:00:31 +0100
Subject: [PATCH 48/48] =?UTF-8?q?=E2=8F=AB=20version=20bump=20to=200.1.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..ad93058
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,5 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+#### 0.0.1
diff --git a/package.json b/package.json
index 97685c0..d2cbc06 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@odit/lfk-selfservice",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",