@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/recipes/SuperLogin/SuperLogin.spec.js

@@ -0,0 +1,1436 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi, beforeEach, afterEach } from "vitest";
+import SuperLogin from "./SuperLogin.svelte";
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  constructor(callback) {
+    this.callback = callback;
+  }
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store = {};
+  return {
+    getItem: (key) => store[key] || null,
+    setItem: (key, value) => {
+      store[key] = value.toString();
+    },
+    removeItem: (key) => {
+      delete store[key];
+    },
+    clear: () => {
+      store = {};
+    },
+  };
+})();
+
+Object.defineProperty(window, "localStorage", {
+  value: localStorageMock,
+});
+
+// Mock fetch
+global.fetch = vi.fn();
+
+function setupTest(props = {}) {
+  const user = userEvent.setup();
+  const defaultProps = {
+    apiBaseUrl: "",
+    logoSrc: "",
+    logoAlt: "Logo",
+    initialView: "login",
+    isFirstTime: false,
+    userEmail: "",
+    firstName: "",
+    portalType: "dashboard",
+    defaultRedirectPath: "/",
+    setupRedirectPath: "/profile",
+    tosUrl: "https://get-micdrop.com/tos",
+    onLoginSuccess: vi.fn(),
+    onAccountSelect: vi.fn(),
+    onNavigate: vi.fn(),
+    onExternalNavigate: vi.fn(),
+    showDarkModeToggle: true,
+    searchParams: "",
+    ...props,
+  };
+  const result = render(SuperLogin, { props: defaultProps });
+  return {
+    user,
+    component: result.component,
+    container: result.container,
+    ...defaultProps,
+  };
+}
+
+describe("SuperLogin Component - Basic Rendering", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+    // Mock fetch to avoid eligibility check errors
+    global.fetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ eligible: false }),
+    });
+  });
+
+  test("renders login view by default", () => {
+    setupTest();
+    expect(screen.getByRole("heading", { name: /log in/i })).toBeInTheDocument();
+  });
+
+  test("renders logo when logoSrc is provided", () => {
+    setupTest({ logoSrc: "/logo.png", logoAlt: "Test Logo" });
+    const logo = screen.getByAltText("Test Logo");
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute("src", "/logo.png");
+  });
+
+  test("does not render logo when logoSrc is not provided", () => {
+    setupTest({ logoSrc: "" });
+    expect(screen.queryByRole("img", { name: /logo/i })).not.toBeInTheDocument();
+  });
+
+  test("shows dark mode toggle by default", () => {
+    setupTest();
+    expect(screen.getByRole("button", { name: /toggle theme/i })).toBeInTheDocument();
+  });
+
+  test("hides dark mode toggle when showDarkModeToggle is false", () => {
+    setupTest({ showDarkModeToggle: false });
+    expect(screen.queryByRole("button", { name: /toggle theme/i })).not.toBeInTheDocument();
+  });
+
+  test("renders first-time user welcome message", () => {
+    setupTest({ isFirstTime: true, firstName: "John" });
+    expect(screen.getByText(/welcome, john/i)).toBeInTheDocument();
+    expect(screen.getByText(/sign in to access your dashboard/i)).toBeInTheDocument();
+  });
+
+  test("renders remembered user welcome back message", async () => {
+    localStorageMock.setItem(
+      "rememberedUser",
+      JSON.stringify({ email: "john@example.com", firstName: "John" })
+    );
+    setupTest();
+    await waitFor(() => {
+      expect(screen.getByText(/welcome back, john/i)).toBeInTheDocument();
+    });
+  });
+});
+
+describe("SuperLogin Component - Login Form", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+    global.fetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ eligible: false }),
+    });
+  });
+
+  test("renders email and password inputs", () => {
+    setupTest();
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+  });
+
+  test("renders remember me checkbox", () => {
+    setupTest();
+    expect(screen.getByRole("checkbox", { name: /remember me on this device/i })).toBeInTheDocument();
+  });
+
+  test("remember me checkbox is checked by default", () => {
+    setupTest();
+    const checkbox = screen.getByRole("checkbox", { name: /remember me on this device/i });
+    expect(checkbox).toBeChecked();
+  });
+
+  test("renders forgot password link", () => {
+    setupTest();
+    expect(screen.getByRole("button", { name: /forgot your password/i })).toBeInTheDocument();
+  });
+
+  test("renders login button", () => {
+    setupTest();
+    expect(screen.getByRole("button", { name: /^log in$/i })).toBeInTheDocument();
+  });
+
+  test("renders send login link button", () => {
+    setupTest();
+    expect(screen.getByRole("button", { name: /send me a login link/i })).toBeInTheDocument();
+  });
+
+  test("login button is disabled when form is invalid", () => {
+    setupTest();
+    const loginButton = screen.getByRole("button", { name: /^log in$/i });
+    expect(loginButton).toBeDisabled();
+  });
+
+  test("login button is enabled when email and password are filled", async () => {
+    const { user } = setupTest();
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const loginButton = screen.getByRole("button", { name: /^log in$/i });
+    expect(loginButton).toBeEnabled();
+  });
+
+  test("pre-fills email when userEmail prop is provided", () => {
+    setupTest({ userEmail: "prefilled@example.com" });
+    expect(screen.getByText("prefilled@example.com")).toBeInTheDocument();
+  });
+
+  test("hides email input when userEmail is provided", () => {
+    setupTest({ userEmail: "prefilled@example.com" });
+    expect(screen.queryByLabelText(/email/i)).not.toBeInTheDocument();
+    expect(screen.getByText("prefilled@example.com")).toBeInTheDocument();
+  });
+
+  test("shows email input when 'Not me?' is clicked", async () => {
+    localStorageMock.setItem(
+      "rememberedUser",
+      JSON.stringify({ email: "john@example.com", firstName: "John" })
+    );
+    const { user } = setupTest();
+
+    await waitFor(() => {
+      expect(screen.getByText(/welcome back, john/i)).toBeInTheDocument();
+    });
+
+    const notMeButton = screen.getByRole("button", { name: /not john/i });
+    await user.click(notMeButton);
+
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.queryByText(/welcome back, john/i)).not.toBeInTheDocument();
+  });
+});
+
+describe("SuperLogin Component - Login Functionality", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+    global.fetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ eligible: false }),
+    });
+  });
+
+  test("validates email format on submit", async () => {
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "invalidemail");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid email address/i)).toBeInTheDocument();
+    });
+
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+
+  test("submits login request with correct credentials", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        token: "test-token",
+        refreshToken: "refresh-token",
+        firstName: "John",
+      }),
+    });
+
+    const onLoginSuccess = vi.fn();
+    const onNavigate = vi.fn();
+    const { user } = setupTest({ onLoginSuccess, onNavigate });
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/public/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: "test@example.com",
+          password: "password123",
+        }),
+      });
+    });
+
+    expect(onLoginSuccess).toHaveBeenCalledWith(
+      {
+        token: "test-token",
+        refreshToken: "refresh-token",
+        firstName: "John",
+        email: "test@example.com",
+      },
+      true
+    );
+    expect(onNavigate).toHaveBeenCalledWith("/");
+  });
+
+  test("handles login error for incorrect credentials", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: false,
+      status: 401,
+      json: async () => ({ message: "Invalid credentials" }),
+    });
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "wrongpassword");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByText(/incorrect email or password/i)).toBeInTheDocument();
+    });
+  });
+
+  test("handles network error during login", async () => {
+    global.fetch.mockRejectedValueOnce(new TypeError("Network Error"));
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByText(/unable to connect/i)).toBeInTheDocument();
+    });
+  });
+
+  test("saves remembered user when rememberMe is checked", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        token: "test-token",
+        firstName: "John",
+      }),
+    });
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      const stored = localStorageMock.getItem("rememberedUser");
+      expect(stored).toBeTruthy();
+      const parsed = JSON.parse(stored);
+      expect(parsed.email).toBe("test@example.com");
+      expect(parsed.firstName).toBe("John");
+    });
+  });
+
+  test("does not save remembered user when rememberMe is unchecked", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        token: "test-token",
+        firstName: "John",
+      }),
+    });
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+    const rememberMeCheckbox = screen.getByRole("checkbox", { name: /remember me/i });
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+    await user.click(rememberMeCheckbox);
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalled();
+    });
+
+    const stored = localStorageMock.getItem("rememberedUser");
+    expect(stored).toBeNull();
+  });
+});
+
+describe("SuperLogin Component - Account Selection", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test("shows account selection when multiple accounts are returned", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        accounts: [
+          {
+            type: "owner",
+            organizationName: "Test Org",
+            token: "token1",
+            firstName: "John",
+            lastName: "Doe",
+            email: "test@example.com",
+            dashboardUrl: "/org-dashboard",
+          },
+          {
+            type: "performer",
+            token: "token2",
+            firstName: "John",
+            lastName: "Doe",
+            email: "test@example.com",
+            dashboardUrl: "/performer-dashboard",
+            performerProfile: {
+              stageName: "DJ Johnny",
+              useStageName: true,
+            },
+          },
+        ],
+      }),
+    });
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /select account/i })).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Test Org")).toBeInTheDocument();
+    expect(screen.getByText("DJ Johnny")).toBeInTheDocument();
+  });
+
+  test.skip("calls onAccountSelect when account is selected", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        accounts: [
+          {
+            type: "owner",
+            organizationName: "Test Org",
+            token: "token1",
+            firstName: "John",
+            lastName: "Doe",
+            email: "test@example.com",
+            dashboardUrl: "/org-dashboard",
+          },
+        ],
+      }),
+    });
+
+    const onAccountSelect = vi.fn();
+    const onNavigate = vi.fn();
+    const { user } = setupTest({ onAccountSelect, onNavigate });
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByText("Test Org")).toBeInTheDocument();
+    });
+
+    const accountButton = screen.getByText("Test Org").closest("button");
+    await user.click(accountButton);
+
+    expect(onAccountSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "owner",
+        organizationName: "Test Org",
+      }),
+      true
+    );
+    expect(onNavigate).toHaveBeenCalledWith("/org-dashboard");
+  });
+
+  test.skip("handles external dashboard URLs correctly", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        accounts: [
+          {
+            type: "owner",
+            organizationName: "Test Org",
+            token: "token1",
+            firstName: "John",
+            lastName: "Doe",
+            email: "test@example.com",
+            dashboardUrl: "https://external.example.com/dashboard",
+          },
+        ],
+      }),
+    });
+
+    const onAccountSelect = vi.fn();
+    const onExternalNavigate = vi.fn();
+    const { user } = setupTest({ onAccountSelect, onExternalNavigate });
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByText("Test Org")).toBeInTheDocument();
+    });
+
+    const accountButton = screen.getByText("Test Org").closest("button");
+    await user.click(accountButton);
+
+    expect(onExternalNavigate).toHaveBeenCalledWith("https://external.example.com/dashboard");
+  });
+
+  test.skip("allows returning to login from account selection", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        accounts: [
+          {
+            type: "owner",
+            organizationName: "Test Org",
+            token: "token1",
+            firstName: "John",
+            lastName: "Doe",
+            email: "test@example.com",
+            dashboardUrl: "/org-dashboard",
+          },
+        ],
+      }),
+    });
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByText(/select account/i)).toBeInTheDocument();
+    });
+
+    const returnButton = screen.getByRole("button", { name: /log in with a different email/i });
+    await user.click(returnButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /log in/i })).toBeInTheDocument();
+    });
+  });
+});
+
+describe("SuperLogin Component - Password Reset", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test("navigates to reset view when forgot password is clicked", async () => {
+    const { user } = setupTest();
+
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+  });
+
+  test("validates email format in reset view", async () => {
+    const { user } = setupTest();
+
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "invalidemail");
+
+    const submitButton = screen.getByRole("button", { name: /send reset link/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid email address/i)).toBeInTheDocument();
+    });
+  });
+
+  test("submits reset password request", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({}),
+    });
+
+    const { user } = setupTest();
+
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /send reset link/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/public/resetPassword", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: "test@example.com" }),
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    });
+  });
+
+  test("shows success message even on reset password error (prevents enumeration)", async () => {
+    global.fetch.mockRejectedValueOnce(new Error("Network error"));
+
+    const { user } = setupTest();
+
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /send reset link/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    });
+  });
+
+  test("allows returning to login from reset view", async () => {
+    const { user } = setupTest();
+
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const returnButton = screen.getByRole("button", { name: /return to log in/i });
+    await user.click(returnButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /log in/i })).toBeInTheDocument();
+    });
+  });
+});
+
+describe("SuperLogin Component - Login Link", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test("navigates to login link view", async () => {
+    const { user } = setupTest();
+
+    const loginLinkButton = screen.getByRole("button", { name: /send me a login link/i });
+    await user.click(loginLinkButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /send a login link/i })).toBeInTheDocument();
+    });
+  });
+
+  test("validates email format in login link view", async () => {
+    const { user } = setupTest();
+
+    const loginLinkButton = screen.getByRole("button", { name: /send me a login link/i });
+    await user.click(loginLinkButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /send a login link/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "invalidemail");
+
+    const submitButton = screen.getByRole("button", { name: /^send login link$/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid email address/i)).toBeInTheDocument();
+    });
+  });
+
+  test("submits login link request", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({}),
+    });
+
+    const { user } = setupTest();
+
+    const loginLinkButton = screen.getByRole("button", { name: /send me a login link/i });
+    await user.click(loginLinkButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /send a login link/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /^send login link$/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/public/passwordlessLogin", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: "test@example.com", destination: "dashboard" }),
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    });
+  });
+
+  test("shows success message even on login link error (prevents enumeration)", async () => {
+    global.fetch.mockRejectedValueOnce(new Error("Network error"));
+
+    const { user } = setupTest();
+
+    const loginLinkButton = screen.getByRole("button", { name: /send me a login link/i });
+    await user.click(loginLinkButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /send a login link/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /^send login link$/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    });
+  });
+});
+
+describe("SuperLogin Component - Setup/First Use", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test("checks eligibility on mount with setup param", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        eligible: true,
+        firstName: "John",
+      }),
+    });
+
+    // Mock window.location.search
+    delete window.location;
+    window.location = { search: "?setup=true&email=test@example.com" };
+
+    setupTest({ searchParams: "?setup=true&email=test@example.com" });
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "/api/public/checkIfFirstUseEligible/test%40example.com"
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /welcome, john/i })).toBeInTheDocument();
+    });
+  });
+
+  test("shows error when eligibility check fails", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        eligible: false,
+      }),
+    });
+
+    delete window.location;
+    window.location = { search: "?setup=true&email=test@example.com" };
+
+    setupTest({ searchParams: "?setup=true&email=test@example.com" });
+
+    await waitFor(() => {
+      expect(screen.getByText(/this link is no longer valid/i)).toBeInTheDocument();
+    });
+  });
+
+  test.skip("renders setup view with password strength indicator", async () => {
+    setupTest({ initialView: "setup", email: "test@example.com" });
+
+    expect(screen.getByRole("heading", { name: /set up your account/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/create password/i)).toBeInTheDocument();
+  });
+
+  test.skip("complete setup button is disabled when password is weak", async () => {
+    setupTest({ initialView: "setup" });
+
+    const submitButton = screen.getByRole("button", { name: /complete setup/i });
+    expect(submitButton).toBeDisabled();
+  });
+
+  test.skip("submits setup request with valid password", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        token: "test-token",
+        refreshToken: "refresh-token",
+      }),
+    });
+
+    const onLoginSuccess = vi.fn();
+    const onNavigate = vi.fn();
+    const { user } = setupTest({
+      initialView: "setup",
+      email: "test@example.com",
+      onLoginSuccess,
+      onNavigate,
+    });
+
+    const passwordInput = screen.getByLabelText(/create password/i);
+    await user.type(passwordInput, "StrongPass123!");
+
+    // Wait for password strength to update
+    await waitFor(() => {
+      const submitButton = screen.getByRole("button", { name: /complete setup/i });
+      expect(submitButton).toBeEnabled();
+    });
+
+    const form = screen.getByRole("button", { name: /complete setup/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/public/setFirstUsePassword", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({
+          email: "test@example.com",
+          password: "StrongPass123!",
+        }),
+      });
+    });
+
+    expect(onLoginSuccess).toHaveBeenCalled();
+    expect(onNavigate).toHaveBeenCalledWith("/profile");
+  });
+
+  test.skip("shows terms of service link in setup view", () => {
+    setupTest({ initialView: "setup", tosUrl: "https://example.com/tos" });
+
+    const tosLink = screen.getByRole("link", { name: /terms of service/i });
+    expect(tosLink).toBeInTheDocument();
+    expect(tosLink).toHaveAttribute("href", "https://example.com/tos");
+    expect(tosLink).toHaveAttribute("target", "_blank");
+  });
+
+  test.skip("handles setup password error", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({
+        error: "Password does not meet requirements",
+      }),
+    });
+
+    const { user } = setupTest({ initialView: "setup", email: "test@example.com" });
+
+    const passwordInput = screen.getByLabelText(/create password/i);
+    await user.type(passwordInput, "StrongPass123!");
+
+    await waitFor(() => {
+      const submitButton = screen.getByRole("button", { name: /complete setup/i });
+      expect(submitButton).toBeEnabled();
+    });
+
+    const form = screen.getByRole("button", { name: /complete setup/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByText(/password does not meet requirements/i)).toBeInTheDocument();
+    });
+  });
+});
+
+describe("SuperLogin Component - Success View", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test.skip("shows success message after password reset", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({}),
+    });
+
+    const { user } = setupTest();
+
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /send reset link/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+      expect(screen.getByText(/resetting your password/i)).toBeInTheDocument();
+    });
+  });
+
+  test.skip("shows success message after login link", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({}),
+    });
+
+    const { user } = setupTest();
+
+    const loginLinkButton = screen.getByRole("button", { name: /send me a login link/i });
+    await user.click(loginLinkButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /send a login link/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /^send login link$/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+      expect(screen.getByText(/signing in/i)).toBeInTheDocument();
+    });
+  });
+
+  test.skip("allows resending reset email", async () => {
+    global.fetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({}),
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({}),
+      });
+
+    const { user } = setupTest();
+
+    // Navigate to reset view
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /send reset link/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    });
+
+    // Click resend
+    const resendButton = screen.getByRole("button", { name: /resend/i });
+    await user.click(resendButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/we've resent/i)).toBeInTheDocument();
+    });
+
+    expect(global.fetch).toHaveBeenCalledTimes(2);
+  });
+
+  test.skip("allows trying different email from success view", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({}),
+    });
+
+    const { user } = setupTest();
+
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /send reset link/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    });
+
+    const tryDifferentButton = screen.getByRole("button", { name: /try a different email/i });
+    await user.click(tryDifferentButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+  });
+
+  test.skip("allows returning to sign in from success view", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({}),
+    });
+
+    const { user } = setupTest();
+
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /send reset link/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    });
+
+    const returnButton = screen.getByRole("button", { name: /return to sign in/i });
+    await user.click(returnButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /log in/i })).toBeInTheDocument();
+    });
+  });
+});
+
+describe("SuperLogin Component - Error Handling", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test.skip("shows shake animation on validation error", async () => {
+    const { user, container } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "invalidemail");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      const card = container.querySelector(".login-card");
+      expect(card).toHaveClass("shake");
+    });
+  });
+
+  test.skip("clears errors when returning to login", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: false,
+      status: 401,
+      json: async () => ({ message: "Invalid credentials" }),
+    });
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "wrongpassword");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByText(/incorrect email or password/i)).toBeInTheDocument();
+    });
+
+    // Navigate away and back
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const returnButton = screen.getByRole("button", { name: /return to log in/i });
+    await user.click(returnButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText(/incorrect email or password/i)).not.toBeInTheDocument();
+    });
+  });
+
+  test.skip("handles needsSetup response from login", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({
+        needsSetup: true,
+        email: "test@example.com",
+      }),
+    });
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /set up your account/i })).toBeInTheDocument();
+    });
+  });
+});
+
+describe("SuperLogin Component - Accessibility", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test.skip("email input has correct autocomplete attribute", () => {
+    setupTest();
+    const emailInput = screen.getByLabelText("Email");
+    expect(emailInput).toHaveAttribute("autocomplete", "username");
+  });
+
+  test.skip("password input has correct autocomplete attribute", () => {
+    setupTest();
+    const passwordInput = screen.getByLabelText("Password");
+    expect(passwordInput).toHaveAttribute("autocomplete", "current-password");
+  });
+
+  test.skip("setup password input has correct autocomplete attribute", () => {
+    setupTest({ initialView: "setup" });
+    const passwordInput = screen.getByLabelText(/create password/i);
+    expect(passwordInput).toHaveAttribute("autocomplete", "new-password");
+  });
+
+  test.skip("error messages have role=alert", async () => {
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "invalidemail");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      const errorAlert = screen.getByRole("alert");
+      expect(errorAlert).toBeInTheDocument();
+    });
+  });
+
+  test.skip("form inputs are properly labeled", () => {
+    setupTest();
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+  });
+
+  test.skip("buttons have descriptive text", () => {
+    setupTest();
+    expect(screen.getByRole("button", { name: /^log in$/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /send me a login link/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /forgot your password/i })).toBeInTheDocument();
+  });
+});
+
+describe("SuperLogin Component - Theme Management", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test("applies dark mode class based on localStorage", () => {
+    localStorageMock.setItem("theme", "dark");
+    const { container } = setupTest();
+
+    // Component applies theme to .micdrop container
+    const micdropContainer = container.querySelector(".micdrop");
+    if (micdropContainer) {
+      expect(micdropContainer).toHaveClass("dark");
+    }
+  });
+
+  test("applies dark mode class based on system preference when no saved theme", () => {
+    // matchMedia is mocked in vitest-setup.js to return matches: false
+    const { container } = setupTest();
+
+    const micdropContainer = container.querySelector(".micdrop");
+    if (micdropContainer) {
+      expect(micdropContainer).not.toHaveClass("dark");
+    }
+  });
+});
+
+describe("SuperLogin Component - Email Normalization", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test.skip("converts email to lowercase on login", async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        token: "test-token",
+      }),
+    });
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "Test@EXAMPLE.COM");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    await fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "/api/public/login",
+        expect.objectContaining({
+          body: JSON.stringify({
+            email: "test@example.com",
+            password: "password123",
+          }),
+        })
+      );
+    });
+  });
+
+  test("handles email with + sign in URL params", () => {
+    delete window.location;
+    window.location = { search: "?email=test%2Bplus@example.com" };
+
+    setupTest({ searchParams: "?email=test%2Bplus@example.com" });
+
+    // Component should handle + sign correctly
+    expect(screen.getByRole("heading")).toBeInTheDocument();
+  });
+});
+
+describe("SuperLogin Component - Loading States", () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+    global.fetch.mockClear();
+  });
+
+  test("shows loading state during login", async () => {
+    global.fetch.mockImplementation(
+      () =>
+        new Promise((resolve) =>
+          setTimeout(
+            () =>
+              resolve({
+                ok: true,
+                json: async () => ({ token: "test-token" }),
+              }),
+            100
+          )
+        )
+    );
+
+    const { user } = setupTest();
+
+    const emailInput = screen.getByLabelText("Email");
+    const passwordInput = screen.getByLabelText("Password");
+
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
+
+    const form = screen.getByRole("button", { name: /^log in$/i }).closest("form");
+    fireEvent.submit(form);
+
+    // Button should show loading state
+    await waitFor(() => {
+      const loginButton = screen.getByRole("button", { name: /^log in$/i });
+      expect(loginButton).toBeDisabled();
+    });
+  });
+
+  test("shows loading spinner during eligibility check", () => {
+    global.fetch.mockImplementation(
+      () =>
+        new Promise((resolve) =>
+          setTimeout(
+            () =>
+              resolve({
+                ok: true,
+                json: async () => ({ eligible: true }),
+              }),
+            100
+          )
+        )
+    );
+
+    delete window.location;
+    window.location = { search: "?setup=true&email=test@example.com" };
+
+    const { container } = setupTest({ searchParams: "?setup=true&email=test@example.com" });
+
+    // Should show loading spinner
+    const spinner = container.querySelector(".animate-spin");
+    expect(spinner).toBeInTheDocument();
+  });
+
+  test.skip("enforces minimum delay for password reset (prevents timing attacks)", async () => {
+    const startTime = Date.now();
+
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({}),
+    });
+
+    const { user } = setupTest();
+
+    const forgotPasswordButton = screen.getByRole("button", { name: /forgot your password/i });
+    await user.click(forgotPasswordButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /reset your password/i })).toBeInTheDocument();
+    });
+
+    const emailInput = screen.getByLabelText("Email");
+    await user.type(emailInput, "test@example.com");
+
+    const submitButton = screen.getByRole("button", { name: /send reset link/i });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/check your email/i)).toBeInTheDocument();
+    });
+
+    const endTime = Date.now();
+    const elapsed = endTime - startTime;
+
+    // Should take at least 1000ms due to minimum delay
+    expect(elapsed).toBeGreaterThanOrEqual(900); // Small buffer for timing
+  });
+});