Merge pull request 'feature/1-register-disable-submit-address' (#2) from feature/1-register-disable-submit-address into dev
Reviewed-on: #2 close #1
This commit is contained in:
commit
f10f009334
|
|
@ -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"
|
||||
|
|
@ -78,6 +75,10 @@
|
|||
:class="{ 'border-red-500': (!isMobilePhone(userdetails.phone) && userdetails.phone.trim()), 'border-green-300': (isMobilePhone(userdetails.phone) && userdetails.phone.trim()) }"
|
||||
class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
<p
|
||||
v-if="(!isMobilePhone(userdetails.phone) && userdetails.phone.trim())"
|
||||
class="text-sm"
|
||||
>{{ $t('this_is_not_a_valid_international_phone_number') }}</p>
|
||||
<!-- -->
|
||||
<div class="grid grid-cols-6 mt-6">
|
||||
<div class="col-span-6"></div>
|
||||
|
|
@ -94,43 +95,74 @@
|
|||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="address_activated"
|
||||
class="font-medium text-gray-400"
|
||||
class="font-medium text-gray-400 select-none"
|
||||
>{{ $t('provide_address') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="provide_address === true" class="col-span-6">
|
||||
<div class="col-span-6">
|
||||
<label for="street" class="block font-medium">{{ $t('strasse') }}</label>
|
||||
<label for="street" class="block font-medium">
|
||||
{{ $t('strasse') }}
|
||||
<span class="font-bold">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="userdetails.address.street"
|
||||
type="text"
|
||||
name="street"
|
||||
:placeholder="[[$t('strasse')]]"
|
||||
id="street"
|
||||
autocomplete="street-address"
|
||||
:class="{ 'border-red-500': (!userdetails.address.street.trim()), 'border-green-300': (userdetails.address.street.trim()) }"
|
||||
class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label for="address2" class="block font-medium">{{ $t('apartment_suite_etc') }}</label>
|
||||
<input
|
||||
v-model="userdetails.address.address2"
|
||||
type="text"
|
||||
name="address2"
|
||||
:placeholder="[[$t('apartment_suite_etc')]]"
|
||||
id="address2"
|
||||
autocomplete="street-address"
|
||||
class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-6 lg:col-span-2">
|
||||
<label for="city" class="block font-medium">{{ $t('ort') }}</label>
|
||||
<label for="city" class="block font-medium">
|
||||
{{ $t('ort') }}
|
||||
<span class="font-bold">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="userdetails.address.city"
|
||||
type="text"
|
||||
name="city"
|
||||
:placeholder="[[$t('ort')]]"
|
||||
id="city"
|
||||
:class="{ 'border-red-500': (!userdetails.address.city.trim()), 'border-green-300': (userdetails.address.city.trim()) }"
|
||||
class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
|
||||
<label for="postal_code" class="block font-medium">{{ $t('plz') }}</label>
|
||||
<label for="postal_code" class="block font-medium">
|
||||
{{ $t('plz') }}
|
||||
<span class="font-bold">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="userdetails.address.zipcode"
|
||||
type="text"
|
||||
name="postal_code"
|
||||
:placeholder="[[$t('plz')]]"
|
||||
id="postal_code"
|
||||
autocomplete="postal-code"
|
||||
:class="{ 'border-red-500': (!isPostalCode(userdetails.address.zipcode, 'DE')), 'border-green-300': (isPostalCode(userdetails.address.zipcode, 'DE')) }"
|
||||
class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-if="!isPostalCode(userdetails.address.zipcode, 'DE')"
|
||||
class="text-sm"
|
||||
>{{ $t('please_provide_a_valid_zipcode') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start mt-6">
|
||||
|
|
@ -147,14 +179,15 @@
|
|||
<label for="agb_accepted" class="font-medium text-gray-400 select-none">
|
||||
Ich habe die
|
||||
<a target="_blank" rel="noreferrer,noopener" href class="underline">AGBs</a> gelesen und akzeptiert.
|
||||
<span class="font-bold">*</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<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 +213,22 @@
|
|||
</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 isPostalCode from 'validator/es/lib/isPostalCode';
|
||||
import { useToast } from "vue-toastification";
|
||||
|
||||
let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "" });
|
||||
let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } });
|
||||
let provide_address = ref(false);
|
||||
let agb_accepted = ref(false);
|
||||
//
|
||||
const state = reactive({
|
||||
submit_enabled: computed(() => agb_accepted.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && 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() && isPostalCode(userdetails.value.address.zipcode, "DE"))))
|
||||
})
|
||||
const toast = useToast();
|
||||
function login() {
|
||||
userdetails = userdetails.value;
|
||||
|
|
@ -205,6 +244,15 @@ function login() {
|
|||
if (isMobilePhone(userdetails.phone)) {
|
||||
postdata.phone = userdetails.phone;
|
||||
}
|
||||
if (provide_address.value === true) {
|
||||
postdata.address = {
|
||||
address1: userdetails.address.street,
|
||||
address2: userdetails.address.address2 || "",
|
||||
city: userdetails.address.city,
|
||||
postalcode: userdetails.address.zipcode,
|
||||
country: "DE",
|
||||
}
|
||||
}
|
||||
toast("registration in progress...");
|
||||
axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register', postdata)
|
||||
.then((response) => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"already_have_an_account": "Sie haben bereits einen Account?",
|
||||
"apartment_suite_etc": "Addresszeile 2",
|
||||
"e_mail_adress": "E-Mail Adresse",
|
||||
"go_to_login": "Zum Login",
|
||||
"main_page_text": "Hier können Sie sich für den Lauf Für Kaya! registrieren oder ihr Läuferprofil verwalten.",
|
||||
|
|
@ -7,6 +8,7 @@
|
|||
"nachname": "Nachname",
|
||||
"ort": "Ort",
|
||||
"phone_number": "Telefonnummer",
|
||||
"please_provide_a_valid_zipcode": "Bitte geben Sie eine gültige Postleitzahl an...",
|
||||
"please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
|
||||
"plz": "PLZ",
|
||||
"provide_address": "Adresse angeben?",
|
||||
|
|
@ -16,6 +18,7 @@
|
|||
"register_now": "Jetzt registrieren!",
|
||||
"registrieren": "Registrieren",
|
||||
"strasse": "Straße",
|
||||
"this_is_not_a_valid_international_phone_number": "Dies ist keine gültige internationale Telefonnummer",
|
||||
"view_my_data": "Meine Läuferdaten einsehen",
|
||||
"vorname": "Vorname"
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"already_have_an_account": "Already have an account?",
|
||||
"apartment_suite_etc": "Apartment, suite, etc.",
|
||||
"e_mail_adress": "mail address",
|
||||
"go_to_login": "Go To Login",
|
||||
"main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
|
||||
|
|
@ -7,6 +8,7 @@
|
|||
"nachname": "Lastname",
|
||||
"ort": "City",
|
||||
"phone_number": "Phone Number",
|
||||
"please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
|
||||
"please_provide_valid_mail": "Please provide a valid mail address.",
|
||||
"plz": "zipcode",
|
||||
"provide_address": "Provide a postal address?",
|
||||
|
|
@ -16,6 +18,7 @@
|
|||
"register_now": "Register now!",
|
||||
"registrieren": "Register Now",
|
||||
"strasse": "Street/ Block",
|
||||
"this_is_not_a_valid_international_phone_number": "This is not a valid international phone number",
|
||||
"view_my_data": "View my data",
|
||||
"vorname": "Firstname"
|
||||
}
|
||||
Loading…
Reference in New Issue