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