Refactor project structure and update dependencies

nuxt/app/pages/account.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+definePageMeta({
+  middleware: ['auth'],
+})
+
+const links = [
+  [
+    {
+      label: 'Account',
+      icon: 'i-heroicons-user',
+      to: '/account/general',
+    },
+    {
+      label: 'Devices',
+      icon: 'i-heroicons-device-phone-mobile',
+      to: '/account/devices',
+    },
+  ],
+]
+</script>
+
+<template>
+  <div>
+    <UNavigationMenu
+      :items="links"
+      class="border-b border-gray-200 dark:border-gray-800 mb-4"
+    />
+    <NuxtPage class="col-span-10 md:col-span-8" />
+  </div>
+</template>

nuxt/app/pages/account/devices.vue

@@ -0,0 +1,5 @@
+<template>
+  <UCard>
+    <AccountDeviceTable />
+  </UCard>
+</template>

nuxt/app/pages/account/general.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup></script>
+
+<template>
+  <UCard :ui="{ body: 'grid grid-cols-12 gap-6 md:gap-8' }">
+    <div class="col-span-12 lg:col-span-4">
+      <div class="text-lg font-semibold mb-2">
+        Profile information
+      </div>
+      <div class="text-sm opacity-80">
+        Update your account's profile information and email address.
+      </div>
+    </div>
+    <div class="col-span-12 lg:col-span-8">
+      <AccountUpdateProfile />
+    </div>
+    <USeparator class="col-span-12" />
+    <div class="col-span-12 lg:col-span-4">
+      <div class="text-lg font-semibold mb-2">
+        Update Password
+      </div>
+      <div class="text-sm opacity-80">
+        Ensure your account is using a long, random password to stay secure.
+      </div>
+    </div>
+    <div class="col-span-12 lg:col-span-8">
+      <AccountUpdatePassword />
+    </div>
+  </UCard>
+</template>

nuxt/app/pages/account/index.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+definePageMeta({
+  redirect: '/account/general',
+})
+</script>
+
+<template>
+  <div />
+</template>

nuxt/app/pages/forgot-password/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import AuthForgotPasswordForm from '~/components/auth/AuthForgotPasswordForm.vue'
+
+definePageMeta({ middleware: ['guest'], layout: 'auth' })
+</script>
+
+<template>
+  <div class="mx-auto flex min-h-screen w-full items-center justify-center">
+    <UCard class="w-96">
+      <template #header>
+        <div class="space-y-4 text-center ">
+          <h1 class="text-2xl font-bold">
+            Forgot Password
+          </h1>
+          <p class="text-sm">
+            Remember your password? <NuxtLink
+              to="/login"
+              class="text-primary hover:text-primary-300 font-bold"
+            >
+              Login here
+            </NuxtLink>
+          </p>
+        </div>
+      </template>
+      <AuthForgotPasswordForm />
+      <!-- <UDivider label="OR" class=" my-4"/> -->
+    </UCard>
+  </div>
+</template>

nuxt/app/pages/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({ middleware: ['auth'] })
+</script>
+
+<template>
+  <div>
+    This is the Page Content
+  </div>
+</template>

nuxt/app/pages/login/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import AuthLoginForm from '~/components/auth/AuthLoginForm.vue'
+
+definePageMeta({ middleware: ['guest'], layout: 'auth' })
+</script>
+
+<template>
+  <div class="mx-auto flex min-h-screen w-full items-center justify-center">
+    <UCard class="w-96">
+      <template #header>
+        <h1 class="text-center text-2xl font-bold">
+          Login
+        </h1>
+      </template>
+
+      <AuthLoginForm />
+
+      <!-- <UDivider label="OR" class=" my-4"/> -->
+    </UCard>
+  </div>
+</template>
+
+<style scoped></style>

nuxt/app/pages/logout/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+definePageMeta({ middleware: ['auth'], layout: 'auth' })
+const auth = useAuthStore()
+auth.logout()
+</script>

nuxt/app/pages/password-reset/[token].vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import AuthResetPasswordForm from '~/components/auth/AuthResetPasswordForm.vue'
+
+definePageMeta({ middleware: ['guest'], layout: 'auth' })
+</script>
+
+<template>
+  <div class="mx-auto flex min-h-screen w-full items-center justify-center">
+    <UCard class="w-96">
+      <template #header>
+        <h1 class="text-center text-2xl font-bold">
+          Reset Password
+        </h1>
+      </template>
+      <AuthResetPasswordForm />
+      <!-- <UDivider label="OR" class=" my-4"/> -->
+    </UCard>
+  </div>
+</template>
+
+<style scoped></style>