Skip to content

fix: align password minlength in UI with backend validation #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bilalahmadsheikh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: align password minlength in UI with backend validation #33

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions public/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ <h2 class="text-xl font-bold text-slate-800 mb-6">Create your account</h2>
</div>
<div>
<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"
Comment on lines 75 to +76
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Suggested change
<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.

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" />
Comment on lines +76 to +77
Copy link

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copilot uses AI. Check for mistakes.
</div>
<p id="register-err" class="text-red-500 text-sm hidden"></p>
<button type="submit" class="w-full bg-brand text-white font-semibold py-2.5 rounded-xl hover:bg-brand-dark transition text-sm">Create Account</button>
Expand Down
Loading