Compare commits
No commits in common. "demo-login" and "main" have entirely different histories.
demo-login
...
main
2 changed files with 1 additions and 232 deletions
|
|
@ -60,7 +60,7 @@ export async function createAppInstance() {
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
name: 'login',
|
name: 'login',
|
||||||
component: () => import('./pages/LoginDemo.vue'),
|
component: () => import('./pages/Login.vue'),
|
||||||
meta: { requiresAuth: false }
|
meta: { requiresAuth: false }
|
||||||
},
|
},
|
||||||
// Pre-register module routes
|
// Pre-register module routes
|
||||||
|
|
|
||||||
|
|
@ -1,231 +0,0 @@
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="min-h-screen flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
|
|
||||||
<div class="flex flex-col items-center justify-center space-y-3 sm:space-y-6 max-w-4xl mx-auto w-full mt-8 sm:mt-0">
|
|
||||||
<!-- Welcome Section -->
|
|
||||||
<div class="text-center space-y-2 sm:space-y-4">
|
|
||||||
<div class="flex justify-center">
|
|
||||||
<img src="@/assets/logo.png" alt="Logo" class="h-34 w-34 sm:h-42 sm:w-42 lg:h-50 lg:w-50" />
|
|
||||||
</div>
|
|
||||||
<div class="space-y-1 sm:space-y-3">
|
|
||||||
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
|
|
||||||
<p class="text-sm sm:text-base md:text-xl text-muted-foreground max-w-md mx-auto px-4">
|
|
||||||
Your secure platform for events and community management
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Demo Account Creation Card -->
|
|
||||||
<Card class="w-full max-w-md">
|
|
||||||
<CardContent class="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-6">
|
|
||||||
<!-- Demo Badge -->
|
|
||||||
<div class="flex justify-center">
|
|
||||||
<div
|
|
||||||
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
|
|
||||||
<div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
|
|
||||||
<span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
|
|
||||||
</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-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>
|
|
||||||
<p class="text-muted-foreground text-xs sm: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>
|
|
||||||
|
|
||||||
<!-- 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">
|
|
||||||
{{ '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 -->
|
|
||||||
<div v-else class="space-y-4 sm:space-y-6">
|
|
||||||
<!-- Login Info -->
|
|
||||||
<div class="text-center space-y-2 sm:space-y-3">
|
|
||||||
<h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Sign In</h2>
|
|
||||||
<p class="text-muted-foreground text-xs sm: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-10 sm:h-12 text-base sm: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">
|
|
||||||
{{ error }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Success Message -->
|
|
||||||
<div v-if="successMessage"
|
|
||||||
class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
|
|
||||||
{{ successMessage }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Demo Notice -->
|
|
||||||
<div class="text-center space-y-2">
|
|
||||||
<p class="text-xs text-muted-foreground">
|
|
||||||
This is a demo environment. All transactions use fake satoshis for testing purposes.
|
|
||||||
</p>
|
|
||||||
<div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
|
|
||||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
|
||||||
clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
<span class="font-medium">Demo data may be erased at any time</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { Card, CardContent } 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/useAuthService'
|
|
||||||
import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
|
|
||||||
import { toast } from 'vue-sonner'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const { isLoading, error, 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()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 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
|
|
||||||
})
|
|
||||||
|
|
||||||
// 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('/')
|
|
||||||
}, 2000)
|
|
||||||
|
|
||||||
} 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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue