From 4438188362f2db796ff36a4c73791c385a66ed31 Mon Sep 17 00:00:00 2001
From: Ryan Moon <moonryan2009@gmail.com>
Date: Mon, 30 Mar 2026 07:18:58 -0500
Subject: [PATCH] Fix vault dialog autofill: prevent browser password manager
 from overriding dark theme colors

---
 packages/admin/src/app.css                           |  9 +++++++++
 .../admin/src/routes/_authenticated/vault/index.tsx  | 12 ++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/admin/src/app.css b/packages/admin/src/app.css
index 3d73043..dbcbca2 100644
--- a/packages/admin/src/app.css
+++ b/packages/admin/src/app.css
@@ -88,3 +88,12 @@ body {
   border-color: #2a3a52 !important;
   transition: background-color 5000s ease-in-out 0s;
 }
+
+/* Prevent browser autofill from overriding dark theme input colors */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px hsl(var(--background)) inset !important;
+  -webkit-text-fill-color: hsl(var(--foreground)) !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
diff --git a/packages/admin/src/routes/_authenticated/vault/index.tsx b/packages/admin/src/routes/_authenticated/vault/index.tsx
index 7267638..964735c 100644
--- a/packages/admin/src/routes/_authenticated/vault/index.tsx
+++ b/packages/admin/src/routes/_authenticated/vault/index.tsx
@@ -364,26 +364,26 @@ function VaultMain() {
       <Dialog open={newEntryOpen} onOpenChange={(open) => { setNewEntryOpen(open); if (!open) setEditEntryId(null) }}>
         <DialogContent>
           <DialogHeader><DialogTitle>{editEntryId ? 'Edit Entry' : 'New Entry'}</DialogTitle></DialogHeader>
-          <form onSubmit={handleEntrySubmit} className="space-y-3">
+          <form onSubmit={handleEntrySubmit} className="space-y-3" autoComplete="off">
             <div className="space-y-1">
               <Label>Name *</Label>
-              <Input value={entryForm.name} onChange={(e) => setEntryForm((f) => ({ ...f, name: e.target.value }))} placeholder="e.g. Store WiFi" autoFocus />
+              <Input value={entryForm.name} onChange={(e) => setEntryForm((f) => ({ ...f, name: e.target.value }))} placeholder="e.g. Store WiFi" autoFocus autoComplete="off" />
             </div>
             <div className="space-y-1">
               <Label>Username</Label>
-              <Input value={entryForm.username} onChange={(e) => setEntryForm((f) => ({ ...f, username: e.target.value }))} placeholder="Optional" />
+              <Input value={entryForm.username} onChange={(e) => setEntryForm((f) => ({ ...f, username: e.target.value }))} placeholder="Optional" autoComplete="off" />
             </div>
             <div className="space-y-1">
               <Label>URL</Label>
-              <Input value={entryForm.url} onChange={(e) => setEntryForm((f) => ({ ...f, url: e.target.value }))} placeholder="Optional" />
+              <Input value={entryForm.url} onChange={(e) => setEntryForm((f) => ({ ...f, url: e.target.value }))} placeholder="Optional" autoComplete="off" />
             </div>
             <div className="space-y-1">
               <Label>Notes</Label>
-              <Input value={entryForm.notes} onChange={(e) => setEntryForm((f) => ({ ...f, notes: e.target.value }))} placeholder="Optional" />
+              <Input value={entryForm.notes} onChange={(e) => setEntryForm((f) => ({ ...f, notes: e.target.value }))} placeholder="Optional" autoComplete="off" />
             </div>
             <div className="space-y-1">
               <Label>{editEntryId ? 'New Secret (leave blank to keep current)' : 'Secret'}</Label>
-              <Input type="password" value={entryForm.secret} onChange={(e) => setEntryForm((f) => ({ ...f, secret: e.target.value }))} placeholder="Password or secret value" />
+              <Input type="password" value={entryForm.secret} onChange={(e) => setEntryForm((f) => ({ ...f, secret: e.target.value }))} placeholder="Password or secret value" autoComplete="new-password" />
             </div>
             <Button type="submit" disabled={!entryForm.name.trim() || createEntryMutation.isPending || updateEntryMutation.isPending}>
               {(createEntryMutation.isPending || updateEntryMutation.isPending) ? 'Saving...' : editEntryId ? 'Update' : 'Create'}