From 9ca62dc3ad045cc284d60eb584f186c2af6de219 Mon Sep 17 00:00:00 2001
From: Komek Hayytnazarov <komek.h@gmail.com>
Date: Mon, 3 Oct 2022 11:59:13 +0500
Subject: [PATCH] added required field translations

---
 src/i18n/ru.js                          |  1 -
 src/views/login/Main.vue                | 10 +++++++---
 src/views/profile-forms/BankAccount.vue | 22 ++++++++++++----------
 src/views/profile-forms/Business.vue    | 18 ++++++++++--------
 src/views/profile-forms/Company.vue     | 23 ++++++++++++-----------
 src/views/profile-forms/Contacts.vue    | 19 ++++++++++---------
 6 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/src/i18n/ru.js b/src/i18n/ru.js
index d7f338d..2d7bbc5 100644
--- a/src/i18n/ru.js
+++ b/src/i18n/ru.js
@@ -113,7 +113,6 @@ export const locale = {
   TICKETS: "Tickets",
   NEW_TICKET: "New Ticket",
   CONTACTS: "Contracts",
-  SHORT_NAME: "Short Name",
   
   REQUIRED_VALIDATION: "This field is required",
   MIN_LENGTH_VALIDATION: "This field should be at least {min} characters long",
diff --git a/src/views/login/Main.vue b/src/views/login/Main.vue
index 0239fcb..4c7ee3f 100644
--- a/src/views/login/Main.vue
+++ b/src/views/login/Main.vue
@@ -101,12 +101,14 @@
 import { onMounted, reactive, toRefs, ref } from "vue";
 import dom from "@left4code/tw-starter/dist/js/dom";
 import { useVuelidate } from "@vuelidate/core";
-import { required, minLength, email } from "@vuelidate/validators";
+import { required, helpers, minLength, email } from "@vuelidate/validators";
 import { useAuthStore } from "@/stores";
 import router from "@/router";
 import Logo from "@/components/logo/Main.vue";
 import Lang from "@/components/lang/Main.vue";
 
+const { t } = useI18n({});
+
 const formData = reactive({
   email: "",
   password: "",
@@ -117,13 +119,15 @@ const isForgotPwdLoading = ref(false);
 
 const rules = {
   email: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     email,
   },
 
   password: {
     required,
-    minLength: minLength(8),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", { min: 8 }), minLength(8)
+    )
   },
 };
 
diff --git a/src/views/profile-forms/BankAccount.vue b/src/views/profile-forms/BankAccount.vue
index 1eaf198..a3cc147 100644
--- a/src/views/profile-forms/BankAccount.vue
+++ b/src/views/profile-forms/BankAccount.vue
@@ -156,7 +156,7 @@
 
 <script setup>
 import { reactive, watch, ref, toRefs, onMounted } from "vue";
-import { required, alpha, integer } from "@vuelidate/validators";
+import { required, helpers } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
 import { fetchWrapper } from "@/api";
 import { useRoute } from "vue-router";
@@ -169,6 +169,8 @@ const route = useRoute();
 
 const maxDate = new Date();
 
+const { t } = useI18n({});
+
 const isLoading = ref(false);
 
 const date = ref("");
@@ -184,27 +186,27 @@ const formData = reactive({
 
 const rules = {
   account_number: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   account_date: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   currency: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   iban: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   bank_name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   country: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 };
 
@@ -215,7 +217,7 @@ watch(date, (currentValue, oldValue) => {
 });
 
 const onRegister = async () => {
- //console.log("formData.account_date: ", formData.account_date);
+  //console.log("formData.account_date: ", formData.account_date);
 
   validate.value.$touch();
 
@@ -229,7 +231,7 @@ const onRegister = async () => {
       formData
     );
     isLoading.value = false;
-   //console.log("response onRegister: ", response);
+    //console.log("response onRegister: ", response);
 
     // refresh LS "bankAccount"
     localStorage.removeItem("bankAccount");
@@ -246,7 +248,7 @@ onMounted(() => {
     ? JSON.parse(localStorage.getItem("bankAccount"))
     : route.params;
 
- //console.log("Params: ", params);
+  //console.log("Params: ", params);
 
   if (params) {
     localStorage.setItem("bankAccount", JSON.stringify(params));
diff --git a/src/views/profile-forms/Business.vue b/src/views/profile-forms/Business.vue
index 2b07858..a4cdd68 100644
--- a/src/views/profile-forms/Business.vue
+++ b/src/views/profile-forms/Business.vue
@@ -176,7 +176,7 @@
 
 <script setup>
 import { reactive, watch, ref, toRefs, onMounted } from "vue";
-import { required, alpha, integer } from "@vuelidate/validators";
+import { required, helpers } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
 import { fetchWrapper } from "@/api";
 import { useRoute } from "vue-router";
@@ -189,6 +189,8 @@ const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
 
 const route = useRoute();
 
+const { t } = useI18n({});
+
 const maxDate = new Date();
 
 const isLoading = ref(false);
@@ -214,31 +216,31 @@ const formData = reactive({
 
 const rules = {
   surname: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   patronomic_name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   date_of_birth: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   birth_place: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   citizenship_id: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   registration_address: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 };
 
diff --git a/src/views/profile-forms/Company.vue b/src/views/profile-forms/Company.vue
index c8c51b0..a535caa 100644
--- a/src/views/profile-forms/Company.vue
+++ b/src/views/profile-forms/Company.vue
@@ -138,8 +138,7 @@
               </label>
               <input id="validation-form-4" v-model.trim="validate.registration_place.$model" type="text"
                 name="registration_place" class="form-control"
-                :class="{ 'border-danger': validate.registration_place.$error }"
-                :placeholder="$t('REG_PLACE')" />
+                :class="{ 'border-danger': validate.registration_place.$error }" :placeholder="$t('REG_PLACE')" />
               <template v-if="validate.registration_place.$error">
                 <div v-for="(error, index) in validate.registration_place.$errors" :key="index"
                   class="text-danger mt-2">
@@ -185,7 +184,7 @@
 
 <script setup>
 import { reactive, watch, ref, toRefs, onMounted } from "vue";
-import { required, alpha, integer } from "@vuelidate/validators";
+import { required, helpers } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
 import { fetchWrapper } from "@/api";
 import { useRoute } from "vue-router";
@@ -197,6 +196,8 @@ const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
 
 const route = useRoute();
 
+const { t } = useI18n({});
+
 const maxDate = new Date();
 
 const isLoading = ref(false);
@@ -215,11 +216,11 @@ const formData = reactive({
 
 const rules = {
   name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   short_name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   registration_number: {
@@ -227,19 +228,19 @@ const rules = {
   },
 
   registration_date: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   state_registration_agency: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   registration_place: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   registration_address: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 };
 
@@ -255,7 +256,7 @@ const onRegister = async () => {
 
   if (validate.value.$invalid) return;
 
- //console.log("onRegister: ", formData);
+  //console.log("onRegister: ", formData);
 
   try {
     isLoading.value = true;
@@ -266,7 +267,7 @@ const onRegister = async () => {
     );
 
     isLoading.value = false;
-   //console.log("response onRegister: ", response);
+    //console.log("response onRegister: ", response);
 
     // refresh LS "profile"
     localStorage.removeItem("profile");
diff --git a/src/views/profile-forms/Contacts.vue b/src/views/profile-forms/Contacts.vue
index 5c8d23a..5abc0af 100644
--- a/src/views/profile-forms/Contacts.vue
+++ b/src/views/profile-forms/Contacts.vue
@@ -41,8 +41,7 @@
                   </span>
                 </label>
                 <input id="validation-form-2" v-model.trim="validate.email.$model" type="email" name="email"
-                  class="form-control" :class="{ 'border-danger': validate.email.$error }"
-                  :placeholder="$t('EMAIL')" />
+                  class="form-control" :class="{ 'border-danger': validate.email.$error }" :placeholder="$t('EMAIL')" />
                 <template v-if="validate.email.$error">
                   <div v-for="(error, index) in validate.email.$errors" :key="index" class="text-danger mt-2">
                     {{ error.$message }}
@@ -107,7 +106,7 @@ import { ref, reactive, toRefs, onMounted } from "vue";
 import {
   required,
   minLength,
-  maxLength,
+  helpers,
   email,
   integer,
 } from "@vuelidate/validators";
@@ -121,6 +120,8 @@ const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
 
 const route = useRoute();
 
+const { t } = useI18n({});
+
 const isLoading = ref(false);
 
 const formData = reactive({
@@ -132,22 +133,22 @@ const formData = reactive({
 
 const rules = {
   email: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     email,
   },
 
   phone: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     integer,
   },
 
   fax: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     integer,
   },
 
   address: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     minLength: minLength(10),
   },
 };
@@ -170,7 +171,7 @@ const onRegister = async () => {
     );
 
     isLoading.value = false;
-   //console.log("response onRegister: ", response);
+    //console.log("response onRegister: ", response);
 
     // refresh LS "contacts"
     localStorage.removeItem("contacts");
@@ -187,7 +188,7 @@ onMounted(() => {
     ? JSON.parse(localStorage.getItem("contacts"))
     : route.params;
 
- //console.log("Params: ", params);
+  //console.log("Params: ", params);
 
   if (params) {
     localStorage.setItem("contacts", JSON.stringify(params));