ryan/lunarfront-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix vault dialog autofill: prevent browser password manager from overriding dark theme colors

Browse Source
This commit is contained in:
Ryan Moon
2026-03-30 07:18:58 -05:00
parent 1510133074
commit 4438188362
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/admin/src/app.css
View File

@@ -88,3 +88,12 @@ body {
border-color: #2a3a52 !important; border-color: #2a3a52 !important;
transition: background-color 5000s ease-in-out 0s; 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;
}

12
packages/admin/src/routes/_authenticated/vault/index.tsx
View File

@@ -364,26 +364,26 @@ function VaultMain() {
<Dialog open={newEntryOpen} onOpenChange={(open) => { setNewEntryOpen(open); if (!open) setEditEntryId(null) }}> <Dialog open={newEntryOpen} onOpenChange={(open) => { setNewEntryOpen(open); if (!open) setEditEntryId(null) }}>
<DialogContent> <DialogContent>
<DialogHeader><DialogTitle>{editEntryId ? 'Edit Entry' : 'New Entry'}</DialogTitle></DialogHeader> <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"> <div className="space-y-1">
<Label>Name *</Label> <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>
<div className="space-y-1"> <div className="space-y-1">
<Label>Username</Label> <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>
<div className="space-y-1"> <div className="space-y-1">
<Label>URL</Label> <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>
<div className="space-y-1"> <div className="space-y-1">
<Label>Notes</Label> <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>
<div className="space-y-1"> <div className="space-y-1">
<Label>{editEntryId ? 'New Secret (leave blank to keep current)' : 'Secret'}</Label> <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> </div>
<Button type="submit" disabled={!entryForm.name.trim() || createEntryMutation.isPending || updateEntryMutation.isPending}> <Button type="submit" disabled={!entryForm.name.trim() || createEntryMutation.isPending || updateEntryMutation.isPending}>
{(createEntryMutation.isPending || updateEntryMutation.isPending) ? 'Saving...' : editEntryId ? 'Update' : 'Create'} {(createEntryMutation.isPending || updateEntryMutation.isPending) ? 'Saving...' : editEntryId ? 'Update' : 'Create'}