From c7034e159e097739190b245fb73c0877d8db597e Mon Sep 17 00:00:00 2001
From: kevin olson <acidjazz@gmail.com>
Date: Sun, 8 Oct 2023 01:39:10 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20all=20components=20working=20well?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/app.config.ts                          |  3 +-
 client/app.vue                                |  3 +-
 client/components/dropdown/DropdownGroup.vue  | 61 ----------------
 client/components/header/HeaderBar.vue        |  4 +-
 client/components/header/HeaderProfile.vue    | 71 ++++++++++---------
 .../components/layout/LayoutBreadCrumbs.vue   |  4 +-
 client/components/layout/LayoutConfirm.vue    | 24 +++++++
 .../LayoutLoginModal.vue}                     |  4 +-
 client/composables/api.ts                     |  2 +-
 client/lib/api.ts                             | 27 ++++---
 client/lib/menu.ts                            | 23 ------
 client/middleware/auth.global.ts              |  4 +-
 client/pages/gated.vue                        |  1 -
 client/pages/home.vue                         | 12 ----
 14 files changed, 89 insertions(+), 154 deletions(-)
 delete mode 100644 client/components/dropdown/DropdownGroup.vue
 create mode 100644 client/components/layout/LayoutConfirm.vue
 rename client/components/{header/HeaderLoginModal.vue => layout/LayoutLoginModal.vue} (97%)
 delete mode 100644 client/pages/home.vue

diff --git a/client/app.config.ts b/client/app.config.ts
index 18d98c2..aa52ca8 100644
--- a/client/app.config.ts
+++ b/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: {
diff --git a/client/app.vue b/client/app.vue
index 45a983d..d6ecbee 100644
--- a/client/app.vue
+++ b/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>
diff --git a/client/components/dropdown/DropdownGroup.vue b/client/components/dropdown/DropdownGroup.vue
deleted file mode 100644
index 0a966dd..0000000
--- a/client/components/dropdown/DropdownGroup.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts" setup>
-import { Icon } from '@iconify/vue'
-
-/** Menu item */
-export interface DropdownItem {
-  /* Icon component shown next to the name */
-  icon?: string
-  /* Menu item name shown */
-  name: string
-  /* Action that is executed on click */
-  action: () => unknown
-  /* Additional tailwindcss classes added to the items icon */
-  iconClass?: string
-}
-export type DropdownGroup = DropdownItem[][]
-export type DropdownItems = DropdownItem[]
-
-export interface Props {
-  groups: DropdownGroup
-  width?: string
-  mt?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  width: 'w-44',
-  mt: 'mt-2',
-})
-
-const emit = defineEmits<{ (event: 'action', value: string): void }>()
-
-const action = (action: string | (() => void)): void => {
-  if (typeof action === 'function')
-    action()
-  else emit('action', action)
-}
-</script>
-
-<template>
-  <div
-    class="origin-top-right border dark:border-gray-700 z-20 absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-900 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-600"
-    :class="[mt, width]"
-  >
-    <div v-for="(items, i) in groups" :key="i" class="py-1">
-      <div
-        v-for="item in items"
-        :key="item.name"
-        class="cursor-pointer group flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-300"
-        role="menuitem"
-        @click="action(item.action)"
-      >
-        <Icon
-          v-if="item.icon"
-          :icon="item.icon"
-          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-emerald-500 dark:group-hover:text-emerald-300"
-          :class="item.iconClass ? item.iconClass : ''"
-        />
-        {{ item.name }}
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/client/components/header/HeaderBar.vue b/client/components/header/HeaderBar.vue
index 191e649..0b9ed95 100644
--- a/client/components/header/HeaderBar.vue
+++ b/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>
diff --git a/client/components/header/HeaderProfile.vue b/client/components/header/HeaderProfile.vue
index a4e0c7a..b2ec1da 100644
--- a/client/components/header/HeaderProfile.vue
+++ b/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>
diff --git a/client/components/layout/LayoutBreadCrumbs.vue b/client/components/layout/LayoutBreadCrumbs.vue
index 146e1ec..89fc260 100644
--- a/client/components/layout/LayoutBreadCrumbs.vue
+++ b/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>
diff --git a/client/components/layout/LayoutConfirm.vue b/client/components/layout/LayoutConfirm.vue
new file mode 100644
index 0000000..68afbfc
--- /dev/null
+++ b/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>
diff --git a/client/components/header/HeaderLoginModal.vue b/client/components/layout/LayoutLoginModal.vue
similarity index 97%
rename from client/components/header/HeaderLoginModal.vue
rename to client/components/layout/LayoutLoginModal.vue
index 272ef33..b191d18 100644
--- a/client/components/header/HeaderLoginModal.vue
+++ b/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>
diff --git a/client/composables/api.ts b/client/composables/api.ts
index 56d222d..3ad5549 100644
--- a/client/composables/api.ts
+++ b/client/composables/api.ts
@@ -13,7 +13,7 @@ export const useApi = () => {
       webURL: config.public.webURL,
       redirect: {
         logout: '/',
-        login: '/home',
+        login: '/gated',
       },
       /*
       echoConfig: {
diff --git a/client/lib/api.ts b/client/lib/api.ts
index 80fdc3a..d0e49e9 100644
--- a/client/lib/api.ts
+++ b/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)
-  }
 }
diff --git a/client/lib/menu.ts b/client/lib/menu.ts
index 6df9e76..220042c 100644
--- a/client/lib/menu.ts
+++ b/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()
   }
diff --git a/client/middleware/auth.global.ts b/client/middleware/auth.global.ts
index a3ad646..f6b0273 100644
--- a/client/middleware/auth.global.ts
+++ b/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('/')
   }
 
 })
diff --git a/client/pages/gated.vue b/client/pages/gated.vue
index bc28729..a4c8dbd 100644
--- a/client/pages/gated.vue
+++ b/client/pages/gated.vue
@@ -3,7 +3,6 @@ const api = useApi()
 const { setCrumbs } = useCrumbs()
 
 setCrumbs([
-  { name: 'Home', to: '/' },
   { name: 'Gated', to: '/gated' },
 ])
 </script>
diff --git a/client/pages/home.vue b/client/pages/home.vue
deleted file mode 100644
index fbe73dc..0000000
--- a/client/pages/home.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="mt-12">
-    <h1 class="text-center mb-4">
-      This page is behind auth middleware
-    </h1>
-    <span>$api.$user</span>
-    <pre class="text-xs border p-4 bg-gray-900 text-gray-100 rounded-lg mb-4"> {{ useApi().$user }} </pre>
-    <div class="flex justify-center">
-      <u-button to="/"> Go to Index </u-button>
-    </div>
-  </div>
-</template>