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.
This commit is contained in:
parent
93ffb8bf32
commit
0c13a7678f
1 changed files with 165 additions and 54 deletions
|
|
@ -25,62 +25,132 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Demo Info -->
|
<!-- Mode Toggle -->
|
||||||
<div class="text-center space-y-3">
|
<div class="flex justify-center">
|
||||||
<h2 class="text-2xl font-semibold">Create Demo Account</h2>
|
<div class="inline-flex rounded-lg bg-muted p-1">
|
||||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
<Button
|
||||||
Get instant access with a pre-funded demo account containing
|
variant="ghost"
|
||||||
<span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
|
size="sm"
|
||||||
</p>
|
:class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
|
||||||
</div>
|
@click="activeMode = 'demo'"
|
||||||
|
>
|
||||||
<!-- Generated Credentials Display -->
|
Demo Account
|
||||||
<div v-if="generatedCredentials" class="space-y-4 p-4 bg-muted/50 rounded-lg border">
|
</Button>
|
||||||
<div class="space-y-3">
|
<Button
|
||||||
<div class="space-y-2">
|
variant="ghost"
|
||||||
<Label class="text-sm font-medium">Username</Label>
|
size="sm"
|
||||||
<div class="flex items-center gap-2">
|
:class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
|
||||||
<Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
|
@click="activeMode = 'login'"
|
||||||
<Button
|
>
|
||||||
variant="outline"
|
Sign In
|
||||||
size="sm"
|
</Button>
|
||||||
@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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Create Account Button -->
|
<!-- Demo Mode Content -->
|
||||||
<Button
|
<div v-if="activeMode === 'demo'" class="space-y-6">
|
||||||
@click="createFakeAccount"
|
<!-- Demo Info -->
|
||||||
:disabled="isLoading"
|
<div class="text-center space-y-3">
|
||||||
class="w-full h-12 text-lg font-medium"
|
<h2 class="text-2xl font-semibold">Create Demo Account</h2>
|
||||||
size="lg"
|
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||||
>
|
Get instant access with a pre-funded demo account containing
|
||||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
<span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
|
||||||
{{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
|
</p>
|
||||||
</Button>
|
</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 -->
|
<!-- Error Display -->
|
||||||
<p v-if="error" class="text-sm text-destructive text-center">
|
<p v-if="error" class="text-sm text-destructive text-center">
|
||||||
|
|
@ -111,7 +181,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { Card, CardContent } from '@/components/ui/card'
|
import { Card, CardContent } from '@/components/ui/card'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
@ -124,6 +194,17 @@ import { toast } from 'vue-sonner'
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const { isLoading, error, generatedCredentials, generateNewCredentials } = useDemoAccountGenerator()
|
const { isLoading, error, generatedCredentials, generateNewCredentials } = useDemoAccountGenerator()
|
||||||
const successMessage = ref('')
|
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
|
// Copy text to clipboard
|
||||||
async function copyToClipboard(text: string) {
|
async function copyToClipboard(text: string) {
|
||||||
|
|
@ -168,4 +249,34 @@ async function createFakeAccount() {
|
||||||
isLoading.value = false
|
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>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue