8th November 2025 — Config Security and Secret Input UX #80
Prevent sensitive data loss during config saves and improve secret input UX with tooltips and proper sizing.
Where to Find It
- Settings: All configuration forms with sensitive fields
- OS Maps API Key: Secret input with show/hide and copy buttons
- Mail API Configuration: Secure key input with tooltips
Benefits
- Data Protection: Sensitive fields restored from database when missing from save payload
- Admin-Only Access: 403 response for non-admins attempting config updates
- Better UX: Secret input components sized to match vanilla inputs
- Helpful Tooltips: Show/hide and copy buttons have 500ms delay tooltips
- Cleaner Code: ES-Toolkit functions replace typeof checks (isObject, isArray, isString, isNumber, isFunction)
- DRY Principle: Sensitive field handling centralized in module constant
Technical Details
Backend Security:
- Add restoreSensitiveFields() to merge missing sensitive fields from existing DB record
- Distinguish missing fields (redacted) vs explicitly cleared fields (empty/null) using 'in' operator
- Add admin-only access check for config updates (403 for non-admins)
- Extract sensitiveKeys Set to module constant for DRY code
- Sensitive fields protected: apiKey, accessKeyId, secretAccessKey, clientSecret, accessToken, refreshToken, password, username, userName
Frontend Secret Input:
- Replace plain text inputs with secret-input component for OS Maps and Mail API keys
- Fix sizing: use input-sm class to match vanilla inputs
- Add ngx-bootstrap tooltips to show/hide and copy buttons with 500ms delay
- Add size="sm" attribute to secret-input usages
Code Quality:
- Replace typeof checks with ES-Toolkit functions across server and frontend
- isObject, isArray, isString, isNumber, isFunction used consistently
- Apply DRY principle to sensitive field handling in config.ts
UI Polish:
- Style Row Actions section with thumbnail-heading-frame to match individual Row frames
- Consistent visual treatment across configuration UI