From 526c8ec005d03b17950e9f5e7fe74208b491dd68 Mon Sep 17 00:00:00 2001
From: kboz <kutayboz@gmail.com>
Date: Sun, 27 Sep 2026 22:36:36 +0200
Subject: feat(frontend): add guided setup flow for backend bootstrap

Poll the backend /api/setup/status and show a Setup screen until data,
auth, and backend readiness are confirmed. Remove the manual
setup_auth.py and setup_eve_data.py scripts superseded by the automated
setup endpoints.
---
 frontend/src/Setup.js | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 142 insertions(+)
 create mode 100644 frontend/src/Setup.js

(limited to 'frontend/src/Setup.js')

diff --git a/frontend/src/Setup.js b/frontend/src/Setup.js
new file mode 100644
index 0000000..537a36c
--- /dev/null
+++ b/frontend/src/Setup.js
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+
+function Setup({ status, onComplete }) {
+    const [loadingData, setLoadingData] = useState(false);
+    const [loginUrl, setLoginUrl] = useState('');
+    const [message, setMessage] = useState('');
+    const [manualCode, setManualCode] = useState('');
+    const [showManualCode, setShowManualCode] = useState(false);
+
+    useEffect(() => {
+        // Automatically handle the OAuth callback if the URL has ?code=
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get('code');
+        if (code) {
+            handleAuthCallback(code);
+        }
+    }, []);
+
+    const handleAuthCallback = async (code) => {
+        setMessage('Completing login...');
+        try {
+            const resp = await fetch('http://localhost:8000/api/setup/auth/callback', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ code })
+            });
+            if (resp.ok) {
+                setMessage('Login successful. Please ensure both steps are complete.');
+            } else {
+                setMessage('Login failed. Please try again.');
+            }
+        } catch (e) {
+            setMessage('Error during login callback.');
+        }
+    };
+
+    const downloadData = async () => {
+        setLoadingData(true);
+        setMessage('Downloading EVE Online static data (this may take a few minutes)...');
+        try {
+            const resp = await fetch('http://localhost:8000/api/setup/data', { method: 'POST' });
+            if (resp.ok) {
+                setMessage('Data downloaded successfully!');
+            } else {
+                setMessage('Failed to download data.');
+            }
+        } catch (e) {
+            setMessage('Error downloading data.');
+        }
+        setLoadingData(false);
+    };
+
+    const fetchLoginUrl = async () => {
+        try {
+            const resp = await fetch('http://localhost:8000/api/setup/auth/url');
+            if (resp.ok) {
+                const data = await resp.json();
+                window.open(data.url, '_blank');
+                setShowManualCode(true);
+            }
+        } catch (e) {
+            setMessage('Failed to fetch login URL.');
+        }
+    };
+
+    return (
+        <div className="App dark-mode flex-center">
+            <div className="setup-container">
+                <h1>Welcome to EVE Haul</h1>
+                <p>Let's get your environment set up.</p>
+                
+                <div className="setup-step">
+                    <h2>1. EVE Static Data</h2>
+                    {status.data_ready ? (
+                        <p style={{ color: 'lightgreen' }}>Data is ready!</p>
+                    ) : (
+                        <button onClick={downloadData} disabled={loadingData}>
+                            {loadingData ? 'Downloading...' : 'Download Game Data'}
+                        </button>
+                    )}
+                </div>
+
+                <div className="setup-step">
+                    <h2>2. EVE Single Sign-On</h2>
+                    {status.auth_ready ? (
+                        <p style={{ color: 'lightgreen' }}>Authenticated!</p>
+                    ) : (
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                            <button onClick={() => {
+                                setShowManualCode(true);
+                                fetchLoginUrl();
+                            }}>
+                                Login to EVE Online
+                            </button>
+                            {showManualCode && (
+                                <div style={{ fontSize: '0.9em', color: '#ccc', textAlign: 'left', marginTop: '10px' }}>
+                                    <p>After granting access, you might be redirected to a broken page (like `https://localhost/callback/...`).</p>
+                                    <p>Copy the `code=` part from the URL address bar and paste it below:</p>
+                                    <div style={{ display: 'flex', gap: '5px', marginTop: '5px' }}>
+                                        <input 
+                                            type="text" 
+                                            placeholder="Paste the code here" 
+                                            value={manualCode}
+                                            onChange={(e) => setManualCode(e.target.value)}
+                                            style={{ flex: 1, padding: '5px', borderRadius: '3px', background: '#222', color: '#fff', border: '1px solid #444' }}
+                                        />
+                                        <button onClick={() => {
+                                            if (manualCode.includes('?code=')) {
+                                                const params = new URLSearchParams(manualCode.split('?')[1]);
+                                                handleAuthCallback(params.get('code') || manualCode);
+                                            } else if (manualCode.startsWith('http') && manualCode.includes('code=')) {
+                                                const url = new URL(manualCode);
+                                                handleAuthCallback(url.searchParams.get('code') || manualCode);
+                                            } else {
+                                                handleAuthCallback(manualCode);
+                                            }
+                                        }}>Submit
+                                        </button>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+                <p className="setup-message">{message}</p>
+                
+                {status.data_ready && status.auth_ready && !status.backend_ready && (
+                    <div style={{ marginTop: '20px', padding: '15px', background: '#333', border: '1px solid #ffaa00', borderRadius: '5px' }}>
+                        <h3 style={{ color: '#ffaa00', margin: '0 0 10px 0' }}>Restart Required</h3>
+                        <p>Setup is complete, but the EVE Haul backend process needs to be restarted to load the downloaded data.</p>
+                        <p>Please go to your terminal, press `Ctrl+C` to stop the backend, and start it again.</p>
+                        <p>This page will automatically launch EVE Haul when the backend is ready.</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default Setup;
-- 
cgit v1.3