Fix: Add Client-Side Form Validation to Login and Signup Pages

[Ananya-CM]

🐛 Bug Report

Area: Authentication — Login & Signup Forms
Type: Bug — Missing Client-Side Validation
Priority: Medium

---

📌 Description

The Login and Signup pages in FlowForge currently
perform no client-side validation before submitting
the form. This means:

• Users with empty fields or invalid email formats
  must wait for a server round-trip to see errors
• No real-time feedback as user types
• Poor UX — modern apps validate instantly

---

🔍 Proof — No Validation in Source Code

In frontend/app/login/page.tsx, the only check is:

if (!email || !password) {
  showToast("Please enter your email and password.", "error");
  return;
}

No email format check, no password length check,
no real-time inline field validation anywhere.

In frontend/app/signup/page.tsx:

• No email format validation on the client side
• No real-time password strength indicator
• No username format check before API call

---

❌ Current Behaviour

• User submits form with invalid email →
  waits for server response → sees error
• No inline validation messages under fields
• No real-time feedback while typing

---

✅ Expected Behaviour

• Email field shows "Invalid email format"
  instantly when user blurs the field
• Password field shows "Min 8 characters"
  indicator in real-time
• Login button disabled until basic
  validation passes
• No unnecessary API calls for obviously
  invalid inputs

---

💡 Proposed Fix

In frontend/app/login/page.tsx:

1. Add email format regex check on blur
2. Show inline error message under each field
3. Disable login button if validation fails

In frontend/app/signup/page.tsx:

1. Add real-time email format validation
2. Add password strength indicator
3. Add username format check (alphanumeric,
   3-20 chars) before API call

---

📂 Files to Change

• frontend/app/login/page.tsx
• frontend/app/signup/page.tsx

---

@Shriii19
I'd like to work on this issue.
Could you please assign it to me?

nsoc26

[github-actions]

👋 Hey @Ananya-CM!

Thanks for opening this issue! 🚀

📌 NSoC'26 Contribution Guidelines

⚠️ Please follow these rules carefully:

• Do NOT create a PR until this issue is assigned to you
• Include NSoC'26 tag
• Include screenshots if it's UI-related
• Follow all contribution guidelines properly

🧑‍💻 A mentor will review and assign this issue soon.

---

🙏 Thank you for raising this issue!
We’ll review it as soon as possible. We truly appreciate your contribution ✨

📖 Meanwhile, please make sure you have checked:

• README.md
• CONTRIBUTING.md
• CODE_OF_CONDUCT.md

🚫 Reminder: Do NOT create a PR until this issue has been assigned.

Happy coding! 💻🔥