feat: Add demo account creation functionality
- Introduce a new DemoAccountCreator component for generating test accounts with auto-generated credentials. - Implement useDemoAccountGenerator composable to handle credential generation and state management. - Update routing to replace the existing login page with the new LoginDemo page for demo account access. - Add unique-names-generator package to facilitate username generation.
This commit is contained in:
parent
bc73871c82
commit
320e322db2
6 changed files with 365 additions and 2 deletions
10
package-lock.json
generated
10
package-lock.json
generated
|
|
@ -29,6 +29,7 @@
|
|||
"tailwind-merge": "^2.6.0",
|
||||
"tailwind-variants": "^0.3.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"unique-names-generator": "^4.7.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-i18n": "^9.14.2",
|
||||
"vue-router": "^4.5.0",
|
||||
|
|
@ -13819,6 +13820,15 @@
|
|||
"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/unique-names-generator": {
|
||||
"version": "4.7.1",
|
||||
"resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
|
||||
"integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/unique-slug": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-3.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
"tailwind-merge": "^2.6.0",
|
||||
"tailwind-variants": "^0.3.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"unique-names-generator": "^4.7.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-i18n": "^9.14.2",
|
||||
"vue-router": "^4.5.0",
|
||||
|
|
|
|||
139
src/components/demo/DemoAccountCreator.vue
Normal file
139
src/components/demo/DemoAccountCreator.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<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>
|
||||
65
src/composables/useDemoAccountGenerator.ts
Normal file
65
src/composables/useDemoAccountGenerator.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { ref } from 'vue'
|
||||
import { uniqueNamesGenerator, names, colors, animals } from 'unique-names-generator'
|
||||
|
||||
export interface GeneratedCredentials {
|
||||
username: string
|
||||
password: string
|
||||
email: string
|
||||
}
|
||||
|
||||
export function useDemoAccountGenerator() {
|
||||
const isLoading = ref(false)
|
||||
const error = ref('')
|
||||
const generatedCredentials = ref<GeneratedCredentials | null>(null)
|
||||
|
||||
// Generate a random password
|
||||
function generateRandomPassword(): string {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*'
|
||||
let password = ''
|
||||
for (let i = 0; i < 12; i++) {
|
||||
password += chars.charAt(Math.floor(Math.random() * chars.length))
|
||||
}
|
||||
return password
|
||||
}
|
||||
|
||||
// Generate unique username and random password
|
||||
function generateCredentials(): GeneratedCredentials {
|
||||
// Use only 2 dictionaries to keep username shorter
|
||||
const username = uniqueNamesGenerator({
|
||||
dictionaries: [names, colors],
|
||||
separator: '_',
|
||||
length: 2,
|
||||
style: 'lowerCase'
|
||||
})
|
||||
|
||||
const password = generateRandomPassword()
|
||||
const email = `${username}@demo.local`
|
||||
return { username, password, email }
|
||||
}
|
||||
|
||||
// Generate new credentials
|
||||
function generateNewCredentials(): GeneratedCredentials {
|
||||
const credentials = generateCredentials()
|
||||
generatedCredentials.value = credentials
|
||||
return credentials
|
||||
}
|
||||
|
||||
// Reset state
|
||||
function reset() {
|
||||
isLoading.value = false
|
||||
error.value = ''
|
||||
generatedCredentials.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
isLoading,
|
||||
error,
|
||||
generatedCredentials,
|
||||
|
||||
// Actions
|
||||
generateCredentials,
|
||||
generateNewCredentials,
|
||||
reset
|
||||
}
|
||||
}
|
||||
148
src/pages/LoginDemo.vue
Normal file
148
src/pages/LoginDemo.vue
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8">
|
||||
<div class="flex flex-col items-center justify-center space-y-8 max-w-4xl mx-auto w-full">
|
||||
<!-- Welcome Section -->
|
||||
<div class="text-center space-y-4">
|
||||
<div class="flex justify-center">
|
||||
<img src="@/assets/logo.png" alt="Logo" class="h-36 w-36 sm:h-48 sm:w-48 md:h-60 md:w-60" />
|
||||
</div>
|
||||
<h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
|
||||
<p class="text-xl text-muted-foreground max-w-md">
|
||||
Your secure platform for events and community management
|
||||
</p>
|
||||
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 max-w-md mx-auto">
|
||||
<p class="text-sm text-yellow-800">
|
||||
<strong>Demo Mode:</strong> Click the button below to create a fake account for testing purposes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo Account Creation Card -->
|
||||
<Card class="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-center">Demo Account Creation</CardTitle>
|
||||
<CardDescription class="text-center">
|
||||
Create a fake account with auto-generated credentials for testing
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<!-- Generated Credentials Display -->
|
||||
<div v-if="generatedCredentials" class="space-y-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium text-gray-700">Generated 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">Generated 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 class="text-xs text-gray-500 text-center">
|
||||
These credentials will be used to automatically log you in
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Fake Account Button -->
|
||||
<Button
|
||||
@click="createFakeAccount"
|
||||
:disabled="isLoading"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
||||
{{ isLoading ? 'Creating Account...' : 'Create Fake 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>
|
||||
</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>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { auth } from '@/composables/useAuth'
|
||||
import Home from '@/pages/Home.vue'
|
||||
import Login from '@/pages/Login.vue'
|
||||
import LoginDemo from '@/pages/LoginDemo.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
|
|
@ -17,7 +17,7 @@ const router = createRouter({
|
|||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: Login,
|
||||
component: LoginDemo,
|
||||
meta: {
|
||||
requiresAuth: false
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue