chore: v1.5.0 (#177)

close #176 
close #117
close #173
close #180

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

apps/app/app/app.vue

@@ -43,9 +43,6 @@ const reduceMotion = useCookie<boolean>('reduceMotion', {
 })
 
 if (import.meta.client) setPrefersReducedMotion(reduceMotion.value)
-
-
-useSession().refresh()
 </script>
 
 <template>
@@ -61,4 +58,3 @@ useSession().refresh()
     </Body>
   </Html>
 </template>
-

apps/app/app/components/DropdownMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { publicUser } from '@shelve/types'
+import { type publicUser, Role } from '@shelve/types'
 import type { Ref } from 'vue'
 
 const navigations = getNavigation('app')
@@ -19,7 +19,7 @@ const adminNavItem = adminNavigations.map((nav) => {
   }
 })
 
-const user = useCurrentUser() as Ref<publicUser>
+const { loggedIn, user, clear } = useUserSession()
 
 const items = [
   [
@@ -30,13 +30,15 @@ const items = [
     }
   ],
   navItem,
-  adminNavItem,
   [
     {
       label: 'Sign out',
       icon: 'heroicons:arrow-left-on-rectangle',
       iconClass: 'text-red-500 dark:text-red-500',
-      click: () => useSession().clear()
+      click: () => {
+        navigateTo('/')
+        clear()
+      }
     }
   ]
 ]
@@ -45,7 +47,7 @@ const items = [
 <template>
   <div class="flex items-center justify-center">
     <UDropdown
-      v-if="user"
+      v-if="loggedIn"
       :items
       :ui="{
         background: 'backdrop-blur-md border dark:bg-gray-950/50 dark:border-gray-400/10 bg-white',

apps/app/app/components/layout/AuthFooter.vue

@@ -6,11 +6,14 @@
         <span class="text-sm text-tertiary">
           Want to go back to homepage ?
           <NuxtLink to="/" class="text-primary ml-1 transition duration-300 ease-in-out hover:text-accent">
-            Go to homepage
+            Click here
           </NuxtLink>
         </span>
         <SettingThemeToggle />
       </div>
+      <div id="password-mode-toggle">
+        <!-- password-mode-toggle -->
+      </div>
     </footer>
   </div>
 </template>

apps/app/app/components/layout/Navbar.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 const navigation = getNavigation('home')
-const user = useCurrentUser()
 </script>
 
 <template>
@@ -21,14 +20,14 @@ const user = useCurrentUser()
       </div>
       <div class="hidden items-center gap-5 sm:flex">
         <LandingGithubStar />
-        <ClientOnly>
+        <AuthState>
           <DropdownMenu />
-          <template #fallback>
+          <template #placeholder>
             <NuxtLink to="/login" class="btn-primary">
               Login
             </NuxtLink>
           </template>
-        </ClientOnly>
+        </AuthState>
       </div>
     </nav>
   </div>

apps/app/app/components/layout/Sidebar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const { isAdmin } = useSession()
+import { Role } from '@shelve/types'
+
+const { user } = useUserSession()
 const navigations = getNavigation('app')
 const adminNavigations = getNavigation('admin')
 
@@ -44,7 +46,7 @@ watch(() => route.path, handleProjectNavigation, { immediate: true })
     </div>
 
     <!-- Admin -->
-    <div v-if="isAdmin" class="flex flex-col gap-2">
+    <div v-if="user && user.role === Role.ADMIN" class="flex flex-col gap-2">
       <UDivider class="my-3" />
       <div class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
         Admin

apps/app/app/components/project/Create.vue

@@ -75,7 +75,7 @@ function importProject() {
       size="xs"
       icon="heroicons:plus-20-solid"
       :loading="projectLoading"
-      label="Add project"
+      label="Create project"
       @click="isOpen = true"
     />
 

apps/app/app/components/project/MainSection.vue

@@ -17,7 +17,7 @@ const showDelete = ref(false)
 const projectName = ref('')
 const project = toRef(props, 'project') as Ref<Project>
 const { projectId } = useRoute().params as { projectId: string }
-const user = useCurrentUser()
+const { user } = useUserSession()
 
 const {
   updateProject,

apps/app/app/components/team/Members.vue

@@ -22,7 +22,7 @@ const {
   removeMember,
 } = useTeams()
 
-const user = useCurrentUser()
+const { user } = useUserSession()
 
 const roles = [
   {

apps/app/app/components/token/Create.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { Token } from '@shelve/types'
+
+const tokenName = ref('')
+const loading = ref(false)
+const emits = defineEmits(['create'])
+
+async function createToken() {
+  loading.value = true
+  try {
+    await $fetch<Token>('/api/tokens', {
+      method: 'POST',
+      body: {
+        name: tokenName.value,
+      },
+    })
+    emits('create')
+    tokenName.value = ''
+    toast.success('Token created')
+  } catch (error) {
+    toast.error('Failed to create token')
+  }
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="hidden items-center justify-end gap-2 sm:flex">
+    <UPopover :popper="{ arrow: true }">
+      <UButton variant="solid" color="primary">
+        Create a token
+      </UButton>
+      <template #panel>
+        <form @submit.prevent="createToken(tokenName)">
+          <UCard>
+            <div class="flex flex-col gap-2">
+              <p class="flex gap-2 text-sm font-semibold leading-6">
+                Create a token
+              </p>
+              <div class="flex gap-2">
+                <UInput v-model="tokenName" label="Token name" placeholder="Token name" />
+                <UButton :loading label="Create" type="submit" />
+              </div>
+            </div>
+          </UCard>
+        </form>
+      </template>
+    </UPopover>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

apps/app/app/components/token/Toggle.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const { token } = defineProps<{
+  token: string
+}>()
+
+const visible = ref(false)
+
+const copy = () => {
+  navigator.clipboard.writeText(token)
+  toast.success('Token copied to clipboard')
+}
+</script>
+
+<template>
+  <div class="flex select-none items-center gap-2">
+    <UTooltip text="Copy token" class="cursor-pointer text-sm font-semibold leading-6 text-gray-500 dark:text-gray-400">
+      <span v-if="visible" @click="copy">
+        {{ token.slice(0, 4) }}...{{ token.slice(-4) }}
+      </span>
+      <div v-else @click="copy">
+        **********
+      </div>
+    </UTooltip>
+    <UIcon
+      :name="visible ? 'lucide:eye-off' : 'lucide:eye'"
+      class="cursor-pointer text-gray-500 dark:text-gray-400"
+      @click="visible = !visible"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

apps/app/app/middleware/admin.ts

@@ -1,7 +1,8 @@
-export default defineNuxtRouteMiddleware(async () => {
-  const { refresh, isAdmin } = useSession()
-  await refresh()
-  if (!isAdmin.value) {
+import { Role } from '@shelve/types'
+
+export default defineNuxtRouteMiddleware((): Promise<void> => {
+  const { user } = useUserSession()
+  if (!user.value.role === Role.ADMIN) {
     toast.error('You need to be an admin to access this page.')
     return '/app/projects'
   }

apps/app/app/middleware/guest-only.ts

@@ -1,4 +1,7 @@
-export default defineNuxtRouteMiddleware(async () => {
-  const user = await useSession().refresh()
-  if (user) return '/app/projects'
+export default defineNuxtRouteMiddleware(() => {
+  const { loggedIn } = useUserSession()
+
+  if (loggedIn.value) {
+    return navigateTo('/app/projects')
+  }
 })

apps/app/app/middleware/protected.ts

@@ -1,7 +1,8 @@
-export default defineNuxtRouteMiddleware(async () => {
-  const user = await useSession().refresh()
-  if (!user) {
+export default defineNuxtRouteMiddleware(() => {
+  const { loggedIn } = useUserSession()
+
+  if (!loggedIn.value) {
     toast.error('You need to be logged in to access this page.')
-    return '/login'
+    return navigateTo('/login')
   }
 })

apps/app/app/pages/app/profile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { user } = useSession()
+const { user } = useUserSession()
 
 const usePassword = useCookie('usePassword')
 

apps/app/app/pages/app/project/[projectId]/index/settings.vue

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 
 const { projectId } = useRoute().params
 
-const user = useCurrentUser()
+const { user } = useUserSession()
 
 const project = inject('project') as Ref<Project>
 const loading = inject('loading') as Ref<boolean>