bumped vee-validate to 3.x

- some i18n keys added, #214
- load user preferred langage on login

package.json

@@ -26,7 +26,7 @@
     "luxon": "^1.17.1",
     "snyk": "^1.226.2",
     "v-viewer": "^1.4.2",
-    "vee-validate": "^2.2.13",
+    "vee-validate": "^3.0.5",
     "viewerjs": "^1.3.6",
     "vue": "^2.6.10",
     "vue-chartjs": "^3.4.2",

src/components/fields/PaymentMethodInput.vue

@@ -6,7 +6,7 @@
     @input="$emit('input', $event)"
     :items="paymentMethods"
     menu-props="auto"
-    label="Payment method"
+    :label="$t('fields.paymentMethod')"
     :prepend-icon="icons[value]"
     hide-details
     single-line

src/components/settings/AccountSettings.vue

@@ -40,7 +40,7 @@
       </v-subheader>
       <v-radio-group
         :value="userData.preferredLang || 'en'"
-        @change="$i18n.setLanguageAsync($event)"
+        @change="changeLanguage"
         mandatory
       >
         <v-radio
@@ -190,6 +190,19 @@ export default {
           { merge: true }
         );
     },
+    async changeLanguage($event) {
+      await this.$i18n.setLanguageAsync($event);
+      await firebase
+        .firestore()
+        .collection('users')
+        .doc(this.user.uid)
+        .set(
+          {
+            preferredLang: $event,
+          },
+          { merge: true }
+        );
+    },
   },
 };
 </script>

src/i18n/de.json

@@ -20,21 +20,33 @@
     "ONLINE": "Online"
   },
   "validations": {
-    "messages": {
-      "_default": "{0} ist ungültig.",
-      "required": "{0} ist erforderlich.",
-      "unique": "{0} existiert bereits."
-    }
+    "_default": "{_field_} ist ungültig.",
+    "required": "{_field_} ist erforderlich.",
+    "uniqueTestDataRecord": "{_field_} existiert bereits."
   },
   "admin": {
     "testData": {
-      "identifier": "Testdaten-Identifier"
+      "identifier": "Testdaten-Identifier",
+      "browse": "Durchsuchen",
+      "newRecord": "Neuer Datensatz",
+      "title": "Testdaten",
+      "upload": "Hochladen"
     }
   },
   "fields": {
     "phoneNumber": {
       "invalidMessage": "Ungültige Telefonnummer.",
       "countryCallingCodeHint": "Es empfielt sich die Ländervorwahl anzugeben, z.B. +49."
-    }
+    },
+    "cityCode": "Stadtschlüssel",
+    "name": "Name",
+    "classifier": "Klassifikator",
+    "paymentMethod": "Bezahlmethode",
+    "category": "Kategorie",
+    "notes": "Bemerkungen"
+  },
+  "actions": {
+    "deleteImage": "Bild löschen",
+    "save": "Speichern"
   }
-}
+}

src/i18n/en.json

@@ -24,18 +24,30 @@
       "name": "Phone number",
       "invalidMessage": "Invalid phone number.",
       "countryCallingCodeHint": "It is recommended to supply the country calling code, e.g. +49."
-    }
+    },
+    "cityCode": "City code",
+    "name": "Name",
+    "classifier": "Classifier",
+    "paymentMethod": "Payment method",
+    "category": "Category",
+    "notes": "Notes"
   },
   "validations": {
-    "messages": {
-      "_default": "{0} is invalid.",
-      "required": "{0} is required.",
-      "unique": "{0} already exists."
-    }
+    "_default": "{_field_} is invalid.",
+    "required": "{_field_} is required.",
+    "uniqueTestDataRecord": "{_field_} already exists."
   },
   "admin": {
     "testData": {
-      "identifier": "Test data identifier"
+      "identifier": "Test data identifier",
+      "title": "Test data",
+      "upload": "Upload",
+      "newRecord": "New record",
+      "browse": "Browse"
     }
+  },
+  "actions": {
+    "deleteImage": "Delete image",
+    "save": "Save"
   }
