fix login inline error messages

[saurabhhhcodes]

What changed

• Replaced the login page alert() with an inline Bootstrap error banner.
• Surface backend error details from the token endpoint when available.
• Clear the message on retry and let the dismiss button hide it manually.

Why

• Login failures were too generic and forced a disruptive popup instead of keeping feedback near the form.

Validation

• rg -n "login-error|alert\(|Login failed|Signing In" frontend/login.html frontend/api.js
• git diff --check

Closes #322

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Enhanced login error messages to provide specific validation feedback from the server rather than generic failure notifications.

• New Features

  • Inline dismissible error alerts on the login form improve error visibility and user experience.
  • Login button displays clearer visual status feedback while submissions are in progress.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR replaces the raw alert() call on login failure with an inline Bootstrap dismissible error alert. api.js gains structured JSON error parsing in login(), and login.html adds the alert markup plus clearError()/showError() helpers wired to a refactored submit handler with try/finally button state management.

Changes

Login Inline Error Display

Layer / File(s)	Summary
Structured error extraction in login() frontend/api.js	When res.ok is false, attempts to parse the response body as JSON and extracts a message from detail, non_field_errors[0], or email[0], falling back to a generic string before throwing.
Inline dismissible Bootstrap alert frontend/login.html	Adds a hidden #login-error alert container with #login-error-message and a close button. Rewires the submit handler to call clearError()/showError() instead of alert(), and moves button disable/re-enable into a try/finally block.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 No more pop-ups blocking the way,
The error now lives on the page to stay.
A Bootstrap box, dismissible and bright,
Tells the user what went wrong, just right.
With finally set and the button reset,
This bunny approves — no more alert()! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix login inline error messages' clearly summarizes the main change: replacing alert() popups with inline error messaging on the login page.
Linked Issues check	✅ Passed	All acceptance criteria from issue #322 are met: Bootstrap danger alert replaces alert(), specific error messages from API are displayed, and alert is dismissible with auto-clear on retry.
Out of Scope Changes check	✅ Passed	The changes are fully in scope. Both frontend/api.js and frontend/login.html modifications directly support the requirements to display specific API error messages in an inline Bootstrap alert component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 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 `@frontend/login.html`:
- Around line 176-179: The showError function contains an alert() call as a
fallback when errorBox or errorMessage do not exist, which reintroduces the
popup behavior this PR aims to replace. Remove the alert(message) line from the
fallback condition in the showError function and replace it with either a silent
return (no-op) or a console.log/console.error call if error logging is needed,
ensuring that errors are handled without displaying browser alert popups.

🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 44776349-f5f3-4eee-b4bb-78caf690f462

📥 Commits

Reviewing files that changed from the base of the PR and between 0474fe9 and cfc9ac8.

📒 Files selected for processing (2)

• frontend/api.js
• frontend/login.html

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Remove the alert() fallback from showError.

Line 178 reintroduces the popup behavior this PR is replacing. Keep failures inline-only (or silently no-op/log) instead of calling alert(message).

Suggested patch

 const showError = (message) => {
     if (!errorBox || !errorMessage) {
-        alert(message);
         return;
     }
     errorMessage.textContent = message;
     errorBox.classList.remove('d-none');
     errorBox.classList.add('show');
 };

📝 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

	const showError = (message) => {
	if (!errorBox || !errorMessage) {
	alert(message);
	return;
	const showError = (message) => {
	if (!errorBox || !errorMessage) {
	return;
	}
	errorMessage.textContent = message;
	errorBox.classList.remove('d-none');
	errorBox.classList.add('show');
	};

🤖 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 `@frontend/login.html` around lines 176 - 179, The showError function contains
an alert() call as a fallback when errorBox or errorMessage do not exist, which
reintroduces the popup behavior this PR aims to replace. Remove the
alert(message) line from the fallback condition in the showError function and
replace it with either a silent return (no-op) or a console.log/console.error
call if error logging is needed, ensuring that errors are handled without
displaying browser alert popups.

[Kuldeeep18]

Hi @saurabhhhcodes 👋

LeadOrbit Bot here 🤖

A repository star ⭐ is required for PR review and merge.

We noticed that you haven't starred the repository yet. Please star the repo and reply once completed so we can continue with the review process.

Thanks for contributing to LeadOrbit! 🚀

[Kuldeeep18]

Hi @saurabhhhcodes 👋

LeadOrbit Bot here 🤖

We noticed you've opened a Pull Request but haven't starred the repository yet.

⭐ Starring the repository is mandatory for PR review and merge.

Please:

1. Star the repository.
2. Reply to this comment with "Done".

Once you've done that, the bot will continue processing your PR.

Note: PRs from contributors who haven't starred the repository will remain pending until this requirement is completed.

Thanks for contributing to LeadOrbit! 🚀