src/components/UserPanel.vue

@@ -25,12 +25,12 @@ const userLocale = computed({
         // FIXME: Dynamic imports from absolute paths are not compatible with vite:
         // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
         try {
-            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs')
+            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
-            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then(lang => {
+            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
-                Quasar.lang.set(lang.default)
+                Quasar.lang.set(lang.default);
-            })
+            });
         } catch (error) {
-
+            //
         }
     },
 });
@@ -88,19 +88,33 @@ function logout() {
         <div class="row no-wrap q-pa-md">
             <div class="column panel">
                 <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
-                <q-toggle v-model="userLocale" @update:model-value="saveLanguage"
+                <q-toggle
-                    :label="t(`globals.lang['${userLocale}']`)" icon="public" color="orange" false-value="es"
+                    v-model="userLocale"
-                    true-value="en" />
+                    @update:model-value="saveLanguage"
-                <q-toggle v-model="darkMode" @update:model-value="saveDarkMode" :label="t(`globals.darkMode`)"
+                    :label="t(`globals.lang['${userLocale}']`)"
-                    checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
+                    icon="public"
+                    color="orange"
+                    false-value="es"
+                    true-value="en"
+                />
+                <q-toggle
+                    v-model="darkMode"
+                    @update:model-value="saveDarkMode"
+                    :label="t(`globals.darkMode`)"
+                    checked-icon="dark_mode"
+                    color="orange"
+                    unchecked-icon="light_mode"
+                />
             </div>
 
             <q-separator vertical inset class="q-mx-lg" />
 
             <div class="column items-center panel">
                 <q-avatar size="80px">
-                    <q-img :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
+                    <q-img
-                        spinner-color="white" />
+                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
+                        spinner-color="white"
+                    />
                 </q-avatar>
 
                 <div class="text-subtitle1 q-mt-md">
@@ -108,8 +122,16 @@ function logout() {
                 </div>
                 <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
 
-                <q-btn id="logout" color="orange" flat :label="t('globals.logOut')" size="sm" icon="logout"
+                <q-btn
-                    @click="logout()" v-close-popup />
+                    id="logout"
+                    color="orange"
+                    flat
+                    :label="t('globals.logOut')"
+                    size="sm"
+                    icon="logout"
+                    @click="logout()"
+                    v-close-popup
+                />
             </div>
         </div>
     </q-menu>

src/pages/Login/LoginMain.vue

@@ -28,7 +28,9 @@ const userLocale = computed({
             langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
                 Quasar.lang.set(lang.default);
             });
-        } catch (error) {}
+        } catch (error) {
+            //
+        }
     },
 });
 
@@ -67,7 +69,9 @@ async function onSubmit() {
         } else {
             router.push({ name: 'Dashboard' });
         }
-    } catch (error) {}
+    } catch (error) {
+        //
+    }
 }
 </script>