Merge branch 'release/0.1.0'

close #20

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odit/lfk-selfservice",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -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": {

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

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

src/components/Profile.vue

@@ -5,10 +5,13 @@
         <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-md whitespace-nowrap">Musterfirma > PR</p>
+          <p
+            class="text-3xl font-bold whitespace-nowrap"
+            v-text="(state.firstname || '') + ' ' + (state.middlename || '') + ' ' + (state.lastname || '')"
+          ></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"
@@ -32,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>
@@ -45,77 +44,67 @@
           <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">
                   <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')]]"
+                      <div class="text-lg">{{ $t('vorname') }}</div>
+                      <p
+                        class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        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')]]"
+                      <div class="text-lg">{{ $t('mittelname') }}</div>
+                      <p
+                        class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        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')]]"
+                      <div class="text-lg">{{ $t('nachname') }}</div>
+                      <p
+                        class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        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')]]"
+                      <div class="text-lg">{{ $t('e_mail_adress') }}</div>
+                      <p
+                        class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        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')]]"
+                      <div class="text-lg">{{ $t('phone_number') }}</div>
+                      <p
+                        class="h-10 w-full dark:bg-gray-800 rounded text-base outline-none dark:text-gray-100 text-gray-600 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                        v-text="state.phone"
                       />
                     </div>
                   </div>
@@ -123,12 +112,15 @@
               </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">
                   <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"
                       >
@@ -142,30 +134,28 @@
                         </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">
+                            <span v-text="s.distance"></span>m
+                          </td>
+                          <td class="px-4 py-3" v-text="s.lapTime"></td>
                         </tr>
                       </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; margin:0 auto;"
+                        :alt="[[$t('no_laps_scans_were_recorded_yet')]]"
+                      />
+                      {{ $t('no_laps_scans_were_recorded_yet') }}
+                    </div>
                   </div>
                 </div>
               </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>
@@ -175,12 +165,48 @@
 </template>
 
 <script setup>
-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 { 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';
 // 
-let activetab = ref("profile");
+const state = reactive({
+  phone: "",
+  email: "",
+  firstname: "",
+  middlename: "",
+  lastname: "",
+  scans: [],
+  group: "",
+  activetab: "profile",
+})
+const toast = useToast();
+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;
+    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");
+  })
+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"
+      return s;
+    })
+    data.filter(s => s.valid === true);
+    state.scans = data;
+  }).catch((error) => {
+    toast.error("An error occured while loading your profile data");
+  })
 </script>

src/components/Register.vue

@@ -6,6 +6,11 @@
         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>
+      <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') }}
@@ -177,8 +182,31 @@
           </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>
+        </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>
@@ -213,19 +241,35 @@
 </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) {
+  props.token = atob(props.token);
+  axios.get(`${config.baseurl}api/organizations/selfservice/${props.token}`)
+    .then(({ data }) => {
+      state.org_name = data.name;
+    })
+    .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 data_confirmed = ref(false);
 // 
 const state = reactive({
-  submit_enabled: computed(() => agb_accepted.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && isEmail(userdetails.value.mail)
+  org_name: "",
+  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"))))
 })
@@ -254,13 +298,14 @@ function login() {
         }
       }
       toast("registration in progress...");
-      axios.post(`${config.baseurl}api/runners/register`, postdata)
-        .then((response) => {
-          response = response.data;
-          const token = response.token;
-          const userid = JSON.parse(atob(token.split(".")[1])).id;
-          console.log({ token });
-          console.log({ userid });
+      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);
+          location.replace("../profile/" + token)
           // 
           toast.success("You have been registered!");
         })

src/locales/de.json

@@ -2,10 +2,13 @@
     "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",
     "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",
@@ -13,6 +16,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...",
@@ -31,6 +35,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"
 }

src/locales/en.json

@@ -2,10 +2,13 @@
     "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",
     "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",
@@ -13,6 +16,7 @@
     "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...",
@@ -31,6 +35,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"
 }

src/main.js

@@ -25,10 +25,10 @@ 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 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 = [
@@ -36,7 +36,8 @@ if (typeof config !== 'undefined') {
 			{ path: '/imprint', component: Imprint },
 			{ path: '/privacy', component: Privacy },
 			{ path: '/register', component: Register },
-			{ path: '/profile', component: Profile }
+			{ path: '/register/:token', component: Register, props: true },
+			{ path: '/profile/:token', component: Profile, props: true }
 		];
 	}
 }