Files
neo/frontend/pages/register.vue

146 lines
4.1 KiB
Vue

<template>
<div class="min-h-screen bg-background flex items-center justify-center p-4">
<Card class="w-full max-w-md">
<CardHeader>
<CardTitle class="text-2xl text-center">Create Account</CardTitle>
<CardDescription class="text-center">
Sign up to get started with Neo Platform
</CardDescription>
</CardHeader>
<CardContent>
<div v-if="error" class="mb-4 p-3 bg-destructive/10 text-destructive rounded text-sm">
{{ error }}
</div>
<div v-if="success" class="mb-4 p-3 bg-green-500/10 text-green-600 rounded text-sm">
Registration successful! Redirecting to login...
</div>
<form @submit.prevent="handleRegister" class="space-y-4">
<div class="space-y-2">
<Label for="email">Email</Label>
<Input
id="email"
v-model="email"
type="email"
required
placeholder="user@example.com"
/>
</div>
<div class="space-y-2">
<Label for="password">Password</Label>
<Input
id="password"
v-model="password"
type="password"
required
minlength="6"
placeholder="••••••••"
/>
<p class="text-xs text-muted-foreground">Must be at least 6 characters</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<Label for="firstName">First Name</Label>
<Input id="firstName" v-model="firstName" type="text" placeholder="John" />
</div>
<div class="space-y-2">
<Label for="lastName">Last Name</Label>
<Input id="lastName" v-model="lastName" type="text" placeholder="Doe" />
</div>
</div>
<Button type="submit" :disabled="loading" class="w-full">
{{ loading ? 'Creating account...' : 'Create Account' }}
</Button>
</form>
</CardContent>
<CardFooter class="flex justify-center">
<p class="text-sm text-muted-foreground">
Already have an account?
<NuxtLink to="/login" class="text-primary hover:underline font-medium">Login</NuxtLink>
</p>
</CardFooter>
</Card>
</div>
</template>
<script setup lang="ts">
// Skip auth middleware for register page
definePageMeta({
auth: false
})
const config = useRuntimeConfig()
const router = useRouter()
// Extract subdomain from hostname
const getSubdomain = () => {
if (!import.meta.client) return null
const hostname = window.location.hostname
const parts = hostname.split('.')
if (hostname === 'localhost' || hostname === '127.0.0.1') {
return null
}
if (parts.length > 1 && parts[0] !== 'www') {
return parts[0]
}
return null
}
const subdomain = ref(getSubdomain())
const email = ref('')
const password = ref('')
const firstName = ref('')
const lastName = ref('')
const loading = ref(false)
const error = ref('')
const success = ref(false)
const handleRegister = async () => {
try {
loading.value = true
error.value = ''
success.value = false
const headers: Record<string, string> = {
'Content-Type': 'application/json',
}
if (subdomain.value) {
headers['x-tenant-id'] = subdomain.value
}
const response = await fetch(`${config.public.apiBaseUrl}/api/auth/register`, {
method: 'POST',
headers,
body: JSON.stringify({
email: email.value,
password: password.value,
firstName: firstName.value || undefined,
lastName: lastName.value || undefined,
}),
})
if (!response.ok) {
const data = await response.json()
throw new Error(data.message || 'Registration failed')
}
success.value = true
// Redirect to login after 2 seconds
setTimeout(() => {
router.push('/login')
}, 2000)
} catch (e: any) {
error.value = e.message || 'Registration failed'
} finally {
loading.value = false
}
}
</script>