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.

164
App.tsx
View File

@@ -11,17 +11,12 @@ import { ChevronLeft, ExternalLink, Sparkles, User, Lock, ArrowRight, AlertCircl
import { generateStoryContent } from './services/geminiService';
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';
// --- PASSWORD CONFIGURATION ---
const ENV_PASSWORD = getEnvVar('VITE_APP_PASSWORD');
// Fallback Hardcoded Password (Safety net)
const FALLBACK_PASS = 'Preorder$Disinfect6$Childlike$Unnamed';
// Decision Logic
const APP_PASSWORD = ENV_PASSWORD || FALLBACK_PASS;
const IS_USING_FALLBACK = !ENV_PASSWORD;
// STRICT MODE: No fallbacks. The environment variable must be set in Coolify/Vercel/Netlify.
const APP_PASSWORD = getEnvVar('VITE_APP_PASSWORD');
const INITIAL_STATE: WizardState = {
step: Step.CONTEXT,
@@ -53,42 +48,44 @@ const INITIAL_STATE: WizardState = {
const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogin }) => {
const [input, setInput] = useState('');
const [error, setError] = useState(false);
const [showDebug, setShowDebug] = useState(false);
// DEBUGGING: Log to console on mount
useEffect(() => {
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();
}, []);
// Check if password is misconfigured (empty)
const isConfigMissing = !APP_PASSWORD;
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Trim input to avoid accidental spaces from copy-paste
if (input.trim() === APP_PASSWORD) {
onLogin(true);
} else {
console.log(`Failed Login. Input: "${input}" vs Expected: "${APP_PASSWORD}"`);
setError(true);
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 (
<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">
{/* 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="bg-[#EA4420]/10 p-4 rounded-full text-[#EA4420]">
<Lock size={32} />
@@ -97,7 +94,7 @@ const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogi
<div>
<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>
<form onSubmit={handleSubmit} className="space-y-4">
@@ -134,32 +131,9 @@ const LoginScreen: React.FC<{ onLogin: (success: boolean) => void }> = ({ onLogi
<ArrowRight size={20} />
</button>
</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">
PromptStory v1.0 • Private Instance
PromptStory v1.2 • Secure Production Build
</p>
</div>
</div>
@@ -210,19 +184,11 @@ const App: React.FC = () => {
if (saved) {
try {
const parsed = JSON.parse(saved);
// Reset files because File objects cannot be serialized to local storage
parsed.files = [];
parsed.files = []; // Reset files
// Ensure new fields exist if loading from old state
if (!parsed.stats) parsed.stats = { distance: '', duration: '', elevation: '' };
if (!parsed.waypoints) parsed.waypoints = [];
// Ensure tripData exists
if (!parsed.tripData) {
parsed.tripData = { ...INITIAL_STATE.tripData };
}
// Defaults for new fields if migrating
if (!parsed.tripData) parsed.tripData = { ...INITIAL_STATE.tripData };
if (!parsed.tone) parsed.tone = null;
if (!parsed.goal) parsed.goal = null;
if (!parsed.storyStyle) parsed.storyStyle = null;
@@ -237,13 +203,11 @@ const App: React.FC = () => {
useEffect(() => {
if (isLoaded) {
// Exclude files from persistence to avoid quota issues and serialization errors
const stateToSave = { ...data, files: [] };
localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
}
}, [data, isLoaded]);
// UPDATED: Now supports functional updates to prevent stale state issues
const updateData = (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => {
setData(prev => {
const newValues = typeof updates === 'function' ? updates(prev) : updates;
@@ -266,19 +230,23 @@ const App: React.FC = () => {
const handleGenerate = async () => {
setIsGenerating(true);
setErrorMessage(null);
// 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 {
// SAFE ENV ACCESS
const apiKey = getEnvVar('API_KEY');
const content = await generateStoryContent(
data,
apiKey || ''
);
const content = await generateStoryContent(data, apiKey);
setGeneratedContent(content);
updateData({ step: Step.RESULT });
} catch (error: any) {
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 {
setIsGenerating(false);
}
@@ -287,15 +255,11 @@ const App: React.FC = () => {
const handleRegenerate = async (slideCount: number, feedback: string) => {
setIsGenerating(true);
setErrorMessage(null);
const apiKey = getEnvVar('VITE_API_KEY');
try {
// SAFE ENV ACCESS
const apiKey = getEnvVar('API_KEY');
const content = await generateStoryContent(
data,
apiKey || '',
{ slideCount, feedback }
);
const content = await generateStoryContent(data, apiKey || '', { slideCount, feedback });
setGeneratedContent(content);
} catch (error: any) {
console.error("Regenerowanie nie powiodło się:", error);
@@ -309,24 +273,19 @@ const App: React.FC = () => {
setData({ ...INITIAL_STATE });
setGeneratedContent(null);
localStorage.removeItem(STORAGE_KEY);
// Force reload to clear any hung states
window.location.reload();
};
// --- RENDER LOGIC ---
if (isAuthChecking || !isLoaded) return null; // Loading state
if (isAuthChecking || !isLoaded) return null;
if (!isAuthenticated) {
return <LoginScreen onLogin={handleLogin} />;
}
// Step Labels for Progress Bar (Order Changed)
const stepsLabels = ['Kontekst', 'Typ', 'Platforma', 'Vibe & Cel', 'Szczegóły'];
return (
<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">
<div className="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center">
<div className="flex items-center space-x-3">
@@ -357,8 +316,6 @@ const App: React.FC = () => {
</header>
<main className="max-w-4xl mx-auto px-6 py-10 flex-grow w-full">
{/* Progress Bar */}
{data.step !== Step.RESULT && (
<div className="mb-12">
<div className="flex justify-between mb-3">
@@ -377,21 +334,11 @@ const App: React.FC = () => {
</div>
)}
{/* Dynamic Content Container */}
<div className="bg-white min-h-[400px]">
{/* STEP 1: CONTEXT */}
{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} />}
{/* STEP 3: PLATFORM (Moved DOWN) */}
{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} />}
{/* STEP 5: DETAILS */}
{data.step === Step.DETAILS && (
<StepDetails
data={data}
@@ -400,8 +347,6 @@ const App: React.FC = () => {
isGenerating={isGenerating}
/>
)}
{/* STEP 6: RESULT */}
{data.step === Step.RESULT && generatedContent && (
<StepResult
content={generatedContent}
@@ -411,7 +356,6 @@ const App: React.FC = () => {
/>
)}
{/* Error Message */}
{errorMessage && (
<div className="mt-6 p-4 bg-red-50 text-red-600 rounded-md border border-red-100 text-sm text-center">
{errorMessage}
@@ -419,7 +363,6 @@ const App: React.FC = () => {
)}
</div>
{/* Navigation Controls (Back Only) */}
{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="max-w-4xl mx-auto">
@@ -436,11 +379,9 @@ const App: React.FC = () => {
)}
</main>
{/* Footer / Author Info */}
<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="flex items-start md:items-center gap-5">
{/* Avatar */}
<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>
{!avatarError ? (
@@ -457,21 +398,14 @@ const App: React.FC = () => {
)}
</div>
{/* Text Info */}
<div className="text-left">
<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">
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>
<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>
{/* Button */}
<a
href="https://bykowski.pro/"
target="_blank"

63
components/StepDetails.tsx
View File

@@ -87,7 +87,6 @@ const PlaceAutocompleteInput: React.FC<PlaceAutocompleteInputProps> = ({ value,
// --- MAIN COMPONENT ---
interface StepDetailsProps {
data: WizardState;
// Update Type Definition to allow functional updates
updateData: (updates: Partial<WizardState> | ((prev: WizardState) => Partial<WizardState>)) => void;
onGenerate: () => void;
isGenerating: boolean;
@@ -96,41 +95,23 @@ interface StepDetailsProps {
const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate, isGenerating }) => {
const fileInputRef = useRef<HTMLInputElement>(null);
const [error, setError] = useState<string | null>(null);
// Specific Error State
const [mapError, setMapError] = useState<{title: string, msg: string} | null>(null);
const [scriptLoaded, setScriptLoaded] = useState(false);
// --- HARDCODED FALLBACK KEY ---
const AUTO_PASTE_KEY = 'AIzaSyAq9IgZswt5j7GGfH2s-ESenHmfvWFCFCg';
// STRICT MODE: Use VITE_GOOGLE_MAPS_KEY
const getEffectiveKey = () => {
if (data.tripData?.googleMapsKey) return data.tripData.googleMapsKey;
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;
return getEnvVar('VITE_GOOGLE_MAPS_KEY');
};
const effectiveKey = getEffectiveKey();
const isEnvKeyMissing = !getEnvVar('GOOGLE_MAPS_KEY') &&
!getEnvVar('VITE_GOOGLE_MAPS_KEY') &&
data.tripData?.googleMapsKey !== AUTO_PASTE_KEY;
// Warning if no key is found at all
const isKeyMissing = !effectiveKey;
// --- GOOGLE MAPS LOADING ---
const loadMapsScript = (apiKey: string) => {
if (!apiKey) {
setMapError({
title: "Brak klucza API",
msg: "System nie mógł znaleźć klucza. Skontaktuj się z administratorem."
});
return;
}
if (!apiKey) return;
if ((window as any).google?.maps?.places) {
setScriptLoaded(true);
@@ -169,7 +150,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
useEffect(() => {
if (data.eventType === 'trip') {
(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);
};
if (effectiveKey) loadMapsScript(effectiveKey);
@@ -186,17 +167,12 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
endPoint: { place: '', description: '' },
stops: [{ id: crypto.randomUUID(), place: '', description: '' }],
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]); // Removed data.tripData dependency to avoid loops, handled by logic
}, [data.eventType, updateData]);
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
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) }));
};
// --- TRIP DATA HELPERS (UPDATED TO USE FUNCTIONAL STATE UPDATES) ---
// --- TRIP DATA HELPERS ---
const updateApiKey = (val: string) => {
updateData(prev => ({
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 && (
<div className="bg-gray-50 border border-gray-200 rounded-xl p-6 space-y-6">
{/* Fallback Input */}
{(!data.tripData.googleMapsKey && isEnvKeyMissing) && (
{/* Manual Input if Env key is missing */}
{isKeyMissing && !data.tripData.googleMapsKey && (
<div className="bg-yellow-50 p-4 rounded-md border border-yellow-200 mb-2">
<div className="flex items-start gap-3">
<AlertCircle className="text-yellow-600 mt-0.5" size={20} />
<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">
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>
<input
type="text"
@@ -344,7 +320,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</div>
</div>
{/* BIG TRAVEL MODE SELECTOR */}
<div className="grid grid-cols-2 gap-4 w-full">
<button
onClick={() => setTravelMode('DRIVING')}
@@ -370,7 +345,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</button>
</div>
{/* Validation Message if missing */}
{!data.tripData.travelMode && (
<p className="text-center text-xs text-red-500 font-bold animate-pulse">
* 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">
{/* START POINT */}
<div className="flex gap-3 items-start">
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="relative">
@@ -404,11 +376,9 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
placeholder="Opis startu (np. Zbiórka o 6:00)"
/>
</div>
{/* Placeholder for alignment */}
<div className="w-[42px]"></div>
</div>
{/* STOPS */}
{data.tripData.stops.map((stop, index) => (
<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">
@@ -454,7 +424,6 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
</button>
</div>
{/* END POINT */}
<div className="flex gap-3 items-start">
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="relative">
@@ -479,15 +448,13 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
placeholder="Opis końca (np. Nareszcie piwo)"
/>
</div>
{/* Placeholder for alignment */}
<div className="w-[42px]"></div>
</div>
</div>
</div>
)}
{/* STANDARDOWE POLA */}
{/* Standard Fields */}
<div className="space-y-6">
<div>
<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>
{/* File Upload */}
<div>
<label className="block text-sm font-bold text-gray-700 mb-2">Materiały pomocnicze (Max 3)</label>
<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>}
{/* File List */}
{data.files.length > 0 && (
<div className="mt-4 grid grid-cols-1 gap-3">
{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 [retryCount, setRetryCount] = useState(0);
// --- HARDCODED FALLBACK KEY ---
const AUTO_PASTE_KEY = 'AIzaSyAq9IgZswt5j7GGfH2s-ESenHmfvWFCFCg';
// Directly access the environment variable OR fallback to manual input OR auto-paste
// STRICT MODE: Use VITE_GOOGLE_MAPS_KEY
const getEffectiveKey = () => {
// 1. Check manual override
// 1. Check manual override from user input
if (tripData.googleMapsKey) return tripData.googleMapsKey;
// 2. Check Vite env
const viteKey = 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;
return getEnvVar('VITE_GOOGLE_MAPS_KEY');
};
const apiKey = getEffectiveKey();
// Load script if not present (e.g. refreshed on Result page)
// Load script if not present
useEffect(() => {
if ((window as any).google?.maps) {
setScriptLoaded(true);
@@ -49,7 +37,6 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
if (!apiKey) return;
// Check if script exists in DOM
if (document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`)) {
const check = setInterval(() => {
if ((window as any).google?.maps) {
@@ -68,7 +55,7 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
}, [apiKey]);
// Calculate Route using Directions Service
// Calculate Route
useEffect(() => {
if (!scriptLoaded || !tripData.startPoint.place || !tripData.endPoint.place) return;
if (!(window as any).google) return;
@@ -79,23 +66,13 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
try {
const directionsService = new (window as any).google.maps.DirectionsService();
// Prepare valid waypoints (exclude empty stops)
const waypoints = tripData.stops
.filter(s => s.place && s.place.trim().length > 2)
.map(s => ({ location: s.place, stopover: true }));
// Determine Travel Mode
const gMaps = (window as any).google.maps;
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) => {
directionsService.route({
origin: tripData.startPoint.place,
@@ -106,31 +83,23 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
if (status === 'OK') {
resolve(response);
} else {
console.warn("TripMap: Directions API Error", status);
reject(status);
}
});
});
// Extract overview polyline
const polyline = result.routes[0].overview_polyline;
setEncodedPolyline(polyline);
setEncodedPolyline(result.routes[0].overview_polyline);
setImgError(false);
} catch (error: any) {
console.error("Directions Service Failed:", error);
// Specific Error Handling
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') {
const modeName = tripData.travelMode === 'WALKING' ? 'pieszej' : 'samochodowej';
setRoutingError(`Nie znaleziono drogi ${modeName} pomiędzy tymi punktami.`);
setRoutingError(`Nie znaleziono drogi pomiędzy punktami.`);
} else {
setRoutingError(`Błąd wyznaczania trasy: ${error}`);
}
setEncodedPolyline(null); // Fallback to straight lines
setEncodedPolyline(null);
} finally {
setIsRouting(false);
}
@@ -140,13 +109,12 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
}, [scriptLoaded, tripData.startPoint.place, tripData.endPoint.place, tripData.stops, tripData.travelMode, retryCount]);
// Construct Google Static Maps URL
const getMapUrl = () => {
if (!apiKey) return null;
const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap';
const size = '600x400';
const scale = '2'; // Retina
const scale = '2';
const format = 'png';
const maptype = 'roadmap';
@@ -155,11 +123,9 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
if (!startPlace || !endPlace) return null;
// Markers
const startMarker = `markers=color:green|label:S|${encodeURIComponent(startPlace)}`;
const endMarker = `markers=color:red|label:F|${encodeURIComponent(endPlace)}`;
// Stop Markers
const stopMarkers = tripData.stops
.filter(s => s.place.trim() !== '')
.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),
endPlace
].map(p => encodeURIComponent(p)).join('|');
path = `path=color:0xEA4420ff|weight:5|${pathPoints}`;
}
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;
};
@@ -192,32 +154,28 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
const handleDownload = async () => {
if (!mapContainerRef.current) return;
try {
const canvas = await html2canvas(mapContainerRef.current, {
useCORS: true,
allowTaint: true,
backgroundColor: '#ffffff'
});
const link = document.createElement('a');
link.download = 'trasa-wycieczki.png';
link.href = canvas.toDataURL('image/png');
link.click();
} catch (e) {
console.error("Download failed", e);
alert("Nie udało się pobrać mapy.");
}
};
// ERROR STATE 1: MISSING KEY
if (!apiKey) {
return (
<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} />
<h3 className="text-red-800 font-bold mb-1">Brak Klucza API</h3>
<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>
</div>
);
@@ -250,18 +208,12 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
</div>
</div>
{/* Warning Banner for Directions API issues */}
{routingError && (
<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} />
<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 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>
)}
@@ -270,7 +222,6 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
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"
>
{/* Map Image */}
{mapUrl && !imgError && !isRouting ? (
<img
src={mapUrl}
@@ -284,22 +235,14 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
{isRouting ? (
<>
<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 ? (
<div className="max-w-md">
<div className="flex justify-center mb-2">
<ImageOff size={32} className="text-red-400" />
</div>
<p className="text-sm text-red-600 font-bold mb-1">Błąd ładowania obrazka mapy (Static Maps API)</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>
<p className="text-sm text-red-600 font-bold mb-1">Błąd ładowania mapy</p>
</div>
) : (
<p>{tripData.startPoint.place ? 'Czekam na dane...' : 'Uzupełnij punkty trasy...'}</p>
@@ -307,22 +250,12 @@ const TripMap: React.FC<TripMapProps> = ({ tripData }) => {
</div>
)}
{/* Branding Overlay */}
{!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">
Generated by PromptStory
</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>
);
};

17
utils/envUtils.ts
View File

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