From 8bf08034b798da354fdbbbc7ce6e5a72616bb16b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 26 Feb 2021 21:50:19 +0100
Subject: [PATCH] Register - basic input POST to api

---
 src/components/Register.vue | 45 ++++++++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 16ed785..a1040d9 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -14,33 +14,36 @@
           <span class="font-bold">*</span>
         </label>
         <input
+          v-model="userdetails.firstname"
           name="firstname"
           id="first_name"
           autocomplete="off"
           placeholder="Vorname"
           type="text"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
         />
         <label for="middle_name" class="block font-medium">Mittelname</label>
         <input
+          v-model="userdetails.middlename"
           name="middlename"
           id="middle_name"
           autocomplete="off"
           placeholder="Mittelname"
           type="text"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
         />
         <label for="last_name" class="block font-medium">
           Nachname
           <span class="font-bold">*</span>
         </label>
         <input
+          v-model="userdetails.lastname"
           name="lastname"
           id="last_name"
           autocomplete="off"
           placeholder="Nachname"
           type="text"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
         />
         <label for="email_address" class="block font-medium">
           E-Mail Adresse
@@ -73,7 +76,7 @@
               <label for="address_activated" class="font-medium text-gray-400">Adresse angeben?</label>
             </div>
           </div>
-          <div v-if="provide_address===true" class="col-span-6">
+          <div v-if="provide_address === true" class="col-span-6">
             <div class="col-span-6">
               <label for="street" class="block font-medium">Straße</label>
               <input
@@ -82,7 +85,7 @@
                 placeholder="Straße"
                 id="street"
                 autocomplete="street-address"
-                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
             <div class="col-span-6 sm:col-span-6 lg:col-span-2">
@@ -92,7 +95,7 @@
                 name="city"
                 placeholder="Ort"
                 id="city"
-                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
@@ -103,7 +106,7 @@
                 placeholder="PLZ"
                 id="postal_code"
                 autocomplete="postal-code"
-                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
           </div>
@@ -119,10 +122,10 @@
             />
           </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.</label>
+            <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.
+            </label>
           </div>
         </div>
         <div class="mt-6">
@@ -164,6 +167,26 @@ let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "" })
 let provide_address = ref(false);
 let agb_accepted = ref(false);
 function login() {
+  userdetails = userdetails.value;
+  if (isEmail(userdetails.mail)) {
+    axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register', {
+      "email": userdetails.mail,
+      "firstname": userdetails.firstname,
+      "middlename": userdetails.middlename,
+      "lastname": userdetails.lastname,
+      "address": {}
+    })
+      .then(function(response) {
+        response = response.data;
+        const token = response.token;
+        const userid = JSON.parse(atob(token.split(".")[1])).id;
+        console.log({ token });
+        console.log({ userid });
+      })
+      .catch(function(error) {
+        console.log(error);
+      });
+  }
   // console.log(agb_accepted.value);
   // alert("AGB was " + (agb_accepted.value === true ? "accepted" : "not accepted"));
 }