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

Register - basic input POST to api

Browse Source
This commit is contained in:
Philipp Dormann 2021-02-26 21:50:19 +01:00
parent 0c006cc09c
commit 8bf08034b7
1 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Register.vue
View File

@ -14,33 +14,36 @@
<span class="font-bold">*</span> <span class="font-bold">*</span>
</label> </label>
<input <input
v-model="userdetails.firstname"
name="firstname" name="firstname"
id="first_name" id="first_name"
autocomplete="off" autocomplete="off"
placeholder="Vorname" placeholder="Vorname"
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 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> <label for="middle_name" class="block font-medium">Mittelname</label>
<input <input
v-model="userdetails.middlename"
name="middlename" name="middlename"
id="middle_name" id="middle_name"
autocomplete="off" autocomplete="off"
placeholder="Mittelname" placeholder="Mittelname"
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 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"> <label for="last_name" class="block font-medium">
Nachname Nachname
<span class="font-bold">*</span> <span class="font-bold">*</span>
</label> </label>
<input <input
v-model="userdetails.lastname"
name="lastname" name="lastname"
id="last_name" id="last_name"
autocomplete="off" autocomplete="off"
placeholder="Nachname" placeholder="Nachname"
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 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"> <label for="email_address" class="block font-medium">
E-Mail Adresse E-Mail Adresse
@ -82,7 +85,7 @@
placeholder="Straße" placeholder="Straße"
id="street" id="street"
autocomplete="street-address" 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>
<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">
@ -92,7 +95,7 @@
name="city" name="city"
placeholder="Ort" placeholder="Ort"
id="city" 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>
<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">
@ -103,7 +106,7 @@
placeholder="PLZ" placeholder="PLZ"
id="postal_code" id="postal_code"
autocomplete="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>
</div> </div>
@ -119,10 +122,10 @@
/> />
</div> </div>
<div class="ml-3 text-sm"> <div class="ml-3 text-sm">
<label <label for="agb_accepted" class="font-medium text-gray-400 select-none">
for="agb_accepted" Ich habe die
class="font-medium text-gray-400 select-none" <a target="_blank" rel="noreferrer,noopener" href class="underline">AGBs</a> gelesen und akzeptiert.
>Ich habe die <a target="_blank" rel="noreferrer,noopener" href="" class="underline">AGBs</a> gelesen und akzeptiert.</label> </label>
</div> </div>
</div> </div>
<div class="mt-6"> <div class="mt-6">
@ -164,6 +167,26 @@ let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "" })
let provide_address = ref(false); let provide_address = ref(false);
let agb_accepted = ref(false); let agb_accepted = ref(false);
function login() { 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); // console.log(agb_accepted.value);
// alert("AGB was " + (agb_accepted.value === true ? "accepted" : "not accepted")); // alert("AGB was " + (agb_accepted.value === true ? "accepted" : "not accepted"));
} }