Adds demo login page with demo account creation

Implements a new login page that allows users to either log in with credentials or quickly create a demo account. This is done to provide a quick onboarding experience for new users without requiring them to go through a full registration process. The demo account comes pre-funded with test currency, making it easy to explore the platform's features. A toggle is included to switch between demo account creation and standard login.
feat(layout): Replace top navbar with sidebar layout
2026-01-03 12:16:48 +01:00 · 2026-01-03 12:14:15 +01:00
19 changed files with 1031 additions and 28 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -25,7 +25,7 @@
        "qr-scanner": "^1.4.2",
        "qrcode": "^1.5.4",
        "radix-vue": "^1.9.13",
-        "reka-ui": "^2.5.0",
+        "reka-ui": "^2.7.0",
        "tailwind-merge": "^2.6.0",
        "tailwindcss-animate": "^1.0.7",
        "unique-names-generator": "^4.7.1",
@ -12172,9 +12172,9 @@
      }
    },
    "node_modules/reka-ui": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.5.0.tgz",
-      "integrity": "sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
+      "integrity": "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==",
      "license": "MIT",
      "dependencies": {
        "@floating-ui/dom": "^1.6.13",
--- a/package.json
+++ b/package.json
@ -34,7 +34,7 @@
    "qr-scanner": "^1.4.2",
    "qrcode": "^1.5.4",
    "radix-vue": "^1.9.13",
-    "reka-ui": "^2.5.0",
+    "reka-ui": "^2.7.0",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "unique-names-generator": "^4.7.1",
--- a/src/App.vue
+++ b/src/App.vue
@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import Navbar from '@/components/layout/Navbar.vue'
-import Footer from '@/components/layout/Footer.vue'
+import AppLayout from '@/components/layout/AppLayout.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
 import { Toaster } from '@/components/ui/sonner'
 import 'vue-sonner/style.css'
@ -20,20 +19,18 @@ useTheme()
 // Initialize preloader
 const marketPreloader = useMarketPreloader()

-// Relay hub initialization is now handled by the base module
-
-// Hide navbar on login page
-const showNavbar = computed(() => {
+// Show layout on all pages except login
+const showLayout = computed(() => {
  return route.path !== '/login'
 })

 async function handleLoginSuccess() {
  showLoginDialog.value = false
  toast.success('Welcome back!')
-  
+
  // Trigger preloading after successful login
  marketPreloader.preloadMarket()
-  
+
  // Chat initialization is now handled by the chat module
 }

@ -62,21 +59,14 @@ watch(() => auth.isAuthenticated.value, async (isAuthenticated) => {

 <template>
  <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
-      style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
-      <header
-        v-if="showNavbar"
-        class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <nav class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
-          <Navbar />
-        </nav>
-      </header>
+    <!-- Sidebar layout for authenticated pages -->
+    <AppLayout v-if="showLayout">
+      <router-view />
+    </AppLayout>

-      <main class="flex-1">
-        <router-view />
-      </main>
-
-      <Footer v-if="showNavbar" />
+    <!-- Login page without sidebar -->
+    <div v-else class="min-h-screen">
+      <router-view />
    </div>

    <!-- Toast notifications -->
--- a/src/app.ts
+++ b/src/app.ts
@ -60,7 +60,7 @@ export async function createAppInstance() {
      {
        path: '/login',
        name: 'login',
-        component: () => import('./pages/Login.vue'),
+        component: () => import('./pages/LoginDemo.vue'),
        meta: { requiresAuth: false }
      },
      // Pre-register module routes
--- a/src/components/layout/AppLayout.vue
+++ b/src/components/layout/AppLayout.vue
@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AppSidebar from './AppSidebar.vue'
+import AppTopBar from './AppTopBar.vue'
+import MobileDrawer from './MobileDrawer.vue'
+
+const sidebarOpen = ref(false)
+
+const openSidebar = () => {
+  sidebarOpen.value = true
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <!-- Mobile Drawer -->
+    <MobileDrawer v-model:open="sidebarOpen" />
+
+    <!-- Desktop Sidebar (fixed left) -->
+    <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
+      <AppSidebar />
+    </div>
+
+    <!-- Main content area (offset on desktop) -->
+    <div class="lg:pl-72">
+      <!-- Top Bar -->
+      <AppTopBar @open-sidebar="openSidebar" />
+
+      <!-- Main Content -->
+      <main
+        class="flex-1"
+        style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)"
+      >
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from '@/components/theme-provider'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+  Home,
+  Calendar,
+  ShoppingBag,
+  MessageSquare,
+  Settings,
+  Sun,
+  Moon
+} from 'lucide-vue-next'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+import { useModularNavigation } from '@/composables/useModularNavigation'
+
+const route = useRoute()
+const { t } = useI18n()
+const { theme, setTheme } = useTheme()
+const { navigation } = useModularNavigation()
+
+// Map navigation items to icons
+const navIcons: Record<string, any> = {
+  '/': Home,
+  '/events': Calendar,
+  '/market': ShoppingBag,
+  '/chat': MessageSquare,
+}
+
+const toggleTheme = () => {
+  setTheme(theme.value === 'dark' ? 'light' : 'dark')
+}
+
+// Check if route is active
+const isActive = (href: string) => {
+  if (href === '/') {
+    return route.path === '/'
+  }
+  return route.path.startsWith(href)
+}
+</script>
+
+<template>
+  <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-border bg-background px-6 pb-4">
+    <!-- Logo -->
+    <div class="flex h-16 shrink-0 items-center">
+      <router-link to="/" class="flex items-center gap-2">
+        <img
+          src="@/assets/logo.png"
+          alt="Logo"
+          class="h-8 w-8"
+        />
+        <span class="font-semibold text-foreground">{{ t('nav.title') }}</span>
+      </router-link>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="flex flex-1 flex-col">
+      <ul role="list" class="flex flex-1 flex-col gap-y-7">
+        <!-- Primary Navigation -->
+        <li>
+          <ul role="list" class="-mx-2 space-y-1">
+            <li v-for="item in navigation" :key="item.href">
+              <router-link
+                :to="item.href"
+                :class="[
+                  isActive(item.href)
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                  'group flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+                ]"
+              >
+                <component
+                  :is="navIcons[item.href] || Home"
+                  :class="[
+                    isActive(item.href)
+                      ? 'text-accent-foreground'
+                      : 'text-muted-foreground group-hover:text-accent-foreground',
+                    'h-5 w-5 shrink-0'
+                  ]"
+                />
+                {{ item.name }}
+              </router-link>
+            </li>
+          </ul>
+        </li>
+
+        <!-- Secondary Section (placeholder for future use) -->
+        <li>
+          <div class="text-xs font-semibold text-muted-foreground">
+            <!-- Future: Your stalls, subscriptions, etc. -->
+          </div>
+          <ul role="list" class="-mx-2 mt-2 space-y-1">
+            <!-- Empty for now -->
+          </ul>
+        </li>
+
+        <!-- Footer: Settings & Preferences -->
+        <li class="mt-auto space-y-2">
+          <Separator />
+
+          <!-- Theme & Language -->
+          <div class="flex items-center justify-between px-2 py-1">
+            <Button
+              variant="ghost"
+              size="icon"
+              @click="toggleTheme"
+              class="h-8 w-8"
+            >
+              <Sun v-if="theme === 'dark'" class="h-4 w-4" />
+              <Moon v-else class="h-4 w-4" />
+            </Button>
+            <LanguageSwitcher />
+          </div>
+
+          <!-- Settings Link -->
+          <router-link
+            to="/settings"
+            :class="[
+              isActive('/settings')
+                ? 'bg-accent text-accent-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              'group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+            ]"
+          >
+            <Settings class="h-5 w-5 shrink-0" />
+            Settings
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
--- a/src/components/layout/AppTopBar.vue
+++ b/src/components/layout/AppTopBar.vue
@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  Menu,
+  Bell,
+  ShoppingCart,
+  User,
+  LogOut,
+  Wallet,
+  Ticket,
+  Store,
+  Activity,
+} from 'lucide-vue-next'
+import CurrencyDisplay from '@/components/ui/CurrencyDisplay.vue'
+import LoginDialog from '@/components/auth/LoginDialog.vue'
+import ProfileDialog from '@/components/auth/ProfileDialog.vue'
+import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
+import { auth } from '@/composables/useAuthService'
+import { useModularNavigation } from '@/composables/useModularNavigation'
+import { useMarketStore } from '@/modules/market/stores/market'
+import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
+import appConfig from '@/app.config'
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  (e: 'openSidebar'): void
+}>()
+
+const router = useRouter()
+const { userMenuItems } = useModularNavigation()
+const marketStore = useMarketStore()
+
+const showLoginDialog = ref(false)
+const showProfileDialog = ref(false)
+const showLogoutConfirm = ref(false)
+
+// Get PaymentService for wallet balance
+const paymentService = tryInjectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
+
+// Get ChatService for notifications
+const chatService = tryInjectService(SERVICE_TOKENS.CHAT_SERVICE) as any
+
+// Wallet balance
+const totalBalance = computed(() => {
+  return paymentService?.totalBalance || 0
+})
+
+// Combined notifications (chat unread for now)
+const totalNotifications = computed(() => {
+  return chatService?.totalUnreadCount?.value || 0
+})
+
+// Cart item count
+const cartItemCount = computed(() => {
+  return marketStore.totalCartItems
+})
+
+// Check if market module is enabled
+const isMarketEnabled = computed(() => {
+  return appConfig.modules.market?.enabled ?? false
+})
+
+const openLoginDialog = () => {
+  showLoginDialog.value = true
+}
+
+const openProfileDialog = () => {
+  showProfileDialog.value = true
+}
+
+const handleLogout = async () => {
+  try {
+    auth.logout()
+    router.push('/login')
+  } catch (error) {
+    console.error('Logout failed:', error)
+  }
+}
+
+const navigateToNotifications = () => {
+  // For now, navigate to chat since that's our notification source
+  router.push('/chat')
+}
+</script>
+
+<template>
+  <div
+    class="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-x-4 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 sm:gap-x-6 sm:px-6 lg:px-8"
+  >
+    <!-- Mobile menu button -->
+    <Button
+      variant="ghost"
+      size="icon"
+      class="-m-2.5 p-2.5 lg:hidden"
+      @click="emit('openSidebar')"
+    >
+      <span class="sr-only">Open sidebar</span>
+      <Menu class="h-5 w-5" />
+    </Button>
+
+    <!-- Separator (mobile only) -->
+    <div class="h-6 w-px bg-border lg:hidden" aria-hidden="true" />
+
+    <!-- Spacer / Future search area -->
+    <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+      <!-- Search placeholder for future -->
+      <div class="flex-1">
+        <!-- Future: Global search input -->
+      </div>
+
+      <!-- Right side actions -->
+      <div class="flex items-center gap-x-4 lg:gap-x-6">
+        <!-- Notifications (combined) -->
+        <Button
+          v-if="auth.isAuthenticated.value"
+          variant="ghost"
+          size="icon"
+          class="relative"
+          @click="navigateToNotifications"
+        >
+          <span class="sr-only">View notifications</span>
+          <Bell class="h-5 w-5" />
+          <Badge
+            v-if="totalNotifications > 0"
+            class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
+          >
+            {{ totalNotifications > 99 ? '99+' : totalNotifications }}
+          </Badge>
+        </Button>
+
+        <!-- Cart (only when market is enabled) -->
+        <router-link
+          v-if="auth.isAuthenticated.value && isMarketEnabled"
+          to="/cart"
+          class="relative flex items-center justify-center"
+        >
+          <Button variant="ghost" size="icon" class="relative">
+            <span class="sr-only">Shopping cart</span>
+            <ShoppingCart class="h-5 w-5" />
+            <Badge
+              v-if="cartItemCount > 0"
+              class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
+            >
+              {{ cartItemCount > 99 ? '99+' : cartItemCount }}
+            </Badge>
+          </Button>
+        </router-link>
+
+        <!-- Separator -->
+        <div class="hidden lg:block lg:h-6 lg:w-px lg:bg-border" aria-hidden="true" />
+
+        <!-- Profile dropdown -->
+        <div v-if="auth.isAuthenticated.value">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" class="relative flex items-center gap-2">
+                <User class="h-5 w-5" />
+                <span class="hidden lg:block text-sm font-semibold truncate max-w-32">
+                  {{ auth.userDisplay.value?.name || 'Anonymous' }}
+                </span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" class="w-56">
+              <!-- Wallet Balance -->
+              <DropdownMenuItem @click="() => router.push('/wallet')" class="gap-2">
+                <Wallet class="h-4 w-4 text-muted-foreground" />
+                <CurrencyDisplay :balance-msat="totalBalance" />
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <!-- Profile -->
+              <DropdownMenuItem @click="openProfileDialog" class="gap-2">
+                <User class="h-4 w-4" />
+                Profile
+              </DropdownMenuItem>
+
+              <!-- User menu items (from modules) -->
+              <DropdownMenuItem
+                v-for="item in userMenuItems"
+                :key="item.href"
+                @click="() => router.push(item.href)"
+                class="gap-2"
+              >
+                <component
+                  :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
+                  class="h-4 w-4"
+                />
+                {{ item.name }}
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <!-- Logout -->
+              <DropdownMenuItem
+                @click="showLogoutConfirm = true"
+                class="gap-2 text-destructive"
+              >
+                <LogOut class="h-4 w-4" />
+                Logout
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <!-- Login button (when not authenticated) -->
+        <Button
+          v-else
+          variant="outline"
+          size="sm"
+          @click="openLoginDialog"
+          class="gap-2"
+        >
+          <User class="h-4 w-4" />
+          <span class="hidden sm:inline">Login</span>
+        </Button>
+      </div>
+    </div>
+
+    <!-- Login Dialog -->
+    <LoginDialog v-model:is-open="showLoginDialog" />
+
+    <!-- Profile Dialog -->
+    <ProfileDialog v-model:is-open="showProfileDialog" />
+
+    <!-- Logout Confirm Dialog -->
+    <LogoutConfirmDialog
+      v-model:is-open="showLogoutConfirm"
+      @confirm="handleLogout"
+    />
+  </div>
+</template>
--- a/src/components/layout/MobileDrawer.vue
+++ b/src/components/layout/MobileDrawer.vue
@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from '@/components/theme-provider'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+  Home,
+  Calendar,
+  ShoppingBag,
+  MessageSquare,
+  Settings,
+  Sun,
+  Moon,
+} from 'lucide-vue-next'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
+import { useModularNavigation } from '@/composables/useModularNavigation'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const { theme, setTheme } = useTheme()
+const { navigation } = useModularNavigation()
+
+// Map navigation items to icons
+const navIcons: Record<string, any> = {
+  '/': Home,
+  '/events': Calendar,
+  '/market': ShoppingBag,
+  '/chat': MessageSquare,
+}
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+
+const toggleTheme = () => {
+  setTheme(theme.value === 'dark' ? 'light' : 'dark')
+}
+
+// Check if route is active
+const isActive = (href: string) => {
+  if (href === '/') {
+    return route.path === '/'
+  }
+  return route.path.startsWith(href)
+}
+
+// Navigate and close drawer
+const navigateTo = (href: string) => {
+  router.push(href)
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <Sheet v-model:open="isOpen">
+    <SheetContent side="left" class="w-72 p-0">
+      <div class="flex h-full flex-col">
+        <!-- Header with Logo -->
+        <SheetHeader class="px-6 py-4 border-b border-border">
+          <SheetTitle class="flex items-center gap-2">
+            <img
+              src="@/assets/logo.png"
+              alt="Logo"
+              class="h-8 w-8"
+            />
+            <span class="font-semibold">{{ t('nav.title') }}</span>
+          </SheetTitle>
+        </SheetHeader>
+
+        <!-- Navigation -->
+        <nav class="flex-1 overflow-y-auto px-4 py-4">
+          <ul role="list" class="space-y-1">
+            <li v-for="item in navigation" :key="item.href">
+              <button
+                @click="navigateTo(item.href)"
+                :class="[
+                  isActive(item.href)
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                  'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+                ]"
+              >
+                <component
+                  :is="navIcons[item.href] || Home"
+                  :class="[
+                    isActive(item.href)
+                      ? 'text-accent-foreground'
+                      : 'text-muted-foreground group-hover:text-accent-foreground',
+                    'h-5 w-5 shrink-0'
+                  ]"
+                />
+                {{ item.name }}
+              </button>
+            </li>
+          </ul>
+
+          <!-- Secondary Section Placeholder -->
+          <div class="mt-8">
+            <div class="text-xs font-semibold text-muted-foreground px-2">
+              <!-- Future: Your stalls, subscriptions, etc. -->
+            </div>
+          </div>
+        </nav>
+
+        <!-- Footer -->
+        <div class="border-t border-border px-4 py-4 space-y-2">
+          <!-- Theme & Language -->
+          <div class="flex items-center justify-between px-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              @click="toggleTheme"
+              class="h-8 w-8"
+            >
+              <Sun v-if="theme === 'dark'" class="h-4 w-4" />
+              <Moon v-else class="h-4 w-4" />
+            </Button>
+            <LanguageSwitcher />
+          </div>
+
+          <Separator />
+
+          <!-- Settings Link -->
+          <button
+            @click="navigateTo('/settings')"
+            :class="[
+              isActive('/settings')
+                ? 'bg-accent text-accent-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
+            ]"
+          >
+            <Settings class="h-5 w-5 shrink-0" />
+            Settings
+          </button>
+        </div>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>
--- a/src/components/layout/Navbar.old.vue
+++ b/src/components/layout/Navbar.old.vue
@ -1,3 +1,13 @@
+<!--
+  DEPRECATED: This file is kept for reference only and will be deleted.
+
+  The top navbar layout has been replaced with a sidebar layout.
+  See the new layout components:
+  - AppLayout.vue (main layout wrapper)
+  - AppSidebar.vue (desktop sidebar)
+  - AppTopBar.vue (top bar with notifications, cart, profile)
+  - MobileDrawer.vue (mobile slide-out navigation)
+-->
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
--- a/src/components/ui/sheet/Sheet.vue
+++ b/src/components/ui/sheet/Sheet.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
--- a/src/components/ui/sheet/SheetClose.vue
+++ b/src/components/ui/sheet/SheetClose.vue
@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SheetVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sheetVariants } from "."
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"]
+  side?: SheetVariants["side"]
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "side")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="w-4 h-4" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
--- a/src/components/ui/sheet/SheetDescription.vue
+++ b/src/components/ui/sheet/SheetDescription.vue
@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
--- a/src/components/ui/sheet/SheetFooter.vue
+++ b/src/components/ui/sheet/SheetFooter.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/sheet/SheetHeader.vue
+++ b/src/components/ui/sheet/SheetHeader.vue
@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/sheet/SheetTitle.vue
+++ b/src/components/ui/sheet/SheetTitle.vue
@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
--- a/src/components/ui/sheet/SheetTrigger.vue
+++ b/src/components/ui/sheet/SheetTrigger.vue
@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
--- a/src/components/ui/sheet/index.ts
+++ b/src/components/ui/sheet/index.ts
@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>
--- a/src/pages/LoginDemo.vue
+++ b/src/pages/LoginDemo.vue
@ -0,0 +1,231 @@
+<template>
+  <div
+    class="min-h-screen flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
+    <div class="flex flex-col items-center justify-center space-y-3 sm:space-y-6 max-w-4xl mx-auto w-full mt-8 sm:mt-0">
+      <!-- Welcome Section -->
+      <div class="text-center space-y-2 sm:space-y-4">
+        <div class="flex justify-center">
+          <img src="@/assets/logo.png" alt="Logo" class="h-34 w-34 sm:h-42 sm:w-42 lg:h-50 lg:w-50" />
+        </div>
+        <div class="space-y-1 sm:space-y-3">
+          <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
+          <p class="text-sm sm:text-base md:text-xl text-muted-foreground max-w-md mx-auto px-4">
+            Your secure platform for events and community management
+          </p>
+        </div>
+      </div>
+
+      <!-- Demo Account Creation Card -->
+      <Card class="w-full max-w-md">
+        <CardContent class="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-6">
+          <!-- Demo Badge -->
+          <div class="flex justify-center">
+            <div
+              class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
+              <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
+              <span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
+            </div>
+          </div>
+
+          <!-- Mode Toggle -->
+          <div class="flex justify-center">
+            <div class="inline-flex rounded-lg bg-muted p-1">
+              <Button variant="ghost" size="sm" :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
+                @click="activeMode = 'demo'">
+                Demo Account
+              </Button>
+              <Button variant="ghost" size="sm" :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
+                @click="activeMode = 'login'">
+                Sign In
+              </Button>
+            </div>
+          </div>
+
+          <!-- Demo Mode Content -->
+          <div v-if="activeMode === 'demo'" class="space-y-4 sm:space-y-6 relative">
+            <!-- Loading Overlay -->
+            <div v-if="isLoading" class="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-lg">
+              <div class="flex flex-col items-center gap-3 text-center px-4">
+                <div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+                <div>
+                  <p class="text-sm font-medium">Creating your demo account...</p>
+                  <p class="text-xs text-muted-foreground mt-1">This will only take a moment</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Demo Info -->
+            <div class="text-center space-y-2 sm:space-y-3">
+              <h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Create Demo Account</h2>
+              <p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
+                Get instant access with a pre-funded demo account containing
+                <span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
+              </p>
+            </div>
+
+            <!-- Create Account Button -->
+            <Button @click="createFakeAccount" :disabled="isLoading"
+              class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
+              {{ 'Create Demo Account' }}
+            </Button>
+
+            <!-- Info Text -->
+            <p class="text-xs text-center text-muted-foreground">
+              Your credentials will be generated automatically
+            </p>
+          </div>
+
+          <!-- Login Mode Content -->
+          <div v-else class="space-y-4 sm:space-y-6">
+            <!-- Login Info -->
+            <div class="text-center space-y-2 sm:space-y-3">
+              <h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Sign In</h2>
+              <p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
+                Sign in to your existing account
+              </p>
+            </div>
+
+            <!-- Login Form -->
+            <div class="space-y-4">
+              <div class="space-y-2">
+                <Label for="login-username">Username or Email</Label>
+                <Input id="login-username" v-model="loginForm.username" placeholder="Enter your username or email"
+                  @keydown.enter="handleLogin" />
+              </div>
+              <div class="space-y-2">
+                <Label for="login-password">Password</Label>
+                <Input id="login-password" type="password" v-model="loginForm.password"
+                  placeholder="Enter your password" @keydown.enter="handleLogin" />
+              </div>
+            </div>
+
+            <!-- Login Button -->
+            <Button @click="handleLogin" :disabled="isLoading || !canLogin"
+              class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
+              <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
+              {{ isLoading ? 'Signing In...' : 'Sign In' }}
+            </Button>
+          </div>
+
+          <!-- Error Display -->
+          <p v-if="error" class="text-sm text-destructive text-center">
+            {{ error }}
+          </p>
+
+          <!-- Success Message -->
+          <div v-if="successMessage"
+            class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
+            {{ successMessage }}
+          </div>
+
+          <!-- Demo Notice -->
+          <div class="text-center space-y-2">
+            <p class="text-xs text-muted-foreground">
+              This is a demo environment. All transactions use fake satoshis for testing purposes.
+            </p>
+            <div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd"
+                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                  clip-rule="evenodd" />
+              </svg>
+              <span class="font-medium">Demo data may be erased at any time</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { auth } from '@/composables/useAuthService'
+import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
+import { toast } from 'vue-sonner'
+
+const router = useRouter()
+const { isLoading, error, generateNewCredentials } = useDemoAccountGenerator()
+const successMessage = ref('')
+const activeMode = ref<'demo' | 'login'>('demo')
+
+// Login form
+const loginForm = ref({
+  username: '',
+  password: ''
+})
+
+const canLogin = computed(() => {
+  return loginForm.value.username.trim() && loginForm.value.password.trim()
+})
+
+// Create fake account and automatically log in
+async function createFakeAccount() {
+  try {
+    isLoading.value = true
+    error.value = ''
+    successMessage.value = ''
+
+    // Generate credentials
+    const credentials = generateNewCredentials()
+
+    // Register the fake account
+    await auth.register({
+      username: credentials.username,
+      email: credentials.email,
+      password: credentials.password,
+      password_repeat: credentials.password
+    })
+
+    // Show success with username
+    successMessage.value = `Account created! Username: ${credentials.username}`
+    toast.success(`Logged in as ${credentials.username}!`)
+
+    // Redirect to home page after successful registration
+    setTimeout(() => {
+      router.push('/')
+    }, 2000)
+
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to create demo account'
+    toast.error('Failed to create demo account. Please try again.')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Login with existing credentials
+async function handleLogin() {
+  if (!canLogin.value) return
+
+  try {
+    isLoading.value = true
+    error.value = ''
+    successMessage.value = ''
+
+    await auth.login({
+      username: loginForm.value.username,
+      password: loginForm.value.password
+    })
+
+    successMessage.value = 'Login successful! Redirecting...'
+    toast.success('Login successful!')
+
+    // Redirect to home page after successful login
+    setTimeout(() => {
+      router.push('/')
+    }, 1500)
+
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Login failed'
+    toast.error('Login failed. Please check your credentials.')
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>