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

app/auth/error/page.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import Link from 'next/link'
+import { Suspense } from 'react'
+
+function ErrorContent() {
+  const searchParams = useSearchParams()
+  const error = searchParams.get('error')
+
+  const getErrorMessage = (errorCode: string | null) => {
+    switch (errorCode) {
+      case 'Configuration':
+        return 'There is a problem with the server configuration.'
+      case 'AccessDenied':
+        return 'You do not have permission to sign in.'
+      case 'Verification':
+        return 'The verification token has expired or has already been used.'
+      case 'OAuthSignin':
+        return 'Error in constructing an authorization URL.'
+      case 'OAuthCallback':
+        return 'Error in handling the response from an OAuth provider.'
+      case 'OAuthCreateAccount':
+        return 'Could not create OAuth provider user in the database.'
+      case 'EmailCreateAccount':
+        return 'Could not create email provider user in the database.'
+      case 'Callback':
+        return 'Error in the OAuth callback handler route.'
+      case 'OAuthAccountNotLinked':
+        return 'Email on the account is already linked, but not with this OAuth account.'
+      case 'EmailSignin':
+        return 'Sending the email with the verification token failed.'
+      case 'CredentialsSignin':
+        return 'Invalid email or password. Please check your credentials and try again.'
+      case 'SessionRequired':
+        return 'Please sign in to access this page.'
+      default:
+        return 'An authentication error occurred. Please try again.'
+    }
+  }
+
+  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">
+          <div className="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-red-100 mb-4">
+            <svg
+              className="h-8 w-8 text-red-600"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              />
+            </svg>
+          </div>
+          <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-2">
+            Authentication Error
+          </h1>
+          <p className="text-sm sm:text-base text-gray-600 mb-8">
+            {getErrorMessage(error)}
+          </p>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-md p-6 sm:p-8">
+          <div className="space-y-4">
+            <Link
+              href="/auth/login"
+              className="block w-full px-4 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors text-center font-medium text-sm sm:text-base"
+            >
+              Try Logging In Again
+            </Link>
+            <Link
+              href="/auth/register"
+              className="block w-full px-4 py-3 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-700 rounded-lg transition-colors text-center font-medium text-sm sm:text-base"
+            >
+              Create New Account
+            </Link>
+          </div>
+
+          {error && (
+            <div className="mt-6 p-4 bg-gray-50 rounded-lg">
+              <p className="text-xs text-gray-500">
+                Error code: <code className="font-mono">{error}</code>
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function AuthErrorPage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-gray-600">Loading...</div>
+      </div>
+    }>
+      <ErrorContent />
+    </Suspense>
+  )
+}

app/auth/login/page.tsx

@@ -0,0 +1,53 @@
+import Link from 'next/link'
+import LoginForm from '@/components/LoginForm'
+import { Suspense } from 'react'
+
+export const metadata = {
+  title: 'Login - Ultimate Lists',
+  description: 'Log in to your Ultimate Lists account',
+}
+
+function LoginContent() {
+  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">
+            Welcome Back
+          </h1>
+          <p className="text-sm sm:text-base text-gray-600">
+            Log in to access your lists
+          </p>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-md p-6 sm:p-8">
+          <LoginForm />
+
+          <div className="mt-6 text-center">
+            <p className="text-sm text-gray-600">
+              Don't have an account?{' '}
+              <Link
+                href="/auth/register"
+                className="font-medium text-blue-600 hover:text-blue-500 transition-colors"
+              >
+                Sign up
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function LoginPage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-gray-600">Loading...</div>
+      </div>
+    }>
+      <LoginContent />
+    </Suspense>
+  )
+}

app/auth/register/page.tsx

@@ -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>
+  )
+}

components/LoginForm.tsx

@@ -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>
+  )
+}

components/RegisterForm.tsx

