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] =?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?",