Added login design
This commit is contained in:
@@ -1,87 +1,97 @@
|
||||
<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 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>
|
||||
<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 v-if="success" class="mb-4 p-3 bg-green-500/10 text-green-600 rounded text-sm">
|
||||
Registration successful! Redirecting to login...
|
||||
</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>
|
||||
<form @submit.prevent="handleRegister" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="tenantId">Tenant ID</Label>
|
||||
<Input
|
||||
id="tenantId"
|
||||
v-model="tenantId"
|
||||
type="text"
|
||||
required
|
||||
placeholder="123"
|
||||
/>
|
||||
</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 class="space-y-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
required
|
||||
placeholder="user@example.com"
|
||||
/>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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="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="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 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user