zmiany w obsłudze kluczy api i zabezpieczeń
This commit is contained in:
Arek Bykowski
@@ -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) => (
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user