From 72f65234f09fc2b9c7179fa1b43e217fab59ae60 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 27 Feb 2021 19:00:18 +0100
Subject: [PATCH] Register - correct phone number validation

---
 src/components/Register.vue | 16 +++++++++-------
 src/locales/de.json         |  1 +
 src/locales/en.json         |  1 +
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 1477ae5..6d83529 100644
--- a/src/components/Register.vue
+++ b/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();
diff --git a/src/locales/de.json b/src/locales/de.json
index 5acddd9..900a9ed 100644
--- a/src/locales/de.json
+++ b/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",
diff --git a/src/locales/en.json b/src/locales/en.json
index c99fc0c..33dd010 100644
--- a/src/locales/en.json
+++ b/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",