Register - basic form validations

src/App.vue

@@ -3,7 +3,5 @@
 </template>
 
 <script setup>
-// import HelloWorld from "./components/HelloWorld.vue";
+// 
-// import LoginForm from "./components/LoginForm.vue";
-// import Footer from "./components/Footer.vue";
 </script>

src/components/Register.vue

@@ -18,8 +18,10 @@
           autocomplete="off"
           :placeholder="[[$t('vorname')]]"
           type="text"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          :class="{ 'border-red-500': (!userdetails.firstname.trim()), 'border-green-300': (userdetails.firstname.trim()) }"
+          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
         />
+        <!--  -->
         <label for="middle_name" class="block font-medium">{{ $t('mittelname') }}</label>
         <input
           v-model="userdetails.middlename"
@@ -28,8 +30,9 @@
           autocomplete="off"
           :placeholder="[[$t('mittelname')]]"
           type="text"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
         />
+        <!--  -->
         <label for="last_name" class="block font-medium">
           {{ $t('nachname') }}
           <span class="font-bold">*</span>
@@ -41,8 +44,10 @@
           autocomplete="off"
           :placeholder="[[$t('nachname')]]"
           type="text"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          :class="{ 'border-red-500': (!userdetails.lastname.trim()), 'border-green-300': (userdetails.lastname.trim()) }"
+          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
         />
+        <!--  -->
         <label for="email_address" class="block font-medium">
           E-Mail Adresse
           <span class="font-bold">*</span>
@@ -54,10 +59,23 @@
           autocomplete="off"
           placeholder="E-Mail Adresse"
           type="email"
-          :class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-gray-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 rounded-l-md sm:text-sm border bg-gray-50 text-gray-100 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border bg-gray-50 text-gray-500 rounded-md p-2"
         />
-        <p 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>
+        <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) }"
+          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border bg-gray-50 text-gray-500 rounded-md p-2"
+        />
+        <!--  -->
         <div class="grid grid-cols-6 mt-6">
           <div class="col-span-6"></div>
           <div class="flex items-start col-span-6">
@@ -86,7 +104,7 @@
                 :placeholder="[[$t('strasse')]]"
                 id="street"
                 autocomplete="street-address"
-                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
             <div class="col-span-6 sm:col-span-6 lg:col-span-2">
@@ -96,7 +114,7 @@
                 name="city"
                 :placeholder="[[$t('ort')]]"
                 id="city"
-                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
@@ -107,7 +125,7 @@
                 :placeholder="[[$t('plz')]]"
                 id="postal_code"
                 autocomplete="postal-code"
-                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
           </div>
@@ -163,20 +181,27 @@ import { ref } 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';
 
-let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "" });
+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);
 function login() {
   userdetails = userdetails.value;
+  if (userdetails.phone === "" || isMobilePhone(userdetails.phone)) {
     if (isEmail(userdetails.mail)) {
-    axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register', {
+      let postdata = {
         "email": userdetails.mail,
         "firstname": userdetails.firstname,
         "middlename": userdetails.middlename,
         "lastname": userdetails.lastname,
         "address": {}
-    })
+      }
+      if (isMobilePhone(userdetails.phone)) {
+        postdata.phone = userdetails.phone;
+      }
+      axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register',)
         .then(function(response) {
           response = response.data;
           const token = response.token;
@@ -188,6 +213,7 @@ function login() {
           console.log(error);
         });
     }
+  }
   // console.log(agb_accepted.value);
   // alert("AGB was " + (agb_accepted.value === true ? "accepted" : "not accepted"));
 }

src/locales/de.json

@@ -4,6 +4,7 @@
     "mittelname": "Mittelname",
     "nachname": "Nachname",
     "ort": "Ort",
+    "phone_number": "Telefonnummer",
     "please_provide_valid_mail": "Bitte geben Sie eine gültige E-Mail Adresse an",
     "plz": "PLZ",
     "provide_address": "Adresse angeben?",

src/locales/en.json

@@ -4,6 +4,7 @@
     "mittelname": "Middlename",
     "nachname": "Lastname",
     "ort": "City",
+    "phone_number": "Phone Number",
     "please_provide_valid_mail": "Please provide a valid mail address.",
     "plz": "zipcode",
     "provide_address": "Provide a postal address?",