From d18dbc3a1fdf1bc9f2e8c5b37cc2d3044857410a Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 17:31:12 +0100
Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=8E=89=20working=20vue=20reactivity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 6d83529..eda3c37 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -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"
@@ -102,6 +99,7 @@
             <div class="col-span-6">
               <label for="street" class="block font-medium">{{ $t('strasse') }}</label>
               <input
+                v-model="userdetails.address.street"
                 type="text"
                 name="street"
                 :placeholder="[[$t('strasse')]]"
@@ -113,6 +111,7 @@
             <div class="col-span-6 sm:col-span-6 lg:col-span-2">
               <label for="city" class="block font-medium">{{ $t('ort') }}</label>
               <input
+                v-model="userdetails.address.city"
                 type="text"
                 name="city"
                 :placeholder="[[$t('ort')]]"
@@ -123,6 +122,7 @@
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
               <label for="postal_code" class="block font-medium">{{ $t('plz') }}</label>
               <input
+                v-model="userdetails.address.zipcode"
                 type="text"
                 name="postal_code"
                 :placeholder="[[$t('plz')]]"
@@ -153,8 +153,8 @@
         <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 +180,21 @@
 </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 { useToast } from "vue-toastification";
 
-let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "" });
+let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", city: "", zipcode: "" } });
 let provide_address = ref(false);
 let agb_accepted = ref(false);
+// 
+const state = reactive({
+  submit_enabled: computed(() => agb_accepted.value === true && 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() && userdetails.value.address.zipcode.trim())))
+})
 const toast = useToast();
 function login() {
   userdetails = userdetails.value;
@@ -205,6 +210,14 @@ function login() {
       if (isMobilePhone(userdetails.phone)) {
         postdata.phone = userdetails.phone;
       }
+      if (provide_address.value === true) {
+        // TODO: fix address keys/ values
+        postdata.address = {
+          street: userdetails.value.address.street,
+          city: userdetails.value.address.city,
+          zipcode: userdetails.value.address.zipcode,
+        }
+      }
       toast("registration in progress...");
       axios.post('https://dev.lauf-fuer-kaya.de/api/runners/register', postdata)
         .then((response) => {

From 215394489461e17760263cebf606475938500e6b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 17:51:40 +0100
Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=93=8D=F0=9F=8F=A0=20added=20address2?=
 =?UTF-8?q?=20field=20to=20Register?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 26 +++++++++++++++++++++-----
 src/locales/de.json         |  1 +
 src/locales/en.json         |  1 +
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index eda3c37..cd3319d 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -108,8 +108,23 @@
                 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"
@@ -186,7 +201,7 @@ import isEmail from 'validator/es/lib/isEmail';
 import isMobilePhone from 'validator/es/lib/isMobilePhone';
 import { useToast } from "vue-toastification";
 
-let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", city: "", zipcode: "" } });
+let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } });
 let provide_address = ref(false);
 let agb_accepted = ref(false);
 // 
@@ -211,11 +226,12 @@ function login() {
         postdata.phone = userdetails.phone;
       }
       if (provide_address.value === true) {
-        // TODO: fix address keys/ values
         postdata.address = {
-          street: userdetails.value.address.street,
+          address1: userdetails.value.address.street,
+          address2: userdetails.value.address.address2 || "",
           city: userdetails.value.address.city,
-          zipcode: userdetails.value.address.zipcode,
+          postalcode: userdetails.value.address.zipcode,
+          country: "DE",
         }
       }
       toast("registration in progress...");
diff --git a/src/locales/de.json b/src/locales/de.json
index a009b3b..4ea8b12 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -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.",
diff --git a/src/locales/en.json b/src/locales/en.json
index fc75953..4d4c680 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -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.",

From 2822fcdeba3c5f559c165d512a2743949bf9c61e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 17:52:04 +0100
Subject: [PATCH 3/9] =?UTF-8?q?=F0=9F=8C=9F=20added=20requirement=20stars?=
 =?UTF-8?q?=20to=20Register=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index cd3319d..a51cb4b 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -97,7 +97,10 @@
           </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"
@@ -135,7 +138,10 @@
               />
             </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"
@@ -162,6 +168,7 @@
             <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>

From 9d970b02b8a7ab54109fc3df2c652d01e0c99a8e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 18:10:26 +0100
Subject: [PATCH 4/9] =?UTF-8?q?=F0=9F=90=9E=20fix=20for=20address=20submit?=
 =?UTF-8?q?ting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index a51cb4b..9bf7738 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -234,10 +234,10 @@ function login() {
       }
       if (provide_address.value === true) {
         postdata.address = {
-          address1: userdetails.value.address.street,
-          address2: userdetails.value.address.address2 || "",
-          city: userdetails.value.address.city,
-          postalcode: userdetails.value.address.zipcode,
+          address1: userdetails.address.street,
+          address2: userdetails.address.address2 || "",
+          city: userdetails.address.city,
+          postalcode: userdetails.address.zipcode,
           country: "DE",
         }
       }

From b5eade9633fb88659cdfe882220db0579e39ada1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 18:31:19 +0100
Subject: [PATCH 5/9] =?UTF-8?q?=E2=9C=85=20added=20zipcode=20validation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 10 ++++++++--
 src/locales/de.json         |  1 +
 src/locales/en.json         |  1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 9bf7738..45a116a 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -149,9 +149,14 @@
                 :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">
@@ -206,6 +211,7 @@ import { computed, ref, reactive, watch } from "vue";
 import axios from "redaxios";
 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: "", address: { street: "", address2: "", city: "", zipcode: "" } });
