chore: remove redundant store

Author: imrim12

app/@layouts/components/NavbarShortcuts.vue

@@ -4,18 +4,13 @@ import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
 
 const { t } = useI18n()
 const authStore = useAuthStore()
-const tokenDeviceStore = useTokenDeviceStore()
-const userEmail = computed(() => authStore.currentUser?.email)
-const userAvatar = computed(() => authStore.currentUser?.picture)
+const userEmail = computed(() => authStore.currentUser?.primary_email)
+const userAvatar = computed(() => authStore.currentUser?.avatar)
 const userFullname = computed(() => authStore.currentUser?.name)
-const userRole = computed(() => authStore.currentUser?.roles?.[0] || authStore.currentUser?.organization_roles?.[0] || t('User'))
 
 async function logout() {
   try {
-    if (authStore.currentUser)
-      await tokenDeviceStore.clearTokenDevice()
-
-    await authStore.signOut()
+    await navigateTo({ path: '/sign-out' }, { external: true })
 
     navigateTo({ name: 'auth-login' })
   }
@@ -51,12 +46,12 @@ const userProfileList = computed<Array<{
     title: t('Pricing'),
     to: { name: 'settings-pricing' },
   },
-  {
-    type: 'navItem',
-    icon: 'ri-question-line',
-    title: 'FAQ',
-    to: { name: 'faq' },
-  },
+  // {
+  //   type: 'navItem',
+  //   icon: 'ri-question-line',
+  //   title: 'FAQ',
+  //   to: { name: 'faq' },
+  // },
 ])
 </script>
 
@@ -114,8 +109,8 @@ const userProfileList = computed<Array<{
                 <div class="text-body-2 font-weight-medium text-high-emphasis">
                   {{ userFullname || userEmail }}
                 </div>
-                <div class="text-capitalize text-caption text-disabled">
-                  {{ userRole }}
+                <div class="text-caption text-disabled">
+                  {{ userEmail }}
                 </div>
               </div>
             </div>

app/@layouts/components/UserProfile.vue

@@ -30,8 +30,7 @@ const config = useRuntimeConfig()
       <NavBarI18n />
 
       <NavbarThemeSwitcher />
-      <NavbarShortcuts />
-      <NavBarNotifications class="me-2" />
+      <!-- <NavBarNotifications class="me-2" /> -->
       <UserProfile />
     </template>
 

app/@layouts/components/layout/DefaultLayoutWithHorizontalNav.vue

@@ -39,8 +39,7 @@ watch([
 
         <NavBarI18n />
         <NavbarThemeSwitcher />
-        <NavbarShortcuts />
-        <NavBarNotifications class="me-2" />
+        <!-- <NavBarNotifications class="me-2" /> -->
         <UserProfile />
       </div>
     </template>

app/@layouts/components/layout/DefaultLayoutWithVerticalNav.vue

@@ -1,4 +1,11 @@
+import type { User } from '@base/server/types/models'
+
 export function useApiAuth() {
+  function fetchProfile() {
+    // Get user credit from our database instead of depending on Logto data
+    return $api<{ data: User }>('/api/auth/me')
+  }
+
   function updateProfile(payload: Partial<{ username: string, name: string, avatar: string }>) {
     return $api('/api/auth/me', {
       method: 'PATCH',
@@ -14,6 +21,7 @@ export function useApiAuth() {
   }
 
   return {
+    fetchProfile,
     updateProfile,
     updatePassword,
   }

app/api/auth.ts

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTheme } from 'vuetify'
-import { getMessaging, onMessage } from 'firebase/messaging'
+import { getMessaging, getToken } from 'firebase/messaging'
 import ScrollToTop from '@base/@core/components/ScrollToTop.vue'
 import initCore from '@base/@core/initCore'
 import { initConfigStore, useConfigStore } from '@base/@core/stores/config'
@@ -18,14 +18,29 @@ const { global } = useTheme()
 if (isMobile)
   configStore.appContentLayoutNav = 'vertical'
 
-onBeforeMount(async () => {
-  if (!isInAppBrowser()) {
-    onMessage(getMessaging(), () => {
-    // TODO: Handle incoming messages
-    // console.log('Client message:', payload)
-    // const linkSplits = payload.fcmOptions?.link?.split('/projects/')
-    // notify(payload.notification?.body as string, { type: 'primary', link: `/projects/${linkSplits![1]}` })
-    })
+const config = useRuntimeConfig()
+
+const tokenDevice = useLocalStorage<string | null>('tokenDevice', null)
+
+const notificationApi = useApiNotification()
+
+onMounted(async () => {
+  if (!isInAppBrowser() && !tokenDevice.value) {
+    try {
+      if (Notification.permission !== 'granted')
+        await Notification.requestPermission()
+
+      const authStore = useAuthStore()
+
+      whenever(() => authStore.currentUser, async (currentUser) => {
+        if (Notification.permission === 'granted' && currentUser) {
+          const token = await getToken(getMessaging(), { vapidKey: config.public.firebase.keyPair })
+
+          notificationApi.createTokenDevice(token)
+        }
+      })
+    }
+    catch {}
   }
 })
 </script>

app/app.vue

@@ -5,6 +5,8 @@ const config = useRuntimeConfig()
 
 const inputFileRef = ref<HTMLElement>()
 
+const authApi = useApiAuth()
+
 const authStore = useAuthStore()
 const formFile = ref<File | null>(null)
 
@@ -97,7 +99,7 @@ async function handleSubmit() {
     if (formFile.value && authStore.currentUser)
       avatarUrl = await uploadToS3(formFile.value, authStore.currentUser.sub)
 
-    await authStore.updateProfile({
+    await authApi.updateProfile({
       ...formData.value,
       avatar: avatarUrl,
     })

app/components/account-settings/AccountSettingsAccount.vue

@@ -12,7 +12,7 @@ defineProps<{
 
 <template>
   <ErrorNotFound v-if="error?.statusCode === 404" />
-  <ErrorUnauthorized v-if="error?.statusCode === 403" />
+  <ErrorUnauthorized v-if="error?.statusCode === 403 || error?.statusCode === 401" />
   <ErrorUnderMaintenance v-if="error?.statusCode === 503" />
   <ErrorInternalServerError v-else :error="error" />
 </template>

app/composables/useMessaging.ts

@@ -2,10 +2,8 @@ export default defineNuxtRouteMiddleware(async (to) => {
   if (to.meta.public || import.meta.prerender)
     return
 
-  const healthStore = useHealthStore()
-
   try {
-    await healthStore.fetchHealthCheck()
+    await useApiHealth().fetchHealthCheck()
   }
   catch {
     throw createError({