@getmicdrop/svelte-components 3.1.0 → 4.0.0

package/dist/components/SuperLogin/SuperLogin.svelte

@@ -1,1282 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import { fade, slide } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import WarningIcon from "../Icons/WarningIcon.svelte";
-  import DarkModeToggle from "../DarkModeToggle.svelte";
-  import PasswordStrengthIndicator from "../PasswordStrengthIndicator/PasswordStrengthIndicator.svelte";
-  import Input from "../Input/Input.svelte";
-  import Button from "../Button/Button.svelte";
-  import Checkbox from "../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>