@@ -0,0 +1,300 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { validateEmail, validatePassword, sanitizeString } from '@/lib/validation'
+import { registerUser } from '@/lib/auth-actions'
+import { useToast } from './ToastContainer'
+
+interface RegisterFormProps {
+  callbackUrl?: string
+}
+
+export default function RegisterForm({ callbackUrl = '/' }: RegisterFormProps) {
+  const router = useRouter()
+  const { showToast } = useToast()
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [errors, setErrors] = useState<{
+    name?: string
+    email?: string
+    password?: string
+    confirmPassword?: string
+  }>({})
+  const [touched, setTouched] = useState<{
+    name: boolean
+    email: boolean
+    password: boolean
+    confirmPassword: boolean
+  }>({
+    name: false,
+    email: false,
+    password: false,
+    confirmPassword: false,
+  })
+
+  // Inline validation when fields change
+  useEffect(() => {
+    if (touched.name) {
+      const sanitized = sanitizeString(name)
+      if (!sanitized) {
+        setErrors((prev) => ({ ...prev, name: 'Name is required' }))
+      } else if (sanitized.length > 100) {
+        setErrors((prev) => ({ ...prev, name: 'Name must be less than 100 characters' }))
+      } else {
+        setErrors((prev) => ({ ...prev, name: undefined }))
+      }
+    }
+  }, [name, touched.name])
+
+  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])
+
+  useEffect(() => {
+    if (touched.confirmPassword) {
+      if (!confirmPassword) {
+        setErrors((prev) => ({ ...prev, confirmPassword: 'Please confirm your password' }))
+      } else if (password !== confirmPassword) {
+        setErrors((prev) => ({ ...prev, confirmPassword: 'Passwords do not match' }))
+      } else {
+        setErrors((prev) => ({ ...prev, confirmPassword: undefined }))
+      }
+    }
+  }, [confirmPassword, password, touched.confirmPassword])
+
+  const handleNameBlur = () => {
+    setTouched((prev) => ({ ...prev, name: true }))
+  }
+
+  const handleEmailBlur = () => {
+    setTouched((prev) => ({ ...prev, email: true }))
+  }
+
+  const handlePasswordBlur = () => {
+    setTouched((prev) => ({ ...prev, password: true }))
+  }
+
+  const handleConfirmPasswordBlur = () => {
+    setTouched((prev) => ({ ...prev, confirmPassword: true }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    // Validate all fields before submission
+    const sanitizedName = sanitizeString(name)
+    const emailResult = validateEmail(email)
+    const passwordResult = validatePassword(password)
+
+    const newErrors: {
+      name?: string
+      email?: string
+      password?: string
+      confirmPassword?: string
+    } = {}
+
+    if (!sanitizedName) {
+      newErrors.name = 'Name is required'
+    } else if (sanitizedName.length > 100) {
+      newErrors.name = 'Name must be less than 100 characters'
+    }
+
+    if (!emailResult.isValid) {
+      newErrors.email = emailResult.error
+    }
+
+    if (!passwordResult.isValid) {
+      newErrors.password = passwordResult.error
+    }
+
+    if (!confirmPassword) {
+      newErrors.confirmPassword = 'Please confirm your password'
+    } else if (password !== confirmPassword) {
+      newErrors.confirmPassword = 'Passwords do not match'
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors)
+      setTouched({ name: true, email: true, password: true, confirmPassword: true })
+      return
+    }
+
+    setIsSubmitting(true)
+    setErrors({})
+
+    try {
+      const result = await registerUser(email.trim(), password, sanitizedName)
+
+      if (!result.success) {
+        if (result.error === 'Email already exists') {
+          setErrors({ email: 'This email is already registered' })
+          showToast('Email already exists', 'error')
+        } else {
+          showToast(result.error || 'Registration failed', 'error')
+        }
+      } else {
+        showToast('Registration successful! Logging you in...', 'success')
+        router.push(callbackUrl)
+        router.refresh()
+      }
+    } catch (err) {
+      console.error('Registration 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="name" className="block text-sm font-medium text-gray-700 mb-2">
+          Name *
+        </label>
+        <input
+          type="text"
+          id="name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onBlur={handleNameBlur}
+          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.name && touched.name
+              ? 'border-red-500 focus:ring-red-500'
+              : 'border-gray-300 focus:ring-blue-500'
+          }`}
+          placeholder="Enter your name"
+          disabled={isSubmitting}
+          autoComplete="name"
+          autoFocus
+          maxLength={100}
+          aria-invalid={errors.name && touched.name ? 'true' : 'false'}
+          aria-describedby={errors.name && touched.name ? 'name-error' : undefined}
+        />
+        {errors.name && touched.name && (
+          <p id="name-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
+            {errors.name}
+          </p>
+        )}
+      </div>
+
+      <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"
+          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="At least 8 characters"
+          disabled={isSubmitting}
+          autoComplete="new-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>
+        )}
+        {!errors.password && touched.password && (
+          <p className="mt-1.5 text-xs sm:text-sm text-gray-500">
+            Password must be at least 8 characters
+          </p>
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-2">
+          Confirm Password *
+        </label>
+        <input
+          type="password"
+          id="confirmPassword"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          onBlur={handleConfirmPasswordBlur}
+          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.confirmPassword && touched.confirmPassword
+              ? 'border-red-500 focus:ring-red-500'
+              : 'border-gray-300 focus:ring-blue-500'
+          }`}
+          placeholder="Re-enter your password"
+          disabled={isSubmitting}
+          autoComplete="new-password"
+          aria-invalid={errors.confirmPassword && touched.confirmPassword ? 'true' : 'false'}
+          aria-describedby={
+            errors.confirmPassword && touched.confirmPassword ? 'confirm-password-error' : undefined
+          }
+        />
+        {errors.confirmPassword && touched.confirmPassword && (
+          <p id="confirm-password-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
+            {errors.confirmPassword}
+          </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 ? 'Creating account...' : 'Create Account'}
+      </button>
+    </form>
+  )
+}