padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance LoginDemo.vue with loading overlay and updated account creation feedback

Browse source 
- 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.
This commit is contained in:
padreug 2025-09-18 20:51:16 +02:00
parent 1511505d0f
commit 5293f2f4c2
1 changed files with 23 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/pages/LoginDemo.vue
View file

@ -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'