zmiany w obsłudze kluczy api i zabezpieczeń

components/TripMap.tsx

@@ -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>
   );
 };