fix(ui): add missing autocomplete attributes to input fields

[Jaimin2687]

Fixes browser console warning: "An element doesn't have an autocomplete attribute"

Added name and autoComplete attributes to form input fields to:

• Enable browser autofill functionality
• Improve accessibility (WCAG 2.1 Success Criterion 1.3.5)
• Allow password managers to detect and save credentials properly
• Enhance mobile UX with better keyboard suggestions

Changes Made

• ✅ Login.tsx - email & password fields
• ✅ Signup.tsx - email, password & confirm password fields
• ✅ ResetPassword.tsx - new password & confirm password fields
• ✅ ForgotPassword.tsx - email field
• ✅ BasicDetails.tsx - name, email, phone, company & website fields

Summary by CodeRabbit

• New Features

  • Multi-step signup/onboarding with account-type selection (brand vs influencer) and improved step navigation.

• Refactor

  • Enhanced accessibility and browser autofill support across login, signup, reset, and recovery flows (standard name and autocomplete attributes).

• Improvements

  • Stronger signup validation, clearer error messages and loading feedback during account creation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds form accessibility attributes across auth/profile pages, implements a multi-step BasicDetails onboarding flow with step navigation helpers, and enhances Signup with client-side validation, Supabase-based signup checks, loading/error handling, and account-type handling.

Changes

Cohort / File(s)	Summary
Auth pages — minor accessibility/docs Frontend/src/pages/Login.tsx, Frontend/src/pages/ForgotPassword.tsx, Frontend/src/pages/ResetPassword.tsx	Added name and autoComplete attributes to email/password fields and added JSDoc/documentation blocks; no control-flow changes.
Signup — new/signup flow & form handling Frontend/src/pages/Signup.tsx	Introduces step-based UI state, account type management, handleChange, enhanced handleSubmit with password confirmation validation, Supabase existence check and sign-up flow, loading/error states, and autocomplete attributes.
BasicDetails — multi-step onboarding & accessibility Frontend/src/pages/BasicDetails.tsx	Added component documentation, nextStep/prevStep helpers controlling step progression and animation direction, and name + autoComplete attributes for influencer and brand fields (firstName, lastName, email, phone, companyName, website).

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant UI as SignupComponent
    participant Auth as AuthContext
    participant Supabase as SupabaseAPI
    participant Router as Router

    User->>UI: Submit signup form
    UI->>UI: validate passwords, set loading
    UI->>Supabase: check user existence (email)
    Supabase-->>UI: exists?/ok
    alt user exists
        UI->>UI: set error, unset loading
    else new user
        UI->>Supabase: create user / signUp
        Supabase-->>UI: success / token
        UI->>Auth: update auth state
        UI->>Router: navigate to next page / onboarding
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through fields and named each one with care,
Autocomplete crumbs tucked neatly in their lair,
Steps hop forward, then backward, a jaunty little dance,
Supabase lends a paw to give new accounts a chance,
A rabbit's cheer—forms fill faster, with flair! 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'fix(ui): add missing autocomplete attributes to input fields' directly and clearly describes the main change: adding autocomplete attributes to form inputs across multiple pages.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing touches

• 📝 Generate docstrings

---

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2bdfd34 and 0af1672.

📒 Files selected for processing (5)

• Frontend/src/pages/BasicDetails.tsx
• Frontend/src/pages/ForgotPassword.tsx
• Frontend/src/pages/Login.tsx
• Frontend/src/pages/ResetPassword.tsx
• Frontend/src/pages/Signup.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• Frontend/src/pages/ForgotPassword.tsx

🔇 Additional comments (25)

Frontend/src/pages/ResetPassword.tsx (4)

7-23: Clear component-level documentation.

---

61-70: Helpful handler docblock.

---

195-200: Proper password autofill attributes.

---

313-318: Consistent confirm-password autocomplete.

Frontend/src/pages/Login.tsx (5)

7-23: Component docblock adds useful context.

---

33-42: Submission handler docs look good.

---

69-76: OAuth handler documentation is clear.

---

140-145: Email field autocomplete set correctly.

---

169-174: Password field autocomplete set correctly.

Frontend/src/pages/Signup.tsx (7)

9-26: Signup docblock is comprehensive and useful.

---

42-47: Input change handler docs are clear.

---

53-58: Account-type handler docs look good.

---

64-72: Submission handler docblock is clear.

---

205-207: Email input autocomplete/name set correctly.

---

209-211: Password input autocomplete/name set correctly.

---

213-215: Confirm password autocomplete/name set correctly.

Frontend/src/pages/BasicDetails.tsx (9)

36-57: Well-scoped onboarding docblock.

---

65-69: nextStep docblock is clear.

---

79-83: prevStep docblock is clear.

---

107-110: First-name autocomplete looks correct.

---

117-120: Last-name autocomplete looks correct.

---

128-132: Email autocomplete/name set correctly.

---

139-143: Phone autocomplete/name set correctly.

---

268-268: Company name autocomplete set correctly.

---

272-272: Website autocomplete set correctly.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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