diff options
Diffstat (limited to 'frontend/src/Setup.js')
| -rw-r--r-- | frontend/src/Setup.js | 142 |
1 files changed, 142 insertions, 0 deletions
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; |