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:
179
components/LoginForm.tsx
Normal file
179
components/LoginForm.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { signIn } from 'next-auth/react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { validateEmail, validatePassword } from '@/lib/validation'
|
||||
import { useToast } from './ToastContainer'
|
||||
|
||||
interface LoginFormProps {
|
||||
callbackUrl?: string
|
||||
}
|
||||
|
||||
export default function LoginForm({ callbackUrl = '/' }: LoginFormProps) {
|
||||
const router = useRouter()
|
||||
const { showToast } = useToast()
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [errors, setErrors] = useState<{ email?: string; password?: string }>({})
|
||||
const [touched, setTouched] = useState<{ email: boolean; password: boolean }>({
|
||||
email: false,
|
||||
password: false,
|
||||
})
|
||||
|
||||
// Inline validation when fields change
|
||||
useEffect(() => {
|
||||
if (touched.email) {
|
||||
const result = validateEmail(email)
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
email: result.isValid ? undefined : result.error,
|
||||
}))
|
||||
}
|
||||
}, [email, touched.email])
|
||||
|
||||
useEffect(() => {
|
||||
if (touched.password) {
|
||||
const result = validatePassword(password)
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
password: result.isValid ? undefined : result.error,
|
||||
}))
|
||||
}
|
||||
}, [password, touched.password])
|
||||
|
||||
const handleEmailBlur = () => {
|
||||
setTouched((prev) => ({ ...prev, email: true }))
|
||||
const result = validateEmail(email)
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
email: result.isValid ? undefined : result.error,
|
||||
}))
|
||||
}
|
||||
|
||||
const handlePasswordBlur = () => {
|
||||
setTouched((prev) => ({ ...prev, password: true }))
|
||||
const result = validatePassword(password)
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
password: result.isValid ? undefined : result.error,
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
// Validate all fields before submission
|
||||
const emailResult = validateEmail(email)
|
||||
const passwordResult = validatePassword(password)
|
||||
|
||||
const newErrors: { email?: string; password?: string } = {}
|
||||
if (!emailResult.isValid) {
|
||||
newErrors.email = emailResult.error
|
||||
}
|
||||
if (!passwordResult.isValid) {
|
||||
newErrors.password = passwordResult.error
|
||||
}
|
||||
|
||||
if (Object.keys(newErrors).length > 0) {
|
||||
setErrors(newErrors)
|
||||
setTouched({ email: true, password: true })
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
setErrors({})
|
||||
|
||||
try {
|
||||
const result = await signIn('credentials', {
|
||||
email: email.trim(),
|
||||
password,
|
||||
redirect: false,
|
||||
})
|
||||
|
||||
if (result?.error) {
|
||||
showToast('Invalid email or password', 'error')
|
||||
setErrors({ email: 'Invalid credentials', password: 'Invalid credentials' })
|
||||
} else if (result?.ok) {
|
||||
showToast('Login successful', 'success')
|
||||
router.push(callbackUrl)
|
||||
router.refresh()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Login error:', err)
|
||||
showToast('An error occurred. Please try again.', 'error')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
onBlur={handleEmailBlur}
|
||||
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
|
||||
errors.email && touched.email
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:ring-blue-500'
|
||||
}`}
|
||||
placeholder="Enter your email"
|
||||
disabled={isSubmitting}
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
aria-invalid={errors.email && touched.email ? 'true' : 'false'}
|
||||
aria-describedby={errors.email && touched.email ? 'email-error' : undefined}
|
||||
/>
|
||||
{errors.email && touched.email && (
|
||||
<p id="email-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
|
||||
{errors.email}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Password *
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onBlur={handlePasswordBlur}
|
||||
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
|
||||
errors.password && touched.password
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:ring-blue-500'
|
||||
}`}
|
||||
placeholder="Enter your password"
|
||||
disabled={isSubmitting}
|
||||
autoComplete="current-password"
|
||||
aria-invalid={errors.password && touched.password ? 'true' : 'false'}
|
||||
aria-describedby={errors.password && touched.password ? 'password-error' : undefined}
|
||||
/>
|
||||
{errors.password && touched.password && (
|
||||
<p id="password-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
|
||||
{errors.password}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full px-4 sm:px-5 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50 tap-target font-medium text-sm sm:text-base"
|
||||
>
|
||||
{isSubmitting ? 'Logging in...' : 'Log In'}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user