From 5293f2f4c298bc33008cfec13e4b8e9d39d3d7c9 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 18 Sep 2025 20:51:16 +0200
Subject: [PATCH] Enhance LoginDemo.vue with loading overlay and updated
 account creation feedback

- Added a loading overlay to indicate account creation progress in demo mode.
- Removed the display of generated credentials and updated the success message to show the created username.
- Adjusted button text and added info text regarding automatic credential generation for improved user experience.

These changes improve the clarity and responsiveness of the demo account creation process.
---
 src/pages/LoginDemo.vue | 69 ++++++++++++++---------------------------
 1 file changed, 23 insertions(+), 46 deletions(-)

diff --git a/src/pages/LoginDemo.vue b/src/pages/LoginDemo.vue
index 14e574b..f90aaa7 100644
--- a/src/pages/LoginDemo.vue
+++ b/src/pages/LoginDemo.vue
@@ -42,7 +42,18 @@
           </div>
 
           <!-- Demo Mode Content -->
-          <div v-if="activeMode === 'demo'" class="space-y-4 sm:space-y-6">
+          <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>
@@ -52,41 +63,16 @@
               </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-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
-              <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
-              {{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
+              {{ '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 -->
@@ -164,7 +150,7 @@ import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
 import { toast } from 'vue-sonner'
 
 const router = useRouter()
-const { isLoading, error, generatedCredentials, generateNewCredentials } = useDemoAccountGenerator()
+const { isLoading, error, generateNewCredentials } = useDemoAccountGenerator()
 const successMessage = ref('')
 const activeMode = ref<'demo' | 'login'>('demo')
 
@@ -178,16 +164,6 @@ const canLogin = computed(() => {
   return loginForm.value.username.trim() && loginForm.value.password.trim()
 })
 
-// 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 {
@@ -206,13 +182,14 @@ async function createFakeAccount() {
       password_repeat: credentials.password
     })
 
-    successMessage.value = 'Account created successfully! Logging you in...'
-    toast.success('Demo account created and logged in!')
+    // 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('/')
-    }, 1500)
+    }, 2000)
 
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to create demo account'