From 11b489723f4c6ae159bbabc2bb47df1bbe8c2383 Mon Sep 17 00:00:00 2001
From: saparatayev <sopa.97@mail.ru>
Date: Mon, 3 Oct 2022 11:44:23 +0500
Subject: [PATCH] translate validation messages

---
 src/i18n/en.js                     |  3 +++
 src/i18n/ru.js                     |  3 +++
 src/i18n/tm.js                     |  3 +++
 src/views/register/Main.vue        | 25 +++++++++++++++++--------
 src/views/tickets/CreateTicket.vue | 11 +++++++----
 src/views/update-profile/Main.vue  | 20 +++++++++++++++-----
 6 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/i18n/en.js b/src/i18n/en.js
index 30bb117..7cd581f 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -110,4 +110,7 @@ export const locale = {
   UPDATE_PWD: "Update password",
 
   INT_CONN_ERROR: "Please connect to internet and try again!",
+
+  REQUIRED_VALIDATION: "This field is required",
+  MIN_LENGTH_VALIDATION: "This field should be at least {min} characters long",
 };
diff --git a/src/i18n/ru.js b/src/i18n/ru.js
index 4c9d556..fbedb11 100644
--- a/src/i18n/ru.js
+++ b/src/i18n/ru.js
@@ -110,4 +110,7 @@ export const locale = {
 
   INT_CONN_ERROR: "Пожалуйста, подключитесь к Интернету и повторите попытку!",
   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/i18n/tm.js b/src/i18n/tm.js
index 2fe642b..c6153bc 100644
--- a/src/i18n/tm.js
+++ b/src/i18n/tm.js
@@ -110,4 +110,7 @@ export const locale = {
   UPDATE_PWD: "Update password",
 
   INT_CONN_ERROR: "Internete birigip, gaýtadan synanyşmagyňyzy haýyş edýäris!",
+  
+  REQUIRED_VALIDATION: "This field is required",
+  MIN_LENGTH_VALIDATION: "This field should be at least {min} characters long",
 };
diff --git a/src/views/register/Main.vue b/src/views/register/Main.vue
index 03d088c..e004d7f 100644
--- a/src/views/register/Main.vue
+++ b/src/views/register/Main.vue
@@ -234,6 +234,9 @@ import { storeToRefs } from 'pinia';
 import router from "@/router";
 import Logo from "@/components/logo/Main.vue";
 import Lang from "@/components/lang/Main.vue";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n({});
 
 const countriesStore = useCountriesStore();
 
@@ -252,23 +255,29 @@ const formData = reactive({
 
 const rules = {
   firstname: {
-    required: helpers.withMessage('This field cannot be empty', required),
-    minLength: minLength(2),
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", {min: 2}), minLength(2)
+    ),
   },
   lastname: {
-    required,
-    minLength: minLength(2),
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", {min: 2}), minLength(2)
+    ),
   },
   email: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     email,
   },
   password: {
-    required,
-    minLength: minLength(8)
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", {min: 8}), minLength(8)
+    )
   },
   country: {
-    required
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required)
   }
 };
 
diff --git a/src/views/tickets/CreateTicket.vue b/src/views/tickets/CreateTicket.vue
index 18ad665..3d77102 100644
--- a/src/views/tickets/CreateTicket.vue
+++ b/src/views/tickets/CreateTicket.vue
@@ -139,12 +139,15 @@
 
 <script setup>
 import { reactive, ref, toRefs, onBeforeMount } from "vue";
-import { required } from "@vuelidate/validators";
+import { required, helpers } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
 import { useCategoriesStore } from "@/stores";
 import { storeToRefs } from "pinia";
 import { useTicketsStore } from "@/stores";
 import _ from "lodash";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n({});
 
 const categoriesStore = useCategoriesStore();
 
@@ -162,15 +165,15 @@ const formData = reactive({
 
 const rules = {
   title: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   content: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   category_id: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     // todo numeric validation
   },
 };
diff --git a/src/views/update-profile/Main.vue b/src/views/update-profile/Main.vue
index 4b12926..f5e0ffd 100644
--- a/src/views/update-profile/Main.vue
+++ b/src/views/update-profile/Main.vue
@@ -158,10 +158,14 @@ import {
   required,
   minLength,
   // email,
+  helpers
 } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
 import { useAuthStore } from "@/stores";
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n({});
 
 const authStore = useAuthStore();
 const { user } = storeToRefs(authStore);
@@ -178,12 +182,16 @@ const formData = reactive({
 
 const rules = {
   firstname: {
-    required,
-    minLength: minLength(2),
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", {min: 2}), minLength(2)
+    ),
   },
   lastname: {
-    required,
-    minLength: minLength(2),
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", {min: 2}), minLength(2)
+    ),
   },
   // email: {
   //   required,
@@ -191,7 +199,9 @@ const rules = {
   // },
   password: {
     // required,
-    minLength: minLength(8)
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", {min: 8}), minLength(8)
+    )
   },
 };