Register - reactive AGB registration button
This commit is contained in:
		@@ -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>
 | 
			
		||||
		Reference in New Issue
	
	Block a user