PodTui/src/tabs/Settings/LoginScreen.tsx

/**
 * Login screen component for PodTUI
 * Email/password login with links to code validation and OAuth
 */

import { createSignal } from "solid-js";
import { useAuthStore } from "@/stores/auth";
import { useTheme } from "@/context/ThemeContext";
import { AUTH_CONFIG } from "@/config/auth";

interface LoginScreenProps {
  focused?: boolean;
  onNavigateToCode?: () => void;
  onNavigateToOAuth?: () => void;
}

type FocusField = "email" | "password" | "submit" | "code" | "oauth";

export function LoginScreen(props: LoginScreenProps) {
  const auth = useAuthStore();
  const { theme } = useTheme();
  const [email, setEmail] = createSignal("");
  const [password, setPassword] = createSignal("");
  const [focusField, setFocusField] = createSignal<FocusField>("email");
  const [emailError, setEmailError] = createSignal<string | null>(null);
  const [passwordError, setPasswordError] = createSignal<string | null>(null);

  const fields: FocusField[] = ["email", "password", "submit", "code", "oauth"];

  const validateEmail = (value: string): boolean => {
    if (!value) {
      setEmailError("Email is required");
      return false;
    }
    if (!AUTH_CONFIG.email.pattern.test(value)) {
      setEmailError("Invalid email format");
      return false;
    }
    setEmailError(null);
    return true;
  };

  const validatePassword = (value: string): boolean => {
    if (!value) {
      setPasswordError("Password is required");
      return false;
    }
    if (value.length < AUTH_CONFIG.password.minLength) {
      setPasswordError(`Minimum ${AUTH_CONFIG.password.minLength} characters`);
      return false;
    }
    setPasswordError(null);
    return true;
  };

  const handleSubmit = async () => {
    const isEmailValid = validateEmail(email());
    const isPasswordValid = validatePassword(password());

    if (!isEmailValid || !isPasswordValid) {
      return;
    }

    await auth.login({ email: email(), password: password() });
  };

  const handleKeyPress = (key: { name: string; shift?: boolean }) => {
    if (key.name === "tab") {
      const currentIndex = fields.indexOf(focusField());
      const nextIndex = key.shift
        ? (currentIndex - 1 + fields.length) % fields.length
        : (currentIndex + 1) % fields.length;
      setFocusField(fields[nextIndex]);
    } else if (key.name === "return" || key.name === "enter") {
      if (focusField() === "submit") {
        handleSubmit();
      } else if (focusField() === "code" && props.onNavigateToCode) {
        props.onNavigateToCode();
      } else if (focusField() === "oauth" && props.onNavigateToOAuth) {
        props.onNavigateToOAuth();
      }
    }
  };

  return (
    <box flexDirection="column" border padding={2} gap={1}>
      <text>
        <strong>Sign In</strong>
      </text>

      <box height={1} />

      {/* Email field */}
      <box flexDirection="column" gap={0}>
        <text fg={focusField() === "email" ? theme.primary : undefined}>
          Email:
        </text>
        <input
          value={email()}
          onInput={setEmail}
          placeholder="your@email.com"
          focused={props.focused && focusField() === "email"}
          width={30}
        />
        {emailError() && <text fg={theme.error}>{emailError()}</text>}
      </box>

      {/* Password field */}
      <box flexDirection="column" gap={0}>
        <text fg={focusField() === "password" ? theme.primary : undefined}>
          Password:
        </text>
        <input
          value={password()}
          onInput={setPassword}
          placeholder="********"
          focused={props.focused && focusField() === "password"}
          width={30}
        />
        {passwordError() && <text fg={theme.error}>{passwordError()}</text>}
      </box>

      <box height={1} />

      {/* Submit button */}
      <box flexDirection="row" gap={2}>
        <box
          border
          padding={1}
          backgroundColor={
            focusField() === "submit" ? theme.primary : undefined
          }
        >
          <text fg={focusField() === "submit" ? theme.text : undefined}>
            {auth.isLoading ? "Signing in..." : "[Enter] Sign In"}
          </text>
        </box>
      </box>

      {/* Auth error message */}
      {auth.error && <text fg={theme.error}>{auth.error.message}</text>}

      <box height={1} />

      {/* Alternative auth options */}
      <text fg={theme.textMuted}>Or authenticate with:</text>

      <box flexDirection="row" gap={2}>
        <box
          border
          padding={1}
          backgroundColor={focusField() === "code" ? theme.primary : undefined}
        >
          <text fg={focusField() === "code" ? theme.accent : theme.textMuted}>
            [C] Sync Code
          </text>
        </box>

        <box
          border
          padding={1}
          backgroundColor={focusField() === "oauth" ? theme.primary : undefined}
        >
          <text fg={focusField() === "oauth" ? theme.accent : theme.textMuted}>
            [O] OAuth Info
          </text>
        </box>
      </box>

      <box height={1} />

      <text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
    </box>
  );
}