lfk/selfservice
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Register - reactive AGB registration button

Browse Source
This commit is contained in:
Philipp Dormann 2021-02-26 19:47:55 +01:00
parent e63367e84e
commit 9effcb4575
1 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Register.vue
View File

@ -9,9 +9,9 @@
class="mx-auto leading-relaxed text-base text-center" class="mx-auto leading-relaxed text-base text-center"
>Jetzt für den Lauf für Kaya! 2021 registrieren.</p> >Jetzt für den Lauf für Kaya! 2021 registrieren.</p>
<div class="mt-4"> <div class="mt-4">
<label for="first_name" class="block text-sm font-medium"> <label for="first_name" class="block font-medium">
Vorname Vorname
<span class="font-bold">(*)</span> <span class="font-bold">*</span>
</label> </label>
<input <input
name="firstname" name="firstname"
@ -21,7 +21,7 @@
type="text" 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 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 <input
name="middlename" name="middlename"
id="middle_name" id="middle_name"
@ -30,9 +30,9 @@
type="text" 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 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 Nachname
<span class="font-bold">(*)</span> <span class="font-bold">*</span>
</label> </label>
<input <input
name="lastname" name="lastname"
@ -42,13 +42,13 @@
type="text" 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 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 E-Mail Adresse
<span class="font-bold">(*)</span> <span class="font-bold">*</span>
</label> </label>
<input <input
name="emailname" name="email_address"
id="email_name" id="email_address"
autocomplete="off" autocomplete="off"
placeholder="E-Mail Adresse" placeholder="E-Mail Adresse"
type="text" type="text"
@ -71,7 +71,7 @@
</div> </div>
<div class="col-span-6"> <div class="col-span-6">
<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 <input
type="text" type="text"
name="street" name="street"
@ -82,7 +82,7 @@
/> />
</div> </div>
<div class="col-span-6 sm:col-span-6 lg:col-span-2"> <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 <input
type="text" type="text"
name="city" name="city"
@ -92,7 +92,7 @@
/> />
</div> </div>
<div class="col-span-6 sm:col-span-3 lg:col-span-2"> <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 <input
type="text" type="text"
name="postal_code" name="postal_code"
@ -108,6 +108,7 @@
<div class="flex items-start mt-12"> <div class="flex items-start mt-12">
<div class="flex items-center h-5"> <div class="flex items-center h-5">
<input <input
v-model="agb_accepted"
id="agb_accepted" id="agb_accepted"
name="agb_accepted" name="agb_accepted"
type="checkbox" type="checkbox"
@ -117,15 +118,17 @@
<div class="ml-3 text-sm"> <div class="ml-3 text-sm">
<label <label
for="agb_accepted" 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> >Ich habe die AGBs gelesen und akzeptiert.</label>
</div> </div>
</div> </div>
<div class="mt-6"> <div class="mt-6">
<a <button
href="./login" @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" 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> </div>
<div class="mt-6"> <div class="mt-6">
@ -154,18 +157,9 @@ import axios from "redaxios";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
let mail = ref(""); let mail = ref("");
let loading = ref(false); let agb_accepted = ref(true);
function login() { function login() {
console.log("ihi"); // console.log(agb_accepted.value);
console.log(mail.value); // alert("AGB was " + (agb_accepted.value === true ? "accepted" : "not accepted"));
loading.value = true;
axios.get("").then((res) => {
console.log(res.data);
loading.value = false;
Toastify({
text: "This is a toast",
duration: 3000,
}).showToast();
});
} }
</script> </script>