login transalations amends

src/locales/en.json

@@ -1,4 +1,22 @@
 {
-  "message": "hello i18n !!",
-  "Username": "Usuario"
+    "globals": {
+        "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",
-        "Landed": "Aterrizado"
+        "lang": {
+            "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": {
-
-        },
-        "calendar": {
-
-        }
+        "dialog": {},
+        "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({
-    i18n: {
-        messages: {
-            es: {
-                Password: 'Contraseña',
-                'Keep logged in': 'Mantener sesión iniciada',
-                Login: 'Iniciar sesión',
-                'Login failed': 'Inicio de sesión fallido',
-            },
-        },
-    },
-})
+interface LoginForm {
+    username: string;
+    password: string;
+    keepLogin: boolean;
+    Dark: Dark;
+}
 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: '',