feat(darkMode): current darkMode value is now saved in vn.userConfig.darkMode

src/components/UserPanel.vue

@@ -3,6 +3,7 @@ import { onMounted, computed } from 'vue';
 import { Dark, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import axios from 'axios';
 
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
@@ -27,9 +28,11 @@ const darkMode = computed({
 const user = state.getUser();
 const token = session.getToken();
 
+if (user.value.darkMode) darkMode.value = user.value.darkMode;
+
 onMounted(async () => {
     try {
-        const stateRoles = state.getRoles().value
+        const stateRoles = state.getRoles().value;
         if (stateRoles.length === 0) {
             await role.fetch();
         }
@@ -42,11 +45,25 @@ onMounted(async () => {
     }
 });
 
+async function saveDarkMode(value) {
+    const query = `/api/UserConfigs/${user.value.id}`;
+    await axios.patch(query, {
+        darkMode: value,
+    });
+    user.value.darkMode = value;
+}
+
+async function saveLanguage(value) {
+    const query = `/api/Accounts/${user.value.id}`;
+    await axios.patch(query, {
+        lang: value,
+    });
+}
+
 function logout() {
     session.destroy();
     router.push('/login');
 }
-
 </script>
 
 <template>
@@ -55,20 +72,21 @@ function logout() {
             <div class="column">
                 <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
                 <q-toggle
+                    v-model="locale"
+                    @update:model-value="saveLanguage"
                     :label="t(`globals.lang['${locale}']`)"
                     icon="public"
                     color="orange"
                     false-value="es"
                     true-value="en"
-                    v-model="locale"
                 />
                 <q-toggle
                     v-model="darkMode"
+                    @update:model-value="saveDarkMode"
                     checked-icon="dark_mode"
                     color="orange"
                     unchecked-icon="light_mode"
                 />
-
                 <q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
             </div>
 
@@ -87,15 +105,7 @@ function logout() {
                 </div>
                 <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
 
-                <q-btn
+                <q-btn color="orange" flat label="Log Out" size="sm" icon="logout" @click="logout()" v-close-popup />
-                    color="orange"
-                    flat
-                    label="Log Out"
-                    size="sm"
-                    icon="logout"
-                    @click="logout()"
-                    v-close-popup
-                />
             </div>
         </div>
     </q-menu>

src/composables/useRole.js

@@ -8,7 +8,14 @@ export function useRole() {
         const { data } = await axios.get('/api/accounts/acl');
         const roles = data.roles.map(userRoles => userRoles.role.name);
 
-        state.setUser(data.user);
+        const userData = {
+            id: data.user.id,
+            name: data.user.name,
+            nickname: data.user.nickname,
+            language: data.user.lang || 'es',
+            darkMode: data.user.userConfig.darkMode,
+        }
+        state.setUser(userData);
         state.setRoles(roles);
     }
 

src/composables/useSession.js

@@ -30,6 +30,8 @@ export function useSession() {
             id: 0,
             name: '',
             nickname: '',
+            language: '',
+            darkMode: null,
         });
     }
 

src/composables/useState.js

@@ -4,6 +4,8 @@ const user = ref({
     id: 0,
     name: '',
     nickname: '',
+    language: '',
+    darkMode: null,
 });
 
 const roles = ref([]);
@@ -17,6 +19,8 @@ export function useState() {
                 id: user.value.id,
                 name: user.value.name,
                 nickname: user.value.nickname,
+                language: user.value.language,
+                darkMode: user.value.darkMode,
             };
         });
     }
@@ -26,6 +30,8 @@ export function useState() {
             id: data.id,
             name: data.name,
             nickname: data.nickname,
+            language: data.lang,
+            darkMode: data.darkMode,
         };
     }
 

src/pages/Login/Login.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
-import { Dark, useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
@@ -10,21 +10,12 @@ import { useSession } from 'src/composables/useSession';
 const quasar = useQuasar();
 const session = useSession();
 const router = useRouter();
-const { t, locale } = useI18n();
+const { t } = useI18n();
 
 const username = ref('');
 const password = ref('');
 const keepLogin = ref(true);
 
-const darkMode = computed({
-    get() {
-        return Dark.isActive;
-    },
-    set(value) {
-        Dark.set(value);
-    },
-});
-
 async function onSubmit() {
     try {
         const { data } = await axios.post('/api/accounts/login', {
@@ -66,36 +57,11 @@ async function onSubmit() {
 
 <template>
     <q-layout>
-        <q-header class="transparent">
-            <q-toolbar>
-                <q-space></q-space>
-                <q-toggle
-                    :label="t(`globals.lang['${locale}']`)"
-                    icon="public"
-                    color="orange"
-                    false-value="es"
-                    true-value="en"
-                    v-model="locale"
-                />
-                <q-toggle
-                    v-model="darkMode"
-                    checked-icon="dark_mode"
-                    color="orange"
-                    unchecked-icon="light_mode"
-                />
-            </q-toolbar>
-        </q-header>
         <q-page-container>
             <q-page>
                 <div id="login">
                     <q-card class="login q-pa-xl">
-                        <q-img
+                        <q-img src="~/assets/logo.svg" alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
-                            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
                                 filled
@@ -103,9 +69,7 @@ async function onSubmit() {
                                 v-model="username"
                                 :label="t('login.username')"
                                 lazy-rules
-                                :rules="[
+                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
-                                    (val) => (val && val.length > 0) || 'Please type something',
-                                ]"
                             />
                             <q-input
                                 filled
@@ -114,15 +78,9 @@ async function onSubmit() {
                                 v-model="password"
                                 :label="t('login.password')"
                                 lazy-rules
-                                :rules="[
+                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
-                                    (val) => (val && val.length > 0) || 'Please type something',
-                                ]"
-                            />
-                            <q-toggle
-                                v-model="keepLogin"
-                                :label="t('login.keepLogin')"
-                                color="orange"
                             />
+                            <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
 
                             <div>
                                 <q-btn :label="t('login.submit')" type="submit" color="orange" />