139 lines
3.8 KiB
Vue
139 lines
3.8 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-background flex items-center justify-center">
|
|
<div class="w-full max-w-md p-8 border rounded-lg bg-card">
|
|
<h1 class="text-3xl font-bold mb-6 text-center">Register</h1>
|
|
|
|
<div v-if="error" class="mb-4 p-3 bg-destructive/10 text-destructive rounded">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<div v-if="success" class="mb-4 p-3 bg-green-500/10 text-green-600 rounded">
|
|
Registration successful! Redirecting to login...
|
|
</div>
|
|
|
|
<form @submit.prevent="handleRegister" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Tenant ID</label>
|
|
<input
|
|
v-model="tenantId"
|
|
type="text"
|
|
required
|
|
class="w-full px-3 py-2 border rounded-md bg-background"
|
|
placeholder="123"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Email</label>
|
|
<input
|
|
v-model="email"
|
|
type="email"
|
|
required
|
|
class="w-full px-3 py-2 border rounded-md bg-background"
|
|
placeholder="user@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Password</label>
|
|
<input
|
|
v-model="password"
|
|
type="password"
|
|
required
|
|
minlength="6"
|
|
class="w-full px-3 py-2 border rounded-md bg-background"
|
|
placeholder="••••••••"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">First Name (Optional)</label>
|
|
<input
|
|
v-model="firstName"
|
|
type="text"
|
|
class="w-full px-3 py-2 border rounded-md bg-background"
|
|
placeholder="John"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Last Name (Optional)</label>
|
|
<input
|
|
v-model="lastName"
|
|
type="text"
|
|
class="w-full px-3 py-2 border rounded-md bg-background"
|
|
placeholder="Doe"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="loading"
|
|
class="w-full px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
{{ loading ? 'Registering...' : 'Register' }}
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-4 text-center text-sm text-muted-foreground">
|
|
Already have an account?
|
|
<NuxtLink to="/login" class="text-primary hover:underline">
|
|
Login
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const config = useRuntimeConfig()
|
|
const router = useRouter()
|
|
|
|
const tenantId = ref('123')
|
|
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 response = await fetch(`${config.public.apiBaseUrl}/api/auth/register`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'x-tenant-id': tenantId.value,
|
|
},
|
|
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>
|