✨ all components working well

client/app.config.ts

@@ -1,10 +1,11 @@
 export default defineAppConfig({
  ui: {
  primary: 'emerald',
+ strategy: 'override',
  gray: 'slate',
  notifications: {
  // Show toasts at the top right of the screen for desktop
- // position: 'lg:top-0 lg:right-0 lg:justify-start',
+ position: 'lg:top-0 lg:right-0 lg:justify-start',
 
  },
  button: {

client/app.vue

@@ -21,7 +21,8 @@ useApi().setNuxtApp(useNuxtApp())
  <span v-html="description" />
  </template>
  </u-notifications>
- <header-login-modal />
+ <layout-login-modal />
+ <layout-confirm />
  </nuxt-layout>
  </div>
 </template>

client/components/header/HeaderBar.vue

@@ -39,7 +39,9 @@ const menu = new Menu(api)
  </button>
  </a>
  <header-dark-mode />
- <header-profile />
+ <client-only>
+ <header-profile />
+ </client-only>
  </div>
  </div>
  </nav>

client/components/header/HeaderProfile.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import Menu from '@/lib/menu'
-
 const route = useRoute()
 const router = useRouter()
 const api = useApi()
@@ -11,48 +9,55 @@ const outside = ref(null)
 
 const { loginModalOn } = useModal()
 
-const menu = new Menu(route, router, api)
-
 const toggle = () => profile.value = !profile.value
 const login = () => modal.value = true
 const off = () => modal.value = false
+
+const profileGroup = [
+ [
+ {
+ icon: 'i-mdi-account',
+ label: 'Your Profile',
+ click: () => navigateTo('/profile'),
+ },
+ {
+ icon: 'i-mdi-devices',
+ label: 'Your Devices',
+ click: () => navigateTo('/sessions'),
+ },
+ ],
+ [
+ {
+ icon: 'i-mdi-logout',
+ label: 'Logout',
+ click: async () => {
+ await useApi().logout()
+ useToast().add({ icon: 'i-mdi-logout', title: 'Logged out', })
+
+ }
+ },
+ ],
+ ]
+
+
+
 </script>
 
 <template>
  <div ref="outside" class="flex-shrink-0 relative mr-5">
- <client-only>
- <div class="flex items-center text-white space-x-4">
- <u-button v-if="!api.loggedIn.value" theme="indigo" @click="loginModalOn">
- Sign In
- </u-button>
- <button
- v-else
- id="user-menu-button"
- type="button"
- class="max-w-xs bg-blue-300 flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300"
- aria-expanded="false"
- aria-haspopup="true"
- @click="toggle"
- >
+ <div class="flex items-center text-white space-x-4">
+ <u-button v-if="!api.loggedIn.value" theme="indigo" @click="loginModalOn">
+ Sign In
+ </u-button>
+ <u-dropdown v-else :items="profileGroup">
+ <u-button variant="ghost" color="white" size="xs">
  <span class="sr-only">Open user menu</span>
  <img
  v-if="api.$user.avatar" class="w-8 h-8 rounded-full bg-blue-400" :src="api.$user.avatar"
  alt="User Avatar"
  >
- </button>
- </div>
- <transition-dropdown>
- <dropdown-group
- v-if="profile"
- :groups="menu.profileGroup"
- width="w-48"
- />
- </transition-dropdown>
- </client-only>
+ </u-button>
+ </u-dropdown>
+ </div>
  </div>
- <header-login-modal
- v-if="modal"
- :destroyed="off"
- @off="off"
- />
 </template>

client/components/layout/LayoutBreadCrumbs.vue

@@ -4,7 +4,7 @@ const { list, actions } = useCrumbs()
 
 <template>
  <div>
- <nav class="flex justify-between px-4 sm:px-6 border-b border-gray-300 dark:border-gray-700 lg:border-0" aria-label="Breadcrumb">
+ <nav class="flex h-12 justify-between px-4 sm:px-6 border-b border-gray-300 dark:border-gray-700 lg:border-0" aria-label="Breadcrumb">
  <client-only>
  <ol class="flex items-center space-x-4 py-3">
  <transition-group
@@ -17,7 +17,7 @@ const { list, actions } = useCrumbs()
  >
  <li key="home">
  <div>
- <router-link to="/home" class="text-gray-400 hover:text-gray-500">
+ <router-link to="/" class="text-gray-400 hover:text-gray-500">
  <icon icon="fa-solid:home" class="w-5 h-5" />
  <span class="sr-only">Home</span>
  </router-link>

client/components/layout/LayoutConfirm.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+const { confirming, params } = useConfirm()
+function action (): void {
+ confirming.value = false
+ params.value.action()
+}
+</script>
+
+<template>
+ <u-modal v-model="confirming" :ui="{ width: 'sm:max-w-sm' }">
+ <u-card>
+ <template #header>
+ <span class="font-semibold" v-html="params.title" />
+ </template>
+ <div v-html="params.message" />
+ <template #footer>
+ <div class="flex justify-end space-x-2">
+ <u-button color="white" @click="confirming = false"> Cancel </u-button>
+ <u-button color="red" variant="solid" @click="action"> {{ params.label }}</u-button>
+ </div>
+ </template>
+ </u-card>
+ </u-modal>
+</template>

client/components/header/HeaderLoginModal.vue → client/components/layout/LayoutLoginModal.vue

@@ -74,7 +74,7 @@ onBeforeUnmount(() => messageHandler(false))
 
 <template>
  <u-modal v-model="loginModal">
- <div class="bg-white dark:bg-gray-800 py-8 px-4 sm:px-10">
+ <div class="bg-white dark:bg-gray-950 py-8 px-4 sm:px-10">
  <div class="grid grid-cols-2 gap-3">
  <div>
  <u-button class="w-full justify-center" @click="login('google')" color="white">
@@ -110,7 +110,7 @@ onBeforeUnmount(() => messageHandler(false))
  <div class="w-full border-t border-gray-300 dark:border-gray-600" />
  </div>
  <div class="relative flex justify-center text-sm leading-5">
- <span class="px-2 bg-white dark:bg-gray-800 text-gray-500">
+ <span class="px-2 bg-white dark:bg-gray-950 text-gray-500">
  Or continue with
  </span>
  </div>

client/composables/api.ts

@@ -13,7 +13,7 @@ export const useApi = () => {
  webURL: config.public.webURL,
  redirect: {
  logout: '/',
- login: '/home',
+ login: '/gated',
  },
  /*
  echoConfig: {

client/lib/api.ts

@@ -66,6 +66,13 @@ export default class Api {
  this.config = { ...authConfigDefaults, ...config }
  }
 
+ public async invalidate(): Promise<void> {
+ this.token.value = undefined
+ this.loggedIn.value = false
+ Object.assign(this.$user, {})
+ navigateTo(this.config.redirect.logout)
+ }
+
  setNuxtApp(nuxtApp:NuxtApp) {
  this.nuxtApp = nuxtApp
  }
@@ -81,10 +88,8 @@ export default class Api {
  }
 
  async checkUser() {
- if (this.token.value !== undefined) {
- await this.setUser()
- this.loggedIn.value = true
- }
+ if (this.token.value !== undefined)
+ this.loggedIn.value = await this.setUser()
  else this.loggedIn.value = false
  }
 
@@ -113,7 +118,7 @@ export default class Api {
  Object.assign(this.$user, result.user)
  this.setEcho()
  if (!discreet)
- useToast().add({ icon: 'i-mdi-check-bold', color: 'green', title: 'Login Successful', timeout: 1 })
+ useToast().add({ icon: 'i-mdi-check-bold', color: 'green', title: 'Login Successful' })
  if (result.action && result.action.action === 'redirect')
  return result.action.url
  return this.config.redirect.login
@@ -143,11 +148,12 @@ export default class Api {
  return this.config.fetchOptions
  }
 
- public async setUser(): Promise<void> {
+ public async setUser(): Promise<boolean> {
  const result = await $fetch<api.MetApiResults & { data: models.User }>('/me', this.fetchOptions())
- if (!result || !result.status || result.status !== 'success') this.invalidate()
+ if (!result || !result.status || result.status !== 'success') return false
  Object.assign(this.$user, result.data)
  this.setEcho()
+ return true
  }
 
  public async index<Results>(endpoint: string, params?: SearchParameters): Promise<Results> {
@@ -225,11 +231,4 @@ export default class Api {
  useToast().add({ icon: 'i-mdi-check-bold', color: 'green', title: response.data.message, timeout: 1 })
  await this.invalidate()
  }
-
- public async invalidate(): Promise<void> {
- this.token.value = undefined
- this.loggedIn.value = false
- Object.assign(this.$user, {})
- navigateTo(this.config.redirect.logout)
- }
 }

client/lib/menu.ts

@@ -45,29 +45,6 @@ export default class {
  },
  ]
  }
-
- public profileGroup: DropdownGroup = [
- [
- {
- icon: 'carbon:user-profile',
- name: 'Your Profile',
- action: () => navigateTo('/profile'),
- },
- {
- icon: 'mdi-devices',
- name: 'Your Devices',
- action: () => navigateTo('/sessions'),
- },
- ],
- [
- {
- icon: 'heroicons-outline:logout',
- name: 'Logout',
- action: async () => await this.logout(),
- },
- ],
- ]
-
  private async logout() {
  await this.api.logout()
  }

client/middleware/auth.global.ts

@@ -5,9 +5,9 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
  await api.checkUser()
  const menu = new Menu(api)
  const item = menu.items().find(item => item.to === to.path)
- if (item?.gated === true && api.loggedIn.value === false) {
+ if (item && item.gated === true && api.loggedIn.value === false) {
  useToast().add({ icon: 'i-mdi-lock', color: 'red', title: 'Access Denied', })
- // return navigateTo('/')
+ return navigateTo('/')
  }
 
 })

client/pages/gated.vue

@@ -3,7 +3,6 @@ const api = useApi()
 const { setCrumbs } = useCrumbs()
 
 setCrumbs([
- { name: 'Home', to: '/' },
  { name: 'Gated', to: '/gated' },
 ])
 </script>