fix: added password validation messages #1193
Open
Conversation
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
Contributor
Reviewer's GuideThis PR implements real-time password complexity checks alongside the existing zxcvbn strength estimation, updates the registration/reset password input widget to include built-in requirement hints and accessible markup, and adds CSS rules for inline validation feedback and improved focus states. Class diagram for updated PasswordStrengthInput widgetclassDiagram
class PasswordStrengthInput {
+render(name, value, attrs=None, renderer=None)
- Enhanced markup structure
- Built-in validation container
- Password requirement helper text
}
Flow diagram for password validation logic in JavaScriptflowchart TD
A["User types password"] --> B["validatePasswordComplexity(password)"]
B --> C{"Validation errors?"}
C -- Yes --> D["Show error messages in .password-validation-errors"]
C -- No --> E["Run zxcvbn(password)"]
E --> F["Update strength bar and show crack time"]
D --> G["Update strength bar to red"]
F --> H["Update strength bar to yellow/green"]
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey there - I've reviewed your changes and they look great!
Blocking issues:
- User controlled data in methods like
innerHTML,outerHTMLordocument.writeis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in a
passwordStrengthInfo.innerHTMLis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in methods like
innerHTML,outerHTMLordocument.writeis an anti-pattern that can lead to XSS vulnerabilities (link) - User controlled data in a
passwordStrengthInfo.innerHTMLis an anti-pattern that can lead to XSS vulnerabilities (link)
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `app/eventyay/static/common/css/_forms.css:783` </location>
<code_context>
}
}
+
+.password-validation-errors {
+ margin-top: 0.5rem;
+ padding: 0.5rem;
</code_context>
<issue_to_address>
**suggestion:** Consider using CSS variables for color values to improve maintainability.
Referencing CSS variables or theme classes will make future design updates easier and ensure consistency across the codebase.
Suggested implementation:
```
.password-validation-errors {
margin-top: 0.5rem;
padding: 0.5rem;
background-color: var(--color-danger-bg, #f8d7da);
border: 1px solid var(--color-danger-border, #f5c6cb);
border-radius: 0.25rem;
}
```
If the variables `--color-danger-bg` and `--color-danger-border` are not yet defined, add them to your global CSS (e.g., `:root` selector or theme file) for consistency:
:root {
--color-danger-bg: #f8d7da;
--color-danger-border: #f5c6cb;
}
This ensures the variables are available throughout your codebase and can be easily updated for theming.
</issue_to_address>
### Comment 2
<location> `app/eventyay/static/common/js/password_strength.js:104` </location>
<code_context>
passwordStrengthInfo.innerHTML = `<div class="password-validation-errors">${errorHtml}</div>`
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 3
<location> `app/eventyay/static/common/js/password_strength.js:104` </location>
<code_context>
passwordStrengthInfo.innerHTML = `<div class="password-validation-errors">${errorHtml}</div>`
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `passwordStrengthInfo.innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 4
<location> `app/eventyay/static/common/js/password_strength.js:130` </location>
<code_context>
passwordStrengthInfo.innerHTML = `<p class="text-muted mb-0">${strengthText}</p>`
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-document-method):** User controlled data in methods like `innerHTML`, `outerHTML` or `document.write` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>
### Comment 5
<location> `app/eventyay/static/common/js/password_strength.js:130` </location>
<code_context>
passwordStrengthInfo.innerHTML = `<p class="text-muted mb-0">${strengthText}</p>`
</code_context>
<issue_to_address>
**security (javascript.browser.security.insecure-innerhtml):** User controlled data in a `passwordStrengthInfo.innerHTML` is an anti-pattern that can lead to XSS vulnerabilities
*Source: opengrep*
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
mariobehling
requested changes
Nov 4, 2025
Member
mariobehling
left a comment
mariobehling
left a comment
There was a problem hiding this comment.
Thanks! Please check the ai feedback.
…es in password_strength.js Signed-off-by: Hemant M Mehta <[email protected]>
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR enhances password validation by adding real-time complexity checks in the UI, providing immediate feedback to users when their passwords don't meet security requirements (minimum 8 characters, containing letters and numbers, not being a common password).
Key changes:
- Added client-side password validation function with detailed error messaging
- Refactored password strength display logic to show validation errors before zxcvbn scoring
- Updated HTML structure to accommodate both validation errors and strength information
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| app/eventyay/static/common/js/password_strength.js | Implements validatePasswordComplexity function and refactors updatePasswordStrength to display validation errors prominently with conditional logic for zxcvbn scoring |
| app/eventyay/static/common/css/_forms.css | Adds styling for password validation error display container and requirements text |
| app/eventyay/common/forms/widgets.py | Updates HTML structure to wrap password strength info in a div and adds static password requirements text |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Author
|
@mariobehling, should I make the changes suggested by the copilot? |
Author
And should I add more common passwords? |
… validation. Signed-off-by: Hemant M Mehta <[email protected]>
…antmm/eventyay into password-validation-messages
Contributor
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: Hemant M Mehta <[email protected]>
Contributor
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Author
|
@mariobehling, can you review now? |
mariobehling
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
closes: #1173
Add real-time password validation with immediate user feedback during account registration and password reset flows.
✅ Changes Made:
1. Enhanced Password Strength Validation (JavaScript)
File:
app/eventyay/static/common/js/password_strength.js:✅ Added
validatePasswordComplexity()to enforce password rules in real time✅ Updated
updatePasswordStrength()to display validation errors instantly.✅ Implemented color-coded visual feedback (🔴 red / 🟡 yellow / 🟢 green).
✅ Added specific, actionable error messages for each validation rule.
✅ Displayed success indicators once all requirements are met.
2. Updated Password Input Widgets
File:
app/eventyay/common/forms/widgets.py:✅ Enhanced PasswordStrengthInput widget with built-in validation container.
✅ Added password requirement helper text below the input field.
✅ Improved markup structure for clarity and accessibility.
3. CSS Styling for Validation Messages
File:
app/eventyay/static/common/css/_forms.css:✅ Added .password-validation-errors class for inline feedback.
✅ Styled password requirements and progress bar indicators.
✅ Improved focus states for better accessibility.
✅ Used Bootstrap-compatible color palette for consistency.
Summary:
This PR significantly improves password creation UX and security by adding real-time and accessible password validation.
Summary by Sourcery
Provide real-time password validation and feedback by enforcing complexity rules in JS, updating the strength meter dynamically, enhancing input widgets with requirement hints, and adding CSS for inline error and focus styling.
New Features:
Enhancements: