feat: implement authentication UI components
- Add LoginForm component with email/password validation - Add RegisterForm component with password confirmation - Create login page at /auth/login - Create register page at /auth/register - Create authentication error page at /auth/error - Add loading states and error handling - Implement inline validation with user feedback - Follow existing component patterns from ListForm Implements task 6 from user-auth-and-sharing spec Requirements: 1.1, 2.1
This commit is contained in:
53
app/auth/register/page.tsx
Normal file
53
app/auth/register/page.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import Link from 'next/link'
|
||||
import RegisterForm from '@/components/RegisterForm'
|
||||
import { Suspense } from 'react'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Register - Ultimate Lists',
|
||||
description: 'Create your Ultimate Lists account',
|
||||
}
|
||||
|
||||
function RegisterContent() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-12">
|
||||
<div className="max-w-md w-full space-y-8">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-2">
|
||||
Create Account
|
||||
</h1>
|
||||
<p className="text-sm sm:text-base text-gray-600">
|
||||
Sign up to start organizing your tasks
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-md p-6 sm:p-8">
|
||||
<RegisterForm />
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-gray-600">
|
||||
Already have an account?{' '}
|
||||
<Link
|
||||
href="/auth/login"
|
||||
className="font-medium text-blue-600 hover:text-blue-500 transition-colors"
|
||||
>
|
||||
Log in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function RegisterPage() {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-gray-600">Loading...</div>
|
||||
</div>
|
||||
}>
|
||||
<RegisterContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user