@@ -215,7 +221,7 @@ let agb_accepted = ref(false);
 const state = reactive({
   submit_enabled: computed(() => agb_accepted.value === true && 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() && userdetails.value.address.zipcode.trim())))
+    && 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() {
@@ -237,7 +243,7 @@ function login() {
           address1: userdetails.address.street,
           address2: userdetails.address.address2 || "",
           city: userdetails.address.city,
-          postalcode: userdetails.address.zipcode,
+          postalcode: isPostalCode(userdetails.address.zipcode),
           country: "DE",
         }
       }
diff --git a/src/locales/de.json b/src/locales/de.json
index 4ea8b12..53d3c90 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -8,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?",
diff --git a/src/locales/en.json b/src/locales/en.json
index 4d4c680..b549331 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -8,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?",

From 3404fc06bf8e7163319680991f8d98208869478c Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 18:42:00 +0100
Subject: [PATCH 6/9] =?UTF-8?q?=F0=9F=90=9E=20Register=20-=20display=20err?=
 =?UTF-8?q?or=20state=20for=20empty=20+=20required=20address=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 45a116a..68a25ef 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -91,7 +91,7 @@
             <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>
@@ -108,6 +108,7 @@
                 :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>
@@ -134,6 +135,7 @@
                 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>

From 43ee4b51f9973a20fbb2f4f7774763f5c089b0e1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 1 Mar 2021 18:45:37 +0100
Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=90=9E=20Register=20-=20fix=20zipcode?=
 =?UTF-8?q?=20submitting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 68a25ef..921ea5b 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -245,7 +245,7 @@ function login() {
           address1: userdetails.address.street,
           address2: userdetails.address.address2 || "",
           city: userdetails.address.city,
-          postalcode: isPostalCode(userdetails.address.zipcode),
+          postalcode: userdetails.address.zipcode,
           country: "DE",
         }
       }

From e633ad6cea5d1fe8596cb67319ca7da7548bc770 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 17:18:34 +0100
Subject: [PATCH 8/9] =?UTF-8?q?=E2=9C=A8=20Register=20-=20invalid=20phone?=
 =?UTF-8?q?=20number=20error=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 4 ++++
 src/locales/de.json         | 1 +
 src/locales/en.json         | 1 +
 3 files changed, 6 insertions(+)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 921ea5b..02345bf 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -75,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>
diff --git a/src/locales/de.json b/src/locales/de.json
index 53d3c90..198b5a6 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -18,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"
 }
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index b549331..a8c8b44 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -18,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"
 }
\ No newline at end of file

From e8583340c761663067aa51a4937d0795b75d21f1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 17:21:47 +0100
Subject: [PATCH 9/9] =?UTF-8?q?=E2=9C=A8=20Register=20-=20disable=20regist?=
 =?UTF-8?q?er=20button=20when=20invalid=20phone=20number=20is=20set?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #1
---
 src/components/Register.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index 02345bf..9622b5a 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -225,7 +225,7 @@ let provide_address = ref(false);
 let agb_accepted = ref(false);
 // 
 const state = reactive({
-  submit_enabled: computed(() => agb_accepted.value === true && isEmail(userdetails.value.mail)
+  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"))))
 })