fix: align password minlength in UI with backend validation#33
fix: align password minlength in UI with backend validation#33bilalahmadsheikh wants to merge 1 commit intoalphaonelabs:mainfrom
Conversation
WalkthroughThe password field in the login form has been updated to enforce stricter validation requirements, increasing the minimum password length from 6 to 8 characters, with the placeholder text adjusted accordingly to match this new constraint. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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 |
There was a problem hiding this comment.
Pull request overview
This PR aims to align the registration UI’s password requirements with the backend validation (backend requires passwords to be at least 8 characters).
Changes:
- Updated the registration password input
minlengthfrom 6 to 8. - Updated the password placeholder text from “min 6 characters” to “min 8 characters”.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <input id="r-password" type="password" autocomplete="new-password" required minlength="8" | ||
| class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" placeholder="min 8 characters" /> |
There was a problem hiding this comment.
minlength="8" won’t actually prevent submitting short passwords because the registration <form> has novalidate and the submit handler always preventDefault() + fetch() without calling checkValidity() or performing a length check. As a result, users can still submit <8 chars and only learn after the backend rejects it. Consider either removing novalidate for the register form or adding an explicit client-side validation in the submit handler (e.g., show register-err when password length < 8 before sending the request).
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
public/login.html (1)
36-36:⚠️ Potential issue | 🟠 MajorAdd CSRF protection tokens to forms.
Both the login and register forms lack CSRF protection tokens. This makes the application vulnerable to Cross-Site Request Forgery attacks where a malicious site could trick authenticated users into submitting unwanted requests.
Recommendation: Implement CSRF token generation on the server side and include the token in:
- A hidden input field within each form
- The request headers or body when submitting via
fetch()Example approach:
- Render a CSRF token in a hidden input:
<input type="hidden" name="csrf_token" value="{{csrf_token}}">- Include it in the fetch body:
{ ...formData, csrf_token: document.getElementById('csrf-token').value }- Validate the token server-side in
worker.pybefore processing the requestWould you like me to provide a more detailed implementation example for adding CSRF protection to this application?
As per coding guidelines: "Check that forms include CSRF protection tokens."
Also applies to: 58-58, 115-116, 130-136
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@public/login.html` at line 36, Add server-generated CSRF tokens to both forms (e.g., the form element with id "form-login" and the register form) by rendering a hidden input named "csrf_token" (and an id like "csrf-token") into public/login.html and the corresponding register HTML; ensure client-side submit handlers include that token in the fetch body or request header when sending the form; finally add token verification in the server request handlers in worker.py (validate the incoming csrf_token for login/register before processing authentication) and reject requests with missing/invalid tokens.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@public/login.html`:
- Around line 75-76: Add a for attribute to the password label to associate it
with the input by setting for="r-password" on the <label> that corresponds to
the input with id="r-password" (update the label element near the Password
field); also audit and add matching for="..." attributes for the other labels
referencing inputs with ids on this page (the labels near ids used at lines
corresponding to other inputs) to ensure proper accessibility and
keyboard/screen-reader association.
---
Outside diff comments:
In `@public/login.html`:
- Line 36: Add server-generated CSRF tokens to both forms (e.g., the form
element with id "form-login" and the register form) by rendering a hidden input
named "csrf_token" (and an id like "csrf-token") into public/login.html and the
corresponding register HTML; ensure client-side submit handlers include that
token in the fetch body or request header when sending the form; finally add
token verification in the server request handlers in worker.py (validate the
incoming csrf_token for login/register before processing authentication) and
reject requests with missing/invalid tokens.
🪄 Autofix (Beta)
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: Repository: alphaonelabs/coderabbit/.coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 511d1142-a958-4d0d-91e9-c862e31bca5a
📒 Files selected for processing (1)
public/login.html
| <label class="block text-sm font-medium text-slate-700 mb-1">Password</label> | ||
| <input id="r-password" type="password" autocomplete="new-password" required minlength="6" | ||
| class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" placeholder="min 6 characters" /> | ||
| <input id="r-password" type="password" autocomplete="new-password" required minlength="8" |
There was a problem hiding this comment.
Add for attribute to label for proper accessibility.
The label on line 75 should include a for="r-password" attribute to explicitly associate it with the password input field. This is essential for screen readers and improves keyboard navigation.
♿ Proposed fix to add label association
- <label class="block text-sm font-medium text-slate-700 mb-1">Password</label>
+ <label for="r-password" class="block text-sm font-medium text-slate-700 mb-1">Password</label>
<input id="r-password" type="password" autocomplete="new-password" required minlength="8"Note: This same issue exists for all other labels in the file (lines 38, 43, 60, 65, and 70). Consider updating them as well for comprehensive accessibility compliance.
As per coding guidelines: "Review HTML templates for accessibility (ARIA attributes, semantic elements)..."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <label class="block text-sm font-medium text-slate-700 mb-1">Password</label> | |
| <input id="r-password" type="password" autocomplete="new-password" required minlength="6" | |
| class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" placeholder="min 6 characters" /> | |
| <input id="r-password" type="password" autocomplete="new-password" required minlength="8" | |
| <label for="r-password" class="block text-sm font-medium text-slate-700 mb-1">Password</label> | |
| <input id="r-password" type="password" autocomplete="new-password" required minlength="8" |
🧰 Tools
🪛 HTMLHint (1.9.2)
[warning] 76-76: No matching [ label ] tag found.
(input-requires-label)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@public/login.html` around lines 75 - 76, Add a for attribute to the password
label to associate it with the input by setting for="r-password" on the <label>
that corresponds to the input with id="r-password" (update the label element
near the Password field); also audit and add matching for="..." attributes for
the other labels referencing inputs with ids on this page (the labels near ids
used at lines corresponding to other inputs) to ensure proper accessibility and
keyboard/screen-reader association.
Changes
minlengthattribute in registration form from6to8Why
The backend (
worker.pyline 655) rejects passwords shorter than 8 characters,but the frontend registration form allowed submissions with as few as 6 characters.
This caused confusing silent failures for users — the browser accepted their
password but the server rejected it with no clear explanation.
Testing
public/login.htmlin browserworker.pySummary
This PR aligns the frontend password validation with the backend validation rules by updating the registration form's password field constraints.
Changes
Updated
public/login.htmlregistration form password input:minlengthattribute from6to8charactersPurpose
The backend validation in
worker.pyenforces a minimum password length of 8 characters. However, the frontend previously allowed passwords as short as 6 characters, resulting in silent server-side rejections when users submitted passwords that passed client-side validation but failed backend checks.Impact
This change provides immediate client-side feedback to users, preventing confusion from silent form submission failures. Users attempting to register with passwords shorter than 8 characters will now see the constraint enforced in the browser before attempting to submit, improving the registration experience.