Art-gallery/client/src/components/CuratorLoginModal.tsx

import { useEffect, useState, type FormEvent } from 'react';
import { useTranslation } from 'react-i18next';
import './CuratorLoginModal.css';

interface Props {
  open: boolean;
  onClose: () => void;
  onLogin: (username: string, password: string) => Promise<void>;
}

export default function CuratorLoginModal({ open, onClose, onLogin }: Props) {
  const { t } = useTranslation('debug');
  const { t: tc } = useTranslation('common');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    if (!open) {
      setUsername('');
      setPassword('');
      setError(null);
      setSubmitting(false);
    }
  }, [open]);

  if (!open) return null;

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      await onLogin(username.trim(), password);
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : t('loginFailed'));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="curator-login-backdrop" onMouseDown={onClose}>
      <div
        className="curator-login-modal"
        role="dialog"
        aria-labelledby="curator-login-title"
        aria-modal="true"
        onMouseDown={(e) => e.stopPropagation()}
      >
        <h2 id="curator-login-title">{t('loginTitle')}</h2>
        <p className="curator-login-hint">
          Debug tools and catalog edits require a curator account.
        </p>
        <form onSubmit={handleSubmit}>
          <label className="curator-login-field">
            <span>{t('username')}</span>
            <input
              type="text"
              autoComplete="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              disabled={submitting}
              required
            />
          </label>
          <label className="curator-login-field">
            <span>{t('password')}</span>
            <input
              type="password"
              autoComplete="current-password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={submitting}
              required
            />
          </label>
          {error && <p className="curator-login-error">{error}</p>}
          <div className="curator-login-actions">
            <button type="button" className="curator-login-cancel" onClick={onClose} disabled={submitting}>
              {tc('cancel')}
            </button>
            <button type="submit" className="curator-login-submit" disabled={submitting}>
              {submitting ? t('saving') : t('signIn')}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}