From 0c13a7678f62ba058019ea08595ae6cac16f5d3a Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 4 Sep 2025 17:47:10 +0200
Subject: [PATCH] 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 | 219 ++++++++++++++++++++++++++++++----------
 1 file changed, 165 insertions(+), 54 deletions(-)

diff --git a/src/pages/LoginDemo.vue b/src/pages/LoginDemo.vue
index 7a8ecb0..1589d16 100644
--- a/src/pages/LoginDemo.vue
+++ b/src/pages/LoginDemo.vue
@@ -25,62 +25,132 @@
             </div>
           </div>
 
-          <!-- Demo Info -->
-          <div class="text-center space-y-3">
-            <h2 class="text-2xl font-semibold">Create Demo Account</h2>
-            <p class="text-muted-foreground 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>
-
-          <!-- Generated Credentials Display -->
-          <div v-if="generatedCredentials" class="space-y-4 p-4 bg-muted/50 rounded-lg border">
-            <div class="space-y-3">
-              <div class="space-y-2">
-                <Label class="text-sm font-medium">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">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>
-            <div class="text-xs text-muted-foreground text-center">
-              These credentials will be used to automatically log you in
+          <!-- 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>
 
-          <!-- Create Account Button -->
-          <Button 
-            @click="createFakeAccount" 
-            :disabled="isLoading" 
-            class="w-full h-12 text-lg font-medium"
-            size="lg"
-          >
-            <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
-            {{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
-          </Button>
+          <!-- 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>
+              <p class="text-muted-foreground 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>
+
+            <!-- Generated Credentials Display -->
+            <div v-if="generatedCredentials" class="space-y-4 p-4 bg-muted/50 rounded-lg border">
+              <div class="space-y-3">
+                <div class="space-y-2">
+                  <Label class="text-sm font-medium">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">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>
+              <div class="text-xs text-muted-foreground text-center">
+                These credentials will be used to automatically log you in
+              </div>
+            </div>
+
+            <!-- Create Account Button -->
+            <Button 
+              @click="createFakeAccount" 
+              :disabled="isLoading" 
+              class="w-full h-12 text-lg font-medium"
+              size="lg"
+            >
+              <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>