← Back to PRs

#7124: feat: Add password toggle visibility to all platforms

by gibtang open 2026-02-02 12:28 View on GitHub →
app: web-ui
## Summary - Add eye icon toggle buttons to all password inputs across the UI - Improves UX by allowing users to reveal sensitive text when needed - Consistent implementation across Node config, Skills, and Overview pages ## Changes - **Icons** (`ui/src/ui/icons.ts`): Added shared `eye` icon for reuse - **Node Config** (`ui/src/ui/views/config-form.node.ts`): Added password toggle using shared eye icon (removed duplicate local definition) - **Skills Page** (`ui/src/ui/views/skills.ts`): Added password toggle to API key inputs - **Overview Page** (`ui/src/ui/views/overview.ts`): Added password toggle to gateway password field - **Styles** (`ui/src/styles/config.css`): CSS for `.cfg-input__toggle` button ## Test plan - [x] Test password toggle on Node config form - [x] Test password toggle on Skills page API key fields - [x] Test password toggle on Overview page password field - [x] Verify toggle works in both light and dark themes - [x] Verify button is properly aligned and styled - [x] Fix: Removed duplicate eye icon, now using shared icon from icons.ts - [x] Refactor: Replaced DOM ID lookups with sibling traversal for better maintainability ## Review Feedback Addressed - **Icon duplication** (Commit ff81e47d8): Removed local `eye` SVG from `config-form.node.ts`, now using shared icon from `ui/src/ui/icons.ts` - **DOM lookup pattern** (Commit eb5c09ae8): Replaced `document.getElementById()` with DOM sibling traversal using `e.currentTarget` and `parentElement.querySelector()` ### Benefits of DOM sibling traversal: - ✅ No ID collisions or global ID namespace pollution - ✅ Maintains encapsulation (button only knows about its sibling) - ✅ Works for single instances and lists without unique IDs - ✅ DOM structure changes don't break functionality - ✅ More maintainable and testable All review feedback has been addressed. Thanks for the excellent review! 🤖 Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering)

Most Similar PRs