Vula Builder
69 lines
3.5 KiB
TypeScript
69 lines
3.5 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { useCustomerAuth } from '@/hooks/useCustomerAuth'
|
|
|
|
export default function AccountRegisterPage() {
|
|
const { register, loading, error } = useCustomerAuth()
|
|
const router = useRouter()
|
|
const [form, setForm] = useState({ first_name: '', last_name: '', email: '', password: '' })
|
|
|
|
const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
|
setForm(p => ({ ...p, [k]: e.target.value }))
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
try {
|
|
await register(form)
|
|
router.push('/account/orders')
|
|
} catch {}
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen flex items-center justify-center px-4 py-20 bg-background">
|
|
<div className="w-full max-w-md">
|
|
<h1 className="text-2xl font-bold mb-2 text-foreground">Create account</h1>
|
|
<p className="text-muted-foreground mb-8">Track your orders and save your details</p>
|
|
{error && <div className="mb-4 p-3 rounded-lg bg-destructive/10 text-destructive text-sm">{error}</div>}
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1.5 text-foreground">First name</label>
|
|
<input type="text" required value={form.first_name} onChange={set('first_name')}
|
|
className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
|
|
placeholder="Jane" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1.5 text-foreground">Last name</label>
|
|
<input type="text" required value={form.last_name} onChange={set('last_name')}
|
|
className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
|
|
placeholder="Doe" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1.5 text-foreground">Email</label>
|
|
<input type="email" required value={form.email} onChange={set('email')}
|
|
className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
|
|
placeholder="you@example.com" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1.5 text-foreground">Password</label>
|
|
<input type="password" required minLength={6} value={form.password} onChange={set('password')}
|
|
className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
|
|
placeholder="Min. 6 characters" />
|
|
</div>
|
|
<button type="submit" disabled={loading}
|
|
className="w-full bg-primary text-primary-foreground py-2.5 rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50 text-sm">
|
|
{loading ? 'Creating account...' : 'Create account'}
|
|
</button>
|
|
</form>
|
|
<p className="mt-6 text-center text-sm text-muted-foreground">
|
|
Already have an account?{' '}
|
|
<Link href="/account/login" className="text-primary hover:underline font-medium">Sign in</Link>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|