mirror of
https://github.com/sipeed/picoclaw.git
synced 2026-06-12 18:08:54 +00:00
feat(launcher): standard HTTP login/setup/logout flow for dashboard, frontend and backend impl. and fix windows pid lock for ws (#2339)
* feat(launcher): replace token-in-logs auth with standard HTTP login flow
## Problem
Previously users had to find the one-time token from console logs or
log files to access the dashboard - a non-standard, error-prone workflow
with no clear path for changing credentials.
## Solution: standard HTTP API login with bcrypt-backed password store
### Auth flow (new)
1. First run: browser opens, session guard detects uninitialized state,
redirects to /launcher-setup
2. User sets a password (min 8 chars) via POST /api/auth/setup {password, confirm},
bcrypt(cost=12) hash stored in ~/.picoclaw/launcher-auth.db (SQLite)
3. Subsequent logins: POST /api/auth/login {password}, HttpOnly cookie
picoclaw_launcher_auth (HMAC-SHA256 signed, 7-day expiry)
4. 401 on any API call, frontend redirects to /launcher-login
5. Logout: POST /api/auth/logout, cookie cleared, redirect to login
### Backend changes
- web/backend/api/auth.go: renamed Token to Password; added handleSetup;
launcherAuthStatusResponse now includes Initialized bool; PasswordStore
interface wires bcrypt store into handlers
- web/backend/dashboardauth/: new package - Store with New(dir) / Open(path);
SetPassword (bcrypt cost=12), VerifyPassword, IsInitialized
- sql.go: all DB-layer constants (DBFilename, sqliteDriver, bcryptCost,
four SQL query strings) - compile-time constants, zero runtime overhead
- web/backend/middleware/launcher_dashboard_auth.go: /launcher-setup and
/api/auth/setup added to public paths
- web/backend/main.go:
- dashboardauth.New(picoHome) replaces manual path construction
- maskSecret(): suffix only revealed when >=5 chars hidden (length >= 12),
preventing 8-char minimum passwords from leaking their tail
- web/backend/main_test.go: TestMaskSecret updated with boundary cases
### Forward-compatibility: pkg/credential integration
If the dashboard password is later reused as the enc:// passphrase,
the bcrypt hash in launcher-auth.db becomes an offline oracle.
Recommended mitigation (not yet implemented): derive two independent
subkeys via HKDF before use:
bcrypt(HKDF(password, info="picoclaw-dashboard-login-v1")) stored in DB
HKDF(password, info="picoclaw-credential-enc-v1") passed to PassphraseProvider
This isolates the two domains: cracking the bcrypt hash yields only the
login subkey, which is computationally independent of the enc:// subkey.
* fix(auth): replace wastedassign ok := false with var ok bool
* refactor(tray): remove copy-token clipboard feature
Dashboard login now uses standard web auth (bcrypt + session cookie).
The system tray 'Copy dashboard token' menu item is no longer needed.
- Delete tray_offers_copy.go and tray_offers_copy_stub.go
- Remove mCopyTok menu item and clipboard handler from systray.go
- Remove launcherDashboardTokenForClipboard var from main.go
- Remove MenuCopyToken/MenuCopyTokenHint keys from i18n.go
* feat(launcher-ui): standard HTTP login/setup/logout flow for dashboard
Replaces the previous "find token in logs" workflow with a proper
browser-based authentication UI backed by the new /api/auth/* endpoints.
### New pages
- /launcher-setup: first-run password initialization form (password +
confirm, min 8 chars); calls POST /api/auth/setup; redirects to login
on success
- /launcher-login: standard password login form; calls POST /api/auth/login;
sets HttpOnly session cookie on success
### Session guard (src/routes/__root.tsx)
A useEffect on every non-auth page load calls GET /api/auth/status:
- initialized=false -> redirect to /launcher-setup
- authenticated=false -> redirect to /launcher-login
This ensures the setup/login UI is shown even when the ?token= URL
mechanism auto-logs in (first-run case).
### Logout button (src/components/app-header.tsx)
IconLogout button added to the header with a confirm AlertDialog;
calls POST /api/auth/logout then redirects to /launcher-login.
### API layer
- src/api/launcher-auth.ts: LauncherAuthStatus gains initialized bool;
postLauncherDashboardSetup() added; LauncherAuthTokenHelp removed
- src/api/http.ts: 401 guard uses isLauncherAuthPathname() (covers both
/launcher-login and /launcher-setup) to prevent redirect loops
- src/lib/launcher-login-path.ts: isLauncherSetupPathname() and
isLauncherAuthPathname() added
### Routing
- src/routeTree.gen.ts: /launcher-setup route registered throughout
- src/routes/launcher-login.tsx: tokenHelp UI removed; useEffect added
to redirect to setup when initialized=false
### i18n
- en.json / zh.json: launcherSetup block added; launcherLogin keys
updated to use passwordLabel/passwordPlaceholder
* fix(lint): ts lint fixed 1
* fix(auth): detail auth error handle
* fix(login): frontend web auth error handle
* fix(frontend): auth error handler 5xx
This commit is contained in:
@@ -2,6 +2,7 @@ import {
|
||||
IconBook,
|
||||
IconLanguage,
|
||||
IconLoader2,
|
||||
IconLogout,
|
||||
IconMenu2,
|
||||
IconMoon,
|
||||
IconPlayerPlay,
|
||||
@@ -39,6 +40,7 @@ import {
|
||||
} from "@/components/ui/tooltip"
|
||||
import { useGateway } from "@/hooks/use-gateway.ts"
|
||||
import { useTheme } from "@/hooks/use-theme.ts"
|
||||
import { postLauncherDashboardLogout } from "@/api/launcher-auth"
|
||||
|
||||
export function AppHeader() {
|
||||
const { i18n, t } = useTranslation()
|
||||
@@ -47,10 +49,12 @@ export function AppHeader() {
|
||||
state: gwState,
|
||||
loading: gwLoading,
|
||||
canStart,
|
||||
startReason,
|
||||
restartRequired,
|
||||
start,
|
||||
restart,
|
||||
stop,
|
||||
error: gwError,
|
||||
} = useGateway()
|
||||
|
||||
const isRunning = gwState === "running"
|
||||
@@ -65,6 +69,12 @@ export function AppHeader() {
|
||||
(gwState === "stopped" || gwState === "error")
|
||||
|
||||
const [showStopDialog, setShowStopDialog] = React.useState(false)
|
||||
const [showLogoutDialog, setShowLogoutDialog] = React.useState(false)
|
||||
|
||||
const handleLogout = async () => {
|
||||
await postLauncherDashboardLogout()
|
||||
globalThis.location.assign("/launcher-login")
|
||||
}
|
||||
|
||||
const handleGatewayToggle = () => {
|
||||
if (gwLoading || isRestarting || isStopping || (!isRunning && !canStart)) {
|
||||
@@ -134,6 +144,23 @@ export function AppHeader() {
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{t("header.logout.tooltip")}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t("header.logout.description")}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => void handleLogout()}>
|
||||
{t("header.logout.confirm")}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<div className="text-muted-foreground flex items-center gap-1 text-sm font-medium md:gap-2">
|
||||
{restartRequired && (
|
||||
<Tooltip delayDuration={700}>
|
||||
@@ -171,38 +198,50 @@ export function AppHeader() {
|
||||
<IconPower className="h-4 w-4 opacity-80" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t("header.gateway.action.stop")}</TooltipContent>
|
||||
<TooltipContent>{gwError ?? t("header.gateway.action.stop")}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Button
|
||||
variant={
|
||||
isStarting || isRestarting || isStopping ? "secondary" : "default"
|
||||
}
|
||||
size="sm"
|
||||
data-tour="gateway-button"
|
||||
className={`h-8 gap-2 px-3 ${
|
||||
isStopped ? "bg-green-500 text-white hover:bg-green-600" : ""
|
||||
}`}
|
||||
onClick={handleGatewayToggle}
|
||||
disabled={
|
||||
gwLoading || isStarting || isRestarting || isStopping || !canStart
|
||||
}
|
||||
>
|
||||
{gwLoading || isStarting || isRestarting || isStopping ? (
|
||||
<IconLoader2 className="h-4 w-4 animate-spin opacity-70" />
|
||||
) : (
|
||||
<IconPlayerPlay className="h-4 w-4 opacity-80" />
|
||||
)}
|
||||
<span className="text-xs font-semibold">
|
||||
{isStopping
|
||||
? t("header.gateway.status.stopping")
|
||||
: isRestarting
|
||||
? t("header.gateway.status.restarting")
|
||||
: isStarting
|
||||
? t("header.gateway.status.starting")
|
||||
: t("header.gateway.action.start")}
|
||||
</span>
|
||||
</Button>
|
||||
<Tooltip delayDuration={(gwError || (!canStart && startReason)) ? 0 : 700}>
|
||||
<TooltipTrigger asChild>
|
||||
{/* Wrap in span so the tooltip still fires when the button is disabled */}
|
||||
<span
|
||||
className={!canStart && startReason ? "cursor-not-allowed" : undefined}
|
||||
tabIndex={!canStart && startReason ? 0 : undefined}
|
||||
>
|
||||
<Button
|
||||
variant={
|
||||
isStarting || isRestarting || isStopping ? "secondary" : "default"
|
||||
}
|
||||
size="sm"
|
||||
data-tour="gateway-button"
|
||||
className={`h-8 gap-2 px-3 ${isStopped ? "bg-green-500 text-white hover:bg-green-600" : ""
|
||||
} ${!canStart ? "pointer-events-none" : ""}`}
|
||||
onClick={handleGatewayToggle}
|
||||
disabled={
|
||||
gwLoading || isStarting || isRestarting || isStopping || !canStart
|
||||
}
|
||||
>
|
||||
{gwLoading || isStarting || isRestarting || isStopping ? (
|
||||
<IconLoader2 className="h-4 w-4 animate-spin opacity-70" />
|
||||
) : (
|
||||
<IconPlayerPlay className="h-4 w-4 opacity-80" />
|
||||
)}
|
||||
<span className="text-xs font-semibold">
|
||||
{isStopping
|
||||
? t("header.gateway.status.stopping")
|
||||
: isRestarting
|
||||
? t("header.gateway.status.restarting")
|
||||
: isStarting
|
||||
? t("header.gateway.status.starting")
|
||||
: t("header.gateway.action.start")}
|
||||
</span>
|
||||
</Button>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
{(gwError || (!canStart && startReason)) ? (
|
||||
<TooltipContent>{gwError ?? startReason}</TooltipContent>
|
||||
) : null}
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
<Separator
|
||||
@@ -241,6 +280,21 @@ export function AppHeader() {
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<Tooltip delayDuration={700}>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-8"
|
||||
onClick={() => setShowLogoutDialog(true)}
|
||||
aria-label={t("header.logout.tooltip")}
|
||||
>
|
||||
<IconLogout className="size-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t("header.logout.tooltip")}</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
|
||||
Reference in New Issue
Block a user