Register - correct phone number validation

src/components/Register.vue

@@ -4,7 +4,7 @@
       <img class="mx-auto h-24 w-auto" src="/favicon.png" alt />
       <h1
         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>
       <div class="mt-4">
         <label for="first_name" class="block font-medium">
@@ -49,7 +49,7 @@
         />
         <!--  -->
         <label for="email_address" class="block font-medium">
-          E-Mail Adresse
+          {{ $t('e_mail_adress') }}
           <span class="font-bold">*</span>
         </label>
         <input
@@ -57,22 +57,25 @@
           name="email_address"
           id="email_address"
           autocomplete="off"
-          placeholder="E-Mail Adresse"
+          :placeholder="[[$t('e_mail_adress')]]"
           type="email"
           :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"
         />
         <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
           v-model="userdetails.phone"
           name="phone"
           id="phone"
           autocomplete="off"
           :placeholder="[[$t('phone_number')]]"
-          type="tel"
-          :class="{ 'border-red-500': (!phone_valid), 'border-green-300': (phone_valid) }"
+          type="text"
+          :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"
         />
         <!--  -->
@@ -185,7 +188,6 @@ import isMobilePhone from 'validator/es/lib/isMobilePhone';
 import { useToast } from "vue-toastification";
 
 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 agb_accepted = ref(false);
 const toast = useToast();

src/locales/de.json

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

src/locales/en.json

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