Add login modal component v1

[devin-ai-integration]

Summary

Adds a standalone login modal component with a modern, polished UI design. The modal includes:

• Clean white card design with purple gradient background
• Email and password input fields with validation
• "Remember me" checkbox and "Forgot password?" link
• Gradient purple "Sign In" button with loading spinner state
• Social login buttons (Google, GitHub, X) with SVG icons
• Sign up link
• Responsive design with mobile breakpoints
• Keyboard accessibility (ESC to close, click outside to dismiss)
• Form validation (email format, password length)
• Error and success message displays

Review & Testing Checklist for Human

• Verify this meets your requirements - This is a standalone demo component in login-modal/index.html. If you need it integrated into a specific application or with real authentication, please let me know.
• Note: Login is simulated - The simulateLogin() function is a mock that always succeeds after 1.5s delay. You'll need to replace this with actual authentication logic.
• Social login buttons are placeholders - They currently show alerts. Real OAuth integration would need to be implemented.
• Test on mobile devices - Responsive CSS is included but should be verified on actual mobile devices.

Recommended test plan: Open login-modal/index.html in a browser, click "Open Login Modal", test form validation by submitting empty/invalid fields, then test successful login flow.

Notes

Requested by: @qiwei66
Link to Devin run: https://app.devin.ai/sessions/2e7e682860e8403a871aa0a20ef0c10c

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Devin Review found 1 potential issue.

View issue and 3 additional flags in Devin Review.

[devin-ai-integration]

🟡 Login button re-enabled after successful login allows duplicate submissions

After a successful login, the finally block at line 536-538 calls setLoading(false), which re-enables the login button. However, there's a 1.5-second delay (line 530) before the modal closes. During this window, the user can click "Sign In" again and trigger another login attempt.

Flow:

1. User submits form → setLoading(true) disables button
2. simulateLogin completes successfully after 1.5s
3. showSuccess('Login successful! Redirecting...') displays
4. setTimeout scheduled to close modal in 1.5s
5. finally block runs → setLoading(false) re-enables button
6. User can click "Sign In" again during the 1.5s window
7. Another login request is triggered

Expected: Button should remain disabled until the modal closes.
Actual: Button is re-enabled immediately after the async operation completes, allowing duplicate submissions.

Impact: Could cause duplicate login requests, confusing UX, or in a real implementation, potential duplicate session creation.

Recommendation: Move setLoading(false) to only run in the catch block, or add a separate flag to track successful login state and prevent re-submission. Alternatively, disable the button explicitly after success and don't re-enable it in the finally block for the success case.

---

Was this helpful? React with 👍 or 👎 to provide feedback.