frontend/components/ApiKeyInput.tsx

import { useEffect, useState } from 'react';
import { useTranslation } from 'next-i18next';

export default function ApiKeyInput() {
  const { t } = useTranslation('common');
  const [civitaiKey, setCivitaiKey] = useState('');
  const [hfToken, setHfToken] = useState('');

  useEffect(() => {
    sessionStorage.setItem('civitai_key', civitaiKey);
    sessionStorage.setItem('hf_token_manual', hfToken);
  }, [civitaiKey, hfToken]);

  return (
    <div className="space-y-2">
      <div>
        <label className="block text-sm font-medium">{t('hf_token')} ({t('leave_blank_for_oauth')})</label>
        <input type="password" value={hfToken} onChange={e => setHfToken(e.target.value)} className="mt-1 block w-full border rounded p-2" />
      </div>
      <div>
        <label className="block text-sm font-medium">{t('civitai_key')}</label>
        <input type="password" value={civitaiKey} onChange={e => setCivitaiKey(e.target.value)} className="mt-1 block w-full border rounded p-2" />
      </div>
    </div>
  );
}