💄 Rework of the authorize page

app/app.vue

@@ -2,9 +2,10 @@
   <naive-config>
     <n-dialog-provider>
       <n-notification-provider>
+        <naive-notification />
         <n-message-provider>
           <n-loading-bar-provider>
-            <nuxt-loading-indicator />
+            <naive-loading-bar navigation />
             <nuxt-layout>
               <nuxt-page />
             </nuxt-layout>
@@ -17,22 +18,4 @@
 
 <script setup lang="ts">
 import "@fontsource-variable/nunito"
-import { usePreferredColorScheme } from "@vueuse/core"
-
-const { colorModePreference } = useNaiveColorMode()
-const colorScheme = usePreferredColorScheme()
-
-colorModePreference.set("system")
-
-onMounted(() => {
-  switch (colorScheme.value) {
-    case "dark":
-      colorModePreference.set("dark")
-    case "light":
-      colorModePreference.set("light")
-    default:
-      colorModePreference.set("system")
-  }
-  colorModePreference.sync()
-})
 </script>

app/assets/css/main.css

@@ -34,4 +34,14 @@
 
 .n-image-preview-toolbar {
   gap: 1rem;
+}
+
+.h-layout {
+  /* margin of the navbar + actual navbar */
+  height: calc(100vh - 64px*2);
+}
+
+.min-h-layout {
+  /* margin of the navbar + actual navbar */
+  min-height: calc(100vh - 64px*2);
 }

app/components.d.ts