-}
+}

src/main.js

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import VueViewer from 'v-viewer';
 import * as VueGoogleMaps from 'vue2-google-maps';
-import VeeValidate from 'vee-validate'
 import vuetify from './plugins/vuetify';
 import App from './App.vue';
 import router from './router';
@@ -12,7 +11,8 @@ import './directives';
 
 import 'viewerjs/dist/viewer.css';
 import './styles.css';
-import i18n from './i18n'
+import i18n from './i18n';
+import './plugins/vee-validate';
 
 Vue.use(VueViewer);
 
@@ -24,17 +24,12 @@ Vue.use(VueGoogleMaps, {
   installComponents: false,
 });
 
-Vue.use(VeeValidate, {
-  i18nRootKey: 'validations',
-  i18n,
-});
-
 Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
   i18n,
   vuetify,
-  render: h => h(App)
+  render: h => h(App),
 }).$mount('#app');

src/plugins/vee-validate.js

@@ -0,0 +1,12 @@
+import { configure, extend } from 'vee-validate';
+import { required } from 'vee-validate/dist/rules';
+import i18n from '@/i18n';
+
+/* eslint-disable no-underscore-dangle, no-param-reassign */
+configure({
+  defaultMessage: (field, values) => {
+    values._field_ = i18n.t(`fields.${field}`);
+    return i18n.t(`validations.${values._rule_}`, values);
+  },
+});
+extend('required', required);

src/store/user.js

@@ -1,5 +1,6 @@
 import firebase from 'firebase/app';
 import { firestoreAction } from 'vuexfire';
+import i18n from '@/i18n';
 
 /* eslint-disable no-param-reassign */
 export default {
@@ -46,32 +47,30 @@ export default {
       commit('setCheckLoggedIn$', checkLoggedIn$);
       return checkLoggedIn$;
     },
-    login({ commit, dispatch }, { $router }) {
-      firebase
-        .auth()
-        .signInWithPopup(new firebase.auth.GoogleAuthProvider())
-        .then(result => {
-          commit('setUser', result.user);
-          dispatch('loadUserData');
-          $router.push('dashboard');
-        })
-        .catch(error => {
-          console.error(error);
-        });
+    async login({ commit, dispatch }, { $router }) {
+      const result = await firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider());
+      commit('setUser', result.user);
+      await dispatch('loadUserData');
+      $router.push('dashboard');
     },
     async logout({ commit }, { $router }) {
       await firebase.auth().signOut();
       commit('setUser', null);
       $router.push({ name: 'home' });
     },
-    loadUserData: firestoreAction(({ bindFirestoreRef, state }) => {
+    loadUserData: firestoreAction(({ bindFirestoreRef, state }) =>
       bindFirestoreRef(
         'userData',
         firebase
           .firestore()
           .collection('users')
           .doc(state.user.uid)
-      );
-    }),
+      ).then(userData => {
+        if (userData && userData.preferredLang) {
+          return i18n.setLanguageAsync(userData.preferredLang);
+        }
+        return Promise.resolve();
+      })
+    ),
   },
 };

src/views/admin/AddTestData.vue

@@ -12,37 +12,41 @@
           @submit.prevent="saveInfo"
         >
           <VTextFieldWithValidation
-            label="City code"
+            :label="$t('fields.cityCode')"
+            name="cityCode"
             v-model.trim="info.cityCode"
             required
             rules="required"
           ></VTextFieldWithValidation>
           <VTextFieldWithValidation
-            label="Name"
+            :label="$t('fields.name')"
+            name="name"
             v-model.trim="info.name"
             required
             rules="required"
           ></VTextFieldWithValidation>
           <v-text-field
-            label="Classifier"
+            :label="$t('fields.classifier')"
+            name="classifier"
             v-model.trim="info.classifier"
           ></v-text-field>
           <PaymentMethodInput v-model="info.paymentMethod" />
           <ValidationProvider
+            name="category"
             rules="required"
             v-slot="{errors}"
           >
             <v-select
               v-model="info.category"
               :items="categories"
