Set darkmode as default & login settings

quasar.config.js

@@ -102,7 +102,8 @@ module.exports = configure(function (ctx) {
             config: {
                 brand: {
                     primary: 'orange'
-                }
+                },
+                dark: 'auto'
             },
             lang: 'es',
 

src/i18n/en/index.js

@@ -4,12 +4,13 @@ export default {
             es: 'Spanish',
             en: 'English',
         },
+        language: 'Language',
         collapseMenu: 'Collapse left menu',
         backToDashboard: 'Return to dashboard',
         notifications: 'Notifications',
         userPanel: 'User panel',
         favoriteModules: 'Favorite modules',
-        theme: 'Theme',
+        darkMode: 'Dark mode',
         logOut: 'Log out',
         dataSaved: 'Data saved',
         add: 'Add',
@@ -43,7 +44,8 @@ export default {
         submit: 'Log in',
         keepLogin: 'Keep me logged in',
         loginSuccess: 'You have successfully logged in',
-        loginError: 'Invalid username or password'
+        loginError: 'Invalid username or password',
+        fieldRequired: 'This field is required'
     },
     dashboard: {
         pageTitles: {

src/i18n/es/index.js

@@ -4,12 +4,13 @@ export default {
             es: 'Español',
             en: 'Inglés',
         },
+        language: 'Idioma',
         collapseMenu: 'Contraer menú lateral',
         backToDashboard: 'Volver al tablón',
         notifications: 'Notificaciones',
         userPanel: 'Panel de usuario',
         favoriteModules: 'Módulos favoritos',
-        theme: 'Tema',
+        darkMode: 'Modo oscuro',
         logOut: 'Cerrar sesión',
         dataSaved: 'Datos guardados',
         add: 'Añadir',
@@ -44,6 +45,7 @@ export default {
         keepLogin: 'Mantener sesión iniciada',
         loginSuccess: 'Inicio de sesión correcto',
         loginError: 'Nombre de usuario o contraseña incorrectos',
+        fieldRequired: 'Este campo es obligatorio'
     },
     dashboard: {
         pageTitles: {

src/pages/Login/Login.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
-import { useQuasar } from 'quasar';
+import { Dark, Quasar, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
@@ -10,7 +10,31 @@ import { useSession } from 'src/composables/useSession';
 const quasar = useQuasar();
 const session = useSession();
 const router = useRouter();
-const { t } = useI18n();
+const { t, locale } = useI18n();
+
+const userLocale = computed({
+    get() {
+        return locale.value;
+    },
+    set(value) {
+        locale.value = value;
+
+        if (value === 'en') value = 'en-GB';
+
+        import(`quasar/lang/${value}`).then((language) => {
+            Quasar.lang.set(language.default);
+        });
+    },
+});
+
+const darkMode = computed({
+    get() {
+        return Dark.isActive;
+    },
+    set(value) {
+        Dark.set(value);
+    },
+});
 
 const username = ref('');
 const password = ref('');
@@ -43,35 +67,61 @@ async function onSubmit() {
 <template>
     <q-layout>
         <q-page-container>
-            <q-page>
+            <q-page id="login">
-                <div id="login">
+                <q-page-sticky position="top-right">
-                    <q-card class="login q-pa-xl">
+                    <q-toolbar>
-                        <q-img src="~/assets/logo.svg" alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
+                        <q-btn :label="t('globals.language')" icon="translate" color="primary" size="sm" flat rounded>
-                        <q-form @submit="onSubmit" class="q-gutter-md">
+                            <q-menu auto-close>
-                            <q-input
+                                <q-list dense>
-                                filled
+                                    <q-item @click="userLocale = 'en'" :active="userLocale == 'en'" v-ripple clickable>
-                                color="orange"
+                                        {{ t('globals.lang.en') }}
-                                v-model="username"
+                                    </q-item>
-                                :label="t('login.username')"
+                                    <q-item @click="userLocale = 'es'" :active="userLocale == 'es'" v-ripple clickable>
-                                lazy-rules
+                                        {{ t('globals.lang.es') }}
-                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
+                                    </q-item>
-                            />
+                                </q-list>
-                            <q-input
+                            </q-menu>
-                                filled
+                        </q-btn>
-                                color="orange"
+                        <q-list>
-                                type="password"
+                            <q-item>
-                                v-model="password"
+                                <q-item-section>
-                                :label="t('login.password')"
+                                    <q-item-label>{{ t(`globals.darkMode`) }}</q-item-label>
-                                lazy-rules
+                                </q-item-section>
-                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
+                                <q-item-section side>
-                            />
+                                    <q-toggle v-model="darkMode" checked-icon="dark_mode" unchecked-icon="light_mode" />
-                            <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
+                                </q-item-section>
+                            </q-item>
+                        </q-list>
+                    </q-toolbar>
+                </q-page-sticky>
+                <div class="login-form q-pa-xl">
+                    <q-img src="~/assets/logo.svg" alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
+                    <q-form @submit="onSubmit" class="q-gutter-md">
+                        <q-input
+                            v-model="username"
+                            :label="t('login.username')"
+                            lazy-rules
+                            :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
+                        />
+                        <q-input
+                            type="password"
+                            v-model="password"
+                            :label="t('login.password')"
+                            lazy-rules
+                            :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
+                        />
+                        <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" />
 
-                            <div>
+                        <div>
-                                <q-btn :label="t('login.submit')" type="submit" color="orange" />
+                            <q-btn
-                            </div>
+                                :label="t('login.submit')"
-                        </q-form>
+                                type="submit"
-                    </q-card>
+                                color="primary"
+                                class="full-width"
+                                rounded
+                            />
+                        </div>
+                    </q-form>
                 </div>
             </q-page>
         </q-page-container>
@@ -86,7 +136,7 @@ async function onSubmit() {
     min-height: inherit;
 }
 
-.login {
+.login-form {
     width: 400px;
 }
 </style>