103 lines
4.5 KiB
TypeScript
103 lines
4.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { initializeSupabase, testDatabaseConnection, disconnectSupabase } from '../services/supabaseClient';
|
|
import { PlugIcon } from './icons/PlugIcon';
|
|
import { LoadingSpinner } from './LoadingSpinner';
|
|
|
|
interface SupabaseConnectorProps {
|
|
onSuccess: () => void;
|
|
}
|
|
|
|
export const SupabaseConnector: React.FC<SupabaseConnectorProps> = ({ onSuccess }) => {
|
|
const [url, setUrl] = useState('');
|
|
const [anonKey, setAnonKey] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleConnect = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
const client = initializeSupabase(url, anonKey);
|
|
if (!client) {
|
|
setError("Failed to initialize client. Check credentials.");
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
const { success, error: testError } = await testDatabaseConnection();
|
|
|
|
if (success) {
|
|
localStorage.setItem('supabaseUrl', url);
|
|
localStorage.setItem('supabaseAnonKey', anonKey);
|
|
onSuccess();
|
|
} else {
|
|
setError(testError || 'Connection failed. Please check your URL, Key, and RLS policies.');
|
|
disconnectSupabase(); // Clear the invalid client
|
|
}
|
|
|
|
setIsLoading(false);
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
|
<h3 className="text-lg font-bold text-gray-800 dark:text-white flex items-center mb-3">
|
|
<PlugIcon className="w-6 h-6 mr-2 text-brand-primary" />
|
|
Connect to Database
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
To save and view flyer history, connect to your Supabase project. This is optional.
|
|
</p>
|
|
<form onSubmit={handleConnect} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="supabase-url" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Supabase URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
id="supabase-url"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
required
|
|
className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
|
|
placeholder="https://your-project.supabase.co"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="supabase-key" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Supabase Anon Key
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="supabase-key"
|
|
value={anonKey}
|
|
onChange={(e) => setAnonKey(e.target.value)}
|
|
required
|
|
className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
|
|
placeholder="ey..."
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="w-full bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<div className="w-5 h-5 mr-2"><LoadingSpinner /></div>
|
|
Connecting...
|
|
</>
|
|
) : (
|
|
'Connect & Save'
|
|
)}
|
|
</button>
|
|
{error && (
|
|
<div className="mt-3 text-sm p-2 rounded bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300">
|
|
{error}
|
|
</div>
|
|
)}
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|