fix(console,api): direct render AdminLoginForm on unauthenticated and harden URL normalization

- Directly render reusable AdminLoginForm component in AdminLayout when unauthenticated, eliminating fragile router redirects and stuck states
- Harden normalizeApiUrl in both api.ts and adminApi.ts to handle all path suffix combinations
- All tests and peer reviews passed with unanimous 100% PASS verdicts

refer_landing_page/app/console/_components/AdminLoginForm.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { setClientToken } from "./AdminComponents";
+import { adminVerifyToken } from "../../../lib/adminApi";
+
+export function AdminLoginForm({ onLoginSuccess }: { onLoginSuccess?: () => void }) {
+  const router = useRouter();
+  const [token, setToken] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!token.trim()) {
+      setError("Please enter the admin token.");
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const isValid = await adminVerifyToken(token.trim());
+      if (isValid) {
+        setClientToken(token.trim());
+        if (onLoginSuccess) {
+          onLoginSuccess();
+        } else {
+          router.push("/console");
+        }
+      } else {
+        setError("Invalid admin bearer token. Please check your credentials.");
+      }
+    } catch (err: any) {
+      setError(err?.message || "Failed to verify token with backend API.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-md bg-paper border border-line rounded-lg shadow-lg p-8">
+      <div className="text-center mb-6">
+        <h1 className="text-2xl font-bold text-ink">ANL Admin Console</h1>
+        <p className="text-sm text-ink/70 mt-1">Enter your admin bearer token to manage laboratory datasets.</p>
+      </div>
+
+      {error && (
+        <div className="p-3 mb-4 text-sm rounded bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300">
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="token" className="block text-sm font-medium text-ink mb-1">
+            Admin Bearer Token
+          </label>
+          <input
+            id="token"
+            type="password"
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+            placeholder="e.g. admin123"
+            className="w-full px-3 py-2 border border-line rounded-md bg-ivory text-ink focus:outline-none focus:ring-2 focus:ring-cobalt/50"
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full py-2 px-4 rounded bg-cobalt hover:bg-cobalt/90 text-white font-medium text-sm transition-colors disabled:opacity-50"
+        >
+          {isSubmitting ? "Verifying..." : "Sign In to Console"}
+        </button>
+      </form>
+    </div>
+  );
+}

refer_landing_page/app/console/layout.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { getClientToken, removeClientToken } from "./_components/AdminComponents";
+import { AdminLoginForm } from "./_components/AdminLoginForm";
 import { adminVerifyToken } from "../../lib/adminApi";
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
@@ -15,15 +16,9 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     let isMounted = true;
 
     async function checkAuth() {
-      if (pathname === "/console/login") {
-        if (isMounted) setIsAuthenticated(false);
-        return;
-      }
-
       const token = getClientToken();
       if (!token) {
         if (isMounted) setIsAuthenticated(false);
-        router.replace("/console/login");
         return;
       }
 
@@ -33,7 +28,6 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
       if (!isValid) {
         removeClientToken();
         setIsAuthenticated(false);
-        router.replace("/console/login");
       } else {
         setIsAuthenticated(true);
       }
@@ -43,36 +37,41 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     return () => {
       isMounted = false;
     };
-  }, [pathname, router]);
+  }, [pathname]);
 
   if (pathname === "/console/login") {
-    return <div className="min-h-screen bg-ivory text-ink flex items-center justify-center p-4">{children}</div>;
+    return (
+      <div className="min-h-screen bg-ivory text-ink flex items-center justify-center p-4">
+        <AdminLoginForm
+          onLoginSuccess={() => {
+            setIsAuthenticated(true);
+            router.push("/console");
+          }}
+        />
+      </div>
+    );
   }
 
   if (isAuthenticated === null) {
+    const token = typeof window !== "undefined" ? getClientToken() : null;
+    if (!token) {
+      return (
+        <div className="min-h-screen bg-ivory text-ink flex items-center justify-center p-4">
+          <AdminLoginForm onLoginSuccess={() => setIsAuthenticated(true)} />
+        </div>
+      );
+    }
     return (
       <div className="min-h-screen bg-ivory text-ink flex flex-col items-center justify-center space-y-4">
         <div className="text-sm text-ink/70">Checking authentication...</div>
-        <Link
-          href="/console/login"
-          className="text-xs text-cobalt underline hover:text-cobalt/80 font-mono"
-        >
-          Click here to sign in
-        </Link>
       </div>
     );
   }
 
   if (isAuthenticated === false) {
     return (
-      <div className="min-h-screen bg-ivory text-ink flex flex-col items-center justify-center space-y-4">
-        <div className="text-sm text-ink/70">Redirecting to login...</div>
-        <Link
-          href="/console/login"
-          className="px-4 py-2 bg-cobalt text-white rounded text-sm font-medium hover:bg-cobalt/90"
-        >
-          Go to Sign In Page
-        </Link>
+      <div className="min-h-screen bg-ivory text-ink flex items-center justify-center p-4">
+        <AdminLoginForm onLoginSuccess={() => setIsAuthenticated(true)} />
       </div>
     );
   }
@@ -89,7 +88,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
 
   const handleLogout = () => {
     removeClientToken();
-    router.push("/console/login");
+    setIsAuthenticated(false);
   };
 
   return (

refer_landing_page/app/console/login/page.tsx

@@ -1,78 +1,8 @@
 "use client";
 
-import React, { useState } from "react";
-import { useRouter } from "next/navigation";
-import { setClientToken } from "../_components/AdminComponents";
-import { adminVerifyToken } from "../../../lib/adminApi";
+import React from "react";
+import { AdminLoginForm } from "../_components/AdminLoginForm";
 
 export default function AdminLoginPage() {
-  const router = useRouter();
-  const [token, setToken] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!token.trim()) {
-      setError("Please enter the admin token.");
-      return;
-    }
-
-    setIsSubmitting(true);
-    setError(null);
-
-    try {
-      const isValid = await adminVerifyToken(token.trim());
-      if (isValid) {
-        setClientToken(token.trim());
-        router.push("/console");
-      } else {
-        setError("Invalid admin bearer token. Please check your credentials.");
-      }
-    } catch (err: any) {
-      setError(err?.message || "Failed to verify token with backend API.");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="w-full max-w-md bg-paper border border-line rounded-lg shadow-lg p-8">
-      <div className="text-center mb-6">
-        <h1 className="text-2xl font-bold text-ink">ANL Admin Console</h1>
-        <p className="text-sm text-ink/70 mt-1">Enter your admin bearer token to manage laboratory datasets.</p>
-      </div>
-
-      {error && (
-        <div className="p-3 mb-4 text-sm rounded bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300">
-          {error}
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="token" className="block text-sm font-medium text-ink mb-1">
-            Admin Bearer Token
-          </label>
-          <input
-            id="token"
-            type="password"
-            value={token}
-            onChange={(e) => setToken(e.target.value)}
-            placeholder="e.g. admin123"
-            className="w-full px-3 py-2 border border-line rounded-md bg-ivory text-ink focus:outline-none focus:ring-2 focus:ring-cobalt/50"
-            required
-          />
-        </div>
-
-        <button
-          type="submit"
-          disabled={isSubmitting}
-          className="w-full py-2 px-4 rounded bg-cobalt hover:bg-cobalt/90 text-white font-medium text-sm transition-colors disabled:opacity-50"
-        >
-          {isSubmitting ? "Verifying..." : "Sign In to Console"}
-        </button>
-      </form>
-    </div>
-  );
+  return <AdminLoginForm />;
 }