🤨Feature: Eyebrow Call-to-Action (Email-Based Login + Invite Flow)

[flyblackbox]

Feature: Eyebrow Call-to-Action (Email-Based Login + Invite Flow)

Summary

The eyebrow provides a unified gateway to onboarding, invite requests, and login via magic email link or password option.

For unauthenticated users on all pages, maintain an eyebrow bar at the very top of the screen (above the navigation bar) containing:

• An email input field
• A single “Continue” button
• Logic that detects four possible user states and responds appropriately:
  1. Registered User — already has an account + password
  2. Never Requested Invite — new email, not in system
  3. Requested Invite (Pending Approval) — has a request but not yet approved
  4. Approved Invite (No Password Yet) — invite approved, but hasn’t completed onboarding / password creation

---

High-Level Behavior

User enters email → clicks Continue

The backend returns one of four states:

---

1. Registered User

Definition: User has a full account with a valid password and/or verified email.

Eyebrow Action:

• Show Login Options Modal:
  • Magic Link Login: “Send me a login link”
  • Password Login: Redirect to login screen with email prefilled
• Show a simple confirmation:
  “We recognize this email. Choose how you’d like to log in.”

---

2. No Invite Request Exists (Brand New Email)

Definition: No account, no invite request, not in system.

Eyebrow Action:

• Automatically submit a new invite request
• Show confirmation:
  “Your request has been received! You’ll be notified once approved.”

---

3. Invite Requested but Pending Approval

Definition: Invite request exists but hasn’t been approved.

Eyebrow Action:

• Show pending state:
  “Your invite request is still waiting for approval.”
• Do not resubmit the request.
• Allow the user to re-enter a different email if needed.

---

4. Invite Approved But Password Not Created

Definition: User was approved, but never completed onboarding.

Eyebrow Action:

• Trigger the onboarding completion flow:
  • Offer Magic Link to complete onboarding
  • Or a direct link to Create Password screen
• Messaging example:
  “Your invite is approved! Let’s finish setting up your account.”

---

Eyebrow UI Requirements

• Renders at the very top of the page, above the main nav
• Contains:
  • Email input (with validation)
  • “Continue” CTA button
• Inline feedback (success, error, pending, next steps)
• Good mobile layout (single-column stack)

---

Core Logic Flow

1. Eyebrow sends request: GET /auth/check-email?email=<email>
2. Server responds with one of:
   • registered
   • not_requested
   • requested_pending
   • approved_no_password
3. Eyebrow dispatches correct flow for that state.

---

Implementation Tasks

• Build eyebrow component above navigation
• Add email input + validation
• Add “Continue” CTA triggering /auth/check-email
• Handle all four states with appropriate UX flows
• Implement Magic Link and Password pathways
• Implement invite request API (if not already available)
• Add inline success/error/pending messages
• Hide eyebrow entirely when user is authenticated
• Add tracking events (optional)

---

Acceptance Criteria

• Eyebrow appears at top when not logged in, hidden otherwise
• Entering an email produces one of four flows with correct UI messaging:
  1. Registered User: Magic link login + password option
  2. Never Requested: Invite request created
  3. Pending Approval: Pending-state message shown
  4. Approved but No Password: Prompt onboarding completion
• All flows work on desktop + mobile
• No regressions in existing login or invite workflows

---

Test Instructions

1. Test each of the four email states manually
2. Validate error handling for invalid email and network errors
3. Test magic link delivery
4. Test password-based login flow
5. Test invite request creation + pending state messaging
6. Test approved invite onboarding flow
7. Confirm eyebrow hides when authenticated

[MrAboubakr]

Hi, could a maintainer assign this issue to me? I’ll open a PR once I fix it.