feat: Add initial admin password setup flow

src/app/login/page.tsx

@@ -1,14 +1,22 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 
 export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [isSetup, setIsSetup] = useState<boolean | null>(null);
   const router = useRouter();
 
+  useEffect(() => {
+    fetch("/api/auth/setup-status")
+      .then((res) => res.json())
+      .then((data) => setIsSetup(data.setupRequired))
+      .catch(() => setIsSetup(false)); // fallback
+  }, []);
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setError("");
@@ -37,9 +45,19 @@ export default function LoginPage() {
     }
   }
 
+  if (isSetup === null) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <div className="animate-pulse flex items-center justify-center">
+          <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex min-h-screen items-center justify-center p-4">
-      <div className="w-full max-w-sm">
+      <div className="w-full max-w-sm animate-fade-in">
         {/* Logo / Title area */}
         <div className="text-center mb-8">
           <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-4">
@@ -57,9 +75,13 @@ export default function LoginPage() {
               />
             </svg>
           </div>
-          <h1 className="text-2xl font-bold text-text-heading">Study App</h1>
+          <h1 className="text-2xl font-bold text-text-heading">
+            {isSetup ? "Welcome to Study App!" : "Study App"}
+          </h1>
           <p className="text-text-muted mt-1 text-sm">
-            Enter your password to continue
+            {isSetup
+              ? "Please set your admin password for the first time."
+              : "Enter your password to continue"}
           </p>
         </div>
 
@@ -78,7 +100,7 @@ export default function LoginPage() {
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                placeholder="Enter your password"
+                placeholder={isSetup ? "Create a new password" : "Enter your password"}
                 autoFocus
                 className="w-full px-3.5 py-2.5 rounded-lg border border-border bg-bg-surface-alt/50 text-text-heading placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200"
               />
@@ -129,8 +151,10 @@ export default function LoginPage() {
                       d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                     />
                   </svg>
-                  Signing in...
+                  {isSetup ? "Saving..." : "Signing in..."}
                 </span>
+              ) : isSetup ? (
+                "Save Password & Login"
               ) : (
                 "Sign In"
               )}