FusionAGI/frontend/src/pages/LoginPage.tsx

import { useState } from 'react'

interface LoginPageProps {
  onLogin: (token: string) => void
  error: string | null
}

export function LoginPage({ onLogin, error }: LoginPageProps) {
  const [apiKey, setApiKey] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (apiKey.trim()) onLogin(apiKey.trim())
  }

  return (
    <div className="login-page">
      <div className="login-card">
        <h1>FusionAGI</h1>
        <p className="muted">Enter your API key to connect</p>
        {error && <div className="error-banner">{error}</div>}
        <form onSubmit={handleSubmit}>
          <input
            type="password"
            placeholder="API Key (Bearer token)"
            value={apiKey}
            onChange={(e) => setApiKey(e.target.value)}
            autoFocus
          />
          <button type="submit" disabled={!apiKey.trim()}>Connect</button>
        </form>
        <p className="muted small">
          No API key? Set FUSIONAGI_API_KEY env var on the server, or leave blank for open access.
        </p>
        <button className="skip-btn" onClick={() => onLogin('')}>
          Skip (no auth)
        </button>
      </div>
    </div>
  )
}