arebynd/promptstory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zmiany w obsłudze kluczy api i zabezpieczeń

Browse Source
This commit is contained in:
Arek Bykowski
2026-02-15 18:11:54 +01:00
parent 48b7f2b3bb
commit 78a34498d0
5 changed files with 87 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

160
App.tsx
View File

@@ -11,17 +11,12 @@ import { ChevronLeft, ExternalLink, Sparkles, User, Lock, ArrowRight, AlertCircl
import { generateStoryContent } from './services/geminiService'; import { generateStoryContent } from './services/geminiService';
import { getEnvVar } from './utils/envUtils'; import { getEnvVar } from './utils/envUtils';
const STORAGE_KEY = 'gpx-storyteller-state-v6'; // Incremented version for structure change const STORAGE_KEY = 'gpx-storyteller-state-v6';
const AUTH_KEY = 'promptstory-auth-token'; const AUTH_KEY = 'promptstory-auth-token';
// --- PASSWORD CONFIGURATION --- // --- PASSWORD CONFIGURATION ---
const ENV_PASSWORD = getEnvVar('VITE_APP_PASSWORD'); // STRICT MODE: No fallbacks. The environment variable must be set in Coolify/Vercel/Netlify.
// Fallback Hardcoded Password (Safety net) const APP_PASSWORD = getEnvVar('VITE_APP_PASSWORD');
const FALLBACK_PASS = 'Preorder$Disinfect6$Childlike$Unnamed';
// Decision Logic
const APP_PASSWORD = ENV_PASSWORD || FALLBACK_PASS;
const IS_USING_FALLBACK = !ENV_PASSWORD;
const INITIAL_STATE: WizardState = { const INITIAL_STATE: WizardState = {
step: Step.CONTEXT, step: Step.CONTEXT,
@@ -53,42 +48,44 @@ const INITIAL_STATE: WizardState = {
const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogin }) => { const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogin }) => {
const [input, setInput] = useState(''); const [input, setInput] = useState('');
const [error, setError] = useState(false); const [error, setError] = useState(false);
const [showDebug, setShowDebug] = useState(false);
// DEBUGGING: Log to console on mount // Check if password is misconfigured (empty)
useEffect(() => { const isConfigMissing = !APP_PASSWORD;
console.group("--- DEBUG PASSWORD SYSTEM ---");
console.log("1. Detected ENV Variable:", ENV_PASSWORD ? "****" : "(empty)");
console.log("2. Final Password Source:", IS_USING_FALLBACK ? "FALLBACK (Code)" : ".ENV FILE");
console.log("3. Active Password Length:", APP_PASSWORD.length);
console.groupEnd();
}, []);
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
// Trim input to avoid accidental spaces from copy-paste
if (input.trim() === APP_PASSWORD) { if (input.trim() === APP_PASSWORD) {
onLogin(true); onLogin(true);
} else { } else {
console.log(`Failed Login. Input: "${input}" vs Expected: "${APP_PASSWORD}"`);
setError(true); setError(true);
setInput(''); setInput('');
} }
}; };
if (isConfigMissing) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
<div className="bg-white p-8 rounded-xl shadow-lg border border-red-200 max-w-md w-full text-center">
<Bug className="mx-auto text-red-500 mb-4" size={48} />
<h2 className="text-xl font-bold text-gray-900">Błąd Konfiguracji</h2>
<p className="text-gray-600 mt-2 text-sm">
Aplikacja nie wykryła hasła w zmiennych środowiskowych.
</p>
<div className="mt-4 bg-gray-100 p-3 rounded text-left text-xs font-mono text-gray-700">
<p>Brakuje zmiennej: <span className="font-bold">VITE_APP_PASSWORD</span></p>
<p className="mt-2">Jeśli używasz Coolify/Vercel:</p>
<p>1. Dodaj zmienną w panelu.</p>
<p>2. Przebuduj projekt (Re-deploy).</p>
</div>
</div>
</div>
);
}
return ( return (
<div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4"> <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
<div className="bg-white p-8 rounded-xl shadow-lg border border-gray-100 max-w-md w-full text-center space-y-6 animate-fade-in relative"> <div className="bg-white p-8 rounded-xl shadow-lg border border-gray-100 max-w-md w-full text-center space-y-6 animate-fade-in relative">
{/* Debug Toggle (Hidden in corner) */}
<button
onClick={() => setShowDebug(!showDebug)}
className="absolute top-2 right-2 text-gray-200 hover:text-gray-400 p-2"
title="Pokaż informacje debugowania"
>
<Bug size={16} />
</button>
<div className="flex justify-center mb-2"> <div className="flex justify-center mb-2">
<div className="bg-[#EA4420]/10 p-4 rounded-full text-[#EA4420]"> <div className="bg-[#EA4420]/10 p-4 rounded-full text-[#EA4420]">
<Lock size={32} /> <Lock size={32} />
@@ -97,7 +94,7 @@ const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogi
<div> <div>
<h2 className="text-2xl font-bold text-gray-900">Dostęp Chroniony</h2> <h2 className="text-2xl font-bold text-gray-900">Dostęp Chroniony</h2>
<p className="text-gray-500 mt-2">Wprowadź hasło, aby uzyskać dostęp do kreatora PromptStory.</p> <p className="text-gray-500 mt-2">Wprowadź hasło, aby uzyskać dostęp.</p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
@@ -135,31 +132,8 @@ const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogi
</button> </button>
</form> </form>
{/* DEBUG PANEL */}
{showDebug && (
<div className="bg-gray-800 text-left text-green-400 p-4 rounded-md text-xs font-mono mt-4 overflow-hidden">
<p className="font-bold border-b border-gray-600 mb-2 pb-1 text-white">DEBUG STATUS:</p>
<div className="grid grid-cols-2 gap-x-4 gap-y-1 mt-2">
<span className="text-gray-400">SOURCE:</span>
<span className={IS_USING_FALLBACK ? "text-yellow-400 font-bold" : "text-green-400 font-bold"}>
{IS_USING_FALLBACK ? "FALLBACK (Code)" : ".ENV FILE"}
</span>
<span className="text-gray-400">ACTIVE PASS:</span>
<span>{APP_PASSWORD.substring(0, 4)}... (len: {APP_PASSWORD.length})</span>
</div>
{IS_USING_FALLBACK && (
<div className="mt-3 text-yellow-500 border-t border-gray-600 pt-2">
<p>System używa hasła awaryjnego zdefiniowanego w kodzie.</p>
</div>
)}
</div>
)}
<p className="text-xs text-gray-300 pt-4"> <p className="text-xs text-gray-300 pt-4">
PromptStory v1.0 • Private Instance PromptStory v1.2 • Secure Production Build
</p> </p>
</div> </div>
</div> </div>
@@ -210,19 +184,11 @@ const App: React.FC = () => {
if (saved) { if (saved) {
try { try {
const parsed = JSON.parse(saved); const parsed = JSON.parse(saved);
// Reset files because File objects cannot be serialized to local storage parsed.files = []; // Reset files
parsed.files = [];
// Ensure new fields exist if loading from old state
if (!parsed.stats) parsed.stats = { distance: '', duration: '', elevation: '' }; if (!parsed.stats) parsed.stats = { distance: '', duration: '', elevation: '' };
if (!parsed.waypoints) parsed.waypoints = []; if (!parsed.waypoints) parsed.waypoints = [];
if (!parsed.tripData) parsed.tripData = { ...INITIAL_STATE.tripData };
// Ensure tripData exists
if (!parsed.tripData) {
parsed.tripData = { ...INITIAL_STATE.tripData };
}
// Defaults for new fields if migrating
if (!parsed.tone) parsed.tone = null; if (!parsed.tone) parsed.tone = null;
if (!parsed.goal) parsed.goal = null; if (!parsed.goal) parsed.goal = null;
if (!parsed.storyStyle) parsed.storyStyle = null; if (!parsed.storyStyle) parsed.storyStyle = null;
@@ -237,13 +203,11 @@ const App: React.FC = () => {
useEffect(() => { useEffect(() => {
if (isLoaded) { if (isLoaded) {
// Exclude files from persistence to avoid quota issues and serialization errors
const stateToSave = { ...data, files: [] }; const stateToSave = { ...data, files: [] };
localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave)); localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
} }
}, [data, isLoaded]); }, [data, isLoaded]);
// UPDATED: Now supports functional updates to prevent stale state issues
const updateData = (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => { const updateData = (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => {
setData(prev => { setData(prev => {
const newValues = typeof updates === 'function' ? updates(prev) : updates; const newValues = typeof updates === 'function' ? updates(prev) : updates;
@@ -266,19 +230,23 @@ const App: React.FC = () => {
const handleGenerate = async () => { const handleGenerate = async () => {
setIsGenerating(true); setIsGenerating(true);
setErrorMessage(null); setErrorMessage(null);
try {
// SAFE ENV ACCESS
const apiKey = getEnvVar('API_KEY');
const content = await generateStoryContent(
data,
apiKey || ''
);
// STRICT MODE: Use VITE_API_KEY
const apiKey = getEnvVar('VITE_API_KEY');
if (!apiKey) {
setErrorMessage("BŁĄD KRYTYCZNY: Brak klucza API (VITE_API_KEY). Skonfiguruj zmienne w panelu Coolify.");
setIsGenerating(false);
return;
}
try {
const content = await generateStoryContent(data, apiKey);
setGeneratedContent(content); setGeneratedContent(content);
updateData({ step: Step.RESULT }); updateData({ step: Step.RESULT });
} catch (error: any) { } catch (error: any) {
console.error("Generowanie nie powiodło się:", error); console.error("Generowanie nie powiodło się:", error);
setErrorMessage("Błąd generowania. Sprawdź poprawność klucza API w pliku .env oraz połączenie z siecią. " + (error.message || '')); setErrorMessage("Błąd generowania: " + (error.message || 'Sprawdź konsolę'));
} finally { } finally {
setIsGenerating(false); setIsGenerating(false);
} }
@@ -287,15 +255,11 @@ const App: React.FC = () => {
const handleRegenerate = async (slideCount: number, feedback: string) => { const handleRegenerate = async (slideCount: number, feedback: string) => {
setIsGenerating(true); setIsGenerating(true);
setErrorMessage(null); setErrorMessage(null);
try {
// SAFE ENV ACCESS
const apiKey = getEnvVar('API_KEY');
const content = await generateStoryContent(
data,
apiKey || '',
{ slideCount, feedback }
);
const apiKey = getEnvVar('VITE_API_KEY');
try {
const content = await generateStoryContent(data, apiKey || '', { slideCount, feedback });
setGeneratedContent(content); setGeneratedContent(content);
} catch (error: any) { } catch (error: any) {
console.error("Regenerowanie nie powiodło się:", error); console.error("Regenerowanie nie powiodło się:", error);
@@ -309,24 +273,19 @@ const App: React.FC = () => {
setData({ ...INITIAL_STATE }); setData({ ...INITIAL_STATE });
setGeneratedContent(null); setGeneratedContent(null);
localStorage.removeItem(STORAGE_KEY); localStorage.removeItem(STORAGE_KEY);
// Force reload to clear any hung states
window.location.reload(); window.location.reload();
}; };
// --- RENDER LOGIC --- if (isAuthChecking || !isLoaded) return null;
if (isAuthChecking || !isLoaded) return null; // Loading state
if (!isAuthenticated) { if (!isAuthenticated) {
return <LoginScreen onLogin={handleLogin} />; return <LoginScreen onLogin={handleLogin} />;
} }
// Step Labels for Progress Bar (Order Changed)
const stepsLabels = ['Kontekst', 'Typ', 'Platforma', 'Vibe & Cel', 'Szczegóły']; const stepsLabels = ['Kontekst', 'Typ', 'Platforma', 'Vibe & Cel', 'Szczegóły'];
return ( return (
<div className="min-h-screen bg-white text-gray-900 flex flex-col font-sans"> <div className="min-h-screen bg-white text-gray-900 flex flex-col font-sans">
{/* Header */}
<header className="bg-white sticky top-0 z-10 border-b border-gray-100"> <header className="bg-white sticky top-0 z-10 border-b border-gray-100">
<div className="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center"> <div className="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
@@ -357,8 +316,6 @@ const App: React.FC = () => {
</header> </header>
<main className="max-w-4xl mx-auto px-6 py-10 flex-grow w-full"> <main className="max-w-4xl mx-auto px-6 py-10 flex-grow w-full">
{/* Progress Bar */}
{data.step !== Step.RESULT && ( {data.step !== Step.RESULT && (
<div className="mb-12"> <div className="mb-12">
<div className="flex justify-between mb-3"> <div className="flex justify-between mb-3">
@@ -377,21 +334,11 @@ const App: React.FC = () => {
</div> </div>
)} )}
{/* Dynamic Content Container */}
<div className="bg-white min-h-[400px]"> <div className="bg-white min-h-[400px]">
{/* STEP 1: CONTEXT */}
{data.step === Step.CONTEXT && <StepContext data={data} updateData={updateData} nextStep={nextStep} />} {data.step === Step.CONTEXT && <StepContext data={data} updateData={updateData} nextStep={nextStep} />}
{/* STEP 2: EVENT TYPE (Moved UP) */}
{data.step === Step.EVENT_TYPE && <StepEventType data={data} updateData={updateData} nextStep={nextStep} />} {data.step === Step.EVENT_TYPE && <StepEventType data={data} updateData={updateData} nextStep={nextStep} />}
{/* STEP 3: PLATFORM (Moved DOWN) */}
{data.step === Step.PLATFORM && <StepPlatform data={data} updateData={updateData} nextStep={nextStep} />} {data.step === Step.PLATFORM && <StepPlatform data={data} updateData={updateData} nextStep={nextStep} />}
{/* STEP 4: TONE & GOAL (NEW) */}
{data.step === Step.TONE_GOAL && <StepToneGoal data={data} updateData={updateData} nextStep={nextStep} />} {data.step === Step.TONE_GOAL && <StepToneGoal data={data} updateData={updateData} nextStep={nextStep} />}
{/* STEP 5: DETAILS */}
{data.step === Step.DETAILS && ( {data.step === Step.DETAILS && (
<StepDetails <StepDetails
data={data} data={data}
@@ -400,8 +347,6 @@ const App: React.FC = () => {
isGenerating={isGenerating} isGenerating={isGenerating}
/> />
)} )}
{/* STEP 6: RESULT */}
{data.step === Step.RESULT && generatedContent && ( {data.step === Step.RESULT && generatedContent && (
<StepResult <StepResult
content={generatedContent} content={generatedContent}
@@ -411,7 +356,6 @@ const App: React.FC = () => {
/> />
)} )}
{/* Error Message */}
{errorMessage && ( {errorMessage && (
<div className="mt-6 p-4 bg-red-50 text-red-600 rounded-md border border-red-100 text-sm text-center"> <div className="mt-6 p-4 bg-red-50 text-red-600 rounded-md border border-red-100 text-sm text-center">
{errorMessage} {errorMessage}
@@ -419,7 +363,6 @@ const App: React.FC = () => {
)} )}
</div> </div>
{/* Navigation Controls (Back Only) */}
{data.step > Step.CONTEXT && data.step < Step.RESULT && ( {data.step > Step.CONTEXT && data.step < Step.RESULT && (
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4 md:static md:bg-transparent md:border-0 md:p-0 mt-12 mb-8"> <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4 md:static md:bg-transparent md:border-0 md:p-0 mt-12 mb-8">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
@@ -436,11 +379,9 @@ const App: React.FC = () => {
)} )}
</main> </main>
{/* Footer / Author Info */}
<footer className="border-t border-gray-100 py-10 bg-gray-50/30 mt-auto"> <footer className="border-t border-gray-100 py-10 bg-gray-50/30 mt-auto">
<div className="max-w-4xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8"> <div className="max-w-4xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8">
<div className="flex items-start md:items-center gap-5"> <div className="flex items-start md:items-center gap-5">
{/* Avatar */}
<div className="relative group cursor-pointer flex-shrink-0"> <div className="relative group cursor-pointer flex-shrink-0">
<div className="absolute -inset-0.5 bg-gradient-to-r from-[#EA4420] to-orange-400 rounded-full opacity-30 group-hover:opacity-100 transition duration-500 blur"></div> <div className="absolute -inset-0.5 bg-gradient-to-r from-[#EA4420] to-orange-400 rounded-full opacity-30 group-hover:opacity-100 transition duration-500 blur"></div>
{!avatarError ? ( {!avatarError ? (
@@ -457,21 +398,14 @@ const App: React.FC = () => {
)} )}
</div> </div>
{/* Text Info */}
<div className="text-left"> <div className="text-left">
<h3 className="text-gray-900 font-bold text-xl leading-tight">Arkadiusz Bykowski</h3> <h3 className="text-gray-900 font-bold text-xl leading-tight">Arkadiusz Bykowski</h3>
<p className="text-gray-600 text-sm mt-2 leading-relaxed max-w-lg"> <p className="text-gray-600 text-sm mt-2 leading-relaxed max-w-lg">
Zamieniam Twoją stronę w maszynkę do zarabiania pieniędzy. Od 12 lat projektuję strony, które sprzedają bez Twojego udziału – póki Ty śpisz, one robią za Ciebie robotę. Specjalizuję się w landing page'ach, które budują zaufanie i zmieniają odwiedzających w płacących klientów. Zamieniam Twoją stronę w maszynkę do zarabiania pieniędzy.
</p> </p>
<div className="flex flex-wrap gap-2 mt-3">
<span className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-md">Product Design</span>
<span className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-md">AI Automation</span>
<span className="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-md">No-Code</span>
</div>
</div> </div>
</div> </div>
{/* Button */}
<a <a
href="https://bykowski.pro/" href="https://bykowski.pro/"
target="_blank" target="_blank"

63
components/StepDetails.tsx
View File

@@ -87,7 +87,6 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
// --- MAIN COMPONENT --- // --- MAIN COMPONENT ---
interface StepDetailsProps { interface StepDetailsProps {
data: WizardState; data: WizardState;
// Update Type Definition to allow functional updates
updateData: (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => void; updateData: (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => void;
onGenerate: () => void; onGenerate: () => void;
isGenerating: boolean; isGenerating: boolean;
@@ -96,41 +95,23 @@ interface StepDetailsProps {
const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate, isGenerating }) => { const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate, isGenerating }) => {
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// Specific Error State
const [mapError, setMapError] = useState<{title: string, msg: string} | null>(null); const [mapError, setMapError] = useState<{title: string, msg: string} | null>(null);
const [scriptLoaded, setScriptLoaded] = useState(false); const [scriptLoaded, setScriptLoaded] = useState(false);
// --- HARDCODED FALLBACK KEY --- // STRICT MODE: Use VITE_GOOGLE_MAPS_KEY
const AUTO_PASTE_KEY = 'AIzaSyAq9IgZswt5j7GGfH2s-ESenHmfvWFCFCg';
const getEffectiveKey = () => { const getEffectiveKey = () => {
if (data.tripData?.googleMapsKey) return data.tripData.googleMapsKey; if (data.tripData?.googleMapsKey) return data.tripData.googleMapsKey;
return getEnvVar('VITE_GOOGLE_MAPS_KEY');
const viteKey = getEnvVar('VITE_GOOGLE_MAPS_KEY');
if (viteKey) return viteKey;
const procKey = getEnvVar('GOOGLE_MAPS_KEY');
if (procKey) return procKey;
return AUTO_PASTE_KEY;
}; };
const effectiveKey = getEffectiveKey(); const effectiveKey = getEffectiveKey();
const isEnvKeyMissing = !getEnvVar('GOOGLE_MAPS_KEY') && // Warning if no key is found at all
!getEnvVar('VITE_GOOGLE_MAPS_KEY') && const isKeyMissing = !effectiveKey;
data.tripData?.googleMapsKey !== AUTO_PASTE_KEY;
// --- GOOGLE MAPS LOADING --- // --- GOOGLE MAPS LOADING ---
const loadMapsScript = (apiKey: string) => { const loadMapsScript = (apiKey: string) => {
if (!apiKey) { if (!apiKey) return;
setMapError({
title: "Brak klucza API",
msg: "System nie mógł znaleźć klucza. Skontaktuj się z administratorem."
});
return;
}
if ((window as any).google?.maps?.places) { if ((window as any).google?.maps?.places) {
setScriptLoaded(true); setScriptLoaded(true);
@@ -169,7 +150,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
useEffect(() => { useEffect(() => {
if (data.eventType === 'trip') { if (data.eventType === 'trip') {
(window as any).gm_authFailure = () => { (window as any).gm_authFailure = () => {
setMapError({ title: "Klucz odrzucony przez Google", msg: "Podany klucz jest niepoprawny." }); setMapError({ title: "Klucz odrzucony przez Google", msg: "Podany klucz jest niepoprawny lub domena nie jest autoryzowana." });
setScriptLoaded(false); setScriptLoaded(false);
}; };
if (effectiveKey) loadMapsScript(effectiveKey); if (effectiveKey) loadMapsScript(effectiveKey);
@@ -186,17 +167,12 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
endPoint: { place: '', description: '' }, endPoint: { place: '', description: '' },
stops: [{ id: crypto.randomUUID(), place: '', description: '' }], stops: [{ id: crypto.randomUUID(), place: '', description: '' }],
travelMode: null, travelMode: null,
googleMapsKey: AUTO_PASTE_KEY googleMapsKey: '' // Don't auto-fill undefined keys
} }
}); });
} }
else if (!data.tripData.googleMapsKey) {
updateData(prev => ({
tripData: { ...prev.tripData!, googleMapsKey: AUTO_PASTE_KEY }
}));
} }
} }, [data.eventType, updateData]);
}, [data.eventType, updateData]); // Removed data.tripData dependency to avoid loops, handled by logic
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const newFiles = Array.from(e.target.files || []); const newFiles = Array.from(e.target.files || []);
@@ -214,7 +190,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
updateData(prev => ({ files: prev.files.filter(f => f.id !== id) })); updateData(prev => ({ files: prev.files.filter(f => f.id !== id) }));
}; };
// --- TRIP DATA HELPERS (UPDATED TO USE FUNCTIONAL STATE UPDATES) --- // --- TRIP DATA HELPERS ---
const updateApiKey = (val: string) => { const updateApiKey = (val: string) => {
updateData(prev => ({ updateData(prev => ({
tripData: prev.tripData ? { ...prev.tripData, googleMapsKey: val } : prev.tripData tripData: prev.tripData ? { ...prev.tripData, googleMapsKey: val } : prev.tripData
@@ -299,15 +275,15 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
{data.eventType === 'trip' && data.tripData && ( {data.eventType === 'trip' && data.tripData && (
<div className="bg-gray-50 border border-gray-200 rounded-xl p-6 space-y-6"> <div className="bg-gray-50 border border-gray-200 rounded-xl p-6 space-y-6">
{/* Fallback Input */} {/* Manual Input if Env key is missing */}
{(!data.tripData.googleMapsKey && isEnvKeyMissing) && ( {isKeyMissing && !data.tripData.googleMapsKey && (
<div className="bg-yellow-50 p-4 rounded-md border border-yellow-200 mb-2"> <div className="bg-yellow-50 p-4 rounded-md border border-yellow-200 mb-2">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<AlertCircle className="text-yellow-600 mt-0.5" size={20} /> <AlertCircle className="text-yellow-600 mt-0.5" size={20} />
<div className="flex-1"> <div className="flex-1">
<h4 className="font-bold text-yellow-800 text-sm">Nie wykryto klucza w .env</h4> <h4 className="font-bold text-yellow-800 text-sm">Brak klucza w konfiguracji (VITE_GOOGLE_MAPS_KEY)</h4>
<p className="text-xs text-yellow-700 mt-1 mb-2"> <p className="text-xs text-yellow-700 mt-1 mb-2">
System automatycznie wklei klucz zapasowy. Jeśli to nie nastąpiło, wklej go poniżej. Wklej klucz ręcznie poniżej, aby mapy zadziałały.
</p> </p>
<input <input
type="text" type="text"
@@ -344,7 +320,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</div> </div>
</div> </div>
{/* BIG TRAVEL MODE SELECTOR */}
<div className="grid grid-cols-2 gap-4 w-full"> <div className="grid grid-cols-2 gap-4 w-full">
<button <button
onClick={() => setTravelMode('DRIVING')} onClick={() => setTravelMode('DRIVING')}
@@ -370,7 +345,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</button> </button>
</div> </div>
{/* Validation Message if missing */}
{!data.tripData.travelMode && ( {!data.tripData.travelMode && (
<p className="text-center text-xs text-red-500 font-bold animate-pulse"> <p className="text-center text-xs text-red-500 font-bold animate-pulse">
* Wybór rodzaju trasy jest wymagany * Wybór rodzaju trasy jest wymagany
@@ -378,8 +352,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
)} )}
<div className="space-y-4 pt-2"> <div className="space-y-4 pt-2">
{/* START POINT */}
<div className="flex gap-3 items-start"> <div className="flex gap-3 items-start">
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="relative"> <div className="relative">
@@ -404,11 +376,9 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
placeholder="Opis startu (np. Zbiórka o 6:00)" placeholder="Opis startu (np. Zbiórka o 6:00)"
/> />
</div> </div>
{/* Placeholder for alignment */}
<div className="w-[42px]"></div> <div className="w-[42px]"></div>
</div> </div>
{/* STOPS */}
{data.tripData.stops.map((stop, index) => ( {data.tripData.stops.map((stop, index) => (
<div key={stop.id} className="flex gap-3 items-start group"> <div key={stop.id} className="flex gap-3 items-start group">
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
@@ -454,7 +424,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</button> </button>
</div> </div>
{/* END POINT */}
<div className="flex gap-3 items-start"> <div className="flex gap-3 items-start">
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="relative"> <div className="relative">
@@ -479,15 +448,13 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
placeholder="Opis końca (np. Nareszcie piwo)" placeholder="Opis końca (np. Nareszcie piwo)"
/> />
</div> </div>
{/* Placeholder for alignment */}
<div className="w-[42px]"></div> <div className="w-[42px]"></div>
</div> </div>
</div> </div>
</div> </div>
)} )}
{/* STANDARDOWE POLA */} {/* Standard Fields */}
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<label className="block text-sm font-bold text-gray-700 mb-2">Tytuł wydarzenia</label> <label className="block text-sm font-bold text-gray-700 mb-2">Tytuł wydarzenia</label>
@@ -511,7 +478,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
/> />
</div> </div>
{/* File Upload */}
<div> <div>
<label className="block text-sm font-bold text-gray-700 mb-2">Materiały pomocnicze (Max 3)</label> <label className="block text-sm font-bold text-gray-700 mb-2">Materiały pomocnicze (Max 3)</label>
<div <div
@@ -535,7 +501,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
{error && <p className="text-red-500 text-sm mt-2">{error}</p>} {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
{/* File List */}
{data.files.length > 0 && ( {data.files.length > 0 && (
<div className="mt-4 grid grid-cols-1 gap-3"> <div className="mt-4 grid grid-cols-1 gap-3">
{data.files.map((file) => ( {data.files.map((file) => (

97
components/TripMap.tsx
View File

@@ -18,29 +18,17 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
const [routingError, setRoutingError] = useState<string | null>(null); const [routingError, setRoutingError] = useState<string | null>(null);
const [retryCount, setRetryCount] = useState(0); const [retryCount, setRetryCount] = useState(0);
// --- HARDCODED FALLBACK KEY --- // STRICT MODE: Use VITE_GOOGLE_MAPS_KEY
const AUTO_PASTE_KEY = 'AIzaSyAq9IgZswt5j7GGfH2s-ESenHmfvWFCFCg';
// Directly access the environment variable OR fallback to manual input OR auto-paste
const getEffectiveKey = () => { const getEffectiveKey = () => {
// 1. Check manual override // 1. Check manual override from user input
if (tripData.googleMapsKey) return tripData.googleMapsKey; if (tripData.googleMapsKey) return tripData.googleMapsKey;
// 2. Check Vite env // 2. Check Vite env
const viteKey = getEnvVar('VITE_GOOGLE_MAPS_KEY'); return getEnvVar('VITE_GOOGLE_MAPS_KEY');
if (viteKey) return viteKey;
// 3. Check Standard process.env
const procKey = getEnvVar('GOOGLE_MAPS_KEY');
if (procKey) return procKey;
// 4. Fallback
return AUTO_PASTE_KEY;
}; };
const apiKey = getEffectiveKey(); const apiKey = getEffectiveKey();
// Load script if not present (e.g. refreshed on Result page) // Load script if not present
useEffect(() => { useEffect(() => {
if ((window as any).google?.maps) { if ((window as any).google?.maps) {
setScriptLoaded(true); setScriptLoaded(true);
@@ -49,7 +37,6 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
if (!apiKey) return; if (!apiKey) return;
// Check if script exists in DOM
if (document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`)) { if (document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`)) {
const check = setInterval(() => { const check = setInterval(() => {
if ((window as any).google?.maps) { if ((window as any).google?.maps) {
@@ -68,7 +55,7 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
}, [apiKey]); }, [apiKey]);
// Calculate Route using Directions Service // Calculate Route
useEffect(() => { useEffect(() => {
if (!scriptLoaded || !tripData.startPoint.place || !tripData.endPoint.place) return; if (!scriptLoaded || !tripData.startPoint.place || !tripData.endPoint.place) return;
if (!(window as any).google) return; if (!(window as any).google) return;
@@ -79,23 +66,13 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
try { try {
const directionsService = new (window as any).google.maps.DirectionsService(); const directionsService = new (window as any).google.maps.DirectionsService();
// Prepare valid waypoints (exclude empty stops)
const waypoints = tripData.stops const waypoints = tripData.stops
.filter(s => s.place && s.place.trim().length > 2) .filter(s => s.place && s.place.trim().length > 2)
.map(s => ({ location: s.place, stopover: true })); .map(s => ({ location: s.place, stopover: true }));
// Determine Travel Mode
const gMaps = (window as any).google.maps; const gMaps = (window as any).google.maps;
const mode = tripData.travelMode === 'WALKING' ? gMaps.TravelMode.WALKING : gMaps.TravelMode.DRIVING; const mode = tripData.travelMode === 'WALKING' ? gMaps.TravelMode.WALKING : gMaps.TravelMode.DRIVING;
console.log("TripMap: Requesting route...", {
origin: tripData.startPoint.place,
dest: tripData.endPoint.place,
mode: tripData.travelMode,
waypointsCount: waypoints.length
});
const result = await new Promise<any>((resolve, reject) => { const result = await new Promise<any>((resolve, reject) => {
directionsService.route({ directionsService.route({
origin: tripData.startPoint.place, origin: tripData.startPoint.place,
@@ -106,31 +83,23 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
if (status === 'OK') { if (status === 'OK') {
resolve(response); resolve(response);
} else { } else {
console.warn("TripMap: Directions API Error", status);
reject(status); reject(status);
} }
}); });
}); });
// Extract overview polyline setEncodedPolyline(result.routes[0].overview_polyline);
const polyline = result.routes[0].overview_polyline;
setEncodedPolyline(polyline);
setImgError(false); setImgError(false);
} catch (error: any) { } catch (error: any) {
console.error("Directions Service Failed:", error); console.error("Directions Service Failed:", error);
// Specific Error Handling
if (error === 'REQUEST_DENIED') { if (error === 'REQUEST_DENIED') {
setRoutingError("API 'Directions API' nie jest włączone w Google Cloud. Mapa pokazuje linię prostą."); setRoutingError("API 'Directions API' nie jest włączone.");
} else if (error === 'ZERO_RESULTS') { } else if (error === 'ZERO_RESULTS') {
const modeName = tripData.travelMode === 'WALKING' ? 'pieszej' : 'samochodowej'; setRoutingError(`Nie znaleziono drogi pomiędzy punktami.`);
setRoutingError(`Nie znaleziono drogi ${modeName} pomiędzy tymi punktami.`);
} else { } else {
setRoutingError(`Błąd wyznaczania trasy: ${error}`); setRoutingError(`Błąd wyznaczania trasy: ${error}`);
} }
setEncodedPolyline(null);
setEncodedPolyline(null); // Fallback to straight lines
} finally { } finally {
setIsRouting(false); setIsRouting(false);
} }
@@ -140,13 +109,12 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
}, [scriptLoaded, tripData.startPoint.place, tripData.endPoint.place, tripData.stops, tripData.travelMode, retryCount]); }, [scriptLoaded, tripData.startPoint.place, tripData.endPoint.place, tripData.stops, tripData.travelMode, retryCount]);
// Construct Google Static Maps URL
const getMapUrl = () => { const getMapUrl = () => {
if (!apiKey) return null; if (!apiKey) return null;
const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap'; const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap';
const size = '600x400'; const size = '600x400';
const scale = '2'; // Retina const scale = '2';
const format = 'png'; const format = 'png';
const maptype = 'roadmap'; const maptype = 'roadmap';
@@ -155,11 +123,9 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
if (!startPlace || !endPlace) return null; if (!startPlace || !endPlace) return null;
// Markers
const startMarker = `markers=color:green|label:S|${encodeURIComponent(startPlace)}`; const startMarker = `markers=color:green|label:S|${encodeURIComponent(startPlace)}`;
const endMarker = `markers=color:red|label:F|${encodeURIComponent(endPlace)}`; const endMarker = `markers=color:red|label:F|${encodeURIComponent(endPlace)}`;
// Stop Markers
const stopMarkers = tripData.stops const stopMarkers = tripData.stops
.filter(s => s.place.trim() !== '') .filter(s => s.place.trim() !== '')
.map((s, i) => `markers=color:blue|label:${i+1}|${encodeURIComponent(s.place)}`) .map((s, i) => `markers=color:blue|label:${i+1}|${encodeURIComponent(s.place)}`)
@@ -175,15 +141,11 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
...tripData.stops.filter(s => s.place.trim() !== '').map(s => s.place), ...tripData.stops.filter(s => s.place.trim() !== '').map(s => s.place),
endPlace endPlace
].map(p => encodeURIComponent(p)).join('|'); ].map(p => encodeURIComponent(p)).join('|');
path = `path=color:0xEA4420ff|weight:5|${pathPoints}`; path = `path=color:0xEA4420ff|weight:5|${pathPoints}`;
} }
let url = `${baseUrl}?size=${size}&scale=${scale}&format=${format}&maptype=${maptype}&${startMarker}&${endMarker}&${path}&key=${apiKey}`; let url = `${baseUrl}?size=${size}&scale=${scale}&format=${format}&maptype=${maptype}&${startMarker}&${endMarker}&${path}&key=${apiKey}`;
if (stopMarkers) url += `&${stopMarkers}`;
if (stopMarkers) {
url += `&${stopMarkers}`;
}
return url; return url;
}; };
@@ -192,32 +154,28 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
const handleDownload = async () => { const handleDownload = async () => {
if (!mapContainerRef.current) return; if (!mapContainerRef.current) return;
try { try {
const canvas = await html2canvas(mapContainerRef.current, { const canvas = await html2canvas(mapContainerRef.current, {
useCORS: true, useCORS: true,
allowTaint: true, allowTaint: true,
backgroundColor: '#ffffff' backgroundColor: '#ffffff'
}); });
const link = document.createElement('a'); const link = document.createElement('a');
link.download = 'trasa-wycieczki.png'; link.download = 'trasa-wycieczki.png';
link.href = canvas.toDataURL('image/png'); link.href = canvas.toDataURL('image/png');
link.click(); link.click();
} catch (e) { } catch (e) {
console.error("Download failed", e);
alert("Nie udało się pobrać mapy."); alert("Nie udało się pobrać mapy.");
} }
}; };
// ERROR STATE 1: MISSING KEY
if (!apiKey) { if (!apiKey) {
return ( return (
<div className="bg-red-50 border border-red-200 rounded-lg p-6 flex flex-col items-center text-center"> <div className="bg-red-50 border border-red-200 rounded-lg p-6 flex flex-col items-center text-center">
<AlertTriangle className="text-red-500 mb-2" size={32} /> <AlertTriangle className="text-red-500 mb-2" size={32} />
<h3 className="text-red-800 font-bold mb-1">Brak Klucza API</h3> <h3 className="text-red-800 font-bold mb-1">Brak Klucza API</h3>
<p className="text-sm text-red-700 max-w-sm"> <p className="text-sm text-red-700 max-w-sm">
Wprowadź klucz w kroku "Szczegóły" lub dodaj go do pliku .env. Skonfiguruj zmienną VITE_GOOGLE_MAPS_KEY w panelu.
</p> </p>
</div> </div>
); );
@@ -250,18 +208,12 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
</div> </div>
</div> </div>
{/* Warning Banner for Directions API issues */}
{routingError && ( {routingError && (
<div className="bg-yellow-50 border border-yellow-200 p-3 rounded-md flex items-start gap-3"> <div className="bg-yellow-50 border border-yellow-200 p-3 rounded-md flex items-start gap-3">
<Navigation className="text-yellow-600 flex-shrink-0 mt-0.5" size={18} /> <Navigation className="text-yellow-600 flex-shrink-0 mt-0.5" size={18} />
<div className="text-xs text-yellow-800"> <div className="text-xs text-yellow-800">
<p className="font-bold">Widzisz prostą linię zamiast drogi?</p> <p className="font-bold">Info Trasy:</p>
<p>{routingError}</p> <p>{routingError}</p>
<p className="mt-1 opacity-75">
{routingError.includes("Directions API")
? <>Rozwiązanie: Wejdź w Google Cloud Console → APIs & Services → Włącz <b>"Directions API"</b>.</>
: <>Jeśli idziesz szlakiem, upewnij się, że wybrałeś tryb <b>"Pieszo"</b>.</>}
</p>
</div> </div>
</div> </div>
)} )}
@@ -270,7 +222,6 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
ref={mapContainerRef} ref={mapContainerRef}
className="bg-white p-2 border border-gray-200 rounded-xl shadow-sm overflow-hidden relative group min-h-[250px] flex items-center justify-center" className="bg-white p-2 border border-gray-200 rounded-xl shadow-sm overflow-hidden relative group min-h-[250px] flex items-center justify-center"
> >
{/* Map Image */}
{mapUrl && !imgError && !isRouting ? ( {mapUrl && !imgError && !isRouting ? (
<img <img
src={mapUrl} src={mapUrl}
@@ -284,22 +235,14 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
{isRouting ? ( {isRouting ? (
<> <>
<Loader2 size={32} className="text-[#EA4420] animate-spin mb-2" /> <Loader2 size={32} className="text-[#EA4420] animate-spin mb-2" />
<p className="text-xs font-bold text-gray-500">Rysowanie dokładnej trasy ({tripData.travelMode})...</p> <p className="text-xs font-bold text-gray-500">Rysowanie trasy...</p>
</> </>
) : imgError ? ( ) : imgError ? (
<div className="max-w-md"> <div className="max-w-md">
<div className="flex justify-center mb-2"> <div className="flex justify-center mb-2">
<ImageOff size={32} className="text-red-400" /> <ImageOff size={32} className="text-red-400" />
</div> </div>
<p className="text-sm text-red-600 font-bold mb-1">Błąd ładowania obrazka mapy (Static Maps API)</p> <p className="text-sm text-red-600 font-bold mb-1">Błąd ładowania mapy</p>
<div className="bg-red-50 p-3 rounded text-left mt-2">
<p className="text-xs text-gray-700 font-bold mb-1">Możliwe przyczyny błędu "g.co/staticmaperror":</p>
<ul className="text-[10px] text-gray-600 list-disc pl-4 space-y-1">
<li><b>Maps Static API</b> nie jest włączone w konsoli Google Cloud (To inne API niż Places/JavaScript!).</li>
<li>Brak podpiętej karty płatniczej w projekcie Google Cloud.</li>
<li>Klucz API: <b>{apiKey.slice(0,6)}...</b> jest niepoprawny lub ma restrykcje HTTP, które blokują serwer zdjęć.</li>
</ul>
</div>
</div> </div>
) : ( ) : (
<p>{tripData.startPoint.place ? 'Czekam na dane...' : 'Uzupełnij punkty trasy...'}</p> <p>{tripData.startPoint.place ? 'Czekam na dane...' : 'Uzupełnij punkty trasy...'}</p>
@@ -307,22 +250,12 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
</div> </div>
)} )}
{/* Branding Overlay */}
{!imgError && mapUrl && !isRouting && ( {!imgError && mapUrl && !isRouting && (
<div className="absolute bottom-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-md text-[10px] font-bold text-gray-500 shadow-sm"> <div className="absolute bottom-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-md text-[10px] font-bold text-gray-500 shadow-sm">
Generated by PromptStory Generated by PromptStory
</div> </div>
)} )}
</div> </div>
{/* Helper Text below map */}
<div className="text-xs text-gray-400 text-center space-y-1">
<p>
{encodedPolyline && encodedPolyline.length < 8000
? `*Trasa wyznaczona automatycznie (${tripData.travelMode === 'WALKING' ? 'szlaki/chodniki' : 'drogi'}).`
: "*Trasa uproszczona (linia prosta) - włącz Directions API lub zmień tryb."}
</p>
</div>
</div> </div>
); );
}; };

17
utils/envUtils.ts
View File

@@ -1,27 +1,28 @@
/** /**
* Safely retrieves environment variables in both Vite (browser) and Node environments. * Safely retrieves environment variables in Vite environment.
* Prevents "ReferenceError: process is not defined" crashes in production builds. * In Vite, variables must start with VITE_ to be exposed to the client.
*/ */
export const getEnvVar = (key: string): string => { export const getEnvVar = (key: string): string => {
// 1. Try Vite / Modern Browser approach (import.meta.env) // 1. Try Vite / Modern Browser approach (import.meta.env)
try { try {
// @ts-ignore // @ts-ignore
if (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env[key]) { if (typeof import.meta !== 'undefined' && import.meta.env) {
// @ts-ignore // @ts-ignore
return import.meta.env[key]; const val = import.meta.env[key];
if (val) return val;
} }
} catch (e) { } catch (e) {
// Ignore errors if import.meta is not supported // Ignore errors
} }
// 2. Try Node / Webpack / Polyfilled approach (process.env) // 2. Legacy/Fallback for some test environments
try { try {
if (typeof process !== 'undefined' && process.env && process.env[key]) { if (typeof process !== 'undefined' && process.env) {
return process.env[key] || ''; return process.env[key] || '';
} }
} catch (e) { } catch (e) {
// Ignore errors if process is not defined // Ignore
} }
return ''; return '';