-              label="Category"
+              :label="$t('fields.category')"
               :error-messages="errors"
               required
             ></v-select>
           </ValidationProvider>
           <v-textarea
             v-model.trim="info.notes"
-            label="Notes"
+            :label="$t('fields.notes')"
           ></v-textarea>
           <v-col class="row">
             <v-btn
@@ -54,18 +58,18 @@
                 left
                 dark
               >delete</v-icon>
-              Delete image
+              {{$t('actions.deleteImage')}}
             </v-btn>
             <v-btn
               class="ml-1 mr-1"
               type="submit"
               color="primary"
               :disabled="pending || invalid || !validated"
               :loading="pending"
-            >Save</v-btn>
+            >{{$t('actions.save')}}</v-btn>
             <ExternalValidation
               :name="$t('admin.testData.identifier')"
-              rules="unique"
+              rules="uniqueTestDataRecord"
               :value="identifier"
               :debounce="200"
             >
@@ -84,6 +88,7 @@ import {
   withValidation,
   ValidationObserver,
   ValidationProvider,
+  extend,
 } from 'vee-validate';
 import { VTextField } from 'vuetify/lib';
 
@@ -105,14 +110,14 @@ const VTextFieldWithValidation = withValidation(VTextField, ({ errors }) => ({
   'error-messages': errors,
 }));
 
-const unique = v => {
+extend('uniqueTestDataRecord', v => {
   return firebase
     .firestore()
     .collection('testData')
     .doc(v)
     .get()
     .then(snap => !snap.exists);
-};
+});
 
 function getExtensionForBlob(blob) {
   const m = blob.type.match(/^image\/(.*)$/);
@@ -247,7 +252,6 @@ export default {
     },
   },
   created() {
-    this.$validator.extend('unique', unique);
     this.image = {
       url: this.downloadUrl,
     };

src/views/admin/Admin.vue

@@ -21,7 +21,7 @@
           <v-divider></v-divider>
           <v-list-item>
             <v-list-item-content>
-              <v-list-item-subtitle>Test data</v-list-item-subtitle>
+              <v-list-item-subtitle>{{$t('admin.testData.title')}}</v-list-item-subtitle>
             </v-list-item-content>
           </v-list-item>
           <v-list
@@ -37,7 +37,7 @@
               </v-list-item-icon>
 
               <v-list-item-content>
-                <v-list-item-title>Upload</v-list-item-title>
+                <v-list-item-title>{{$t('admin.testData.upload')}}</v-list-item-title>
               </v-list-item-content>
             </v-list-item>
             <v-list-item
@@ -49,7 +49,7 @@
               </v-list-item-icon>
 
               <v-list-item-content>
-                <v-list-item-title>New record</v-list-item-title>
+                <v-list-item-title>{{$t('admin.testData.newRecord')}}</v-list-item-title>
               </v-list-item-content>
             </v-list-item>
             <v-list-item
@@ -61,7 +61,7 @@
               </v-list-item-icon>
 
               <v-list-item-content>
-                <v-list-item-title>Browse</v-list-item-title>
+                <v-list-item-title>{{$t('admin.testData.browse')}}</v-list-item-title>
               </v-list-item-content>
             </v-list-item>
           </v-list>

yarn.lock

@@ -12545,10 +12545,10 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
-vee-validate@^2.2.13:
-  version "2.2.15"
-  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-2.2.15.tgz#dc6c925d21e57288d3308fe5a39a0941036c575a"
-  integrity sha512-4TOsI8XwVkKVLkg8Nhmy+jyoJrR6XcTRDyxBarzcCvYzU61zamipS1WsB6FlDze8eJQpgglS4NXAS6o4NDPs1g==
+vee-validate@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-3.0.5.tgz#0555a329f90c32cacd37b8318b4d08e6526e1856"
+  integrity sha512-VmRscZiCMrL6t6WdR5yke1RzYAMnEB7wTA2FKnS1eGIRY2l71Z6FuUqgcm9rHtE3GXmi5NiF0RoiD0ivNC5crA==
 
 vendors@^1.0.0:
   version "1.0.3"