@getmicdrop/svelte-components 3.1.0 → 4.1.0

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -0,0 +1,1282 @@
+<script>
+  import { onMount } from "svelte";
+  import { fade, slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
+  import DarkModeToggle from "../../primitives/DarkModeToggle.svelte";
+  import PasswordStrengthIndicator from "../inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte";
+  import Input from "../../primitives/Input/Input.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+  import Checkbox from "../../primitives/Checkbox/Checkbox.svelte";
+
+  /**
+   * @typedef {Object} Account
+   * @property {string} type - Account type (e.g., 'owner', 'performer')
+   * @property {string} [organizationName] - Organization name for owner accounts
+   * @property {string} token - Auth token
+   * @property {string} firstName - User's first name
+   * @property {string} lastName - User's last name
+   * @property {string} email - User's email
+   * @property {string} dashboardUrl - URL to redirect after login
+   * @property {Object} [performerProfile] - Performer profile data
+   */
+
+  /**
+   * @typedef {Object} LoginResult
+   * @property {string} token - Auth token
+   * @property {string} [refreshToken] - Refresh token
+   * @property {string} [firstName] - User's first name
+   * @property {Account[]} [accounts] - Multiple accounts if user has more than one
+   */
+
+  let {
+    /** @type {string} Base URL for API calls (e.g., 'https://api.micdrop.com' or '' for same-origin) */
+    apiBaseUrl = "",
+    /** @type {string} Logo image source */
+    logoSrc = "",
+    /** @type {string} Logo alt text */
+    logoAlt = "Logo",
+    /** @type {'login' | 'reset' | 'login-link' | 'setup'} Initial view to show */
+    initialView = "login",
+    /** @type {boolean} Whether this is a first-time user */
+    isFirstTime = false,
+    /** @type {string} Pre-filled user email */
+    userEmail = "",
+    /** @type {string} User's first name (for welcome message) */
+    firstName = "",
+    /** @type {string} Portal type for messaging (e.g., 'performer portal', 'organization dashboard') */
+    portalType = "dashboard",
+    /** @type {string} Default redirect path after successful login */
+    defaultRedirectPath = "/",
+    /** @type {string} Default redirect path after first-time setup */
+    setupRedirectPath = "/profile",
+    /** @type {string} Terms of service URL */
+    tosUrl = "https://get-micdrop.com/tos",
+    /** @type {(result: LoginResult, rememberMe: boolean) => void} Callback when login succeeds */
+    onLoginSuccess = () => {},
+    /** @type {(account: Account, rememberMe: boolean) => void} Callback when account is selected */
+    onAccountSelect = () => {},
+    /** @type {(path: string) => void} Callback for navigation (e.g., goto) */
+    onNavigate = () => {},
+    /** @type {(url: string) => void} Callback for external navigation */
+    onExternalNavigate = (url) => { window.location.href = url; },
+    /** @type {boolean} Show dark mode toggle */
+    showDarkModeToggle = true,
+    /** @type {string} URL search params for setup detection */
+    searchParams = "",
+  } = $props();
+
+  // Parse search params
+  let parsedParams = $derived.by(() => {
+    if (typeof window === 'undefined') return { setup: null, email: null };
+    const params = new URLSearchParams(searchParams || window.location.search);
+    return {
+      setup: params.get('setup'),
+      email: params.get('email')?.replace(/ /g, '+') || null
+    };
+  });
+
+  let view = $state(initialView);
+  let accounts = $state([]);
+  let shake = $state(false);
+  let showErrors = $state(false);
+  let contentHeight = $state(undefined);
+  let isViewTransitioning = $state(false);
+  let successEmail = $state("");
+  let successType = $state("reset");
+  let isResendSuccess = $state(false);
+  let loginLinkMessage = $state("");
+  let cardVisible = $state(false);
+
+  // Remembered user state for "Welcome back" feature
+  let rememberedUser = $state(null);
+
+  // First name from eligibility check (for setup welcome message)
+  let setupFirstName = $state("");
+
+  // Trigger transition when view changes
+  let previousView = $state(initialView);
+  $effect(() => {
+    if (view !== previousView) {
+      previousView = view;
+      isViewTransitioning = true;
+      setTimeout(() => {
+        isViewTransitioning = false;
+      }, 300);
+    }
+  });
+
+  let authError = $state("");
+  let email = $state(userEmail);
+  let password = $state("");
+  let errors = $state({});
+  let isLoading = $state(false);
+  let rememberMe = $state(true);
+  // Initialize synchronously to prevent flash
+  let isCheckingEligibility = $state(parsedParams.setup === "true");
+
+  let isFormValid = $derived(email.length > 0 && password.length > 0);
+
+  // Password strength state
+  let strengthText = $state("");
+  let strengthTextColor = $state("");
+  let score = $state(-1);
+
+  let isSetupValid = $derived(score >= 2);
+
+  // Track previous values to prevent unnecessary updates
+  let prevPasswordLen = $state(0);
+  let prevScore = $state(-1);
+
+  // Show/hide error based on score (debounced from component)
+  $effect(() => {
+    const currentPasswordLen = password.length;
+    const currentScore = score;
+
+    // Only process if values actually changed
+    if (currentPasswordLen === prevPasswordLen && currentScore === prevScore) {
+      return;
+    }
+
+    prevPasswordLen = currentPasswordLen;
+    prevScore = currentScore;
+
+    if (currentPasswordLen === 0) {
+      // Clear error immediately if password is empty
+      if (errors.password) {
+        const { password: _, ...rest } = errors;
+        errors = rest;
+      }
+    } else if (currentScore !== -1 && currentScore < 2) {
+      errors = {
+        ...errors,
+        password:
+          "Password must be at least 8 characters and include at least 2 of: uppercase, lowercase, numbers, or symbols.",
+      };
+      showErrors = true;
+    } else if (currentScore >= 2) {
+      // Clear password error if it's strong enough
+      if (errors.password) {
+        const { password: _, ...rest } = errors;
+        errors = rest;
+      }
+    }
+  });
+
+  onMount(async () => {
+    applyTheme();
+
+    // Check for remembered user
+    try {
+      const stored = localStorage.getItem('rememberedUser');
+      if (stored) {
+        rememberedUser = JSON.parse(stored);
+        if (rememberedUser?.email) {
+          email = rememberedUser.email;
+        }
+      }
+    } catch (e) {
+      // Ignore parse errors
+    }
+
+    // Trigger fade-in animation after a brief delay
+    setTimeout(() => {
+      cardVisible = true;
+    }, 50);
+
+    const setupParam = parsedParams.setup;
+    let emailParam = parsedParams.email;
+
+    if (setupParam === "true" && emailParam) {
+      // isCheckingEligibility is already true from initialization
+      email = emailParam;
+      await checkEligibility(emailParam);
+      isCheckingEligibility = false;
+    } else if (isCheckingEligibility) {
+      // If setup was true but no email, turn off checking
+      isCheckingEligibility = false;
+    }
+
+    // Handle browser back/forward buttons
+    const handlePopState = () => {
+      const path = window.location.pathname;
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  });
+
+  function applyTheme() {
+    const savedTheme = localStorage.getItem("theme");
+    const container = document.querySelector(".micdrop");
+
+    if (container) {
+      if (
+        savedTheme === "dark" ||
+        (!savedTheme &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+      ) {
+        container.classList.add("dark");
+      } else {
+        container.classList.remove("dark");
+      }
+    }
+  }
+
+  $effect(() => {
+    if (typeof window !== "undefined") {
+      applyTheme();
+    }
+  });
+
+  async function checkEligibility(emailVal) {
+    isLoading = true;
+    try {
+      const response = await fetch(
+        `${apiBaseUrl}/api/public/checkIfFirstUseEligible/${encodeURIComponent(emailVal)}`,
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data.eligible) {
+          if (data.firstName) {
+            setupFirstName = data.firstName;
+          }
+          view = "setup";
+        } else {
+          errors = {
+            email: "This link is no longer valid or has already been used.",
+          };
+          showErrors = true;
+          triggerShake();
+        }
+      } else {
+        errors = { email: "Invalid or expired link." };
+        showErrors = true;
+        triggerShake();
+      }
+    } catch (e) {
+      console.error(e);
+      errors = { email: "Unable to validate link. Please try again later." };
+      showErrors = true;
+      triggerShake();
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    isLoading = true;
+    authError = "";
+    const emailValue = email;
+    const passwordValue = password;
+
+    // Enforce minimum spinner duration (1s)
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(emailValue)) {
+      errors = { email: `Invalid email address: ${emailValue}` };
+      triggerShake();
+      isLoading = false;
+      return;
+    }
+    try {
+      const response = await fetch(`${apiBaseUrl}/api/public/login`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email: emailValue.toLowerCase(),
+          password: passwordValue,
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        isLoading = false;
+        // Clear errors on success
+        errors = {};
+        showErrors = false;
+
+        if (data.accounts && data.accounts.length > 1) {
+          accounts = data.accounts;
+          view = "selection";
+          return;
+        }
+
+        // Save remembered user for "Welcome back" feature
+        if (rememberMe && data.firstName) {
+          saveRememberedUser(emailValue, data.firstName);
+        }
+
+        // Call the success callback
+        onLoginSuccess({
+          token: data.token,
+          refreshToken: data.refreshToken || data.refreshtoken,
+          firstName: data.firstName,
+          email: emailValue,
+        }, rememberMe);
+
+        onNavigate(defaultRedirectPath);
+      } else {
+        const errorData = await response.json();
+        isLoading = false;
+
+        // Check if user needs to set up password
+        if (errorData.needsSetup && errorData.email) {
+          view = "setup";
+          return;
+        }
+
+        if (response.status === 401) {
+          errors = { password: "Incorrect email or password" };
+        } else {
+          errors = {
+            password: errorData.message || "Login failed. Please try again.",
+          };
+        }
+        triggerShake();
+      }
+    } catch (error) {
+      console.error("Login Error:", error);
+      if (error.message === "Network Error" || error.name === "TypeError") {
+        errors = {
+          password: "Unable to connect. Please check your internet connection.",
+        };
+      } else {
+        errors = { password: "Incorrect email or password" };
+      }
+      triggerShake();
+      isLoading = false;
+    }
+  }
+
+  async function handleSetupSubmit() {
+    isLoading = true;
+    const emailValue = email;
+    const passwordValue = password;
+
+    try {
+      const response = await fetch(`${apiBaseUrl}/api/public/setFirstUsePassword`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify({
+          email: emailValue,
+          password: passwordValue,
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+
+        // Call the success callback
+        onLoginSuccess({
+          token: data.token,
+          refreshToken: data.refreshToken || data.refreshtoken,
+          email: emailValue,
+        }, rememberMe);
+
+        onNavigate(setupRedirectPath);
+      } else {
+        const errorData = await response.json();
+        errors = {
+          password:
+            errorData.error ||
+            "Password must be at least 8 characters and include at least 2 of: uppercase, lowercase, numbers, or symbols.",
+        };
+        showErrors = true;
+        triggerShake();
+      }
+    } catch (error) {
+      console.error("Error setting up account:", error);
+      errors = { password: "Network error. Please try again." };
+      showErrors = true;
+      triggerShake();
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  async function handleResetSubmit() {
+    isLoading = true;
+    // Enforce minimum spinner duration (1s)
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 1000));
+    const emailValue = email;
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(emailValue)) {
+      errors = { email: `Invalid email address: ${emailValue}` };
+      triggerShake();
+      isLoading = false;
+      return false;
+    }
+
+    const apiCall = fetch(`${apiBaseUrl}/api/public/resetPassword`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email: emailValue.toLowerCase() }),
+    });
+
+    try {
+      const [_, response] = await Promise.all([minDelay, apiCall]);
+      isLoading = false;
+
+      // Always show success to prevent email enumeration
+      successEmail = emailValue;
+      successType = "reset";
+      isResendSuccess = false;
+      view = "success";
+      return true;
+    } catch (error) {
+      console.error("Reset Password Error:", error);
+      // Show success even on error to prevent enumeration
+      successEmail = emailValue;
+      successType = "reset";
+      isResendSuccess = false;
+      view = "success";
+      isLoading = false;
+      return true;
+    }
+  }
+
+  async function handleLoginLinkSubmit() {
+    loginLinkMessage = "";
+    isLoading = true;
+    // Enforce minimum spinner duration (1s)
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 1000));
+    const emailValue = email;
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(emailValue)) {
+      errors = { email: `Invalid email address: ${emailValue}` };
+      triggerShake();
+      isLoading = false;
+      return false;
+    }
+
+    const apiCall = fetch(`${apiBaseUrl}/api/public/passwordlessLogin`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        email: emailValue.toLowerCase(),
+        destination: "dashboard",
+      }),
+    });
+
+    try {
+      const [_, response] = await Promise.all([minDelay, apiCall]);
+
+      isLoading = false;
+
+      // Always show success to prevent email enumeration
+      successEmail = emailValue;
+      successType = "login-link";
+      isResendSuccess = false;
+      view = "success";
+      return true;
+    } catch (error) {
+      console.error("Login Link Error:", error);
+      // Show success even on error to prevent enumeration
+      successEmail = emailValue;
+      successType = "login-link";
+      isResendSuccess = false;
+      view = "success";
+      isLoading = false;
+      return true;
+    }
+  }
+
+  async function handleResend() {
+    let success = false;
+    if (successType === "reset") {
+      success = await handleResetSubmit();
+    } else {
+      success = await handleLoginLinkSubmit();
+    }
+
+    if (success) {
+      isResendSuccess = true;
+    }
+  }
+
+  function handleTryDifferentEmail() {
+    view = successType;
+    errors = {};
+    showErrors = false;
+  }
+
+  function handleReturnToSignIn() {
+    email = "";
+    password = "";
+    errors = {};
+    showErrors = false;
+    view = "login";
+  }
+
+  function handleNotMe() {
+    localStorage.removeItem('rememberedUser');
+    rememberedUser = null;
+    email = "";
+    password = "";
+    errors = {};
+    showErrors = false;
+  }
+
+  function saveRememberedUser(emailVal, firstNameVal) {
+    try {
+      localStorage.setItem(
+        'rememberedUser',
+        JSON.stringify({ email: emailVal, firstName: firstNameVal })
+      );
+    } catch (e) {
+      // Ignore storage errors
+    }
+  }
+
+  function handleAccountSelectInternal(account) {
+    onAccountSelect(account, rememberMe);
+
+    // If it's an external URL, redirect there
+    if (account.dashboardUrl?.startsWith("http")) {
+      onExternalNavigate(account.dashboardUrl);
+      return;
+    }
+
+    // Otherwise use internal navigation
+    onNavigate(account.dashboardUrl || defaultRedirectPath);
+  }
+
+  function getAccountName(account) {
+    if (account.organizationName) {
+      return account.organizationName;
+    }
+
+    const profile = account.performerProfile || {};
+    const stageName = profile.stageName || account.stageName || "";
+    const normalizedStage = stageName?.trim() || "";
+    const useStageName = Boolean(
+      (profile.useStageName ?? account.useStageName) && normalizedStage,
+    );
+
+    if (useStageName) {
+      return normalizedStage;
+    }
+
+    const first = profile.firstName || account.firstName || account.name || "";
+    const lastName = profile.lastName || account.lastName || "";
+    return `${first} ${lastName}`.trim() || "Performer";
+  }
+
+  function triggerShake() {
+    shake = true;
+    if (!showErrors) {
+      // New error: Wait for shake to finish before showing validation
+      setTimeout(() => {
+        shake = false;
+        showErrors = true;
+      }, 625);
+    } else {
+      // Switching error: Update immediately (already showing), just shake
+      setTimeout(() => {
+        shake = false;
+      }, 625);
+    }
+  }
+</script>
+
+<div
+  class="superlogin-container min-h-screen flex items-start justify-center animated-gradient py-12 px-4 sm:px-6 lg:px-8 relative pt-32"
+>
+  <!-- Logo positioned top-left -->
+  {#if logoSrc}
+    <div class="absolute top-8 left-8">
+      <img src={logoSrc} alt={logoAlt} class="h-8 w-auto" />
+    </div>
+  {/if}
+
+  <div class="w-full flex justify-center px-4">
+    <div
+      class="login-card bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden {shake
+        ? 'shake'
+        : ''} {isViewTransitioning ? 'transition-height' : ''} {cardVisible ? 'card-visible' : 'card-hidden'}"
+      style="height: {contentHeight ? contentHeight + 'px' : 'auto'}"
+    >
+      <div class="login-card-padding" bind:clientHeight={contentHeight}>
+        {#if isCheckingEligibility}
+          <div class="flex justify-center py-12">
+            <div
+              class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"
+            ></div>
+          </div>
+        {:else if view === "login"}
+          <div in:fade={{ duration: 200 }} class="space-y-6">
+            <div class="space-y-2">
+              {#if isFirstTime}
+                <div>
+                  <h2
+                    class="text-2xl font-normal text-gray-900 dark:text-white"
+                  >
+                    Welcome{firstName ? `, ${firstName}` : ""}!
+                  </h2>
+                  <p class="text-sm text-gray-600 dark:text-gray-300 mt-2">
+                    Sign in to access your {portalType}.
+                  </p>
+                </div>
+              {:else if rememberedUser?.firstName}
+                <h2 class="text-2xl font-normal text-gray-900 dark:text-white">
+                  Welcome back, {rememberedUser.firstName}
+                </h2>
+                <button
+                  type="button"
+                  class="text-sm text-gray-500 hover:text-blue-600 transition-colors"
+                  onclick={handleNotMe}
+                >
+                  Not {rememberedUser.firstName}?
+                </button>
+              {:else}
+                <h2 class="text-2xl font-normal text-gray-900 dark:text-white">
+                  Log in
+                </h2>
+              {/if}
+            </div>
+
+            <form class="space-y-6" onsubmit={handleSubmit}>
+              <div class="form-fields-container">
+                <div>
+                  <div class="mb-2">
+                    <label
+                      for="email"
+                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                    >Email</label>
+                    {#if userEmail || rememberedUser?.email}
+                      <div
+                        class="w-full h-10 flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 px-3"
+                      >
+                        <span class="text-sm font-medium text-gray-900 dark:text-white"
+                          >{userEmail || rememberedUser?.email}</span
+                        >
+                      </div>
+                    {:else}
+                      <Input
+                        id="email"
+                        placeholder=""
+                        bind:value={email}
+                        autocomplete="username"
+                      />
+                    {/if}
+                  </div>
+                </div>
+
+                <!-- Slot 2: Email error OR Password field (when no email error) -->
+                <div class="error-slot">
+                  {#if errors.email && showErrors}
+                    <div
+                      transition:slide={{ duration: 300, easing: cubicOut }}
+                      class="flex items-center gap-1.5 text-red-500"
+                      role="alert"
+                    >
+                      <WarningIcon className="shrink-0" />
+                      <p class="text-sm font-medium">
+                        {errors.email}
+                      </p>
+                    </div>
+                  {/if}
+                </div>
+
+                <!-- Password field - slides between slot 2 and slot 3 -->
+                <div class="password-field-container">
+                  <div class="mb-2">
+                    <div class="flex justify-between items-center mb-2">
+                      <label
+                        for="password"
+                        class="block text-sm font-medium text-gray-900 dark:text-white"
+                      >Password</label>
+                      <button
+                        type="button"
+                        onclick={() => {
+                          view = "reset";
+                        }}
+                        class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
+                      >
+                        Forgot your password?
+                      </button>
+                    </div>
+                    <Input
+                      id="password"
+                      placeholder=""
+                      bind:value={password}
+                      type="password"
+                      autocomplete="current-password"
+                    />
+                  </div>
+                </div>
+
+                <!-- Slot 3/4: Password error -->
+                <div class="error-slot">
+                  {#if errors.password && showErrors}
+                    <div
+                      transition:slide={{ duration: 300, easing: cubicOut }}
+                      class="flex items-center gap-1.5 text-red-500"
+                      role="alert"
+                    >
+                      <WarningIcon className="shrink-0" />
+                      <p class="text-xs font-medium">
+                        {errors.password}
+                      </p>
+                    </div>
+                  {/if}
+                </div>
+              </div>
+
+              <div class="flex justify-between items-center">
+                <div class="flex items-center">
+                  <Checkbox
+                    bind:checked={rememberMe}
+                    id="remember-me"
+                  >Remember me on this device</Checkbox>
+                </div>
+              </div>
+
+              <div class="space-y-4">
+                <Button
+                  size="full"
+                  type="submit"
+                  loading={isLoading}
+                  disabled={!isFormValid}
+                >
+                  Log in
+                </Button>
+
+                <div class="relative">
+                  <div class="absolute inset-0 flex items-center">
+                    <div
+                      class="w-full border-t border-gray-300 dark:border-gray-600"
+                    ></div>
+                  </div>
+                  <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400"
+                      >OR</span
+                    >
+                  </div>
+                </div>
+
+                <Button
+                  variant="gray-outline"
+                  size="full"
+                  type="button"
+                  onclick={() => {
+                    view = "login-link";
+                  }}
+                >
+                  Send me a login link
+                </Button>
+              </div>
+            </form>
+          </div>
+        {:else if view === "selection"}
+          <div in:fade={{ duration: 200 }} class="space-y-6">
+            <div class="space-y-2">
+              <h2 class="text-2xl font-normal text-gray-900 dark:text-white">
+                Select account
+              </h2>
+              <p class="text-sm text-gray-600 dark:text-gray-300">
+                You have multiple accounts associated with <span
+                  class="font-medium text-gray-900 dark:text-white"
+                  >{email}</span
+                >. Select one to continue.
+              </p>
+            </div>
+
+            <div class="space-y-3">
+              {#each accounts as account}
+                <button
+                  class="w-full flex items-center p-4 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left group"
+                  onclick={() => handleAccountSelectInternal(account)}
+                >
+                  <div
+                    class="h-10 w-10 rounded-md bg-gray-200 flex-shrink-0 overflow-hidden mr-4"
+                  >
+                    {#if account.performerProfile?.profileImage}
+                      <img
+                        src={account.performerProfile.profileImage}
+                        alt=""
+                        class="h-full w-full object-cover"
+                      />
+                    {:else}
+                      <div
+                        class="h-full w-full flex items-center justify-center bg-blue-100 text-blue-600 font-medium"
+                      >
+                        {account.organizationName
+                          ? account.organizationName[0].toUpperCase()
+                          : account.firstName[0].toUpperCase()}
+                      </div>
+                    {/if}
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p
+                      class="text-sm font-medium text-gray-900 dark:text-white truncate"
+                    >
+                      {getAccountName(account)}
+                    </p>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 capitalize">
+                      {account.type}
+                    </p>
+                  </div>
+                  <div
+                    class="text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-5 w-5"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                </button>
+              {/each}
+            </div>
+
+            <div class="pt-4 border-t border-gray-300 dark:border-gray-600">
+              <button
+                type="button"
+                class="w-full text-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+                onclick={handleReturnToSignIn}
+              >
+                Log in with a different email
+              </button>
+            </div>
+          </div>
+        {:else if view === "setup"}
+          <div in:fade={{ duration: 200 }} class="space-y-6">
+            <div class="space-y-2">
+              <h2 class="text-2xl font-normal text-gray-900 dark:text-white">
+                {setupFirstName ? `Welcome, ${setupFirstName}` : "Set up your account"}
+              </h2>
+              <p class="text-sm text-gray-600 dark:text-gray-300">
+                Create a password to finish setting up your account.
+              </p>
+            </div>
+
+            <form
+              class="space-y-6"
+              onsubmit={(e) => { e.preventDefault(); handleSetupSubmit(); }}
+            >
+              <div class="space-y-5">
+                <div>
+                  <div class="mb-6">
+                    <div class="flex justify-between items-baseline mb-2">
+                      <label
+                        for="setup-password"
+                        class="block text-sm font-medium text-gray-900 dark:text-white"
+                      >Create password</label>
+                      {#if strengthText}
+                        <span
+                          class="text-xs font-medium {strengthTextColor} transition-opacity duration-300"
+                          transition:fade>{strengthText}</span
+                        >
+                      {/if}
+                    </div>
+                    <Input
+                      id="setup-password"
+                      placeholder=""
+                      bind:value={password}
+                      type="password"
+                      autocomplete="new-password"
+                    />
+                    <PasswordStrengthIndicator
+                      {password}
+                      bind:strengthText
+                      bind:textColor={strengthTextColor}
+                      bind:score
+                    >
+                      {#if errors.password && showErrors}
+                        <div
+                          transition:slide={{ duration: 600, easing: cubicOut }}
+                          class="flex items-start gap-1.5 text-red-500"
+                          role="alert"
+                        >
+                          <WarningIcon className="shrink-0 mt-1" />
+                          <p class="text-xs font-medium">
+                            {errors.password}
+                          </p>
+                        </div>
+                      {/if}
+                    </PasswordStrengthIndicator>
+                  </div>
+                </div>
+              </div>
+
+              <div class="space-y-4">
+                <Button
+                  size="full"
+                  type="submit"
+                  loading={isLoading}
+                  disabled={!isSetupValid}
+                >
+                  Complete setup
+                </Button>
+
+                <div class="text-center">
+                  <p class="text-xs text-gray-500 dark:text-gray-400">
+                    By setting up your account, you agree to Micdrop's <a
+                      href={tosUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="text-blue-600 hover:underline dark:text-blue-400">terms of service</a
+                    >.
+                  </p>
+                </div>
+              </div>
+            </form>
+          </div>
+        {:else if view === "reset"}
+          <div in:fade={{ duration: 200 }} class="space-y-6">
+            <div class="space-y-2">
+              <h2 class="text-2xl font-normal text-gray-900 dark:text-white">
+                Reset your password
+              </h2>
+              <p class="text-sm text-gray-600 dark:text-gray-300">
+                Enter the email address associated with your account and we'll
+                send you a link to reset your password.
+              </p>
+            </div>
+
+            <form
+              class="space-y-6"
+              onsubmit={(e) => { e.preventDefault(); handleResetSubmit(); }}
+            >
+              <div class="space-y-5">
+                <div>
+                  <div class="mb-6">
+                    <label
+                      for="reset-email"
+                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                    >Email</label>
+                    <Input
+                      id="reset-email"
+                      placeholder=""
+                      bind:value={email}
+                      autocomplete="username"
+                    />
+                  </div>
+                  <div class="error-slot">
+                    {#if errors.email && showErrors}
+                      <div
+                        transition:slide={{ duration: 300, easing: cubicOut }}
+                        class="flex items-center gap-1.5 text-red-500"
+                        role="alert"
+                      >
+                        <WarningIcon className="shrink-0" />
+                        <p class="text-sm font-medium">
+                          {errors.email}
+                        </p>
+                      </div>
+                    {/if}
+                  </div>
+                </div>
+              </div>
+
+              <div class="space-y-4">
+                <Button
+                  size="full"
+                  type="submit"
+                  loading={isLoading}
+                  disabled={!email}
+                >
+                  Send reset link
+                </Button>
+
+                <div class="text-center">
+                  <button
+                    type="button"
+                    onclick={handleReturnToSignIn}
+                    class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
+                  >
+                    Return to log in
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        {:else if view === "login-link"}
+          <div in:fade={{ duration: 200 }} class="space-y-6">
+            <div class="space-y-2">
+              <h2 class="text-2xl font-normal text-gray-900 dark:text-white">
+                Send a login link
+              </h2>
+              <p class="text-sm text-gray-600 dark:text-gray-300">
+                Enter the email address associated with your account and we'll
+                send you a link to sign in.
+              </p>
+            </div>
+
+            <form
+              class="space-y-6"
+              onsubmit={(e) => { e.preventDefault(); handleLoginLinkSubmit(); }}
+            >
+              <div class="space-y-5">
+                <div>
+                  <div class="mb-6">
+                    <label
+                      for="login-link-email"
+                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                    >Email</label>
+                    <Input
+                      id="login-link-email"
+                      placeholder=""
+                      bind:value={email}
+                      autocomplete="username"
+                    />
+                  </div>
+                  <div class="error-slot">
+                    {#if errors.email && showErrors}
+                      <div
+                        transition:slide={{ duration: 300, easing: cubicOut }}
+                        class="flex items-center gap-1.5 text-red-500"
+                        role="alert"
+                      >
+                        <WarningIcon className="shrink-0" />
+                        <p class="text-sm font-medium">
+                          {errors.email}
+                        </p>
+                      </div>
+                    {/if}
+                  </div>
+                </div>
+              </div>
+
+              {#if loginLinkMessage}
+                <p
+                  class="text-sm {loginLinkMessage.includes('sent') ||
+                  loginLinkMessage.includes('check your email')
+                    ? 'text-green-600 bg-green-50'
+                    : 'text-red-600 bg-red-50'} p-3 rounded-md"
+                  role="alert"
+                >
+                  {loginLinkMessage}
+                </p>
+              {/if}
+
+              <div class="space-y-4">
+                <Button
+                  size="full"
+                  type="submit"
+                  loading={isLoading}
+                  disabled={!email}
+                >
+                  Send login link
+                </Button>
+
+                <div class="text-center">
+                  <button
+                    type="button"
+                    onclick={handleReturnToSignIn}
+                    class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
+                  >
+                    Return to log in
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        {:else if view === "success"}
+          <div in:fade={{ duration: 200 }} class="space-y-6 text-center">
+            <div class="space-y-4">
+              <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+                Check your email
+              </h2>
+              {#if isResendSuccess}
+                <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-left">
+                  We've resent {successType === "reset"
+                    ? "password reset instructions"
+                    : "a login link"} to
+                  <span class="font-bold text-gray-900 dark:text-white"
+                    >{successEmail}</span
+                  > if it is an email on file.
+                </p>
+                <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-left">
+                  Please check again. If you still haven't received an email, <button
+                    type="button"
+                    class="text-blue-600 font-medium dark:text-blue-400"
+                    onclick={handleTryDifferentEmail}
+                    >try a different email</button
+                  >.
+                </p>
+              {:else}
+                <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-left">
+                  Thanks! If <span
+                    class="font-bold text-gray-900 dark:text-white"
+                    >{successEmail}</span
+                  >
+                  matches an email we have on file, then we've sent you an email
+                  containing further instructions for {successType === "reset"
+                    ? "resetting your password"
+                    : "signing in"}.
+                </p>
+                <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed text-left">
+                  If you haven't received an email in 5 minutes, check your
+                  spam, <button
+                    type="button"
+                    class="text-blue-600 font-medium dark:text-blue-400"
+                    onclick={handleResend}>resend</button
+                  >, or
+                  <button
+                    type="button"
+                    class="text-blue-600 font-medium dark:text-blue-400"
+                    onclick={handleTryDifferentEmail}
+                    >try a different email</button
+                  >.
+                </p>
+              {/if}
+            </div>
+
+            <div class="pt-2">
+              <button
+                type="button"
+                onclick={handleReturnToSignIn}
+                class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
+              >
+                Return to sign in
+              </button>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+{#if showDarkModeToggle}
+  <div class="fixed bottom-2 flex justify-center w-full">
+    <DarkModeToggle />
+  </div>
+{/if}
+
+<style>
+  .superlogin-container :global(body) {
+    background-color: #f8fafc;
+  }
+
+  .animated-gradient {
+    background: linear-gradient(
+      -45deg,
+      #c084fc,
+      #f9a8d4,
+      #93c5fd,
+      #a78bfa,
+      #f0abfc
+    );
+    background-size: 400% 400%;
+    animation: gradientShift 15s ease infinite;
+  }
+
+  @keyframes gradientShift {
+    0% {
+      background-position: 0% 0%;
+    }
+    50% {
+      background-position: 100% 100%;
+    }
+    100% {
+      background-position: 0% 0%;
+    }
+  }
+
+  .transition-height {
+    transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  }
+
+  .shake {
+    animation: shake 0.625s linear;
+  }
+
+  @keyframes shake {
+    8%,
+    41% {
+      transform: translateX(-10px);
+    }
+    25%,
+    58% {
+      transform: translateX(10px);
+    }
+    75% {
+      transform: translateX(-5px);
+    }
+    92% {
+      transform: translateX(5px);
+    }
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .form-fields-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .error-slot {
+    margin-top: 4px;
+    margin-bottom: 0;
+  }
+
+  /* Card fade-in animation */
+  .card-hidden {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  .card-visible {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+  }
+
+  /* Stripe-matching responsive card sizing */
+  /* Desktop mode - fixed 541px width */
+  .login-card {
+    width: 541px;
+  }
+
+  .login-card-padding {
+    padding: 48px;
+  }
+
+  /* Mobile breakpoint - snaps at 846px viewport width, matches Stripe */
+  @media (max-width: 846px) {
+    .login-card {
+      width: 383px;
+    }
+    .login-card-padding {
+      padding: 32px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .login-card {
+      width: 100%;
+      margin: 0 16px;
+    }
+    .login-card-padding {
+      padding: 24px;
+    }
+  }
+</style>