login transalations amends

package-lock.json

@@ -23940,7 +23940,8 @@
             "version": "4.5.15",
             "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz",
             "integrity": "sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==",
-      "dev": true
+            "dev": true,
+            "requires": {}
         },
         "@vue/cli-service": {
             "version": "4.5.15",
@@ -24175,7 +24176,8 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
             "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+            "dev": true,
+            "requires": {}
         },
         "@vue/reactivity": {
             "version": "3.2.31",
@@ -24234,7 +24236,8 @@
             "version": "2.0.0-rc.17",
             "resolved": "https://registry.npmmirror.com/@vue/test-utils/-/test-utils-2.0.0-rc.17.tgz",
             "integrity": "sha512-7LHZKsFRV/HqDoMVY+cJamFzgHgsrmQFalROHC5FMWrzPzd+utG5e11krj1tVsnxYufGA2ABShX4nlcHXED+zQ==",
-      "dev": true
+            "dev": true,
+            "requires": {}
         },
         "@vue/web-component-wrapper": {
             "version": "1.3.0",
@@ -24485,7 +24488,8 @@
             "version": "5.3.2",
             "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
             "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+            "dev": true,
+            "requires": {}
         },
         "acorn-walk": {
             "version": "7.2.0",
@@ -24515,13 +24519,15 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmmirror.com/ajv-errors/-/ajv-errors-1.0.1.tgz",
             "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+            "dev": true,
+            "requires": {}
         },
         "ajv-keywords": {
             "version": "3.5.2",
             "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
             "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+            "dev": true,
+            "requires": {}
         },
         "alphanum-sort": {
             "version": "1.0.2",
@@ -24865,7 +24871,8 @@
             "version": "7.0.0-bridge.0",
             "resolved": "https://registry.npmmirror.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
             "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
-      "dev": true
+            "dev": true,
+            "requires": {}
         },
         "babel-jest": {
             "version": "24.9.0",
@@ -30880,7 +30887,8 @@
                     "version": "7.5.7",
                     "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.7.tgz",
                     "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
-          "dev": true
+                    "dev": true,
+                    "requires": {}
                 }
             }
         },
@@ -31030,7 +31038,8 @@
             "version": "1.2.2",
             "resolved": "https://registry.npmmirror.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
             "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true
+            "dev": true,
+            "requires": {}
         },
         "jest-regex-util": {
             "version": "24.9.0",
@@ -37103,7 +37112,8 @@
         "vue-class-component": {
             "version": "8.0.0-rc.1",
             "resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
-      "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ=="
+            "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
+            "requires": {}
         },
         "vue-cli-plugin-i18n": {
             "version": "2.3.1",

src/locales/en.json

@@ -1,4 +1,22 @@
 {
-  "message": "hello i18n !!",
+    "globals": {
-  "Username": "Usuario"
+        "lang": {
+            "es": "Spanish",
+            "en": "English"
+        }
+    },
+    "login": {
+        "title": "Login",
+        "username": "Username",
+        "password": "Password",
+        "submit": "Log in",
+        "keepLogin": "Keep me logged in",
+        "loginSuccess": "You have successfully logged in",
+        "loginError": "Invalid username or password"
+    },
+    "customer": {},
+    "components": {
+        "dialog": {},
+        "calendar": {}
+    }
 }

src/locales/es.json

@@ -1,22 +1,22 @@
 {
     "globals": {
-        "Shipped": "Enviado",
+        "lang": {
-        "Landed": "Aterrizado"
+            "es": "Español",
+            "en": "Inglés"
+        } 
     },
     "login": {
         "title": "Iniciar sesión",
         "username": "Nombre de usuario",
         "password": "Contraseña",
         "submit": "Iniciar sesión",
-        "keepLogin": "Mantener sesión iniciada"
+        "keepLogin": "Mantener sesión iniciada",
+        "loginSuccess": "Inicio de sesión correcto",
+        "loginError": "Nombre de usuario o contraseña incorrectos"
     },
     "customer": {},
     "components": {
-        "dialog": {
+        "dialog": {},
-
+        "calendar": {}
-        },
-        "calendar": {
-
-        }
     }
 }

src/views/Login/Login.vue

@@ -3,6 +3,14 @@
         <q-header class="transparent">
             <q-toolbar>
                 <q-space></q-space>
+                <q-toggle
+                    :label="$t(`globals.lang['${language}']`)"
+                    icon="public"
+                    color="orange"
+                    false-value="es"
+                    true-value="en"
+                    v-model="language"
+                />
                 <q-toggle v-model="mode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
             </q-toolbar>
         </q-header>
@@ -47,26 +55,21 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 import { Dark, useQuasar } from 'quasar';
 import axios from 'axios';
 
-@Options({
+interface LoginForm {
-    i18n: {
+    username: string;
-        messages: {
+    password: string;
-            es: {
+    keepLogin: boolean;
-                Password: 'Contraseña',
+    Dark: Dark;
-                'Keep logged in': 'Mantener sesión iniciada',
+}
-                Login: 'Iniciar sesión',
-                'Login failed': 'Inicio de sesión fallido',
-            },
-        },
-    },
-})
 export default class Login extends Vue {
     username?: string;
     password?: string;
     keepLogin?: boolean;
+    private lang = 'es';
 
     setup() {
         return {
@@ -74,12 +77,6 @@ export default class Login extends Vue {
         };
     }
 
-    mounted() {
-        this.$i18n.locale = 'es';
-        //this.$q.lang.set();
-        console.log(this.$i18n.locale);
-    }
-
     get mode(): boolean {
         return Dark.isActive;
     }
@@ -88,6 +85,15 @@ export default class Login extends Vue {
         Dark.set(value);
     }
 
+    get language(): string {
+        return this.lang;
+    }
+
+    set language(value: string) {
+        this.lang = value;
+        this.$i18n.locale = value;
+    }
+
     onSubmit(): void {
         axios
             .post('/api/accounts/login', {
@@ -96,20 +102,20 @@ export default class Login extends Vue {
             })
             .then(() => {
                 this.$q.notify({
-                    message: 'Login success',
+                    message: this.$t('login.loginSuccess'),
                     type: 'positive',
                 });
                 this.$router.push('/dashboard');
             })
             .catch(() =>
                 this.$q.notify({
-                    message: this.$t('Login failed'),
+                    message: this.$t('login.loginError'),
                     type: 'negative',
                 })
             );
     }
 
-    data() {
+    data(): LoginForm {
         return {
             username: '',
             password: '',