# 8th November 2025 — Config Security and Secret Input UX [#80](https://github.com/nbarrett/ngx-ramblers/issues/80)
## [build 356](https://github.com/nbarrett/ngx-ramblers/actions/runs/19226914031) — [Refs: #80](https://github.com/nbarrett/ngx-ramblers/issues/80) — [commit a402a28](https://github.com/nbarrett/ngx-ramblers/commit/a402a28)

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