fix: CSP-safe password toggle icon visibility - #17
Merged
Conversation
Hide/show eye icons via is-password-visible + stylesheet rules instead of inline style / element.style.display, which browsers ignore when style-src includes a nonce.
📝 WalkthroughWalkthroughThe password toggle now controls icon visibility with the ChangesPassword visibility state
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant ToggleButton
participant PasswordInput
participant TogglePasswordCSS
participant EyeIcons
ToggleButton->>PasswordInput: Toggle password type
ToggleButton->>ToggleButton: Add or remove is-password-visible
TogglePasswordCSS->>EyeIcons: Apply state-based visibility rules
ToggleButton->>ToggleButton: Update ARIA label
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@coderabbitai review |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
demo/symfony7/templates/form/toggle_password_widget.html.twig (1)
11-25: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winAdd keyboard activation to all demo password toggles.
Each demo control exposes
role="button"andtabindex="0"but handles onlyonclick. Add the same Enter and Space handling used by the core template.
demo/symfony7/templates/form/toggle_password_widget.html.twig#L11-L25: add anonkeydownhandler.demo/symfony8-php85/templates/form/toggle_password_widget.html.twig#L11-L25: add anonkeydownhandler.demo/symfony8/templates/form/toggle_password_widget.html.twig#L11-L25: add anonkeydownhandler.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@demo/symfony7/templates/form/toggle_password_widget.html.twig` around lines 11 - 25, Add an onkeydown handler to the password toggle control in demo/symfony7/templates/form/toggle_password_widget.html.twig lines 11-25, demo/symfony8-php85/templates/form/toggle_password_widget.html.twig lines 11-25, and demo/symfony8/templates/form/toggle_password_widget.html.twig lines 11-25. Reuse the core template’s keyboard behavior so Enter and Space activate the same password visibility toggle as onclick, including preventing Space’s default page behavior.
🧹 Nitpick comments (1)
src/Resources/views/Form/toggle_password_widget.html.twig (1)
58-58: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAdd browser-level coverage for CSS-dependent icon states.
The bundle registers the named asset package conditionally, but the widget does not load the stylesheet. Without
toggle_password.css, both icons are visible initially. Test the initial and visible states.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/Resources/views/Form/toggle_password_widget.html.twig` at line 58, Add browser-level coverage for the toggle-password widget’s CSS-dependent icon states, verifying that only the hidden-password icon is initially visible and that toggling the control shows the visible-password icon. Ensure the test loads the toggle_password.css stylesheet and exercises the rendered widget rather than testing markup alone.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/UPGRADING.md`:
- Around line 5-10: Keep only one “## Unreleased” section in docs/UPGRADING.md
by merging the CSP-safe icon visibility bullets into the existing Unreleased
guidance at the later heading, or consolidating the later content under the new
heading. Preserve the document’s structure and tone, avoid inventing a release
version, and keep the resulting guidance aligned with CHANGELOG.
In `@tests/Unit/Twig/TogglePasswordWidgetTemplateTest.php`:
- Around line 22-23: Strengthen the assertions in
TogglePasswordWidgetTemplateTest so they reject any inline style attribute
containing display: none, regardless of HTML attribute quoting or whitespace,
rather than only the exact Twig string. Use a regex or parsed-attribute
assertion while retaining the existing style.display check.
---
Outside diff comments:
In `@demo/symfony7/templates/form/toggle_password_widget.html.twig`:
- Around line 11-25: Add an onkeydown handler to the password toggle control in
demo/symfony7/templates/form/toggle_password_widget.html.twig lines 11-25,
demo/symfony8-php85/templates/form/toggle_password_widget.html.twig lines 11-25,
and demo/symfony8/templates/form/toggle_password_widget.html.twig lines 11-25.
Reuse the core template’s keyboard behavior so Enter and Space activate the same
password visibility toggle as onclick, including preventing Space’s default page
behavior.
---
Nitpick comments:
In `@src/Resources/views/Form/toggle_password_widget.html.twig`:
- Line 58: Add browser-level coverage for the toggle-password widget’s
CSS-dependent icon states, verifying that only the hidden-password icon is
initially visible and that toggling the control shows the visible-password icon.
Ensure the test loads the toggle_password.css stylesheet and exercises the
rendered widget rather than testing markup alone.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: b1bc0485-ff05-4df0-ba1b-1c59cd32be8f
📒 Files selected for processing (13)
README.mddemo/symfony7/templates/demo/form.html.twigdemo/symfony7/templates/form/toggle_password_widget.html.twigdemo/symfony8-php85/templates/demo/form.html.twigdemo/symfony8-php85/templates/form/toggle_password_widget.html.twigdemo/symfony8/templates/demo/form.html.twigdemo/symfony8/templates/form/toggle_password_widget.html.twigdocs/CHANGELOG.mddocs/UPGRADING.mdsrc/Resources/public/css/toggle_password.csssrc/Resources/public/css/toggle_password.scsssrc/Resources/views/Form/toggle_password_widget.html.twigtests/Unit/Twig/TogglePasswordWidgetTemplateTest.php
Comment on lines
+5
to
+10
| ## Unreleased (CSP-safe icon visibility) | ||
|
|
||
| - **Load the bundle CSS** (`asset('css/toggle_password.css', 'nowo_password_toggle')` or import the SCSS). Icon show/hide now depends on `.icon-visible` / `.is-password-visible` rules in that stylesheet. | ||
| - **Custom form theme overrides:** if you copied `toggle_password_widget.html.twig`, stop using inline `style.display` / `style: 'display: none'` / Bootstrap `d-none`. Toggle `is-password-visible` on the button (see the bundle widget) and keep both icons in the markup without inline hide styles. | ||
| - **Hosts with strict `script-src` (no `'unsafe-inline'`):** the default widget still uses inline `onclick` for Live Component compatibility; override the form theme with a Stimulus (or other non-inline) controller if needed — same as before. | ||
|
|
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Keep a single Unreleased section.
docs/UPGRADING.md already has another ## Unreleased heading at Line 109. The new section at Line 5 splits current guidance into two locations and makes the upgrade order ambiguous. Merge these bullets into one section or rename the existing future-release section without inventing a version.
As per path instructions, preserve document structure and tone, and keep CHANGELOG and UPGRADING aligned.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/UPGRADING.md` around lines 5 - 10, Keep only one “## Unreleased” section
in docs/UPGRADING.md by merging the CSP-safe icon visibility bullets into the
existing Unreleased guidance at the later heading, or consolidating the later
content under the new heading. Preserve the document’s structure and tone, avoid
inventing a release version, and keep the resulting guidance aligned with
CHANGELOG.
Source: Path instructions
Comment on lines
+22
to
+23
| $this->assertStringNotContainsString('style.display', $content); | ||
| $this->assertStringNotContainsString("style: 'display: none'", $content); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Reject all inline display: none forms.
The test only excludes the exact Twig string style: 'display: none'. It does not reject literal HTML such as style="display: none" or spacing and quote variants. Use a regex or parsed-attribute assertion that detects any inline style containing display: none.
As per path instructions, PHPUnit tests for this package must add or update tests for new behaviour and avoid trivial assertions.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@tests/Unit/Twig/TogglePasswordWidgetTemplateTest.php` around lines 22 - 23,
Strengthen the assertions in TogglePasswordWidgetTemplateTest so they reject any
inline style attribute containing display: none, regardless of HTML attribute
quoting or whitespace, rather than only the exact Twig string. Use a regex or
parsed-attribute assertion while retaining the existing style.display check.
Source: Path instructions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
style="display: none"/element.style.displaywithis-password-visible+ rules intoggle_password.css/ SCSS so both eye icons are not shown when CSPstyle-srchas a nonce (browsers then ignore'unsafe-inline').d-none) and document upgrade notes in CHANGELOG / UPGRADING / README.Test plan
make test(49 tests OK)asset('css/toggle_password.css', 'nowo_password_toggle')(or SCSS import)Made with Cursor
Summary by CodeRabbit
Bug Fixes
Documentation