feat(frontend)!: drop SetupWizardPage, backend URL via build-time VITE_*
Frontend no longer has any wizard flow. Backend URL is baked into the bundle at build time via VITE_HF_BACKEND_BASE_URL (forwarded as a Dockerfile ARG from compose). - src/App.tsx: drop SetupWizardPage import + appState='setup' fallback + HF_WIZARD_PORT-via-localStorage probe. getApiBase() now reads import.meta.env.VITE_HF_BACKEND_BASE_URL with localStorage as an escape hatch for dev. When /config/status reports no admin yet, show a card prompting the operator to run `docker exec hf_backend hf-cli admin create-user ...`. - src/pages/SetupWizardPage.tsx: deleted (~250 lines) - src/index.css: drop .setup-wizard + .setup-* styles (~36 lines) - src/vite-env.d.ts: add VITE_HF_BACKEND_BASE_URL to ImportMetaEnv - Dockerfile: ARG VITE_HF_BACKEND_BASE_URL → ENV → npm run build Build the prod image with: docker build --build-arg VITE_HF_BACKEND_BASE_URL=https://hf-api.hangman-lab.top \ -t git.hangman-lab.top/zhi/harborforge-frontend:latest . Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
93
src/App.tsx
93
src/App.tsx
@@ -3,7 +3,6 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
import Sidebar from '@/components/Sidebar'
|
||||
import LoginPage from '@/pages/LoginPage'
|
||||
import SetupWizardPage from '@/pages/SetupWizardPage'
|
||||
import DashboardPage from '@/pages/DashboardPage'
|
||||
import TasksPage from '@/pages/TasksPage'
|
||||
import TaskDetailPage from '@/pages/TaskDetailPage'
|
||||
@@ -24,19 +23,23 @@ import OidcCallbackPage from '@/pages/OidcCallbackPage'
|
||||
import OidcSettingsPage from '@/pages/OidcSettingsPage'
|
||||
import axios from 'axios'
|
||||
|
||||
const getStoredWizardPort = (): number | null => {
|
||||
const stored = Number(localStorage.getItem('HF_WIZARD_PORT'))
|
||||
return stored && stored > 0 ? stored : null
|
||||
// Backend URL is baked in at build time via VITE_HF_BACKEND_BASE_URL (the
|
||||
// docker-compose hf-frontend service passes it as a build ARG). Falling
|
||||
// back to a same-origin call only makes sense in dev with the Vite proxy.
|
||||
// localStorage override is kept as an escape hatch for one-off pointing
|
||||
// (e.g. dev pointing the prod build at a local backend).
|
||||
const getApiBase = (): string => {
|
||||
const ls = localStorage.getItem('HF_BACKEND_BASE_URL')
|
||||
if (ls) return ls
|
||||
const baked = import.meta.env.VITE_HF_BACKEND_BASE_URL
|
||||
return baked || ''
|
||||
}
|
||||
|
||||
const getApiBase = () => {
|
||||
return localStorage.getItem('HF_BACKEND_BASE_URL') ?? undefined
|
||||
}
|
||||
|
||||
type AppState = 'checking' | 'setup' | 'ready'
|
||||
type AppState = 'checking' | 'no-admin' | 'ready'
|
||||
|
||||
export default function App() {
|
||||
const [appState, setAppState] = useState<AppState>('checking')
|
||||
const [errorMessage, setErrorMessage] = useState<string>('')
|
||||
const { user, loading, login, loginWithToken, logout } = useAuth()
|
||||
|
||||
useEffect(() => {
|
||||
@@ -44,49 +47,61 @@ export default function App() {
|
||||
}, [])
|
||||
|
||||
const checkInitialized = async () => {
|
||||
// First try the backend /config/status endpoint (reads from config volume directly)
|
||||
try {
|
||||
const res = await axios.get(`${getApiBase()}/config/status`, { timeout: 5000 })
|
||||
const cfg = res.data || {}
|
||||
if (cfg.backend_url) {
|
||||
localStorage.setItem('HF_BACKEND_BASE_URL', cfg.backend_url)
|
||||
}
|
||||
if (cfg.initialized === true) {
|
||||
setAppState('ready')
|
||||
return
|
||||
}
|
||||
} catch {
|
||||
// Backend unreachable — fall through to wizard check
|
||||
setAppState('no-admin')
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err)
|
||||
setErrorMessage(`Backend unreachable at ${getApiBase() || '<same origin>'} — ${msg}`)
|
||||
setAppState('no-admin')
|
||||
}
|
||||
|
||||
// Fallback: if a wizard port was previously saved during setup, try it directly
|
||||
const storedPort = getStoredWizardPort()
|
||||
if (storedPort) {
|
||||
try {
|
||||
const res = await axios.get(`http://127.0.0.1:${storedPort}/api/v1/config/harborforge.json`, {
|
||||
timeout: 5000,
|
||||
})
|
||||
const cfg = res.data || {}
|
||||
if (cfg.backend_url) {
|
||||
localStorage.setItem('HF_BACKEND_BASE_URL', cfg.backend_url)
|
||||
}
|
||||
if (cfg.initialized === true) {
|
||||
setAppState('ready')
|
||||
return
|
||||
}
|
||||
} catch {
|
||||
// ignore — fall through to setup
|
||||
}
|
||||
}
|
||||
setAppState('setup')
|
||||
}
|
||||
|
||||
if (appState === 'checking') {
|
||||
return <div className="loading">Checking configuration status...</div>
|
||||
return <div className="loading">Checking deployment status…</div>
|
||||
}
|
||||
|
||||
if (appState === 'setup') {
|
||||
return <SetupWizardPage initialWizardPort={getStoredWizardPort()} onComplete={checkInitialized} />
|
||||
if (appState === 'no-admin') {
|
||||
return (
|
||||
<div className="login-page">
|
||||
<div className="login-card">
|
||||
<h1>⚓ HarborForge</h1>
|
||||
{errorMessage ? (
|
||||
<>
|
||||
<p className="text-dim">Cannot reach the backend.</p>
|
||||
<pre style={{ whiteSpace: 'pre-wrap', fontSize: '0.85em' }}>{errorMessage}</pre>
|
||||
<p className="text-dim">
|
||||
Set <code>VITE_HF_BACKEND_BASE_URL</code> at build time
|
||||
(e.g. <code>https://hf-api.example.com</code>) in the
|
||||
frontend container's compose entry.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-dim">
|
||||
No admin user found. Bootstrap the deployment by running, on the host:
|
||||
</p>
|
||||
<pre style={{ whiteSpace: 'pre-wrap', fontSize: '0.85em' }}>
|
||||
{`docker exec hf-backend hf-cli admin create-user \\
|
||||
--email you@example.com \\
|
||||
--password '...' \\
|
||||
# ...or in OIDC_ONLY mode:
|
||||
--oidc-issuer https://login.example.com/realms/your-realm \\
|
||||
--oidc-subject <sub-from-idp>`}
|
||||
</pre>
|
||||
<button className="btn-primary" onClick={checkInitialized}>
|
||||
Recheck
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (loading) return <div className="loading">Loading...</div>
|
||||
|
||||
Reference in New Issue
Block a user