Return actual sensitive values from API for visibility toggle

Backend:
- Update /settings/notifications to return actual tokens/keys
- Update /settings/ai to return actual API keys

Frontend:
- Update NotificationSettings and AISettings types
- Populate form fields with actual saved values on load
- Eye toggle now reveals actual stored values
- Always show toggle button for consistent UX

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
clucraft 2026-01-22 20:45:06 -05:00
parent b885e4ef57
commit a4da43c127
5 changed files with 63 additions and 67 deletions

View file

@ -4,24 +4,22 @@ interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
// All standard input props are inherited
}
export default function PasswordInput({ style, value, ...props }: PasswordInputProps) {
export default function PasswordInput({ style, ...props }: PasswordInputProps) {
const [visible, setVisible] = useState(false);
const hasValue = value !== undefined && value !== null && String(value).length > 0;
return (
<div style={{ position: 'relative' }}>
<input
{...props}
value={value}
type={visible ? 'text' : 'password'}
style={{
...style,
width: '100%',
paddingRight: hasValue ? '2.5rem' : '0.75rem',
paddingRight: '2.5rem',
boxSizing: 'border-box',
}}
/>
{hasValue && <button
<button
type="button"
onClick={(e) => {
e.preventDefault();
@ -79,7 +77,7 @@ export default function PasswordInput({ style, value, ...props }: PasswordInputP
<circle cx="12" cy="12" r="3" />
</svg>
)}
</button>}
</button>
</div>
);
}