fix: show snackbar on invalid password

src/pages/login.vue

@@ -48,14 +48,18 @@ const isSnackbarVisibility = ref(false)
 const useUserStore = userStore()
 
 const login = async () => {
-  // update the userStore with the user data
-  useUserStore.login(credentials.value.username, credentials.value.password, ability)
+  try {
+    await useUserStore.login(credentials.value.username, credentials.value.password, ability)
 
-  // Redirect to `to` query if exist or redirect to index route
-  // ❗ nextTick is required to wait for DOM updates and later redirect
-  await nextTick(() => {
-    router.replace(route.query.to ? String(route.query.to) : '/')
-  })
+    // Redirect to `to` query if exist or redirect to index route
+    // ❗ nextTick is required to wait for DOM updates and later redirect
+    await nextTick(() => {
+      router.replace(route.query.to ? String(route.query.to) : '/')
+    })
+  }
+  catch (err) {
+    isSnackbarVisibility.value = true
+  }
 }
 
 const onSubmit = () => {

src/stores/user.store.ts

@@ -29,8 +29,9 @@ export const userStore = defineStore('user', {
         useCookie('userAbilityRules').value = rules
         ability.update(rules)
       }
-      catch (err) {
-        console.error(err)
+      catch (err: any) {
+        console.log(err.message)
+        throw err // Rethrow the error so it can be caught in the component
       }
     },
     logout() {

src/utils/api.ts

@@ -7,8 +7,9 @@ export const $api = ofetch.create({
     if (accessToken) {
       options.headers = {
         ...options.headers,
-        'Authorization': `Bearer ${accessToken}`,
-        'Cache-Control': 'no-cache',
+        Authorization: `Bearer ${accessToken}`,
+
+        // 'Cache-Control': 'no-cache',
       }
     }
   },