1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
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;
|
