Added login design

This commit is contained in:
Francisco Gaona
2025-11-25 18:58:49 +01:00
parent 484af68571
commit 150edfaf41
21 changed files with 9715 additions and 187 deletions

View File

@@ -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>