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