From 0cb51ce99dae03106e774c126db870ae5f84c6cc Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julienfroidefond@gmail.com>
Date: Sat, 28 Feb 2026 21:44:28 +0100
Subject: [PATCH] fix: improve account password autofill semantics and settings
 layout

---
 src/app/account/page.tsx                      |  2 +-
 src/components/account/ChangePasswordForm.tsx | 23 ++++++++-
 src/components/settings/ClientSettings.tsx    | 48 ++++++++++---------
 3 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index ee534bb..b3b04cf 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -25,7 +25,7 @@ export default async function AccountPage() {
 
           <div className="grid gap-6 md:grid-cols-2">
             <UserProfileCard profile={{ ...profile, stats }} />
-            <ChangePasswordForm />
+            <ChangePasswordForm username={profile.email} />
           </div>
         </div>
       </div>
diff --git a/src/components/account/ChangePasswordForm.tsx b/src/components/account/ChangePasswordForm.tsx
index 9fe87ba..bc0aa37 100644
--- a/src/components/account/ChangePasswordForm.tsx
+++ b/src/components/account/ChangePasswordForm.tsx
@@ -9,7 +9,11 @@ import { useToast } from "@/components/ui/use-toast";
 import { Lock } from "lucide-react";
 import { changePassword } from "@/app/actions/password";
 
-export function ChangePasswordForm() {
+interface ChangePasswordFormProps {
+  username?: string;
+}
+
+export function ChangePasswordForm({ username }: ChangePasswordFormProps) {
   const [currentPassword, setCurrentPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
@@ -77,13 +81,26 @@ export function ChangePasswordForm() {
       </CardHeader>
       <CardContent>
         <form onSubmit={handleSubmit} className="space-y-4">
+          <Input
+            type="text"
+            name="username"
+            autoComplete="username"
+            value={username || ""}
+            readOnly
+            tabIndex={-1}
+            aria-hidden="true"
+            className="sr-only"
+          />
+
           <div className="space-y-2">
             <Label htmlFor="currentPassword">Mot de passe actuel</Label>
             <div className="relative">
               <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
               <Input
                 id="currentPassword"
+                name="currentPassword"
                 type="password"
+                autoComplete="current-password"
                 value={currentPassword}
                 onChange={(e) => setCurrentPassword(e.target.value)}
                 className="pl-9"
@@ -99,7 +116,9 @@ export function ChangePasswordForm() {
               <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
               <Input
                 id="newPassword"
+                name="newPassword"
                 type="password"
+                autoComplete="new-password"
                 value={newPassword}
                 onChange={(e) => setNewPassword(e.target.value)}
                 className="pl-9"
@@ -115,7 +134,9 @@ export function ChangePasswordForm() {
               <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
               <Input
                 id="confirmPassword"
+                name="confirmPassword"
                 type="password"
+                autoComplete="new-password"
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 className="pl-9"
diff --git a/src/components/settings/ClientSettings.tsx b/src/components/settings/ClientSettings.tsx
index bd00fe5..0648f61 100644
--- a/src/components/settings/ClientSettings.tsx
+++ b/src/components/settings/ClientSettings.tsx
@@ -20,32 +20,34 @@ export function ClientSettings({ initialConfig, initialLibraries }: ClientSettin
   const { t } = useTranslate();
 
   return (
-    <div className="container mx-auto px-4 py-8 space-y-6">
-      <h1 className="text-3xl font-bold">{t("settings.title")}</h1>
+    <div className="container mx-auto px-4 py-8">
+      <div className="max-w-4xl mx-auto space-y-8">
+        <h1 className="text-3xl font-bold">{t("settings.title")}</h1>
 
-      <Tabs defaultValue="display" className="w-full">
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="display" className="flex items-center gap-2">
-            <Monitor className="h-4 w-4" />
-            {t("settings.tabs.display")}
-          </TabsTrigger>
-          <TabsTrigger value="connection" className="flex items-center gap-2">
-            <Network className="h-4 w-4" />
-            {t("settings.tabs.connection")}
-          </TabsTrigger>
-        </TabsList>
+        <Tabs defaultValue="display" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="display" className="flex items-center gap-2">
+              <Monitor className="h-4 w-4" />
+              {t("settings.tabs.display")}
+            </TabsTrigger>
+            <TabsTrigger value="connection" className="flex items-center gap-2">
+              <Network className="h-4 w-4" />
+              {t("settings.tabs.connection")}
+            </TabsTrigger>
+          </TabsList>
 
-        <TabsContent value="display" className="mt-6 space-y-6">
-          <DisplaySettings />
-          <BackgroundSettings initialLibraries={initialLibraries} />
-        </TabsContent>
+          <TabsContent value="display" className="mt-6 space-y-6">
+            <DisplaySettings />
+            <BackgroundSettings initialLibraries={initialLibraries} />
+          </TabsContent>
 
-        <TabsContent value="connection" className="mt-6 space-y-6">
-          <KomgaSettings initialConfig={initialConfig} />
-          <AdvancedSettings />
-          <CacheSettings />
-        </TabsContent>
-      </Tabs>
+          <TabsContent value="connection" className="mt-6 space-y-6">
+            <KomgaSettings initialConfig={initialConfig} />
+            <AdvancedSettings />
+            <CacheSettings />
+          </TabsContent>
+        </Tabs>
+      </div>
     </div>
   );
 }