zmiany w obsłudze kluczy api i zabezpieczeń

App.tsx

@@ -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"