From 9effcb457540b512c261286cbf46bbd856b7d8b9 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 26 Feb 2021 19:47:55 +0100
Subject: [PATCH] Register - reactive AGB registration button

---
 src/components/Register.vue | 50 ++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index e8c2ad4..324830d 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -9,9 +9,9 @@
         class="mx-auto leading-relaxed text-base text-center"
       >Jetzt für den Lauf für Kaya! 2021 registrieren.</p>
       <div class="mt-4">
-        <label for="first_name" class="block text-sm font-medium">
+        <label for="first_name" class="block font-medium">
           Vorname
-          <span class="font-bold">(*)</span>
+          <span class="font-bold">*</span>
         </label>
         <input
           name="firstname"
@@ -21,7 +21,7 @@
           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"
         />
-        <label for="middle_name" class="block text-sm font-medium">Mittelname</label>
+        <label for="middle_name" class="block font-medium">Mittelname</label>
         <input
           name="middlename"
           id="middle_name"
@@ -30,9 +30,9 @@
           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"
         />
-        <label for="last_name" class="block text-sm font-medium">
+        <label for="last_name" class="block font-medium">
           Nachname
-          <span class="font-bold">(*)</span>
+          <span class="font-bold">*</span>
         </label>
         <input
           name="lastname"
@@ -42,13 +42,13 @@
           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"
         />
-        <label for="email_address" class="block text-sm font-medium">
+        <label for="email_address" class="block font-medium">
           E-Mail Adresse
-          <span class="font-bold">(*)</span>
+          <span class="font-bold">*</span>
         </label>
         <input
-          name="emailname"
-          id="email_name"
+          name="email_address"
+          id="email_address"
           autocomplete="off"
           placeholder="E-Mail Adresse"
           type="text"
@@ -71,7 +71,7 @@
           </div>
           <div class="col-span-6">
             <div class="col-span-6">
-              <label for="street" class="block text-sm font-medium">Straße</label>
+              <label for="street" class="block font-medium">Straße</label>
               <input
                 type="text"
                 name="street"
@@ -82,7 +82,7 @@
               />
             </div>
             <div class="col-span-6 sm:col-span-6 lg:col-span-2">
-              <label for="city" class="block text-sm font-medium">Ort</label>
+              <label for="city" class="block font-medium">Ort</label>
               <input
                 type="text"
                 name="city"
@@ -92,7 +92,7 @@
               />
             </div>
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
-              <label for="postal_code" class="block text-sm font-medium">PLZ</label>
+              <label for="postal_code" class="block font-medium">PLZ</label>
               <input
                 type="text"
                 name="postal_code"
@@ -108,6 +108,7 @@
         <div class="flex items-start mt-12">
           <div class="flex items-center h-5">
             <input
+              v-model="agb_accepted"
               id="agb_accepted"
               name="agb_accepted"
               type="checkbox"
@@ -117,15 +118,17 @@
           <div class="ml-3 text-sm">
             <label
               for="agb_accepted"
-              class="font-medium text-gray-400"
+              class="font-medium text-gray-400 select-none"
             >Ich habe die AGBs gelesen und akzeptiert.</label>
           </div>
         </div>
         <div class="mt-6">
-          <a
-            href="./login"
+          <button
+            @click="login"
+            :disabled="(agb_accepted === false)"
+            :class="{ 'opacity-50': (agb_accepted === false), 'cursor-not-allowed': (agb_accepted === false) }"
             class="text-white block w-full text-center py-2 px-3 border 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"
-          >Registrieren</a>
+          >Registrieren</button>
         </div>
       </div>
       <div class="mt-6">
@@ -154,18 +157,9 @@ import axios from "redaxios";
 import Toastify from "toastify-js";
 
 let mail = ref("");
-let loading = ref(false);
+let agb_accepted = ref(true);
 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",
-      duration: 3000,
-    }).showToast();
-  });
+  // console.log(agb_accepted.value);
+  // alert("AGB was " + (agb_accepted.value === true ? "accepted" : "not accepted"));
 }
 </script>
\ No newline at end of file