@@ -21,20 +21,28 @@ declare module 'vue' {
     NCarousel: typeof import('naive-ui')['NCarousel']
     NCarouselItem: typeof import('naive-ui')['NCarouselItem']
     NChip: typeof import('naive-ui')['NChip']
+    NCode: typeof import('naive-ui')['NCode']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDialog: typeof import('naive-ui')['NDialog']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
     NImg: typeof import('naive-ui')['NImg']
     NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
     NInput: typeof import('naive-ui')['NInput']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
@@ -57,20 +65,28 @@ declare global {
   const NCarousel: typeof import('naive-ui')['NCarousel']
   const NCarouselItem: typeof import('naive-ui')['NCarouselItem']
   const NChip: typeof import('naive-ui')['NChip']
+  const NCode: typeof import('naive-ui')['NCode']
   const NConfigProvider: typeof import('naive-ui')['NConfigProvider']
   const NDialog: typeof import('naive-ui')['NDialog']
   const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
   const NDropdown: typeof import('naive-ui')['NDropdown']
+  const NForm: typeof import('naive-ui')['NForm']
+  const NFormItem: typeof import('naive-ui')['NFormItem']
   const NIcon: typeof import('naive-ui')['NIcon']
   const NImage: typeof import('naive-ui')['NImage']
   const NImg: typeof import('naive-ui')['NImg']
   const NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
   const NInput: typeof import('naive-ui')['NInput']
+  const NList: typeof import('naive-ui')['NList']
+  const NListItem: typeof import('naive-ui')['NListItem']
   const NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
   const NMenu: typeof import('naive-ui')['NMenu']
   const NMessageProvider: typeof import('naive-ui')['NMessageProvider']
   const NModal: typeof import('naive-ui')['NModal']
   const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+  const NProgress: typeof import('naive-ui')['NProgress']
+  const NRadio: typeof import('naive-ui')['NRadio']
+  const NRadioGroup: typeof import('naive-ui')['NRadioGroup']
   const NSelect: typeof import('naive-ui')['NSelect']
   const NSpace: typeof import('naive-ui')['NSpace']
   const NSpin: typeof import('naive-ui')['NSpin']

app/components/Attachment/AttachmentList.vue

@@ -11,7 +11,7 @@
       <!-- All images: use carousel -->
       <div
         v-if="isAllImages"
-        class="carousel-container rounded-lg overflow-hidden"
+        class="carousel-container rounded-xl border bg-base-300 overflow-hidden"
         :style="carouselStyle"
       >
         <n-carousel height="100%" show-arrow>

app/components/FooterCompact.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="container absolute bottom-5 left-1/2 -translate-x-1/2">
-    <div class="flex justify-between items-center">
-      <n-select
-        :options="[{ label: 'English (United States)', value: 'en-us' }]"
-        model-value="en-us"
-        size="small"
-        class="flex-grow-0"
-      />
-      <div class="flex">
-        <n-button text size="small">Help</n-button>
-        <n-button text size="small">Privacy</n-button>
-        <n-button text size="small">Terms</n-button>
-      </div>
-    </div>
-  </div>
-</template>

app/components/Post/PostItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card :size="compact ? 'small' : 'medium'">
+  <n-card>
     <div :class="['flex flex-col', compact ? 'gap-1' : 'gap-3']">
       <post-header :item="props.item" :compact="compact" />
 
@@ -22,21 +22,17 @@
       <template v-if="showReferenced">
         <div
           v-if="props.item.repliedPost || props.item.repliedGone"
-          class="border rounded-xl"
+          class="border rounded-xl mt-2"
         >
           <div class="p-2 flex items-center gap-2">
             <n-icon :component="ReplyIcon" class="ms-2" />
             <span class="font-bold">Replying to</span>
           </div>
-          <div
-            v-if="props.item.repliedGone"
-            class="px-4 pb-3 text-sm opacity-60"
-          >
+          <div v-if="props.item.repliedGone" class="text-sm opacity-60">
             Post unavailable
           </div>
           <post-item
             v-else-if="props.item.repliedPost"
-            class="px-4 pb-3"
             :item="props.item.repliedPost"
             slim
             compact
@@ -47,21 +43,17 @@
 
         <div
           v-if="props.item.forwardedPost || props.item.forwardedGone"
-          class="border rounded-xl"
+          class="border rounded-xl mt-2"
         >
           <div class="p-2 flex items-center gap-2">
             <n-icon :component="ForwardIcon" class="ms-2" />
             <span class="font-bold">Forwarded</span>
           </div>
-          <div
-            v-if="props.item.forwardedGone"
-            class="px-4 pb-3 text-sm opacity-60"
-          >
+          <div v-if="props.item.forwardedGone" class="text-sm opacity-60">
             Post unavailable
           </div>
           <post-item
             v-else-if="props.item.forwardedPost"
-            class="px-4 pb-3"
             :item="props.item.forwardedPost"
             slim
             compact

app/components/Post/PostQuickReply.vue

@@ -7,8 +7,17 @@
       :rows="5"
       auto-grow
     ></n-input>
-    <div class="flex justify-end mt-4">
-      <n-button append-icon="mdi-send" size="small">Send</n-button>
+    <div class="flex justify-end mt-3">
+      <n-button type="primary">
+        <template #icon>
+          <n-icon :component="SendIcon" />
+        </template>
+        Send
+      </n-button>
     </div>
   </n-card>
 </template>
+
+<script setup lang="ts">
+import { SendIcon } from "lucide-vue-next"
+</script>

app/composables/useSolarNetwork.ts

@@ -3,6 +3,7 @@ import { keysToCamel, keysToSnake } from "~/utils/transformKeys"
 
 export const useSolarNetwork = () => {
   const apiBase = useSolarNetworkUrl()
+  const devToken = useRuntimeConfig().public.devToken
 
   // Forward cookies from the incoming request
   const headers: HeadersInit = import.meta.server
@@ -18,6 +19,11 @@ export const useSolarNetwork = () => {
       const side = import.meta.server ? "SERVER" : "CLIENT"
       console.log(`[useSolarNetwork] onRequest for ${request} on ${side}`)
 
+      if (devToken) {
+        options.headers = new Headers(options.headers)
+        options.headers.set("Authorization", `Bearer ${devToken}`)
+      }
+
       // Transform request data from camelCase to snake_case
       if (options.body && typeof options.body === "object") {
         options.body = keysToSnake(options.body)

app/layouts/default.vue

@@ -3,34 +3,29 @@
     <header
       class="navbar bg-transparent shadow-lg fixed top-0 left-0 right-0 backdrop-blur-2xl z-1000 h-[64px]"
     >
-      <div class="container mx-auto flex items-center">
-        <img
-          :src="IconLight"
-          width="32"
-          height="32"
-          class="mr-4"
-          alt="The Solar Network"
-        />
+      <div class="container mx-auto flex items-center justify-between px-5">
+        <div class="flex gap-2">
+          <div class="flex items-center justify-center w-[40px]">
+            <img :src="IconLight" alt="The Solar Network" class="fit-cover" />
+          </div>
 
-        <n-menu
-          v-model:value="activeKey"
-          mode="horizontal"
-          :options="menuOptions"
-        />
-
-        <div class="grow" />
+          <n-menu
+            v-model:value="activeKey"
+            mode="horizontal"
+            :options="menuOptions"
+          />
+        </div>
 
         <n-dropdown :options="dropdownOptions" @select="handleDropdownSelect">
           <n-avatar
-            round
-            class="mr-4 cursor-pointer"
+            :size="32"
             :src="
               user?.profile.picture
                 ? `${apiBase}/drive/files/${user?.profile.picture?.id}`
                 : undefined
             "
           >
-            <n-icon :component="UserCircleIcon" />
+            <n-icon :component="UserIcon" :size="20" />
           </n-avatar>
         </n-dropdown>
       </div>
@@ -47,8 +42,14 @@ import IconLight from "~/assets/images/cloudy-lamb.png"
 
 import type { MenuOption } from "naive-ui"
 import { computed, h } from "vue"
-import { useRouter, useRoute } from "vue-router"
-import { CompassIcon, UserCircleIcon } from "lucide-vue-next"
+import { useRouter, useRoute, RouterLink } from "vue-router"
+import {
+  CompassIcon,
+  LayoutDashboardIcon,
+  LogInIcon,
+  UserIcon,
+  UserPlusIcon
+} from "lucide-vue-next"
 
 const apiBase = useSolarNetworkUrl()
 const router = useRouter()
@@ -63,17 +64,18 @@ const activeKey = computed(() => {
 })
 
 function renderIcon(icon: any) {
-  return () => h(NIcon, null, { default: () => icon })
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+function renderLabel(label: string, route: string) {
+  return () => h(RouterLink, { to: route }, { default: () => label })
 }
 
 const menuOptions: MenuOption[] = [
   {
-    label: "Explore",
+    label: renderLabel("Explore", "/"),
     key: "explore",
-    icon: renderIcon(h(CompassIcon)),
-    props: {
-      onClick: () => router.push("/")
-    }
+    icon: renderIcon(CompassIcon)
   }
 ]
 
@@ -83,7 +85,7 @@ const dropdownOptions = computed(() => {
       {
         label: "Dashboard",
         key: "/accounts/me",
-        icon: () => h("span", { class: "mdi mdi-view-dashboard" })
+        icon: renderIcon(LayoutDashboardIcon)
       }
     ]
   } else {
@@ -91,12 +93,12 @@ const dropdownOptions = computed(() => {
       {
         label: "Login",
         key: "/auth/login",
-        icon: () => h("span", { class: "mdi mdi-login" })
+        icon: renderIcon(LogInIcon)
       },
       {
         label: "Create Account",
         key: "/auth/create-account",
-        icon: () => h("span", { class: "mdi mdi-account-plus" })
+        icon: renderIcon(UserPlusIcon)
       }
     ]
   }

app/pages/auth/authorize.vue

@@ -1,110 +1,17 @@
-<template>
-  <v-container class="d-flex align-center justify-center fill-height">
-    <v-card max-width="1000" rounded="lg" width="100%">
-      <div v-if="isLoading" class="d-flex justify-center mb-4">
-        <v-progress-linear indeterminate color="primary" height="4" />
-      </div>
-      <div class="pa-8">
-        <div class="mb-4">
-          <img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
-        </div>
-        <v-row>
-          <v-col cols="12" lg="6" class="d-flex align-start justify-start">
-            <div class="md:text-left h-auto">
-              <h2 class="text-2xl font-bold mb-1">Authorize Application</h2>
-              <p class="text-lg">Grant access to your Solar Network account</p>
-            </div>
-          </v-col>
-          <v-col cols="12" lg="6" class="d-flex align-center justify-stretch">
-            <div class="w-full d-flex flex-column md:text-right">
-              <div v-if="error" class="mb-4">
-                <v-alert
-                  type="error"
-                  closable
-                  @update:model-value="error = null"
-                >
-                  {{ error }}
-                </v-alert>
-              </div>
-
-              <!-- App Info Section -->
-              <div v-if="clientInfo" class="mb-6">
-                <div class="d-flex align-center mb-4 text-left">
-                  <div>
-                    <h3 class="text-xl font-semibold">
-                      {{ clientInfo.clientName || "Unknown Application" }}
-                    </h3>
-                    <p class="text-base">
-                      {{
-                        isNewApp
-                          ? "wants to access your Solar Network account"
-                          : "wants to access your account"
-                      }}
-                    </p>
-                  </div>
-                </div>
-
-                <!-- Requested Permissions -->
-                <v-card variant="outlined" class="pa-4 mb-4 text-left">
-                  <h4 class="font-medium mb-2">
-                    This will allow
-                    {{ clientInfo.clientName || "the app" }} to
-                  </h4>
-                  <ul class="space-y-1">
-                    <li
-                      v-for="scope in requestedScopes"
-                      :key="scope"
-                      class="d-flex align-start"
-                    >
-                      <v-icon class="mt-1 mr-2" color="success" size="18"
-                        >mdi-check</v-icon
-                      >
-                      <span>{{ scope }}</span>
-                    </li>
-                  </ul>
-                </v-card>
-
-                <!-- Buttons -->
-                <div class="d-flex gap-3 mt-4">
-                  <v-btn
-                    color="primary"
-                    :loading="isAuthorizing"
-                    class="grow"
-                    size="large"
-                    @click="handleAuthorize"
-                  >
-                    Authorize
-                  </v-btn>
-                  <v-btn
-                    variant="outlined"
-                    :disabled="isAuthorizing"
-                    class="grow"
-                    size="large"
-                    @click="handleDeny"
-                  >
-                    Deny
-                  </v-btn>
-                </div>
-              </div>
-            </div>
-          </v-col>
-        </v-row>
-      </div>
-    </v-card>
-    <footer-compact />
-  </v-container>
-</template>
-
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue"
 import { useRoute } from "vue-router"
 import { useSolarNetwork } from "~/composables/useSolarNetwork"
+import { CheckIcon } from "lucide-vue-next"
 
 import IconLight from "~/assets/images/cloudy-lamb.png"
+import type { SnCloudFile } from "~/types/api/post"
 
 const route = useRoute()
 const api = useSolarNetwork()
 
+const message = useMessage()
+
 useHead({
   title: "Authorize Application"
 })
@@ -112,11 +19,11 @@ useHead({
 // State
 const isLoading = ref(true)
 const isAuthorizing = ref(false)
-const error = ref<string | null>(null)
 const clientInfo = ref<{
   clientName?: string
   homeUri?: string
-  picture?: { url: string }
+  picture?: SnCloudFile
+  background?: SnCloudFile
   scopes?: string[]
 } | null>(null)
 const isNewApp = ref(false)
@@ -133,9 +40,7 @@ async function fetchClientInfo() {
     clientInfo.value = await api(`/id/auth/open/authorize?${queryString}`)
     checkIfNewApp()
   } catch (err) {
-    error.value =
-      (err instanceof Error ? err.message : String(err)) ||
-      "An error occurred while loading the authorization request"
+    message.error(err instanceof Error ? err.message : String(err))
   } finally {
     isLoading.value = false
   }
@@ -165,9 +70,7 @@ async function handleAuthorize(authorize = true) {
       window.location.href = data.redirectUri
     }
   } catch (err) {
-    error.value =
-      (err instanceof Error ? err.message : String(err)) ||
-      "An error occurred during authorization"
+    message.error(err instanceof Error ? err.message : String(err))
   } finally {
     isAuthorizing.value = false
   }
@@ -185,8 +88,135 @@ onMounted(() => {
 definePageMeta({
   middleware: "auth"
 })
+
+const apiBase = useSolarNetworkUrl()
+const clientAvatar = computed(() =>
+  clientInfo.value?.picture
+    ? `${apiBase}/drive/files/${clientInfo.value.picture.id}`
+    : undefined
+)
+const clientBackground = computed(() =>
+  clientInfo.value?.background
+    ? `${apiBase}/drive/files/${clientInfo.value.background.id}?original=true`
+    : undefined
+)
+
+const pageStyle = computed(() => {
+  if (!clientBackground.value) return {}
+  return {
+    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${clientBackground.value}')`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat"
+  }
+})
 </script>
 
-<style scoped>
-/* Add any custom styles here */
-</style>
+<template>
+  <div class="fixed inset-0 transition-all duration-500" :style="pageStyle" />
+  <div class="relative flex items-center justify-center min-h-layout px-4">
+    <n-card
+      :class="[
+        'w-full',
+        'max-w-[1000px]',
+        { 'backdrop-blur-2xl': clientBackground },
+        { 'shadow-xl': clientBackground }
+      ]"
+      size="large"
+      :style="
+        clientBackground ? 'background-color: rgba(255, 255, 255, 0.1)' : ''
+      "
+      :content-style="clientBackground ? 'background-color: transparent' : ''"
+    >
+      <div v-if="isLoading" class="flex justify-center p-8">
+        <n-spin size="large" />
+      </div>
+      <div v-else class="p-4 md:p-8">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <!-- Left Column: Title -->
+          <div class="flex flex-col items-start justify-start">
+            <div class="mb-4">
+              <img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
+            </div>
+            <div class="text-left h-auto">
+              <h2 class="text-2xl font-bold mb-1">Authorize Application</h2>
+              <p class="text-lg">Grant access to your Solar Network account</p>
+            </div>
+          </div>
+
+          <!-- Right Column: Content -->
+          <div class="flex flex-col items-end justify-stretch">
+            <div class="w-full flex flex-col md:text-right">
+              <div class="mb-3 h-[60px] px-[4px] pt-[8px]">
+                <n-avatar :src="clientAvatar" :size="52" />
+              </div>
+              <!-- App Info Section -->
+              <div v-if="clientInfo" class="mb-6">
+                <div class="flex flex-col items-end mb-4">
+                  <h3 class="text-xl font-semibold">
+                    {{ clientInfo.clientName || "Unknown Application" }}
+                  </h3>
+                  <p class="text-base">
+                    {{
+                      isNewApp
+                        ? "Wants to access your Solar Network account"
+                        : "Wants to access your account"
+                    }}
+                  </p>
+                </div>
+
+                <!-- Requested Permissions -->
+                <n-card embedded class="mb-4 text-left">
+                  <h4 class="font-medium mb-2">
+                    This will allow
+                    {{ clientInfo.clientName || "the app" }} to
+                  </h4>
+                  <n-list style="background-color: transparent" size="small">
+                    <n-list-item
+                      v-for="scope in requestedScopes"
+                      :key="scope"
+                      class="bg-transparent"
+                      style="padding: 0"
+                    >
+                      <template #prefix>
+                        <n-icon
+                          class="mt-1 mr-2"
+                          color="#18a058"
+                          :size="16"
+                          :component="CheckIcon"
+                        />
+                      </template>
+                      <span>{{ scope }}</span>
+                    </n-list-item>
+                  </n-list>
+                </n-card>
+
+                <!-- Buttons -->
+                <div class="flex gap-3 mt-4">
+                  <n-button
+                    type="primary"
+                    :loading="isAuthorizing"
+                    class="grow"
+                    size="large"
+                    @click="handleAuthorize(true)"
+                  >
+                    Authorize
+                  </n-button>
+                  <n-button
+                    secondary
+                    :disabled="isAuthorizing"
+                    class="grow"
+                    size="large"
+                    @click="handleDeny"
+                  >
+                    Deny
+                  </n-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </n-card>
+  </div>
+</template>

app/pages/auth/create-account.vue

@@ -1,146 +1,191 @@
 <template>
-  <v-container class="d-flex align-center justify-center fill-height">
-    <v-card max-width="1000" rounded="lg" width="100%">
-      <div v-if="isLoading" class="d-flex justify-center mb-4">
-        <v-progress-linear indeterminate color="primary" height="4" />
-      </div>
-      <div class="pa-8">
+  <div class="flex items-center justify-center h-layout px-4">
+    <n-card class="w-full max-w-[1000px]" size="large">
+      <div class="p-4 md:p-8">
         <div class="mb-4">
           <img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
         </div>
-        <v-row>
-          <v-col cols="12" lg="6" class="d-flex align-start justify-start">
-            <div class="md:text-left h-auto">
-              <div v-if="stage === 'username-nick'">
-                <h2 class="text-2xl font-bold mb-1">Create your account</h2>
-                <p class="text-lg">Start with your username and nickname</p>
-              </div>
-              <div v-if="stage === 'email'">
-                <h2 class="text-2xl font-bold mb-1">Add your email</h2>
-                <p class="text-lg">We'll use this for account verification</p>
-              </div>
-              <div v-if="stage === 'password'">
-                <h2 class="text-2xl font-bold mb-1">Set your password</h2>
-                <p class="text-lg">Choose a strong password for your account</p>
-              </div>
-              <div v-if="stage === 'captcha'">
-                <h2 class="text-2xl font-bold mb-1">Verify you're human</h2>
-                <p class="text-lg">
-                  Complete the captcha to create your account
-                </p>
-              </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div class="flex flex-col items-start justify-between">
+            <div class="text-left h-auto">
+              <Transition mode="out-in" name="slide-fade">
+                <div v-if="stage === 'username-nick'" key="username-nick">
+                  <h2 class="text-2xl font-bold mb-1">Create your account</h2>
+                  <p class="text-lg">Start with your username and nickname</p>
+                </div>
+                <div v-else-if="stage === 'email'" key="email">
+                  <h2 class="text-2xl font-bold mb-1">Add your email</h2>
+                  <p class="text-lg">We'll use this for account verification</p>
+                </div>
+                <div v-else-if="stage === 'password'" key="password">
+                  <h2 class="text-2xl font-bold mb-1">Set your password</h2>
+                  <p class="text-lg">
+                    Choose a strong password for your account
+                  </p>
+                </div>
+                <div v-else-if="stage === 'captcha'" key="captcha">
+                  <h2 class="text-2xl font-bold mb-1">Verify you're human</h2>
+                  <p class="text-lg">
+                    Complete the captcha to create your account
+                  </p>
+                </div>
+                <div v-else-if="stage === 'terms'" key="terms">
+                  <h2 class="text-2xl font-bold mb-1">Review Terms</h2>
+                  <p class="text-lg">
+                    Please review our terms and conditions before creating your
+                    account.
+                  </p>
+                </div>
+              </Transition>
             </div>
-          </v-col>
-          <v-col cols="12" lg="6" class="d-flex align-center justify-stretch">
-            <div class="w-full d-flex flex-column md:text-right">
-              <v-window
-                v-model="activeStageIndex"
-                class="align-self-stretch pt-2"
+            <div v-if="isLoading" class="mb-4">
+              <span class="loading loading-spinner loading-xl"></span>
+            </div>
+          </div>
+          <div class="flex items-center justify-stretch">
+            <div class="w-full flex flex-col md:text-right">
+              <n-form
+                ref="formRef"
+                :model="formModel"
+                :rules="rules"
+                label-placement="top"
+                class="w-full"
               >
                 <!-- Stage 1: Username and Nickname -->
-                <v-window-item :value="0">
-                  <v-text-field
-                    v-model="formModel.name"
-                    label="Username"
-                    variant="outlined"
-                    :rules="nameRules"
-                    class="mb-2"
-                    @keydown.enter="handleNext"
-                  />
-                  <v-text-field
-                    v-model="formModel.nick"
-                    label="Nickname"
-                    variant="outlined"
-                    :rules="nickRules"
-                    class="mb-2"
-                    @keydown.enter="handleNext"
-                  />
-                  <div class="d-flex justify-space-between align-center mt-6">
-                    <v-btn
-                      variant="text"
-                      class="text-capitalize"
-                      to="/auth/login"
-                    >
-                      Login
-                    </v-btn>
-                    <v-btn color="primary" size="large" @click="handleNext">
-                      Next
-                    </v-btn>
+                <Transition mode="out-in" name="slide-fade">
+                  <div v-if="stage === 'username-nick'" key="username-nick">
+                    <n-form-item label="Username" path="name">
+                      <n-input
+                        size="large"
+                        v-model:value="formModel.name"
+                        placeholder="Username"
+                        class="text-left"
+                        @keydown.enter.prevent="handleNext"
+                      />
+                    </n-form-item>
+                    <n-form-item label="Nickname" path="nick">
+                      <n-input
+                        size="large"
+                        v-model:value="formModel.nick"
+                        placeholder="Nickname"
+                        class="text-left"
+                        @keydown.enter.prevent="handleNext"
+                      />
+                    </n-form-item>
+                    <div class="flex justify-between items-center mt-6">
+                      <n-button text to="/auth/login">Login</n-button>
+                      <n-button type="primary" size="large" @click="handleNext">
+                        Next
+                      </n-button>
+                    </div>
                   </div>
-                </v-window-item>
 
-                <!-- Stage 2: Email -->
-                <v-window-item :value="1">
-                  <v-text-field
-                    v-model="formModel.email"
-                    label="Email"
-                    placeholder="your@email.com"
-                    variant="outlined"
-                    :rules="emailRules"
-                    class="mb-2"
-                    @keydown.enter="handleNext"
-                  />
-                  <div class="d-flex justify-space-between align-center mt-6">
-                    <v-spacer />
-                    <v-btn color="primary" size="large" @click="handleNext">
-                      Next
-                    </v-btn>
+                  <!-- Stage 2: Email -->
+                  <div v-else-if="stage === 'email'" key="email">
+                    <n-form-item label="Email" path="email">
+                      <n-input
+                        v-model:value="formModel.email"
+                        placeholder="your@email.com"
+                        size="large"
+                        class="text-left"
+                        @keydown.enter.prevent="handleNext"
+                      />
+                    </n-form-item>
+                    <div class="flex justify-between items-center mt-6">
+                      <div />
+                      <n-button type="primary" size="large" @click="handleNext">
+                        Next
+                      </n-button>
+                    </div>
                   </div>
-                </v-window-item>
 
-                <!-- Stage 3: Password -->
-                <v-window-item :value="2">
-                  <v-text-field
-                    v-model="formModel.password"
-                    label="Password"
-                    type="password"
-                    placeholder="Enter your password"
-                    variant="outlined"
-                    :rules="passwordRules"
-                    class="mb-2"
-                    @keydown.enter="handleNext"
-                  />
-                  <div class="d-flex justify-space-between align-center mt-6">
-                    <v-spacer />
-                    <v-btn color="primary" size="large" @click="handleNext">
-                      Next
-                    </v-btn>
+                  <!-- Stage 3: Password -->
+                  <div v-else-if="stage === 'password'" key="password">
+                    <n-form-item label="Password" path="password">
+                      <n-input
+                        v-model:value="formModel.password"
+                        type="password"
+                        show-password-on="click"
+                        placeholder="Enter your password"
+                        class="text-left"
+                        size="large"
+                        @keydown.enter.prevent="handleNext"
+                      />
+                    </n-form-item>
+                    <div class="flex justify-between items-center mt-6">
+                      <div />
+                      <n-button type="primary" size="large" @click="handleNext">
+                        Next
+                      </n-button>
+                    </div>
                   </div>
-                </v-window-item>
 
-                <!-- Stage 4: Captcha -->
-                <v-window-item :value="3">
-                  <div class="d-flex justify-center mb-4">
-                    <client-only>
-                      <captcha-widget @verified="onCaptchaVerified" />
-                    </client-only>
+                  <!-- Stage 4: Captcha -->
+                  <div v-else-if="stage === 'captcha'" key="captcha">
+                    <div class="flex justify-center mb-4">
+                      <client-only>
+                        <captcha-widget @verified="onCaptchaVerified" />
+                      </client-only>
+                    </div>
                   </div>
-                </v-window-item>
-              </v-window>
 
-              <v-alert
-                v-if="error"
-                type="error"
-                closable
-                class="mt-2"
-                @update:model-value="error = null"
-              >
-                {{ error }}
-              </v-alert>
+                  <!-- Stage 5: Terms -->
+                  <div v-else-if="stage === 'terms'" key="terms">
+                    <n-alert type="info" title="Things you need to know">
+                      <ul class="list-decimal flex flex-col gap-1">
+                        <li>
+                          You can't have multiple accounts on the Solar Network,
+                          that violates our Terms of Service.
+                        </li>
+                        <li>
+                          You need go to your email to confirm your
+                          registeration before you have permissions to do
+                          something.
+                        </li>
+                        <li>
+                          Feel free to contact our customer service at
+                          <address>lily@solsynth.dev</address>
+                        </li>
+                        <li>
+                          Make sure you agreed to our Terms and Service,
+                          <nuxt-link
+                            class="underline font-bold"
+                            href="https://solsynth.dev/terms"
+                            target="_blank"
+                          >
+                            check it out
+                          </nuxt-link>
+                        </li>
+                      </ul>
+                    </n-alert>
+
+                    <div class="flex justify-between items-center mt-6">
+                      <n-button text @click="stage = 'captcha'">Back</n-button>
+                      <n-button
+                        type="primary"
+                        size="large"
+                        @click="handleCreateAccount"
+                      >
+                        Create Account
+                      </n-button>
+                    </div>
+                  </div>
+                </Transition>
+              </n-form>
             </div>
-          </v-col>
-        </v-row>
+          </div>
+        </div>
       </div>
-    </v-card>
-    <footer-compact />
-  </v-container>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from "vue"
+import { ref, reactive, onMounted } from "vue"
 import { useRouter } from "vue-router"
 import { useSolarNetwork } from "~/composables/useSolarNetwork"
 import CaptchaWidget from "~/components/CaptchaWidget.vue"
+import type { FormInst, FormRules } from "naive-ui"
 
 import IconLight from "~/assets/images/cloudy-lamb.png"
 
@@ -151,27 +196,11 @@ useHead({
   title: "Create Account"
 })
 
-const stage = ref<"username-nick" | "email" | "password" | "captcha">(
+const stage = ref<"username-nick" | "email" | "password" | "captcha" | "terms">(
   "username-nick"
 )
 const isLoading = ref(false)
-const error = ref<string | null>(null)
-
-// Computed for v-window active index
-const activeStageIndex = computed(() => {
-  switch (stage.value) {
-    case "username-nick":
-      return 0
-    case "email":
-      return 1
-    case "password":
-      return 2
-    case "captcha":
-      return 3
-    default:
-      return 0
-  }
-})
+const formRef = ref<FormInst | null>(null)
 
 const formModel = reactive({
   name: "",
@@ -186,105 +215,150 @@ onMounted(() => {
   formModel.language = navigator.language
 })
 
-const nameRules = [
-  (v: string) => !!v || "Name is required",
-  (v: string) => v.length >= 2 || "Name must be at least 2 characters long",
-  (v: string) => v.length <= 256 || "Name must be at most 256 characters long",
-  (v: string) =>
-    /^[A-Za-z0-9_-]+$/.test(v) ||
-    "Name can only contain letters, numbers, underscores, and hyphens."
-]
+const message = useMessage()
+const dialog = useDialog()
 
-const nickRules = [
-  (v: string) => !!v || "Nick is required",
-  (v: string) => v.length <= 256 || "Nick must be at most 256 characters long"
-]
-
-const emailRules = [
-  (v: string) => !!v || "Email is required",
-  (v: string) =>
-    v.length <= 1024 || "Email must be at most 1024 characters long",
-  (v: string) =>
-    /^[^+]+@[^@]+\.[^@]+$/.test(v) ||
-    "Email address cannot contain '+' symbol.",
-  (v: string) => /.+@.+\..+/.test(v) || "Please enter a valid email address"
-]
-
-const passwordRules = [
-  (v: string) => !!v || "Password is required",
-  (v: string) => v.length >= 4 || "Password must be at least 4 characters long",
-  (v: string) =>
-    v.length <= 128 || "Password must be at most 128 characters long"
-]
+const rules: FormRules = {
+  name: [
+    {
+      key: "name",
+      required: true,
+      message: "Name is required",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "name",
+      min: 2,
+      message: "Name must be at least 2 characters long",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "name",
+      max: 256,
+      message: "Name must be at most 256 characters long",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "name",
+      pattern: /^[A-Za-z0-9_-]+$/,
+      message:
+        "Name can only contain letters, numbers, underscores, and hyphens.",
+      trigger: ["input", "blur"]
+    }
+  ],
+  nick: [
+    {
+      key: "nick",
+      required: true,
+      message: "Nick is required",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "nick",
+      max: 256,
+      message: "Nick must be at most 256 characters long",
+      trigger: ["input", "blur"]
+    }
+  ],
+  email: [
+    {
+      key: "email",
+      required: true,
+      message: "Email is required",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "email",
+      max: 1024,
+      message: "Email must be at most 1024 characters long",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "email",
+      validator: (_rule, value: string) => {
+        if (value.includes("+")) {
+          return new Error("Email address cannot contain '+' symbol.")
+        }
+        if (!/.+@.+\..+/.test(value)) {
+          return new Error("Please enter a valid email address")
+        }
+        return true
+      },
+      trigger: ["input", "blur"]
+    }
+  ],
+  password: [
+    {
+      key: "password",
+      required: true,
+      message: "Password is required",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "password",
+      min: 4,
+      message: "Password must be at least 4 characters long",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "password",
+      max: 128,
+      message: "Password must be at most 128 characters long",
+      trigger: ["input", "blur"]
+    }
+  ]
+}
 
 const onCaptchaVerified = (token: string) => {
   formModel.captchaToken = token
-  handleCreateAccount()
+  stage.value = "terms"
 }
 
-function handleNext() {
-  error.value = null
-  if (stage.value === "username-nick") {
-    if (!formModel.name || !formModel.nick) {
-      error.value = "Please fill in username and nickname"
-      return
+async function handleNext() {
+  if (!formRef.value) return
+
+  try {
+    if (stage.value === "username-nick") {
+      await new Promise<void>((resolve, reject) => {
+        formRef.value?.validate(
+          (errors) => {
+            if (errors) reject(new Error("Validation failed"))
+            else resolve()
+          },
+          (rule) => rule.key === "name" || rule.key === "nick"
+        )
+      })
+      stage.value = "email"
+    } else if (stage.value === "email") {
+      await new Promise<void>((resolve, reject) => {
+        formRef.value?.validate(
+          (errors) => {
+            if (errors) reject(new Error("Validation failed"))
+            else resolve()
+          },
+          (rule) => rule.key === "email"
+        )
+      })
+      stage.value = "password"
+    } else if (stage.value === "password") {
+      await new Promise<void>((resolve, reject) => {
+        formRef.value?.validate(
+          (errors) => {
+            if (errors) reject(new Error("Validation failed"))
+            else resolve()
+          },
+          (rule) => rule.key === "password"
+        )
+      })
+      stage.value = "captcha"
     }
-    if (
-      !nameRules.every(
-        (rule) =>
-          typeof rule(formModel.name) === "boolean" && rule(formModel.name)
-      )
-    ) {
-      error.value = "Invalid username"
-      return
-    }
-    if (
-      !nickRules.every(
-        (rule) =>
-          typeof rule(formModel.nick) === "boolean" && rule(formModel.nick)
-      )
-    ) {
-      error.value = "Invalid nickname"
-      return
-    }
-    stage.value = "email"
-  } else if (stage.value === "email") {
-    if (!formModel.email) {
-      error.value = "Please enter your email"
-      return
-    }
-    if (
-      !emailRules.every(
-        (rule) =>
-          typeof rule(formModel.email) === "boolean" && rule(formModel.email)
-      )
-    ) {
-      error.value = "Invalid email"
-      return
-    }
-    stage.value = "password"
-  } else if (stage.value === "password") {
-    if (!formModel.password) {
-      error.value = "Please enter your password"
-      return
-    }
-    if (
-      !passwordRules.every(
-        (rule) =>
-          typeof rule(formModel.password) === "boolean" &&
-          rule(formModel.password)
-      )
-    ) {
-      error.value = "Invalid password"
-      return
-    }
-    stage.value = "captcha"
+  } catch {
+    // Validation error, do nothing
   }
 }
 
 async function handleCreateAccount() {
   isLoading.value = true
-  error.value = null
 
   try {
     await api("/id/accounts", {
@@ -300,14 +374,35 @@ async function handleCreateAccount() {
     })
 
     // On success, redirect to login page
-    alert(
-      "Welcome to Solar Network! Your account has been created successfully. Don't forget to check your email for activation instructions."
-    )
-    router.push("/auth/login")
+    dialog.success({
+      title: "Registration Completed",
+      content:
+        "Welcome to Solar Network! Your account has been created successfully. Don't forget to check your email for activation instructions.",
+      onPositiveClick: () => {
+        router.push("/auth/login")
+      }
+    })
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
   } finally {
     isLoading.value = false
   }
 }
 </script>
+
+<style scoped>
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.2s ease-out;
+}
+
+.slide-fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

app/pages/auth/login.vue

@@ -4,11 +4,11 @@ import { useRoute, useRouter } from "vue-router"
 import { useUserStore } from "~/stores/user"
 import { useSolarNetwork } from "~/composables/useSolarNetwork"
 import type { SnAuthChallenge, SnAuthFactor } from "~/types/api"
+import { useMessage } from "naive-ui"
 
 import FingerprintJS from "@fingerprintjs/fingerprintjs"
 
 import IconLight from "~/assets/images/cloudy-lamb.png"
-import IconDark from "~/assets/images/cloudy-lamb@dark.png"
 
 // State management
 useHead({
@@ -19,23 +19,7 @@ const stage = ref<
   "find-account" | "select-factor" | "enter-code" | "token-exchange"
 >("find-account")
 const isLoading = ref(false)
-const error = ref<string | null>(null)
-
-// Computed for v-window active index
-const activeStageIndex = computed(() => {
-  switch (stage.value) {
-    case "find-account":
-      return 0
-    case "select-factor":
-      return 1
-    case "enter-code":
-      return 2
-    case "token-exchange":
-      return 3
-    default:
-      return 0
-  }
-})
+const message = useMessage()
 
 // Stage 1: Find Account
 const accountIdentifier = ref("")
@@ -64,11 +48,10 @@ const selectedFactor = computed(() => {
 
 async function handleFindAccount() {
   if (!accountIdentifier.value) {
-    error.value = "Please enter your email or username."
+    message.error("Please enter your email or username.")
     return
   }
   isLoading.value = true
-  error.value = null
 
   try {
     challenge.value = await api("/id/auth/challenge", {
@@ -83,7 +66,7 @@ async function handleFindAccount() {
     await getFactors()
     stage.value = "select-factor"
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
   } finally {
     isLoading.value = false
   }
@@ -93,7 +76,6 @@ async function getFactors() {
   if (!challenge.value) return
 
   isLoading.value = true
-  error.value = null
   try {
     const availableFactors = await api<SnAuthFactor[]>(
       `/id/auth/challenge/${challenge.value.id}/factors`
@@ -104,11 +86,12 @@ async function getFactors() {
     if (factors.value.length > 0) {
       selectedFactorId.value = null // Let user choose
     } else if (challenge.value.stepRemain > 0) {
-      error.value =
+      message.error(
         "No more available authentication factors, but authentication is not complete. Please contact support."
+      )
     }
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
   } finally {
     isLoading.value = false
   }
@@ -119,7 +102,6 @@ async function requestVerificationCode() {
 
   const isResend = stage.value === "enter-code"
   if (isResend) isLoading.value = true
-  error.value = null
 
   try {
     await api(
@@ -127,7 +109,7 @@ async function requestVerificationCode() {
       { method: "POST" }
     )
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
     throw e // Rethrow to be handled by caller
   } finally {
     if (isResend) isLoading.value = false
@@ -136,7 +118,7 @@ async function requestVerificationCode() {
 
 async function handleFactorSelected() {
   if (!selectedFactor.value) {
-    error.value = "Please select an authentication method."
+    message.error("Please select an authentication method.")
     return
   }
 
@@ -149,7 +131,6 @@ async function handleFactorSelected() {
   // For code-based factors (1, 2, 3, 4), send the code first
   if ([1, 2, 3, 4].includes(selectedFactor.value.type)) {
     isLoading.value = true
-    error.value = null
     try {
       await requestVerificationCode()
       stage.value = "enter-code"
@@ -163,11 +144,10 @@ async function handleFactorSelected() {
 
 async function handleVerifyFactor() {
   if (!selectedFactorId.value || !password.value || !challenge.value) {
-    error.value = "Please enter your password/code."
+    message.error("Please enter your password/code.")
     return
   }
   isLoading.value = true
-  error.value = null
 
   try {
     challenge.value = await api(`/id/auth/challenge/${challenge.value.id}`, {
@@ -188,7 +168,7 @@ async function handleVerifyFactor() {
       stage.value = "select-factor" // MFA step
     }
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
   } finally {
     isLoading.value = false
   }
@@ -199,7 +179,6 @@ const route = useRoute()
 
 async function exchangeToken() {
   isLoading.value = true
-  error.value = null
   try {
     // The token endpoint gives the Set-Cookie header
     await api<{ token: string }>("/id/auth/token", {
@@ -212,14 +191,14 @@ async function exchangeToken() {
 
     await userStore.fetchUser()
 
-    const redirectUri = route.query.redirect_uri as string
+    const redirectUri = route.query.redirect as string
     if (redirectUri) {
-      window.location.href = redirectUri
+      window.location.href = decodeURIComponent(redirectUri)
     } else {
       await router.push("/")
     }
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
     stage.value = "select-factor" // Go back if token exchange fails
   } finally {
     isLoading.value = false
@@ -242,209 +221,250 @@ function getFactorName(factorType: number) {
       return "Unknown Factor"
   }
 }
+
+function getFactorIcon(factorType: number) {
+  switch (factorType) {
+    case 0:
+      return "mdi mdi-lock"
+    case 1:
+      return "mdi mdi-email"
+    case 2:
+      return "mdi mdi-cellphone"
+    case 3:
+      return "mdi mdi-clock"
+    case 4:
+      return "mdi mdi-numeric"
+    default:
+      return "mdi mdi-shield-key"
+  }
+}
 </script>
 
+<style scoped>
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.2s ease-out;
+}
+
+.slide-fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>
+
 <template>
-  <v-container class="d-flex align-center justify-center fill-height">
-    <v-card max-width="1000" rounded="lg" width="100%">
-      <div v-if="isLoading" class="d-flex justify-center mb-4">
-        <v-progress-linear indeterminate color="primary" height="4" />
-      </div>
-      <div class="pa-8">
+  <div class="flex flex-col gap-3 items-center justify-center h-layout px-4">
+    <n-card class="w-full max-w-[1000px]" size="large">
+      <div class="p-4 md:p-8">
         <div class="mb-4">
           <img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
         </div>
-        <v-row>
-          <v-col cols="12" lg="6" class="d-flex align-start justify-start">
-            <div class="md:text-left h-auto">
-              <div v-if="stage === 'find-account'">
-                <h2 class="text-2xl font-bold mb-1">Sign in</h2>
-                <p class="text-lg">Use your Solarpass</p>
-              </div>
-              <div v-if="stage === 'select-factor'">
-                <h2 class="text-2xl font-bold mb-1">Choose how to sign in</h2>
-                <p class="text-lg">
-                  Select your preferred authentication method
-                </p>
-              </div>
-              <div v-if="stage === 'enter-code' && selectedFactor">
-                <h2 class="text-2xl font-bold mb-1">
-                  Enter your
-                  {{
-                    selectedFactor.type === 0 ? "password" : "verification code"
-                  }}
-                </h2>
-                <p v-if="selectedFactor.type === 1" class="text-lg">
-                  A code has been sent to
-                  {{ selectedFactor.contact || "your email" }}.
-                </p>
-                <p v-if="selectedFactor.type === 2" class="text-lg">
-                  Enter the code from your in-app authenticator.
-                </p>
-                <p v-if="selectedFactor.type === 3" class="text-lg">
-                  Enter the timed verification code.
-                </p>
-                <p v-if="selectedFactor.type === 4" class="text-lg">
-                  Enter your PIN code.
-                </p>
-                <p v-if="selectedFactor.type === 0" class="text-lg">
-                  Enter your password to continue.
-                </p>
-              </div>
-              <div v-if="stage === 'token-exchange'">
-                <h2 class="text-2xl font-bold mb-1">Finalizing Login</h2>
-                <p class="text-lg">
-                  Please wait while we complete your sign in.
-                </p>
-              </div>
-            </div>
-          </v-col>
-          <v-col cols="12" lg="6" class="d-flex align-center justify-stretch">
-            <div class="w-full d-flex flex-column md:text-right">
-              <v-window
-                v-model="activeStageIndex"
-                class="align-self-stretch pt-2"
-              >
-                <!-- Stage 1: Find Account -->
-                <v-window-item :value="0">
-                  <v-text-field
-                    v-model="accountIdentifier"
-                    label="Email or username"
-                    variant="outlined"
-                    class="mb-2"
-                    @keydown.enter="handleFindAccount"
-                  />
-                  <v-btn
-                    slim
-                    variant="text"
-                    class="text-capitalize"
-                    color="primary"
-                    >Forgot password?</v-btn
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div class="flex flex-col items-start justify-between">
+            <div class="text-left h-auto">
+              <div class="text-left h-auto">
+                <Transition mode="out-in" name="slide-fade">
+                  <div v-if="stage === 'find-account'" key="find-account">
+                    <h2 class="text-2xl font-bold mb-1">Sign in</h2>
+                    <p class="text-lg">Use your Solarpass</p>
+                  </div>
+                  <div
+                    v-else-if="stage === 'select-factor'"
+                    key="select-factor"
                   >
-
-                  <div class="d-flex justify-end">
-                    <p class="mt-4 mb-6 text-sm max-w-96">
-                      Not your computer? Remember to use Private Browsing
-                      windows to sign in.
+                    <h2 class="text-2xl font-bold mb-1">
+                      Choose how to sign in
+                    </h2>
+                    <p class="text-lg">
+                      Select your preferred authentication method
                     </p>
                   </div>
+                  <div
+                    v-else-if="stage === 'enter-code' && selectedFactor"
+                    key="enter-code"
+                  >
+                    <h2 class="text-2xl font-bold mb-1">
+                      Enter your
+                      {{
+                        selectedFactor.type === 0
+                          ? "password"
+                          : "verification code"
+                      }}
+                    </h2>
+                    <p v-if="selectedFactor.type === 1" class="text-lg">
+                      A code has been sent to
+                      {{ selectedFactor.contact || "your email" }}.
+                    </p>
+                    <p v-if="selectedFactor.type === 2" class="text-lg">
+                      Enter the code from your in-app authenticator.
+                    </p>
+                    <p v-if="selectedFactor.type === 3" class="text-lg">
+                      Enter the timed verification code.
+                    </p>
+                    <p v-if="selectedFactor.type === 4" class="text-lg">
+                      Enter your PIN code.
+                    </p>
+                    <p v-if="selectedFactor.type === 0" class="text-lg">
+                      Enter your password to continue.
+                    </p>
+                  </div>
+                  <div
+                    v-else-if="stage === 'token-exchange'"
+                    key="token-exchange"
+                  >
+                    <h2 class="text-2xl font-bold mb-1">Finalizing Login</h2>
+                    <p class="text-lg">
+                      Please wait while we complete your sign in.
+                    </p>
+                  </div>
+                </Transition>
+              </div>
+            </div>
+            <div v-if="isLoading" class="mb-4">
+              <span class="loading loading-spinner loading-xl"></span>
+            </div>
+          </div>
+          <div class="flex items-center justify-stretch">
+            <div class="w-full flex flex-col md:text-right">
+              <Transition mode="out-in" name="slide-fade">
+                <!-- Stage 1: Find Account -->
+                <div v-if="stage === 'find-account'" key="find-account">
+                  <n-input
+                    size="large"
+                    v-model:value="accountIdentifier"
+                    placeholder="Email or username"
+                    class="text-left"
+                    @keydown.enter.prevent="handleFindAccount"
+                  />
+                  <div class="mr-3 mt-4">
+                    <n-button text type="primary" size="small">
+                      Forgot Password?
+                    </n-button>
 
-                  <div class="d-flex justify-space-between align-center mt-8">
-                    <v-btn
-                      variant="text"
-                      class="text-capitalize"
-                      to="/auth/create-account"
-                    >
+                    <div class="flex justify-end">
+                      <p class="mt-4 mb-6 text-sm max-w-96">
+                        Not your computer? Remember to use Private Browsing
+                        windows to sign in.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="flex justify-between items-center mt-8">
+                    <n-button text tag="a" href="/auth/create-account">
                       Create account
-                    </v-btn>
-                    <v-btn
-                      color="primary"
+                    </n-button>
+                    <n-button
+                      type="primary"
                       size="large"
                       @click="handleFindAccount"
                     >
                       Next
-                    </v-btn>
+                    </n-button>
                   </div>
-                </v-window-item>
+                </div>
 
                 <!-- Stage 2: Select Factor -->
-                <v-window-item :value="1">
-                  <v-radio-group v-model="selectedFactorId">
-                    <v-list>
-                      <v-list-item v-for="factor in factors" :key="factor.id">
-                        <v-list-item-action>
-                          <v-radio
-                            :value="factor.id"
-                            :label="getFactorName(factor.type)"
-                          />
-                        </v-list-item-action>
-                        <template #append>
-                          <v-icon>{{
-                            factor.type === 0
-                              ? "mdi-lock"
-                              : factor.type === 1
-                              ? "mdi-email"
-                              : factor.type === 2
-                              ? "mdi-cellphone"
-                              : factor.type === 3
-                              ? "mdi-clock"
-                              : factor.type === 4
-                              ? "mdi-numeric"
-                              : "mdi-shield-key"
-                          }}</v-icon>
-                        </template>
-                      </v-list-item>
-                    </v-list>
-                  </v-radio-group>
-                  <div class="d-flex justify-end mt-6">
-                    <v-btn
-                      color="primary"
+                <div v-else-if="stage === 'select-factor'" key="select-factor">
+                  <n-radio-group
+                    v-model:value="selectedFactorId"
+                    class="w-full"
+                  >
+                    <div class="flex flex-col gap-2">
+                      <div
+                        v-for="factor in factors"
+                        :key="factor.id"
+                        class="flex items-center justify-between p-3 border rounded cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
+                        @click="selectedFactorId = factor.id"
+                      >
+                        <n-radio
+                          :value="factor.id"
+                          :label="getFactorName(factor.type)"
+                        />
+                        <n-icon size="24">
+                          <span :class="getFactorIcon(factor.type)" />
+                        </n-icon>
+                      </div>
+                    </div>
+                  </n-radio-group>
+                  <div class="flex justify-end mt-6">
+                    <n-button
+                      type="primary"
                       size="large"
                       :disabled="!selectedFactorId"
                       @click="handleFactorSelected"
                     >
                       Next
-                    </v-btn>
+                    </n-button>
                   </div>
-                </v-window-item>
+                </div>
 
                 <!-- Stage 3: Enter Code -->
-                <v-window-item :value="2">
-                  <v-text-field
-                    v-model="password"
+                <div v-else-if="stage === 'enter-code'" key="enter-code">
+                  <n-input
+                    v-model:value="password"
                     :type="selectedFactor?.type === 0 ? 'password' : 'text'"
-                    :label="selectedFactor?.type === 0 ? 'Password' : 'Code'"
-                    variant="outlined"
-                    class="mb-2"
-                    @keydown.enter="handleVerifyFactor"
+                    :placeholder="
+                      selectedFactor?.type === 0 ? 'Password' : 'Code'
+                    "
+                    show-password-on="click"
+                    class="mb-2 text-left"
+                    @keydown.enter.prevent="handleVerifyFactor"
                   />
-                  <div class="d-flex justify-space-between align-center mt-6">
-                    <v-btn
+                  <div class="flex justify-between items-center mt-6">
+                    <n-button
                       v-if="selectedFactor?.type === 1"
-                      variant="text"
-                      class="text-capitalize pl-0"
-                      color="primary"
+                      text
+                      type="primary"
                       @click="requestVerificationCode"
                     >
                       Resend Code
-                    </v-btn>
-                    <v-spacer v-else />
-                    <v-btn
-                      color="primary"
+                    </n-button>
+                    <div v-else />
+                    <n-button
+                      type="primary"
                       size="large"
                       @click="handleVerifyFactor"
                     >
                       Verify
-                    </v-btn>
+                    </n-button>
                   </div>
-                </v-window-item>
+                </div>
 
                 <!-- Stage 4: Token Exchange -->
-                <v-window-item :value="3">
-                  <div class="d-flex justify-center">
-                    <v-progress-circular
-                      indeterminate
-                      size="64"
-                      color="primary"
-                    />
+                <div
+                  v-else-if="stage === 'token-exchange'"
+                  key="token-exchange"
+                >
+                  <div class="flex justify-center">
+                    <n-spin size="large" />
                   </div>
-                </v-window-item>
-              </v-window>
-
-              <v-alert
-                v-if="error"
-                type="error"
-                closable
-                class="mt-2"
-                @update:model-value="error = null"
-              >
-                {{ error }}
-              </v-alert>
+                </div>
+              </Transition>
             </div>
-          </v-col>
-        </v-row>
+          </div>
+        </div>
       </div>
-    </v-card>
-    <footer-compact />
-  </v-container>
+    </n-card>
+
+    <n-alert
+      v-if="route.query.redirect"
+      class="w-full max-w-[1000px]"
+      type="info"
+      title="Login before you continue"
+      size="large"
+    >
+      <div class="flex flex-col gap-1">
+        <p>
+          You're requesting a page that requires authorization to access, please
+          login with your Solarpass and then we will redirect you to:
+        </p>
+        <n-code class="text-xs">{{ route.query.redirect }}</n-code>
+      </div>
+    </n-alert>
+  </div>
 </template>

app/pages/index.vue

@@ -13,10 +13,17 @@
               :item="activity.data"
               @click="router.push('/posts/' + activity.id)"
             />
+            <n-card v-else>
+              <n-alert type="info" title="Unknown Activity">
+                Sorry, the FloatingIsland do not support
+                {{ activity.type }} right now. You can check this over the
+                Solian.
+              </n-alert>
+            </n-card>
           </div>
 
           <div v-if="loading" class="flex justify-center py-4">
-            <n-spin size="large" />
+            <span class="loading loading-spinner loading-lg"></span>
           </div>
 
           <div
@@ -80,6 +87,7 @@ useHead({
 })
 
 defineOgImage({
+  // @ts-ignore
   title: "Explore",
   description: "The open social network. Friendly to everyone."
 })

app/pages/posts/[...slug].vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="py-6">
+  <div class="py-6 px-5">
     <div v-if="pending" class="text-center py-12">
       <n-spin size="large" />
       <p class="mt-4">Loading post...</p>

app/stores/user.ts

@@ -17,7 +17,9 @@ export const useUserStore = defineStore("user", () => {
   // Actions
   async function fetchUser(reload = true): Promise<void> {
     if (currentFetchPromise.value) {
-      console.log("[UserStore] Fetch already in progress. Waiting for existing fetch.")
+      console.log(
+        "[UserStore] Fetch already in progress. Waiting for existing fetch."
+      )
       return currentFetchPromise.value
     }
     if (!reload && user.value) {
@@ -37,10 +39,18 @@ export const useUserStore = defineStore("user", () => {
         console.log(`[UserStore] Logged in as @${user.value.name}`)
       } catch (e: unknown) {
         // Check for 401 Unauthorized error
-        const is401Error = (e instanceof FetchError && e.statusCode === 401) ||
-                          (e && typeof e === 'object' && 'status' in e && (e as { status: number }).status === 401) ||
-                          (e && typeof e === 'object' && 'statusCode' in e && (e as { statusCode: number }).statusCode === 401) ||
-                          (e instanceof Error && (e.message?.includes('401') || e.message?.includes('Unauthorized')))
+        const is401Error =
+          (e instanceof FetchError && e.statusCode === 401) ||
+          (e &&
+            typeof e === "object" &&
+            "status" in e &&
+            (e as { status: number }).status === 401) ||
+          (e &&
+            typeof e === "object" &&
+            "statusCode" in e &&
+            (e as { statusCode: number }).statusCode === 401) ||
+          (e instanceof Error &&
+            (e.message?.includes("401") || e.message?.includes("Unauthorized")))
 
         if (is401Error) {
           error.value = "Unauthorized"
@@ -50,6 +60,8 @@ export const useUserStore = defineStore("user", () => {
           user.value = null // Clear user data on error
           console.error("Failed to fetch user... ", e)
         }
+
+        console.log(`[UserStore] Logged as @${user.value!.name}`)
       } finally {
         isLoading.value = false
         currentFetchPromise.value = null

nuxt.config.ts

@@ -58,7 +58,8 @@ export default defineNuxtConfig({
     public: {
       development: process.env.NODE_ENV == "development",
       apiBase: process.env.NUXT_PUBLIC_API_BASE || "https://api.solian.app",
-      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || "https://solian.app"
+      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || "https://solian.app",
+      devToken: process.env.NUXT_PUBLIC_DEV_TOKEN || ""
     }
   },
   vite: {
@@ -82,6 +83,8 @@ export default defineNuxtConfig({
     ]
   },
   naiveui: {
+    colorModePreference: "system",
+    colorModePreferenceCookieName: "fi-ColorMode",
     themeConfig: {
       ...generateTailwindColorThemes(),
       shared: {
@@ -94,6 +97,16 @@ export default defineNuxtConfig({
           primaryColorSuppl: "#4C5EC5FF",
           borderRadius: "16px",
           borderRadiusSmall: "8px"
+        },
+        Input: {
+          borderRadius: "8px",
+          borderRadiusMedium: "8px",
+          borderRadiusSmall: "4px"
+        },
+        Button: {
+          borderRadius: "8px",
+          borderRadiusMedium: "8px",
+          borderRadiusSmall: "4px"
         }
       },
       light: {},