From b010762a0bdb5e1506f68ffafe50b2ecad91e4a5 Mon Sep 17 00:00:00 2001
From: Anais Saraiva <anais.saraiva@ihorizon.org>
Date: Thu, 24 Sep 2026 15:55:23 +0200
Subject: [PATCH] fixes admin autofill in fields

---
 frontend/src/components/AdminCenter.tsx  | 30 ++++++++++++++----------
 frontend/src/components/Login.tsx        |  2 +-
 frontend/src/components/RegisterPage.tsx |  8 ++++---
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/AdminCenter.tsx b/frontend/src/components/AdminCenter.tsx
index 4c89b7b..9d406c0 100644
--- a/frontend/src/components/AdminCenter.tsx
+++ b/frontend/src/components/AdminCenter.tsx
@@ -207,33 +207,39 @@ export function AdminCenter({ initialTab }: { initialTab?: string | null }) {
         </div>
         <div className="mx-auto w-full max-w-4xl px-4 pb-3">
           <div className="flex gap-1 overflow-x-auto rounded-full border border-stone-200/70 bg-stone-100/70 p-1 dark:border-zinc-800 dark:bg-zinc-900">
-            {TABS.map((t) => (
+            {TABS.map((tb) => (
               <button
-                key={t.id}
-                onClick={() => selectTab(t.id)}
+                key={tb.id}
+                onClick={() => selectTab(tb.id)}
                 className={cn(
                   "relative flex flex-1 items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition",
-                  tab === t.id
+                  tab === tb.id
                     ? "bg-white text-stone-900 shadow dark:bg-zinc-800 dark:text-zinc-100"
                     : "opacity-60 hover:opacity-100",
                 )}
               >
-                <t.icon size={15} />
-                {t.label}
-                {t.id === "access" && openAccessCount > 0 && (
+                <tb.icon size={15} />
+                {tb.label}
+                {tb.id === "access" && (
                   <span
                     role="status"
-                    aria-label={`${t.label}: ${openAccessCount}`}
-                    className="absolute -right-0.5 -top-0.5 z-10 grid min-h-4 min-w-4 place-items-center rounded-full bg-red-500 px-1 text-[10px] font-bold leading-4 text-white shadow"
+                    aria-label={`${tb.label}: ${openAccessCount}`}
+                    className={cn(
+                      "absolute -right-0.5 -top-0.5 z-10 grid min-h-4 min-w-4 place-items-center rounded-full px-1 text-[10px] font-bold leading-4 text-white shadow",
+                      openAccessCount > 0 ? "bg-red-500" : "bg-stone-400 dark:bg-zinc-600",
+                    )}
                   >
                     {openAccessCount > 99 ? "99+" : openAccessCount}
                   </span>
                 )}
-                {t.id === "reports" && openReportCount > 0 && (
+                {tb.id === "reports" && (
                   <span
                     role="status"
-                    aria-label={`${t.label}: ${openReportCount}`}
-                    className="absolute -right-0.5 -top-0.5 z-10 grid min-h-4 min-w-4 place-items-center rounded-full bg-red-500 px-1 text-[10px] font-bold leading-4 text-white shadow"
+                    aria-label={`${tb.label}: ${openReportCount}`}
+                    className={cn(
+                      "absolute -right-0.5 -top-0.5 z-10 grid min-h-4 min-w-4 place-items-center rounded-full px-1 text-[10px] font-bold leading-4 text-white shadow",
+                      openReportCount > 0 ? "bg-red-500" : "bg-stone-400 dark:bg-zinc-600",
+                    )}
                   >
                     {openReportCount > 99 ? "99+" : openReportCount}
                   </span>
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index ea6ddee..6a82265 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -10,7 +10,7 @@ import { AccessRequestModal } from "./ReviewPage.tsx";
 
 export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
   const { t } = useT();
-  const [username, setUsername] = useState("admin");
+  const [username, setUsername] = useState("");
   const [key, setKey] = useState("");
   const [error, setError] = useState("");
   const [busy, setBusy] = useState(false);
diff --git a/frontend/src/components/RegisterPage.tsx b/frontend/src/components/RegisterPage.tsx
index 580d8a7..9be8c9d 100644
--- a/frontend/src/components/RegisterPage.tsx
+++ b/frontend/src/components/RegisterPage.tsx
@@ -76,27 +76,29 @@ export function RegisterPage() {
               </Button>
             </div>
           ) : (
-            <form onSubmit={submit} className="mt-4 space-y-2.5">
+            <form onSubmit={submit} autoComplete="off" className="mt-4 space-y-2.5">
               <div className="grid grid-cols-2 gap-2.5">
                 <Field label={t("common.username")}>
                   <Input
                     variant="soft"
+                    name="ka-register-username"
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}
                     placeholder="alice"
                     maxLength={32}
-                    autoComplete="username"
+                    autoComplete="off"
                     required
                   />
                 </Field>
                 <Field label={t("common.displayName")}>
                   <Input
                     variant="soft"
+                    name="ka-register-displayname"
                     value={displayName}
                     onChange={(e) => setDisplayName(e.target.value)}
                     placeholder="Alice"
                     maxLength={60}
-                    autoComplete="nickname"
+                    autoComplete="off"
                   />
                 </Field>
               </div>