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

Register - correct phone number validation

Browse Source
This commit is contained in:
Philipp Dormann 2021-02-27 19:00:18 +01:00
parent ff89071156
commit 72f65234f0
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Register.vue
View File

@ -4,7 +4,7 @@
<img class="mx-auto h-24 w-auto" src="/favicon.png" alt /> <img class="mx-auto h-24 w-auto" src="/favicon.png" alt />
<h1 <h1
class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center" class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center"
>Lauf für Kaya! - Registrieren</h1> >Lauf für Kaya! - {{ $t('registrieren') }}</h1>
<p class="mx-auto leading-relaxed text-base text-center">{{ $t('register.register_now') }}</p> <p class="mx-auto leading-relaxed text-base text-center">{{ $t('register.register_now') }}</p>
<div class="mt-4"> <div class="mt-4">
<label for="first_name" class="block font-medium"> <label for="first_name" class="block font-medium">
@ -49,7 +49,7 @@
/> />
<!-- --> <!-- -->
<label for="email_address" class="block font-medium"> <label for="email_address" class="block font-medium">
E-Mail Adresse {{ $t('e_mail_adress') }}
<span class="font-bold">*</span> <span class="font-bold">*</span>
</label> </label>
<input <input
@ -57,22 +57,25 @@
name="email_address" name="email_address"
id="email_address" id="email_address"
autocomplete="off" autocomplete="off"
placeholder="E-Mail Adresse" :placeholder="[[$t('e_mail_adress')]]"
type="email" type="email"
:class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-green-300': (isEmail(userdetails.mail)) }" :class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-green-300': (isEmail(userdetails.mail)) }"
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" 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="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p> <p v-if="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
<!-- --> <!-- -->
<label for="phone" class="block font-medium">{{ $t('phone_number') }}</label> <label
for="phone"
class="select-none block font-medium"
>{{ $t('phone_number') }}</label>
<input <input
v-model="userdetails.phone" v-model="userdetails.phone"
name="phone" name="phone"
id="phone" id="phone"
autocomplete="off" autocomplete="off"
:placeholder="[[$t('phone_number')]]" :placeholder="[[$t('phone_number')]]"
type="tel" type="text"
:class="{ 'border-red-500': (!phone_valid), 'border-green-300': (phone_valid) }" :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" 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"
/> />
<!-- --> <!-- -->
@ -185,7 +188,6 @@ import isMobilePhone from 'validator/es/lib/isMobilePhone';
import { useToast } from "vue-toastification"; import { useToast } from "vue-toastification";
let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "" }); let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "" });
let phone_valid = ref(!userdetails.value.phone.trim() || isMobilePhone(userdetails.value.phone));
let provide_address = ref(false); let provide_address = ref(false);
let agb_accepted = ref(false); let agb_accepted = ref(false);
const toast = useToast(); const toast = useToast();

1
src/locales/de.json
View File

@ -1,5 +1,6 @@
{ {
"already_have_an_account": "Sie haben bereits einen Account?", "already_have_an_account": "Sie haben bereits einen Account?",
"e_mail_adress": "E-Mail Adresse",
"go_to_login": "Zum Login", "go_to_login": "Zum Login",
"mittelname": "Mittelname", "mittelname": "Mittelname",
"nachname": "Nachname", "nachname": "Nachname",

1
src/locales/en.json
View File

@ -1,5 +1,6 @@
{ {
"already_have_an_account": "Already have an account?", "already_have_an_account": "Already have an account?",
"e_mail_adress": "mail address",
"go_to_login": "Go To Login", "go_to_login": "Go To Login",
"mittelname": "Middlename", "mittelname": "Middlename",
"nachname": "Lastname", "nachname": "Lastname",