feat: Implement mode toggle for demo and login in LoginDemo component

- Add a mode toggle to switch between demo account creation and login functionalities.
- Refactor the layout to conditionally display content based on the selected mode.
- Enhance the login form with validation and error handling for user credentials.
- Update button texts and improve user experience with clearer instructions and feedback.

src/pages/LoginDemo.vue

@@ -25,6 +25,30 @@
             </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-6">
             <!-- Demo Info -->
             <div class="text-center space-y-3">
               <h2 class="text-2xl font-semibold">Create Demo Account</h2>
@@ -81,6 +105,52 @@
               <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
               {{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
             </Button>
+          </div>
+
+          <!-- Login Mode Content -->
+          <div v-else class="space-y-6">
+            <!-- Login Info -->
+            <div class="text-center space-y-3">
+              <h2 class="text-2xl font-semibold">Sign In</h2>
+              <p class="text-muted-foreground 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-12 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">
@@ -111,7 +181,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { Card, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
@@ -124,6 +194,17 @@ import { toast } from 'vue-sonner'
 const router = useRouter()
 const { isLoading, error, generatedCredentials, 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()
+})
 
 // Copy text to clipboard
 async function copyToClipboard(text: string) {
@@ -168,4 +249,34 @@ async function createFakeAccount() {
     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>