fix(auth): use local state for login error to unblock submit button (#648)

[Israeltheminer]

Summary

• Replaces form.setError() with a local loginError state variable for displaying credential errors
• React Hook Form's isValid (and therefore the submit button's disabled state) was gated on formState.errors being empty — setting a field error via setError() permanently disabled the button even after the user corrected the email
• With local state, isValid stays driven entirely by Zod schema validation, so correcting the email re-enables the button immediately

Test plan

• Enter an invalid email → submit button stays disabled (Zod validation)
• Enter a valid email + wrong password → error toast/message appears, submit button becomes enabled again
• Correct the password → can submit successfully
• Existing happy-path login flow unchanged

Closes #648

Summary by CodeRabbit

• Bug Fixes

  • Improved error message handling and clearing in the login form. Error messages now clear when editing the email or password fields after a failed login attempt.
  • Enhanced submit button state management to properly reflect form validity throughout the login flow.

• Tests

  • Added comprehensive test coverage for login error scenarios and form recovery behavior.

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds a comprehensive test suite for the LogInPage component's error handling behavior and modifies the log-in route to track authentication failures using local state rather than form-level error management. The changes introduce a loginError state that is cleared when the user edits either the email or password field, allowing the submit button to be re-enabled based on form validation alone. The test suite validates form submission states, error display after failed login attempts, and error clearing on field edits.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'fix(auth): use local state for login error to unblock submit button' clearly and concisely describes the main change: replacing form-level error handling with local state to fix the disabled submit button issue.
Linked Issues check	✅ Passed	The code changes directly address issue #648 by replacing form.setError() with local loginError state, enabling the submit button to become enabled again when users correct input fields after a failed login.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the login button disabled state issue: the test file adds comprehensive coverage for the new behavior, and the login component refactors error handling to use local state as intended.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/648-login-button-disabled-after-error

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@services/platform/app/features/auth/__tests__/login-form-error-clearing.test.tsx`:
- Around line 100-104: The test in login-form-error-clearing.test.tsx is
asserting the old behavior that the submit button remains disabled after a
server-side login failure; update the assertion for the button retrieved via
screen.getByRole('button', { name: 'login.loginButton' }) to expect it to be
enabled (toBeEnabled()) once the inputs are schema-valid, and ensure the test
flow still supplies valid credentials/schema-valid input values before asserting
the button state so it reflects the fixed behavior.
- Line 46: The test imports LogInPage from the route module but that symbol
isn't exported, causing TS2459; either export LogInPage from the route module
(e.g., add an export for the LogInPage component/function) or update the test to
import the actual exported symbol (replace LogInPage with the correct exported
name from the route file). Locate the test importing LogInPage and the route
module that defines the login component (the route's exported
component/function), then make the route export and test import agree.

In `@services/platform/app/routes/_auth/log-in.tsx`:
- Line 7: The file imports useState, useMemo, useCallback from React but calls
useEffect later (causing TS2304); update the React import line to also include
useEffect so that the symbol used in the component is defined (i.e., add
useEffect alongside useState/useMemo/useCallback in the import statement).
- Around line 87-90: The loginError state (loginError, setLoginError) is only
cleared inside handleSubmit, so the stale error persists while the user edits
fields; update the email and password input elements used to collect
LogInFormData to call setLoginError(null) on change (e.g., add onChange handlers
to the email and password inputs) so any edit immediately clears the error;
ensure you reference the same controlled/uncontrolled inputs used by the form
(the input elements that populate LogInFormData) and keep existing
value/onChange bindings intact if they exist.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 0a2dd4e8-b672-48c1-9433-96eb81ea5882

📥 Commits

Reviewing files that changed from the base of the PR and between add230e and 72de14c.

📒 Files selected for processing (2)

• services/platform/app/features/auth/__tests__/login-form-error-clearing.test.tsx
• services/platform/app/routes/_auth/log-in.tsx