feat: Add demo account creation functionality

- Introduce a new DemoAccountCreator component for generating test accounts with auto-generated credentials.
- Implement useDemoAccountGenerator composable to handle credential generation and state management.
- Update routing to replace the existing login page with the new LoginDemo page for demo account access.
- Add unique-names-generator package to facilitate username generation.

package-lock.json

@@ -29,6 +29,7 @@
         "tailwind-merge": "^2.6.0",
         "tailwind-variants": "^0.3.1",
         "tailwindcss-animate": "^1.0.7",
+        "unique-names-generator": "^4.7.1",
         "vue": "^3.5.13",
         "vue-i18n": "^9.14.2",
         "vue-router": "^4.5.0",
@@ -13819,6 +13820,15 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/unique-names-generator": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
+      "integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/unique-slug": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-3.0.0.tgz",

package.json

@@ -38,6 +38,7 @@
     "tailwind-merge": "^2.6.0",
     "tailwind-variants": "^0.3.1",
     "tailwindcss-animate": "^1.0.7",
+    "unique-names-generator": "^4.7.1",
     "vue": "^3.5.13",
     "vue-i18n": "^9.14.2",
     "vue-router": "^4.5.0",

src/components/demo/DemoAccountCreator.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="space-y-4">
+    <!-- Demo Mode Banner -->
+    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+      <div class="flex items-center gap-2">
+        <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
+        <p class="text-sm text-yellow-800 font-medium">
+          Demo Mode Active
+        </p>
+      </div>
+      <p class="text-xs text-yellow-700 mt-1">
+        This is a demo environment. Use the button below to create a test account.
+      </p>
+    </div>
+
+    <!-- Demo Account Creation -->
+    <Card>
+      <CardHeader>
+        <CardTitle class="text-lg">Quick Demo Account</CardTitle>
+        <CardDescription>
+          Create a test account with auto-generated credentials
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <!-- Generated Credentials Display -->
+        <div v-if="generatedCredentials" class="space-y-3 p-3 bg-gray-50 rounded-lg">
+          <div class="space-y-2">
+            <Label class="text-sm font-medium text-gray-700">Username:</Label>
+            <div class="flex items-center gap-2">
+              <Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
+              <Button 
+                variant="outline" 
+                size="sm" 
+                @click="copyToClipboard(generatedCredentials.username)"
+                class="shrink-0"
+              >
+                Copy
+              </Button>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <Label class="text-sm font-medium text-gray-700">Password:</Label>
+            <div class="flex items-center gap-2">
+              <Input :value="generatedCredentials.password" readonly class="font-mono text-sm" />
+              <Button 
+                variant="outline" 
+                size="sm" 
+                @click="copyToClipboard(generatedCredentials.password)"
+                class="shrink-0"
+              >
+                Copy
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Create Account Button -->
+        <Button 
+          @click="createFakeAccount" 
+          :disabled="isLoading" 
+          class="w-full"
+        >
+          <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
+          {{ isLoading ? 'Creating Account...' : 'Create Demo Account' }}
+        </Button>
+
+        <!-- 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 text-center bg-green-50 p-3 rounded-lg">
+          {{ successMessage }}
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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/useAuth'
+import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
+import { toast } from 'vue-sonner'
+
+const router = useRouter()
+const { isLoading, error, generatedCredentials, generateNewCredentials } = useDemoAccountGenerator()
+const successMessage = ref('')
+
+// Copy text to clipboard
+async function copyToClipboard(text: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+    toast.success('Copied to clipboard!')
+  } catch (err) {
+    toast.error('Failed to copy to clipboard')
+  }
+}
+
+// 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
+    })
+
+    successMessage.value = 'Account created successfully! Logging you in...'
+    toast.success('Demo account created and logged in!')
+
+    // Redirect to home page after successful registration
+    setTimeout(() => {
+      router.push('/')
+    }, 1500)
+
+  } 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
+  }
+}
+</script>

src/composables/useDemoAccountGenerator.ts

