83 lines
3.9 KiB
TypeScript
83 lines
3.9 KiB
TypeScript
// Copyright (C) 2025 AIDC-AI
|
|
// Licensed under the MIT License.
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
interface ApiKeyModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSave: (apiKey: string) => void;
|
|
initialApiKey?: string;
|
|
}
|
|
|
|
export function ApiKeyModal({ isOpen, onClose, onSave, initialApiKey = '' }: ApiKeyModalProps) {
|
|
const [apiKey, setApiKey] = useState(initialApiKey);
|
|
const [showApiKey, setShowApiKey] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setApiKey(initialApiKey);
|
|
}, [initialApiKey]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 w-96 shadow-xl">
|
|
<h2 className="text-lg font-semibold mb-4">Set API Key</h2>
|
|
<div className="relative">
|
|
<input
|
|
type={showApiKey ? "text" : "password"}
|
|
value={apiKey}
|
|
onChange={(e) => setApiKey(e.target.value)}
|
|
placeholder="Enter your API key"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4 pr-10 bg-gray-50"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600 hover:text-gray-800"
|
|
onClick={() => setShowApiKey(!showApiKey)}
|
|
>
|
|
{showApiKey ? (
|
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
) : (
|
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div className="mb-4 text-sm text-gray-600">
|
|
<span>Don't have an API key? </span>
|
|
<a
|
|
href="https://form.typeform.com/to/d1AaMgIL"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-500 hover:text-blue-600 underline"
|
|
>
|
|
Click here to request one
|
|
</a>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
onSave(apiKey);
|
|
onClose();
|
|
}}
|
|
className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|