web-app/src/components/demo/DemoAccountCreator.vue

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