@@ -0,0 +1,65 @@
+import { ref } from 'vue'
+import { uniqueNamesGenerator, names, colors, animals } from 'unique-names-generator'
+
+export interface GeneratedCredentials {
+  username: string
+  password: string
+  email: string
+}
+
+export function useDemoAccountGenerator() {
+  const isLoading = ref(false)
+  const error = ref('')
+  const generatedCredentials = ref<GeneratedCredentials | null>(null)
+
+  // Generate a random password
+  function generateRandomPassword(): string {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*'
+    let password = ''
+    for (let i = 0; i < 12; i++) {
+      password += chars.charAt(Math.floor(Math.random() * chars.length))
+    }
+    return password
+  }
+
+  // Generate unique username and random password
+  function generateCredentials(): GeneratedCredentials {
+    // Use only 2 dictionaries to keep username shorter
+    const username = uniqueNamesGenerator({
+      dictionaries: [names, colors],
+      separator: '_',
+      length: 2,
+      style: 'lowerCase'
+    })
+    
+    const password = generateRandomPassword()
+    const email = `${username}@demo.local`
+    return { username, password, email }
+  }
+
+  // Generate new credentials
+  function generateNewCredentials(): GeneratedCredentials {
+    const credentials = generateCredentials()
+    generatedCredentials.value = credentials
+    return credentials
+  }
+
+  // Reset state
+  function reset() {
+    isLoading.value = false
+    error.value = ''
+    generatedCredentials.value = null
+  }
+
+  return {
+    // State
+    isLoading,
+    error,
+    generatedCredentials,
+
+    // Actions
+    generateCredentials,
+    generateNewCredentials,
+    reset
+  }
+}

src/pages/LoginDemo.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8">
+    <div class="flex flex-col items-center justify-center space-y-8 max-w-4xl mx-auto w-full">
+      <!-- Welcome Section -->
+      <div class="text-center space-y-4">
+        <div class="flex justify-center">
+          <img src="@/assets/logo.png" alt="Logo" class="h-36 w-36 sm:h-48 sm:w-48 md:h-60 md:w-60" />
+        </div>
+        <h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
+        <p class="text-xl text-muted-foreground max-w-md">
+          Your secure platform for events and community management
+        </p>
+        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 max-w-md mx-auto">
+          <p class="text-sm text-yellow-800">
+            <strong>Demo Mode:</strong> Click the button below to create a fake account for testing purposes.
+          </p>
+        </div>
+      </div>
+
+      <!-- Demo Account Creation Card -->
+      <Card class="w-full max-w-md">
+        <CardHeader>
+          <CardTitle class="text-center">Demo Account Creation</CardTitle>
+          <CardDescription class="text-center">
+            Create a fake account with auto-generated credentials for testing
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-6">
+          <!-- Generated Credentials Display -->
+          <div v-if="generatedCredentials" class="space-y-4 p-4 bg-gray-50 rounded-lg">
+            <div class="space-y-2">
+              <Label class="text-sm font-medium text-gray-700">Generated Username:</Label>
+              <div class="flex items-center gap-2">
+                <Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  @click="copyToClipboard(generatedCredentials.username)"
+                  class="shrink-0"
+                >
+                  Copy
+                </Button>
+              </div>
+            </div>
+            <div class="space-y-2">
+              <Label class="text-sm font-medium text-gray-700">Generated Password:</Label>
+              <div class="flex items-center gap-2">
+                <Input :value="generatedCredentials.password" readonly class="font-mono text-sm" />
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  @click="copyToClipboard(generatedCredentials.password)"
+                  class="shrink-0"
+                >
+                  Copy
+                </Button>
+              </div>
+            </div>
+            <div class="text-xs text-gray-500 text-center">
+              These credentials will be used to automatically log you in
+            </div>
+          </div>
+
+          <!-- Create Fake Account Button -->
+          <Button 
+            @click="createFakeAccount" 
+            :disabled="isLoading" 
+            class="w-full"
+            size="lg"
+          >
+            <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
+            {{ isLoading ? 'Creating Account...' : 'Create Fake Account' }}
+          </Button>
+
+          <!-- 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 text-center bg-green-50 p-3 rounded-lg">
+            {{ successMessage }}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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/useAuth'
+import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
+import { toast } from 'vue-sonner'
+
+const router = useRouter()
+const { isLoading, error, generatedCredentials, generateNewCredentials } = useDemoAccountGenerator()
+const successMessage = ref('')
+
+// Copy text to clipboard
+async function copyToClipboard(text: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+    toast.success('Copied to clipboard!')
+  } catch (err) {
+    toast.error('Failed to copy to clipboard')
+  }
+}
+
+// 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
+    })
+
+    successMessage.value = 'Account created successfully! Logging you in...'
+    toast.success('Demo account created and logged in!')
+
+    // Redirect to home page after successful registration
+    setTimeout(() => {
+      router.push('/')
+    }, 1500)
+
+  } 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
+  }
+}
+</script>

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { auth } from '@/composables/useAuth'
 import Home from '@/pages/Home.vue'
-import Login from '@/pages/Login.vue'
+import LoginDemo from '@/pages/LoginDemo.vue'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -17,7 +17,7 @@ const router = createRouter({
     {
       path: '/login',
       name: 'login',
-      component: Login,
+      component: LoginDemo,
       meta: {
         requiresAuth: false
       }