consistency: three different error display patterns used for password validation #87

New Issue

clawbot · 2026-02-28T21:30:01+01:00

clawbot commented

2026-02-28 21:30:01 +01:00

Problem

Password validation errors are displayed using three different patterns across the codebase:

showError()/hideError() helpers with min-height error div (used by confirm-tx)
Direct DOM manipulation with hidden class toggling (used by approve-tx, approve-sign)
Global flash message system via showFlash() (used by add-wallet, import-key)
Per-view flash divs with inconsistent styling (used by export-privkey with export-privkey-flash, delete-wallet with delete-wallet-flash using text-red-500)

Expected behavior

All password error displays should use a consistent pattern. The showError()/hideError() helper approach with min-height error divs prevents layout shift and centralizes the logic.

Files affected

src/popup/views/approval.js (direct DOM for approve-tx-error, approve-sign-error)
src/popup/views/addressDetail.js (export-privkey-flash)
src/popup/views/deleteWallet.js (delete-wallet-flash with text-red-500)
src/popup/views/addWallet.js (global showFlash)
src/popup/views/importKey.js (global showFlash)
src/popup/index.html (error div markup)

Suggested fix

Standardize all password error areas to use dedicated error divs with min-h-[1.25rem] and the showError()/hideError() helpers from helpers.js.

Found during consistency audit for #78.

## Problem Password validation errors are displayed using three different patterns across the codebase: 1. **`showError()`/`hideError()` helpers** with `min-height` error div (used by `confirm-tx`) 2. **Direct DOM manipulation** with `hidden` class toggling (used by `approve-tx`, `approve-sign`) 3. **Global flash message system** via `showFlash()` (used by `add-wallet`, `import-key`) 4. **Per-view flash divs** with inconsistent styling (used by `export-privkey` with `export-privkey-flash`, `delete-wallet` with `delete-wallet-flash` using `text-red-500`) ## Expected behavior All password error displays should use a consistent pattern. The `showError()`/`hideError()` helper approach with `min-height` error divs prevents layout shift and centralizes the logic. ## Files affected - `src/popup/views/approval.js` (direct DOM for approve-tx-error, approve-sign-error) - `src/popup/views/addressDetail.js` (export-privkey-flash) - `src/popup/views/deleteWallet.js` (delete-wallet-flash with text-red-500) - `src/popup/views/addWallet.js` (global showFlash) - `src/popup/views/importKey.js` (global showFlash) - `src/popup/index.html` (error div markup) ## Suggested fix Standardize all password error areas to use dedicated error divs with `min-h-[1.25rem]` and the `showError()`/`hideError()` helpers from `helpers.js`. Found during consistency audit for #78.

clawbot added the

bot

label 2026-02-28 21:30:01 +01:00

clawbot referenced this issue

2026-02-28 21:30:24 +01:00

fix: replace confirm-tx password modal with inline field (closes #78) #83

clawbot referenced this issue

2026-02-28 21:42:51 +01:00

fix: replace confirm-tx password modal with inline field (closes #78) #83

clawbot self-assigned this 2026-02-28 21:45:16 +01:00

clawbot removed their assignment 2026-02-28 21:45:45 +01:00

clawbot referenced this issue from a commit