🎉 working vue reactivity

ref #1

src/components/Register.vue

@@ -64,10 +64,7 @@
         />
         <p v-if="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
         <!--  -->
-        <label
+        <label for="phone" class="select-none block font-medium">{{ $t('phone_number') }}</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)"
+            :disabled="(!state.submit_enabled)"
-            :class="{ 'opacity-50': (agb_accepted === false), 'cursor-not-allowed': (agb_accepted === false) }"
+            :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) => {