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 1/7] 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 2/7] 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 3/7] 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 4/7] =?UTF-8?q?=E2=9C=A8=20Profile=20-=20lap=20times=20tab?=
 =?UTF-8?q?le=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 5/7] =?UTF-8?q?=F0=9F=8C=8E=20Profile=20-=20i18n=20compati?=
 =?UTF-8?q?bility?=
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 6/7] =?UTF-8?q?=F0=9F=8C=8E=20translation=20for=20lap=20ti?=
 =?UTF-8?q?mes=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 7/7] 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",