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:
h z
2026-05-24 19:01:51 +01:00
parent 8e52e2bf74
commit 10771a8ffc
5 changed files with 71 additions and 372 deletions

View File

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