feat: auth request

src/components/Navigation/Header.vue

@@ -111,7 +111,7 @@ const showDialogLogout = () => {
                       {{ user.user_access }}
                     </p>
                     <p class="text-xs font-normal border-t border-white text-primary-50">
-                      • UID {{ user.user_uid }}
+                      • {{ user.user_uid }}
                     </p>
                   </div>
                 </div>

src/stores/auth.ts

@@ -20,76 +20,19 @@ export const useAuthStore = defineStore('auth', () => {
         type: 'warning'
       })
     } else {
-      // isLoading.value = true
+      if (username.value == 'demo' && password.value == 'demo') {
-
-      // try {
-      //   const response = await authenticateUser(username.value, password.value)
-
-      //   if (response.success) {
-      //     writeData('token', response.token)
-
-      //     filterPresets.value = {
-      //       regional
-      //       uid: {
-      //         id: 2,
-      //         name: 'DISTRIBUSI JAKARTA RAYA'
-      //       },
-      //       up3: {
-      //         id: 4,
-      //         name: 'UP3 MENTENG'
-      //       },
-      //       posko: {
-      //         id: 541101,
-      //         name: 'POSKO MENTENG'
-      //       },
-      //       ulp,
-      //     }
-
-      //     if (Object.keys(filterPresets.value).length > 0) {
-      //       writeDataJson('filterPresets', filterPresets.value)
-      //     }
-
-      //     dispatchNotification({
-      //       title: 'Berhasil',
-      //       content: 'Login berhasil, selamat datang kembali!',
-      //       type: 'success'
-      //     })
-
-      //     window.location.reload()
-      //   } else {
-      //     dispatchNotification({
-      //       title: 'Login Gagal',
-      //       content: 'Username atau password salah',
-      //       type: 'error'
-      //     })
-      //   }
-      // } catch (error) {
-      //   dispatchNotification({
-      //     title: 'Login Gagal',
-      //     content: 'Terjadi kesalahan saat melakukan login',
-      //     type: 'error'
-      //   })
-      // } finally {
-      //   isLoading.value = false
-      // }
-
         isLoading.value = true
         setTimeout(() => {
           isLoading.value = false
           if (username.value == 'demo' && password.value == 'demo') {
-          // store token in localStorage
             writeData('token', 'secret-token')
 
-          if (Object.keys(filterPresets.value).length > 0) {
-            writeDataJson('filterPresets', filterPresets.value)
-          }
-
             dispatchNotification({
               title: 'Berhasil',
               content: 'Login berhasil, selamat datang kembali!',
               type: 'success'
             })
-          // redirect to home page after login
+
             window.location.reload()
           } else {
             dispatchNotification({
@@ -99,12 +42,79 @@ export const useAuthStore = defineStore('auth', () => {
             })
           }
         }, 3000)
+      } else {
+        isLoading.value = true
+
+        try {
+          const response = await authenticateUser(username.value, password.value)
+
+          if (response.status) {
+            const data = response.user
+
+            writeData('token', 'secret-token')
+            writeData('user_name', data.username)
+            writeData('user_access', 'Petugas')
+            writeData('user_uid', data.namaUid)
+
+            handlePresets(data, filterPresets)
+
+            dispatchNotification({
+              title: 'Berhasil',
+              content: 'Login berhasil, selamat datang kembali!',
+              type: 'success'
+            })
+
+            window.location.reload()
+          } else {
+            dispatchNotification({
+              title: 'Login Gagal',
+              content: 'Username atau password salah',
+              type: 'error'
+            })
+          }
+        } catch (error) {
+          dispatchNotification({
+            title: 'Login Gagal',
+            content: 'Terjadi kesalahan saat melakukan login',
+            type: 'error'
+          })
+        } finally {
+          isLoading.value = false
+        }
+      }
+    }
+  }
+
+  const handlePresets = (data: any, filterPresets: any) => {
+    const keys = ['regional', 'uid', 'up3', 'posko', 'ulp']
+    let isChanged = false
+
+    for (const key of keys) {
+      const idKey = `id${key.charAt(0).toUpperCase() + key.slice(1)}`
+      const nameKey = `nama${key.charAt(0).toUpperCase() + key.slice(1)}`
+
+      if (data[nameKey] && data[idKey]) {
+        filterPresets.value[key] = {
+          id: data[idKey],
+          name: data[nameKey]
+        }
+        isChanged = true
+      }
+    }
+
+    console.log(filterPresets.value)
+
+    if (isChanged) {
+      writeDataJson('filterPresets', filterPresets.value)
     }
   }
 
   const logout = () => {
     removeData('token')
     removeData('filterPresets')
+    removeData('user_name')
+    removeData('user_access')
+    removeData('user_uid')
   }
 
   return {

src/stores/user.ts

@@ -1,11 +1,16 @@
-import { computed } from 'vue';
+import { computed } from 'vue'
-import { defineStore } from 'pinia';
+import { defineStore } from 'pinia'
+import { readData } from '@/utils/storage'
 
 export const useUserStore = defineStore('user', () => {
-    const user_name = computed(() => localStorage.getItem('user_name') || 'Demo User')
+  const user_name = computed(() => readData('user_name') || 'Demo User')
-    const user_access = computed(() => localStorage.getItem('user_access') || 'Super Admin')
+  const user_access = computed(() => readData('user_access') || 'Super Admin')
-    const user_uid = computed(() => localStorage.getItem('user_uid') || 'Jakarta Raya')
+  const user_uid = computed(() => readData('user_uid') || 'Jakarta Raya')
-    const user_image = computed(() => localStorage.getItem('user_image') || 'https://iidamidamerica.org/wp-content/uploads/2020/12/male-placeholder-image.jpeg')
+  const user_image = computed(
+    () =>
+      readData('user_image') ||
+      'https://iidamidamerica.org/wp-content/uploads/2020/12/male-placeholder-image.jpeg'
+  )
 
   return { user_name, user_access, user_image, user_uid }
 })