登录子系统：OIDC 统一自签 token + 吊销即时生效 + 设备并入会话列表 + 应用内扫码 + 禁则修复
接续 90a3790（扫码 A0+A1+B + step-up 雏形）。蓝本见 AUTH.md。
OIDC 统一到 cdrop 自签 token
- /auth/exchange 先 JWKS 验 id_token 签名（自签 token 的唯一信任锚）再签 cdrop
自签 HS256 access token（绑 sid），不再把 IdP RS256 下发浏览器；验签失败仅告警
并回退 RS256（会话仍建、下次 refresh 自愈），登录不中断
- /auth/refresh oidc 路径仍打 IdP 轮换 refresh_token + 探测 IdP 侧吊销，但同样回
自签 token；createWebSession 改返回行 id
- verify 链保留 RS256 分支仅供桌面端 loopback（其即时吊销留后续）
吊销即时生效 + 被吊销设备自知回退
- verifySelfToken 每请求按 sid 查 web_sessions 行，行删即拒 → 吊销在被吊销设备
下一次请求即生效（不等 TTL），oidc / self / guest 一致
- 前端仅在「服务端以 401 确证会话失效」时 forceLogout 清登录态、回登录页；短期连接
失败（5xx / 网络）一律保留登录态（refreshTokens 改三态 refreshed/invalid/transient，
cookieRefresh 改 discriminated 结果）
- __root 反应式守卫：prod 下失登录态且非认证路由即跳登录页；新增 auth.sessionLost.* 三语
设备列表并入会话列表 + 孤儿自动清除
- GET /api/auth/sessions 统一 web_sessions 与原生客户端设备（桌面 / iOS，自 devices
登记表呈现，native=true，离线也列）；同名不重复列出，排除 shortcut 与无会话 browser
- 吊销网页会话连带删其设备登记（无同名在用会话时）；原生「登出」走
DELETE /api/devices/{name}（同要求 step-up）
- 新增 DeleteOrphanBrowserDevices（browser 型且无存活 web_session），接入设备清扫器（1h）
应用内扫码 + 聚珍崩溃 / CJK 禁则修复
- 登录页内置 getUserMedia + jsqr 扫码，不再外跳系统应用（避免开错浏览器）
- 修聚珍（cjk-autospace）MutationObserver 与 React 重渲染同子树冲突致的 insertBefore
崩溃：扫码 / 显码 / 批准三状态机页整页跳过聚珍（data-jz-skip）
- 修流动正文未跑 CJK 禁则（jinze 为段落级、须 opt-in）：设置 / 快捷指令 / 桌面页一批
hint 补 data-jz-level="paragraph" + justify，短标签 / 状态仍留文本级
step-up 完善
- auth_time 改可选（Casdoor 不下发，原强制致死循环）；stepped_up_at 按会话绑定、
StepUpMaxAgeSeconds 窗口内不复要求；新增 POST /api/auth/stepup
- 批准页 persist 编进 step-up returnTo 防整页跳转丢失；scope 随档绑定（信任=full /
仅此次=guest），默认偏安全的「仅此次」
文档与测试
- AUTH.md：折中架构、accounts 薄表、令牌架构、扫码流程、step-up、§4.4 统一会话列表
- 新增 Go 测试：OIDC 自签验证、verifySelfToken 吊销即拒、会话吊销连带删设备、
统一会话列表（含原生 / 不含 shortcut / 不重复）、孤儿清扫、删设备需 step-up
This commit is contained in:
Generated
+7
@@ -14,6 +14,7 @@
|
||||
"@mantine/notifications": "^7.13.5",
|
||||
"@tanstack/react-router": "^1.82.0",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"jsqr": "^1.4.0",
|
||||
"lucide-react": "^0.460.0",
|
||||
"qrcode": "^1.5.4",
|
||||
"react": "^18.3.1",
|
||||
@@ -2433,6 +2434,12 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/jsqr": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
|
||||
"integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"@mantine/notifications": "^7.13.5",
|
||||
"@tanstack/react-router": "^1.82.0",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"jsqr": "^1.4.0",
|
||||
"lucide-react": "^0.460.0",
|
||||
"qrcode": "^1.5.4",
|
||||
"react": "^18.3.1",
|
||||
|
||||
@@ -20,13 +20,19 @@ export interface AuthShellProps
|
||||
* 跳转到主界面，跳转帧里顶栏 logo 会与主界面 header 的 logo 重叠成“两个
|
||||
* logo”，隐藏即可消除。登录页是整页跳 IdP、无此重叠，保留 logo。 */
|
||||
hideBrand?: boolean;
|
||||
/** 整页跳过聚珍 CJK 处理（在 shell 根加 data-jz-skip）。状态机页面（扫码 /
|
||||
* 批准 / 显码：mount 后即 getUserMedia/fetch → setState 频繁重渲染）必须用：
|
||||
* 聚珍是渲染后 MutationObserver 改 DOM 的库，与 React 重渲染同一子树本质冲突，
|
||||
* 会触发 insertBefore 崩溃。这些页以短 chrome 文本为主，跳过聚珍仅损失些微
|
||||
* 中西间距，远胜崩溃。 */
|
||||
skipAutospace?: boolean;
|
||||
}
|
||||
|
||||
// 全屏外壳：登录、首次设置、OAuth 回调共用。带轻量品牌 + 主题切换，
|
||||
// 让用户在登录前也能调主题。
|
||||
export function AuthShell(props: AuthShellProps)
|
||||
{
|
||||
const { title, subtitle, children, footer, cardBrand, hideBrand } = props;
|
||||
const { title, subtitle, children, footer, cardBrand, hideBrand, skipAutospace } = props;
|
||||
const theme = useAppStore((s) => s.theme);
|
||||
const setTheme = useAppStore((s) => s.setTheme);
|
||||
const next: ThemeMode = theme === "system" ? "light" : theme === "light" ? "dark" : "system";
|
||||
@@ -38,7 +44,7 @@ export function AuthShell(props: AuthShellProps)
|
||||
const brandNode = cardBrand === undefined ? null : cardBrand;
|
||||
|
||||
return (
|
||||
<div className={s.shell}>
|
||||
<div className={s.shell} data-jz-skip={skipAutospace ? "" : undefined}>
|
||||
<div className={s.topbar}>
|
||||
{/* 空 span 占位保持 space-between，主题切换仍靠右。 */}
|
||||
{hideBrand ? <span /> : <span className={s.brand}><Wordmark /></span>}
|
||||
|
||||
@@ -2,7 +2,9 @@ import { useAppStore, type User } from "../../store";
|
||||
import { t } from "../../i18n";
|
||||
import { apiFetch } from "../../net/api";
|
||||
import { isDesktop, desktopRefresh, clearDesktopSession } from "../../net/desktop";
|
||||
import { fetchMeScope } from "../../net/sessions";
|
||||
import { stashStepUpPending } from "../qr/stepUp";
|
||||
import { toast } from "../../ui/feedback";
|
||||
|
||||
// ---- dev mode -------------------------------------------------------------
|
||||
|
||||
@@ -46,6 +48,29 @@ export function logout()
|
||||
if (isDesktop()) { clearDesktopSession(); }
|
||||
}
|
||||
|
||||
// forceLogout 在「服务端确证会话已失效」时清掉本地登录态——触发点仅一处：
|
||||
// access token 401 后续期也被服务端以 401 拒绝（refreshTokens 返回 "invalid"，
|
||||
// 即被远程吊销或已过期）。短期连接失败（网络抖动 / 5xx）绝不走到这里（见
|
||||
// net/api.ts）。与 logout() 不同，它不发任何服务端请求（会话已死，调用只会再次
|
||||
// 401），只就地清空 + 提示，让 __root 的反应式守卫把界面送回登录页
|
||||
// （离线设备「下一次使用即得知」）。
|
||||
//
|
||||
// 幂等：靠「已登出即跳过」实现——首个 401 同步清空 user/accessToken 后，并发涌入
|
||||
// 的其余 401 看到已为空便直接返回，不会重复弹 toast、不重复清桌面 session。
|
||||
export function forceLogout(): void
|
||||
{
|
||||
const st = useAppStore.getState();
|
||||
if (!st.user && !st.accessToken)
|
||||
{
|
||||
// 已被并发的某个 401 清空，或本就处于登出态：不重复处理（避免 toast 刷屏）。
|
||||
return;
|
||||
}
|
||||
st.clearAuth();
|
||||
// 桌面端：删除 Go 侧持久化 session，否则下次启动仍注入这枚已失效的登录态。
|
||||
if (isDesktop()) { clearDesktopSession(); }
|
||||
toast.error(t("auth.sessionLost.title"), t("auth.sessionLost.body"));
|
||||
}
|
||||
|
||||
// ---- prod (OIDC PKCE) -----------------------------------------------------
|
||||
|
||||
interface AuthConfig
|
||||
@@ -242,48 +267,69 @@ interface CookieRefreshResp
|
||||
device_name?: string;
|
||||
}
|
||||
|
||||
// CookieRefreshResult 区分「服务端确证会话失效」与「短期失败」，使上层只在前者
|
||||
// 清空登录态：
|
||||
// ok —— 换到新 access token
|
||||
// invalid —— /api/auth/refresh 返回 401：服务端查证会话已失效 / 被吊销 / 过期
|
||||
// （其处理器同时清掉 cookie），凭据确凿不可恢复
|
||||
// transient —— 5xx / 同源校验 403 / 响应残缺等非确证失败（网络层抛错则根本不进此
|
||||
// 函数、照常向上抛）——一律保留登录态，按短期错误处理
|
||||
type CookieRefreshResult =
|
||||
| { kind: "ok"; accessToken: string; user: User; deviceName: string }
|
||||
| { kind: "invalid" }
|
||||
| { kind: "transient" };
|
||||
|
||||
// cookieRefresh 用 HttpOnly session cookie 静默换一枚新 access_token。无 body——
|
||||
// cookie 自动随同源请求发出（Path=/api/auth）。成功返回 {accessToken, user,
|
||||
// deviceName}；cookie 缺失 / 过期 / 被 IdP 拒绝 → null（调用方据此落到登录页）。
|
||||
async function cookieRefresh(): Promise<{ accessToken: string; user: User; deviceName: string } | null>
|
||||
// cookie 自动随同源请求发出（Path=/api/auth）。返回见 CookieRefreshResult：只有
|
||||
// 服务端明确以 401 拒绝才算 invalid，短期失败一律 transient，不误伤登录态。
|
||||
async function cookieRefresh(): Promise<CookieRefreshResult>
|
||||
{
|
||||
const r = await fetch("/api/auth/refresh", { method: "POST" });
|
||||
if (!r.ok) { return null; }
|
||||
if (!r.ok)
|
||||
{
|
||||
return { kind: r.status === 401 ? "invalid" : "transient" };
|
||||
}
|
||||
const data = await r.json().catch(() => null) as CookieRefreshResp | null;
|
||||
if (!data?.access_token || !data.user?.id) { return null; }
|
||||
if (!data?.access_token || !data.user?.id) { return { kind: "transient" }; }
|
||||
return {
|
||||
kind: "ok",
|
||||
accessToken: data.access_token,
|
||||
user: { id: data.user.id, name: data.user.name, avatar: data.user.avatar },
|
||||
deviceName: data.device_name ?? "",
|
||||
};
|
||||
}
|
||||
|
||||
// refreshTokens 换新 access_token；api.ts 在请求拿到 401 时惰性调用。返回是否成功。
|
||||
export async function refreshTokens(): Promise<boolean>
|
||||
// RefreshOutcome 是续期对上层的三态结论；只有 "invalid"（服务端确证失效）才允许
|
||||
// 上层 forceLogout，"transient" 必须保留登录态（短期连接失败不清状态）。
|
||||
export type RefreshOutcome = "refreshed" | "invalid" | "transient";
|
||||
|
||||
// refreshTokens 换新 access_token；api.ts 在请求拿到 401 时惰性调用。
|
||||
export async function refreshTokens(): Promise<RefreshOutcome>
|
||||
{
|
||||
const store = useAppStore.getState();
|
||||
if (store.authMode !== "prod") { return false; }
|
||||
if (store.authMode !== "prod") { return "transient"; }
|
||||
|
||||
// 桌面端：refresh 完全在 Go 内部完成（refresh_token 只在 Go，JS 不持有），
|
||||
// 直接无参调用。
|
||||
// 直接无参调用。Go 侧暂不区分「被吊销」与「短期失败」，故失败一律按 transient
|
||||
// 处理（不清空登录态）——桌面端即时吊销留后续（AUTH.md §3.1）。
|
||||
if (isDesktop())
|
||||
{
|
||||
const res = await desktopRefresh();
|
||||
if (!res?.access_token) { return false; }
|
||||
if (!res?.access_token) { return "transient"; }
|
||||
const cur = useAppStore.getState();
|
||||
if (!cur.user) { return false; }
|
||||
if (!cur.user) { return "transient"; }
|
||||
cur.setAuth({ accessToken: res.access_token, user: cur.user });
|
||||
return true;
|
||||
return "refreshed";
|
||||
}
|
||||
|
||||
// 浏览器端：走 HttpOnly cookie session（refresh_token 在服务端，JS 不持有）。
|
||||
const res = await cookieRefresh();
|
||||
if (!res) { return false; }
|
||||
if (res.kind !== "ok") { return res.kind; } // "invalid" | "transient"，透传给上层
|
||||
const cur = useAppStore.getState();
|
||||
cur.setAuth({ accessToken: res.accessToken, user: res.user });
|
||||
// 设备名以服务端为权威；本地缺失（PWA 存储被清）时回填。
|
||||
if (res.deviceName && !cur.selfDeviceName) { cur.setSelfDeviceName(res.deviceName); }
|
||||
return true;
|
||||
return "refreshed";
|
||||
}
|
||||
|
||||
// bootstrapAuth 在 App 挂载前尝试「免重登」：浏览器端若本会话尚无 access_token，
|
||||
@@ -297,12 +343,24 @@ export async function bootstrapAuth(): Promise<void>
|
||||
if (store.accessToken && store.user) { return; } // 同会话已登录（sessionStorage 命中）
|
||||
|
||||
const res = await cookieRefresh();
|
||||
if (!res) { return; }
|
||||
if (res.kind !== "ok") { return; } // 开机水合失败（含 invalid / transient）→ 照常落登录页
|
||||
const cur = useAppStore.getState();
|
||||
cur.setAuth({ accessToken: res.accessToken, user: res.user });
|
||||
if (res.deviceName && !cur.selfDeviceName) { cur.setSelfDeviceName(res.deviceName); }
|
||||
}
|
||||
|
||||
// refreshSessionScope 拉一次 /api/me 校正本会话权限级别（full / guest）并写进
|
||||
// store。在登录成功 / 开机水合后调用一次，使受限访客的账号管理入口被隐藏。失败
|
||||
// 静默回退 "full"——只多展示入口，后端仍 403 兜底。dev 模式无 guest 概念，跳过。
|
||||
export async function refreshSessionScope(): Promise<void>
|
||||
{
|
||||
const store = useAppStore.getState();
|
||||
if (store.authMode !== "prod") { return; }
|
||||
if (!store.user || !store.accessToken) { return; }
|
||||
const scope = await fetchMeScope();
|
||||
useAppStore.getState().setSessionScope(scope);
|
||||
}
|
||||
|
||||
// syncWebDeviceName 把本机设备名推到服务端 session（cookie 鉴权），让 PWA 存储被清
|
||||
// 后开机仍能从 cookie session 恢复设备名、不再误跳 /setup。仅浏览器 prod；桌面端走
|
||||
// persistDesktopDeviceName（Go 持久化），dev 无 session。失败静默——只是体验降级。
|
||||
|
||||
@@ -87,7 +87,7 @@ export function DesktopSettings()
|
||||
<Group justify="space-between" wrap="nowrap" align="flex-start">
|
||||
<Stack gap={2} style={{ minWidth: 0 }}>
|
||||
<Text size="sm" fw={500}>{t("settings.desktop.downloadDir")}</Text>
|
||||
<Text size="xs" c="dimmed">{t("settings.desktop.downloadDirHint")}</Text>
|
||||
<Text size="xs" c="dimmed" className="justify" data-jz-level="paragraph">{t("settings.desktop.downloadDirHint")}</Text>
|
||||
<Text
|
||||
size="xs"
|
||||
style={{ fontFamily: "var(--font-mono, ui-monospace, monospace)", wordBreak: "break-all" }}
|
||||
@@ -107,7 +107,7 @@ export function DesktopSettings()
|
||||
</Stack>
|
||||
</Group>
|
||||
<div style={{ height: 1, background: "var(--divider)" }} />
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text size="xs" c="dimmed" className="justify" data-jz-level="paragraph">
|
||||
{t("settings.desktop.ttlNote")}
|
||||
</Text>
|
||||
</Stack>
|
||||
@@ -128,7 +128,7 @@ function ToggleRow(props: {
|
||||
<Group justify="space-between" wrap="nowrap" align="flex-start">
|
||||
<Stack gap={2} style={{ minWidth: 0 }}>
|
||||
<Text size="sm" fw={500}>{title}</Text>
|
||||
<Text size="xs" c="dimmed">{hint}</Text>
|
||||
<Text size="xs" c="dimmed" className="justify" data-jz-level="paragraph">{hint}</Text>
|
||||
</Stack>
|
||||
<Switch
|
||||
checked={checked}
|
||||
|
||||
@@ -160,8 +160,20 @@
|
||||
|
||||
.headerCount { color: var(--text-muted); font-size: var(--fs-12); margin-left: 4px; }
|
||||
|
||||
/* header 右侧动作组：「显示/隐藏离线」与「扫码登录新设备」并排，同款文本按钮语汇。 */
|
||||
.headerActions
|
||||
{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.headerSwitch
|
||||
{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--text-muted);
|
||||
@@ -173,3 +185,4 @@
|
||||
transition: background-color var(--dur-fast) var(--ease-out);
|
||||
}
|
||||
.headerSwitch:hover { background: var(--accent-soft); color: var(--accent); }
|
||||
.headerSwitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useMemo, useState, type DragEvent } from "react";
|
||||
import { Check } from "lucide-react";
|
||||
import { Check, ScanLine } from "lucide-react";
|
||||
import { DeviceTypeIcon, StateDot } from "../../ui/glyphs";
|
||||
import type { DeviceKind } from "../../ui/glyphs";
|
||||
import type { DeviceInfo } from "../../store";
|
||||
@@ -15,11 +15,13 @@ export interface DeviceStripProps
|
||||
onSelect: (name: string | null) => void;
|
||||
/** 拖拽文件落到设备卡上，跳过 composer 直接发送。 */
|
||||
onDropFile?: (deviceName: string, file: File) => void;
|
||||
/** 「扫码登录新设备」入口：应用内相机扫码把另一台设备接入账号。 */
|
||||
onLinkDevice?: () => void;
|
||||
}
|
||||
|
||||
export function DeviceStrip(props: DeviceStripProps)
|
||||
{
|
||||
const { devices, selfDeviceName, selectedDevice, onSelect, onDropFile } = props;
|
||||
const { devices, selfDeviceName, selectedDevice, onSelect, onDropFile, onLinkDevice } = props;
|
||||
const [ showOffline, setShowOffline ] = useState(false);
|
||||
|
||||
const peers = useMemo(
|
||||
@@ -42,17 +44,29 @@ export function DeviceStrip(props: DeviceStripProps)
|
||||
{t("home.deviceList.onlineSuffix", { count: onlineCount })}
|
||||
</span>
|
||||
</div>
|
||||
{offlineCount > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className={s.headerSwitch}
|
||||
onClick={() => setShowOffline((v) => !v)}
|
||||
>
|
||||
{showOffline
|
||||
? "隐藏离线"
|
||||
: t("home.deviceList.showOffline", { count: offlineCount })}
|
||||
</button>
|
||||
)}
|
||||
<div className={s.headerActions}>
|
||||
{offlineCount > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className={s.headerSwitch}
|
||||
onClick={() => setShowOffline((v) => !v)}
|
||||
>
|
||||
{showOffline
|
||||
? t("home.deviceList.hideOffline")
|
||||
: t("home.deviceList.showOffline", { count: offlineCount })}
|
||||
</button>
|
||||
)}
|
||||
{onLinkDevice && (
|
||||
<button
|
||||
type="button"
|
||||
className={s.headerSwitch}
|
||||
onClick={onLinkDevice}
|
||||
>
|
||||
<ScanLine size={13} aria-hidden />
|
||||
{t("qr.entry.scanNewDevice")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{visible.length === 0 ? (
|
||||
|
||||
@@ -15,12 +15,24 @@
|
||||
|
||||
const PENDING_KEY = "cdrop.qr.stepup_pending"; // { verifier, returnTo }
|
||||
const STASH_KEY = "cdrop.qr.stepup_stash"; // { code, verifier }
|
||||
// 登录会话登出的 step-up：跨整页跳转记住「要登出的是哪条会话」。回到设置页后取出，
|
||||
// 重试那条 DELETE。批准页的 step-up 不用它（要批准的 request 已编在 returnTo 里）。
|
||||
const REVOKE_KEY = "cdrop.qr.stepup_revoke"; // sessionId（string）
|
||||
|
||||
// 仅允许站内 /link 路径回流，杜绝 open-redirect（外部 URL / 协议相对地址）。
|
||||
// 与 returnTo.ts 同口径——step-up 往返回来后的整页跳转目标只能是批准页。
|
||||
function isSafeLinkPath(path: string): boolean
|
||||
// 仅允许两个站内回流目标，杜绝 open-redirect（外部 URL / 协议相对地址 / 任意路径）：
|
||||
// - /link[?…] ——批准页（扫码登录的 step-up）；
|
||||
// - /settings ——设置页（登录会话登出的 step-up）。
|
||||
// step-up 往返回来后的整页跳转目标只能是这两处之一；其余一律拒。校验 path 必须以
|
||||
// "/link" 或 "/settings" 起头且后随串只能是空或 "?…"，挡住 "/linkmalicious" /
|
||||
// "//evil.com"（协议相对）/ "/settings/../x" 之类绕过。
|
||||
function isSafeReturnPath(path: string): boolean
|
||||
{
|
||||
return path.startsWith("/link?") || path === "/link";
|
||||
for (const base of [ "/link", "/settings" ])
|
||||
{
|
||||
if (path === base) { return true; }
|
||||
if (path.startsWith(base + "?")) { return true; }
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export interface StepUpPending
|
||||
@@ -40,7 +52,7 @@ export interface StepUpStash
|
||||
export function stashStepUpPending(pending: StepUpPending): boolean
|
||||
{
|
||||
if (typeof window === "undefined") { return false; }
|
||||
if (!pending.verifier || !isSafeLinkPath(pending.returnTo)) { return false; }
|
||||
if (!pending.verifier || !isSafeReturnPath(pending.returnTo)) { return false; }
|
||||
window.sessionStorage.setItem(PENDING_KEY, JSON.stringify(pending));
|
||||
return true;
|
||||
}
|
||||
@@ -53,7 +65,7 @@ export function peekStepUpPending(): StepUpPending | null
|
||||
const raw = window.sessionStorage.getItem(PENDING_KEY);
|
||||
if (!raw) { return null; }
|
||||
const p = safeParse<StepUpPending>(raw);
|
||||
if (!p?.verifier || !isSafeLinkPath(p.returnTo)) { return null; }
|
||||
if (!p?.verifier || !isSafeReturnPath(p.returnTo)) { return null; }
|
||||
return p;
|
||||
}
|
||||
|
||||
@@ -91,6 +103,24 @@ export function clearStepUpStash(): void
|
||||
window.sessionStorage.removeItem(STASH_KEY);
|
||||
}
|
||||
|
||||
// stashPendingRevoke 在发起会话登出的 step-up 再认证前记下待登出的 sessionId，
|
||||
// 跨整页跳转留到回到设置页后取出重试。
|
||||
export function stashPendingRevoke(sessionId: string): void
|
||||
{
|
||||
if (typeof window === "undefined") { return; }
|
||||
if (!sessionId) { return; }
|
||||
window.sessionStorage.setItem(REVOKE_KEY, sessionId);
|
||||
}
|
||||
|
||||
// consumePendingRevoke 取出并清除待登出的 sessionId（一次性，用完即清）。
|
||||
export function consumePendingRevoke(): string | null
|
||||
{
|
||||
if (typeof window === "undefined") { return null; }
|
||||
const id = window.sessionStorage.getItem(REVOKE_KEY);
|
||||
window.sessionStorage.removeItem(REVOKE_KEY);
|
||||
return id || null;
|
||||
}
|
||||
|
||||
function safeParse<T>(raw: string): T | null
|
||||
{
|
||||
try { return JSON.parse(raw) as T; }
|
||||
|
||||
@@ -142,7 +142,7 @@ export function ShortcutTokens()
|
||||
return (
|
||||
<Panel title={t("settings.shortcut.title")}>
|
||||
<Stack gap="sm">
|
||||
<Text size="sm" c="dimmed">{t("settings.shortcut.intro")}</Text>
|
||||
<Text size="sm" c="dimmed" className="justify" data-jz-level="paragraph">{t("settings.shortcut.intro")}</Text>
|
||||
|
||||
<Group align="flex-end" gap="sm" wrap="nowrap">
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
@@ -273,24 +273,24 @@ function IssuedReveal(props: { issued: IssueResp; base: string; onDismiss: () =>
|
||||
|
||||
<Stack gap={6}>
|
||||
<Text size="sm" fw={600}>{t("settings.shortcut.guideTitle")}</Text>
|
||||
<Text size="sm" c="dimmed">{t("settings.shortcut.guideIntro")}</Text>
|
||||
<Text size="sm" c="dimmed">{t("settings.shortcut.guideDeviceName")}</Text>
|
||||
<Text size="sm" c="dimmed" className="justify" data-jz-level="paragraph">{t("settings.shortcut.guideIntro")}</Text>
|
||||
<Text size="sm" c="dimmed" className="justify" data-jz-level="paragraph">{t("settings.shortcut.guideDeviceName")}</Text>
|
||||
|
||||
<Text size="sm" fw={500}>{t("settings.shortcut.guidePullTitle")}</Text>
|
||||
<Stack gap={2}>
|
||||
<Text size="sm">1. {t("settings.shortcut.guidePull1")}</Text>
|
||||
<Text size="sm">2. {t("settings.shortcut.guidePull2")}</Text>
|
||||
<Text size="sm">3. {t("settings.shortcut.guidePull3")}</Text>
|
||||
<Text size="sm" className="justify" data-jz-level="paragraph">1. {t("settings.shortcut.guidePull1")}</Text>
|
||||
<Text size="sm" className="justify" data-jz-level="paragraph">2. {t("settings.shortcut.guidePull2")}</Text>
|
||||
<Text size="sm" className="justify" data-jz-level="paragraph">3. {t("settings.shortcut.guidePull3")}</Text>
|
||||
</Stack>
|
||||
|
||||
<Text size="sm" fw={500}>{t("settings.shortcut.guidePushTitle")}</Text>
|
||||
<Stack gap={2}>
|
||||
<Text size="sm">1. {t("settings.shortcut.guidePush1")}</Text>
|
||||
<Text size="sm">2. {t("settings.shortcut.guidePush2")}</Text>
|
||||
<Text size="sm">3. {t("settings.shortcut.guidePush3")}</Text>
|
||||
<Text size="sm" className="justify" data-jz-level="paragraph">1. {t("settings.shortcut.guidePush1")}</Text>
|
||||
<Text size="sm" className="justify" data-jz-level="paragraph">2. {t("settings.shortcut.guidePush2")}</Text>
|
||||
<Text size="sm" className="justify" data-jz-level="paragraph">3. {t("settings.shortcut.guidePush3")}</Text>
|
||||
</Stack>
|
||||
|
||||
<Text size="xs" c="dimmed">{t("settings.shortcut.guideToleranceNote")}</Text>
|
||||
<Text size="xs" c="dimmed" className="justify" data-jz-level="paragraph">{t("settings.shortcut.guideToleranceNote")}</Text>
|
||||
</Stack>
|
||||
|
||||
<Group justify="flex-end">
|
||||
|
||||
@@ -16,6 +16,11 @@ export const enUS: Partial<TranslationDict> = {
|
||||
"app.disconnectedHint":
|
||||
"Lost connection to the server — retrying automatically. No need to refresh.",
|
||||
|
||||
// ---- session lost (revoked remotely / expired) ----------------------
|
||||
"auth.sessionLost.title": "Signed out",
|
||||
"auth.sessionLost.body":
|
||||
"This device's login was revoked or expired. Please sign in again.",
|
||||
|
||||
// ---- header / user menu ---------------------------------------------
|
||||
"nav.accountMenu": "Account menu",
|
||||
"nav.thisDeviceLabel": "This device: ",
|
||||
@@ -34,6 +39,7 @@ export const enUS: Partial<TranslationDict> = {
|
||||
"home.deviceList.title": "Devices",
|
||||
"home.deviceList.onlineSuffix": "({{count}} online)",
|
||||
"home.deviceList.showOffline": "Show offline ({{count}})",
|
||||
"home.deviceList.hideOffline": "Hide offline",
|
||||
"home.deviceList.empty":
|
||||
"No peer devices yet. Open the app in another tab with a different device name (Settings → Device name) to see it here.",
|
||||
"home.tabs.file": "File",
|
||||
@@ -95,6 +101,20 @@ export const enUS: Partial<TranslationDict> = {
|
||||
|
||||
// ---- QR sign-in · entry --------------------------------------------
|
||||
"qr.entry.fromLogin": "Sign in with a QR code",
|
||||
"qr.entry.scanNewDevice": "Scan to link a device",
|
||||
|
||||
// In-app scanner: scan a new device's QR code from this signed-in device to link it.
|
||||
"qr.scan.title": "Scan to link a device",
|
||||
"qr.scan.subtitle": "Point the code shown on the other device at the frame. Approval stays on this signed-in device.",
|
||||
"qr.scan.starting": "Starting the camera…",
|
||||
"qr.scan.aiming": "Line the code up inside the frame",
|
||||
"qr.scan.foreign": "That isn't a sign-in code for this site. Aim at the code from “Sign in with a QR code” on the new device.",
|
||||
"qr.scan.noCamera": "This device has no camera available. Use a phone or tablet with a camera to scan instead.",
|
||||
"qr.scan.denied": "Camera access was blocked. Allow the camera in your browser's site settings, then reopen this page.",
|
||||
"qr.scan.error": "Couldn't open the camera. Try again, or scan from a device with a camera.",
|
||||
"qr.scan.howto1": "On the new device, open “Sign in with a QR code” to show a code.",
|
||||
"qr.scan.howto2": "Line that code up in the frame above — approval starts automatically.",
|
||||
"qr.scan.back": "Back",
|
||||
|
||||
// ---- QR sign-in · show page (new device) ---------------------------
|
||||
"qr.show.title": "Sign in with a QR code",
|
||||
@@ -109,6 +129,8 @@ export const enUS: Partial<TranslationDict> = {
|
||||
"qr.show.expired": "This code has expired. Generate a new one and scan again.",
|
||||
"qr.show.denied": "This request was declined. If that was you, generate a new code and try again.",
|
||||
"qr.show.regenerate": "Generate a new code",
|
||||
"qr.show.back": "Back to home",
|
||||
"qr.show.backToName": "Back",
|
||||
|
||||
// ---- QR sign-in · approve page (phone) -----------------------------
|
||||
"qr.approve.title": "Approve a new device",
|
||||
@@ -117,11 +139,12 @@ export const enUS: Partial<TranslationDict> = {
|
||||
"qr.approve.badLink": "This approval link is incomplete. Generate a new code on the device and scan it again.",
|
||||
"qr.approve.signInFirst": "Sign in to your account first, then approve this device.",
|
||||
"qr.approve.trustLabel": "Trust duration",
|
||||
"qr.approve.trust.title": "Trust this device",
|
||||
"qr.approve.trust.title": "Trust this device (7 days)",
|
||||
"qr.approve.trust.hint": "Skip approval for 7 days, renewed on each use.",
|
||||
"qr.approve.once.title": "Just this once",
|
||||
"qr.approve.once.title": "Just this once (1 hour)",
|
||||
"qr.approve.once.hint": "Signed in for 1 hour, then scan again.",
|
||||
"qr.approve.scopeGuest": "This device signs in as a limited guest: it can send and receive files and messages, but can't change your account or approve other devices.",
|
||||
"qr.approve.scopeFull": "This device signs fully into your account for 7 days: it can send and receive files and messages, and manage your account and devices.",
|
||||
"qr.approve.scopeGuest": "Signs in as a limited guest — it can send and receive files and messages, but can't change your account or approve other devices; expires after 1 hour.",
|
||||
"qr.approve.approve": "Approve sign-in",
|
||||
"qr.approve.stepUp.notice": "For security, verify your identity before approving — the button below takes you through a fresh sign-in.",
|
||||
"qr.approve.stepUp.button": "Verify and approve",
|
||||
@@ -151,16 +174,38 @@ export const enUS: Partial<TranslationDict> = {
|
||||
"Removes this device's registration and signs you out.",
|
||||
"settings.unregister.currentConfirm":
|
||||
"Unregistering this device will remove its registration and sign you out. Continue?",
|
||||
"settings.unregister.peerConfirm": "Remove device \"{{name}}\"?",
|
||||
"settings.peers.title": "Other devices",
|
||||
"settings.peers.empty": "No other devices.",
|
||||
"settings.peers.remove": "Remove",
|
||||
"settings.peers.removing": "Removing…",
|
||||
"settings.error.delete": "Action failed: {{message}}",
|
||||
|
||||
// ---- Limited-guest badge --------------------------------------------
|
||||
"settings.guest.badge": "Limited guest",
|
||||
"settings.guest.title": "This device is a limited guest",
|
||||
"settings.guest.body": "This device is signed in as a limited guest: it can send and receive files, messages, and clipboard, but cannot manage the account, remove devices, or authorize new ones. To get full access, sign in again on your main device.",
|
||||
|
||||
// ---- Login sessions / device management -----------------------------
|
||||
"settings.sessions.title": "Login sessions",
|
||||
"settings.sessions.hint": "Every device currently signed in to this account — browser, desktop, and mobile clients; online ones are listed first. Signing a device out ends its session immediately; it must sign in again on that device to continue.",
|
||||
"settings.sessions.guestNote": "Limited guests can't manage login sessions. To manage them, sign in fully on your main device.",
|
||||
"settings.sessions.empty": "No other login sessions.",
|
||||
"settings.sessions.loadError": "Failed to load login sessions.",
|
||||
"settings.sessions.retry": "Retry",
|
||||
"settings.sessions.current": "This device",
|
||||
"settings.sessions.scopeFull": "Full",
|
||||
"settings.sessions.scopeGuest": "Limited guest",
|
||||
"settings.sessions.kind.oidc": "Account login",
|
||||
"settings.sessions.kind.self": "Local account",
|
||||
"settings.sessions.kind.guest": "Scanned guest",
|
||||
"settings.sessions.lastUsed": "Last active {{time}}",
|
||||
"settings.sessions.neverUsed": "Not active yet",
|
||||
"settings.sessions.signOut": "Sign out",
|
||||
"settings.sessions.signingOut": "Signing out…",
|
||||
"settings.sessions.signOutCurrent": "Sign out this device",
|
||||
"settings.sessions.confirmOther": "Sign out device \"{{name}}\"? Its session will be invalidated immediately and it must sign in again.",
|
||||
"settings.sessions.confirmCurrent": "Signing out this device is the same as logging out. Continue?",
|
||||
"settings.sessions.revoked": "Signed that device out",
|
||||
"settings.sessions.stepUpRejected": "Identity verification failed or expired. Please try again.",
|
||||
"settings.online": "Online",
|
||||
"settings.offline": "Offline",
|
||||
"settings.lastSeen": "Last seen {{time}}",
|
||||
"settings.lastSeenNever": "Never connected",
|
||||
"settings.push.title": "Push notifications",
|
||||
"settings.push.hint": "When this page is closed, new files, messages, and transfer results arrive as system notifications; while it's open, you'll see in-app alerts instead.",
|
||||
"settings.push.enable": "Enable push",
|
||||
|
||||
@@ -14,6 +14,10 @@ export const zhCN = {
|
||||
"app.disconnectedTitle": "正在重连",
|
||||
"app.disconnectedHint": "与服务器的连接已断开，正在自动重连，无需刷新页面。",
|
||||
|
||||
// ---- 会话失效（被远程吊销 / 过期）------------------------------------
|
||||
"auth.sessionLost.title": "登录已失效",
|
||||
"auth.sessionLost.body": "此设备的登录凭据已被注销或过期，请重新登录。",
|
||||
|
||||
// ---- 顶部栏 / 用户菜单 ------------------------------------------------
|
||||
"nav.accountMenu": "账号菜单",
|
||||
"nav.thisDeviceLabel": "本机：",
|
||||
@@ -32,6 +36,7 @@ export const zhCN = {
|
||||
"home.deviceList.title": "设备",
|
||||
"home.deviceList.onlineSuffix": "（{{count}} 台在线）",
|
||||
"home.deviceList.showOffline": "显示离线设备（{{count}}）",
|
||||
"home.deviceList.hideOffline": "隐藏离线设备",
|
||||
"home.deviceList.empty":
|
||||
"暂无其他设备。在另一标签页或设备上以相同账户登录，并设置一个不同的设备名（设置 → 设备名称），即可在此处看到它。",
|
||||
"home.tabs.file": "文件",
|
||||
@@ -93,6 +98,20 @@ export const zhCN = {
|
||||
|
||||
// ---- 扫码登录 · 入口 -------------------------------------------------
|
||||
"qr.entry.fromLogin": "扫码登录此设备",
|
||||
"qr.entry.scanNewDevice": "扫码登录新设备",
|
||||
|
||||
// 应用内扫码器：在已登录设备上扫新设备的二维码，把它接入账号。
|
||||
"qr.scan.title": "扫码登录新设备",
|
||||
"qr.scan.subtitle": "把另一台设备显示的二维码对准取景框。批准全程留在这台已登录设备上。",
|
||||
"qr.scan.starting": "正在启动相机…",
|
||||
"qr.scan.aiming": "把二维码对准取景框",
|
||||
"qr.scan.foreign": "这不是本站的登录二维码。请对准新设备上“扫码登录此设备”生成的码。",
|
||||
"qr.scan.noCamera": "这台设备没有可用的摄像头。请改用带相机的手机或平板扫码。",
|
||||
"qr.scan.denied": "相机权限被拒绝。请在浏览器站点设置里允许使用相机，再重新打开此页。",
|
||||
"qr.scan.error": "无法打开相机。请重试，或改用带相机的设备扫码。",
|
||||
"qr.scan.howto1": "在新设备上打开“扫码登录此设备”，生成一张二维码。",
|
||||
"qr.scan.howto2": "把那张二维码对准上方取景框，识别后会自动进入批准。",
|
||||
"qr.scan.back": "返回",
|
||||
|
||||
// ---- 扫码登录 · 显码页（新设备）-------------------------------------
|
||||
"qr.show.title": "扫码登录此设备",
|
||||
@@ -107,20 +126,23 @@ export const zhCN = {
|
||||
"qr.show.expired": "二维码已过期。重新生成一张再扫。",
|
||||
"qr.show.denied": "这次接入被拒绝。如确为你本人操作，重新生成二维码再试。",
|
||||
"qr.show.regenerate": "重新生成二维码",
|
||||
"qr.show.back": "返回主页",
|
||||
"qr.show.backToName": "返回上一步",
|
||||
|
||||
// ---- 扫码登录 · 批准页（手机）-------------------------------------
|
||||
"qr.approve.title": "批准新设备",
|
||||
"qr.approve.subtitle": "确认让这台设备登入你的账号。请核对设备与来源无误。",
|
||||
"qr.approve.subtitle": "确认让这台设备登录你的账号。请核对设备与来源无误。",
|
||||
"qr.approve.loading": "正在读取设备信息…",
|
||||
"qr.approve.badLink": "这个批准链接不完整。请在新设备上重新生成二维码再扫。",
|
||||
"qr.approve.signInFirst": "先登录你的账号，再批准这台设备接入。",
|
||||
"qr.approve.trustLabel": "信任时长",
|
||||
"qr.approve.trust.title": "信任此设备",
|
||||
"qr.approve.trust.title": "信任此设备（7 天）",
|
||||
"qr.approve.trust.hint": "7 天内免再次批准，每次使用自动续期。",
|
||||
"qr.approve.once.title": "仅此一次",
|
||||
"qr.approve.once.title": "仅此一次（1 小时）",
|
||||
"qr.approve.once.hint": "登录有效 1 小时，到期需重新扫码。",
|
||||
"qr.approve.scopeGuest": "这台设备将以受限访客身份登入：可收发文件与消息，但不能更改账号、不能批准其他设备。",
|
||||
"qr.approve.approve": "批准登入",
|
||||
"qr.approve.scopeFull": "这台设备将完整登录你的账号、7 天内有效：可正常收发文件与消息，并能管理账号与设备。",
|
||||
"qr.approve.scopeGuest": "以受限访客身份登录——可收发文件与消息，但不能更改账号、不能批准其他设备；1 小时后失效。",
|
||||
"qr.approve.approve": "批准登录",
|
||||
"qr.approve.stepUp.notice": "为安全起见，批准前需先验证你的身份——点下方按钮会引导你重新登录一次。",
|
||||
"qr.approve.stepUp.button": "验证并批准",
|
||||
"qr.approve.stepUp.rejected": "身份验证未通过或已过期。请再验证一次，确认是你本人后即可批准。",
|
||||
@@ -128,7 +150,7 @@ export const zhCN = {
|
||||
"qr.approve.doneApprovedTitle": "已批准",
|
||||
"qr.approve.doneApproved": "这台设备已接入你的账号，现在即可在它上面收发文件。",
|
||||
"qr.approve.doneDeniedTitle": "已拒绝",
|
||||
"qr.approve.doneDenied": "这次接入已被拒绝，那台设备不会登入你的账号。",
|
||||
"qr.approve.doneDenied": "这次接入已被拒绝，那台设备不会登录你的账号。",
|
||||
"qr.approve.expiredTitle": "二维码已过期",
|
||||
"qr.approve.expired": "这张二维码已失效。请在新设备上重新生成再扫。",
|
||||
"qr.approve.errorTitle": "出错了",
|
||||
@@ -148,16 +170,38 @@ export const zhCN = {
|
||||
"settings.unregister.currentHint": "将退出登录并移除此设备的注册。",
|
||||
"settings.unregister.currentConfirm":
|
||||
"注销当前设备会移除此设备的注册并退出登录，确认继续？",
|
||||
"settings.unregister.peerConfirm": "确认要移除设备“{{name}}”？",
|
||||
"settings.peers.title": "其他设备",
|
||||
"settings.peers.empty": "暂无其他设备。",
|
||||
"settings.peers.remove": "移除",
|
||||
"settings.peers.removing": "正在移除…",
|
||||
"settings.error.delete": "操作失败：{{message}}",
|
||||
|
||||
// ---- 受限访客标识 ----------------------------------------------------
|
||||
"settings.guest.badge": "受限访客",
|
||||
"settings.guest.title": "这台设备是受限访客",
|
||||
"settings.guest.body": "本设备以受限访客身份登录：可正常收发文件、消息与剪贴板，但不能管理账号、移除设备或授权新设备。需要完整权限，请在你的主设备上重新登录。",
|
||||
|
||||
// ---- 登录会话 / 设备管理 ---------------------------------------------
|
||||
"settings.sessions.title": "登录会话",
|
||||
"settings.sessions.hint": "这里列出当前登录此账号的所有设备，含浏览器、桌面与移动客户端；在线的排在上方。登出某台设备会立即结束它的登录，需在该设备上重新登录才能继续使用。",
|
||||
"settings.sessions.guestNote": "受限访客无法管理登录会话；如需管理，请在你的主设备上完整登录。",
|
||||
"settings.sessions.empty": "暂无其他登录会话。",
|
||||
"settings.sessions.loadError": "登录会话加载失败。",
|
||||
"settings.sessions.retry": "重试",
|
||||
"settings.sessions.current": "本机",
|
||||
"settings.sessions.scopeFull": "完整",
|
||||
"settings.sessions.scopeGuest": "受限访客",
|
||||
"settings.sessions.kind.oidc": "账号登录",
|
||||
"settings.sessions.kind.self": "本地账号",
|
||||
"settings.sessions.kind.guest": "扫码访客",
|
||||
"settings.sessions.lastUsed": "最近活跃 {{time}}",
|
||||
"settings.sessions.neverUsed": "尚未活跃",
|
||||
"settings.sessions.signOut": "登出",
|
||||
"settings.sessions.signingOut": "正在登出…",
|
||||
"settings.sessions.signOutCurrent": "登出本机",
|
||||
"settings.sessions.confirmOther": "确认登出设备“{{name}}”？该会话将立即失效，需重新登录。",
|
||||
"settings.sessions.confirmCurrent": "登出本机会等同于退出登录，确认继续？",
|
||||
"settings.sessions.revoked": "已登出该设备",
|
||||
"settings.sessions.stepUpRejected": "身份验证未通过或已过期，请再试一次。",
|
||||
"settings.online": "在线",
|
||||
"settings.offline": "离线",
|
||||
"settings.lastSeen": "上次活跃 {{time}}",
|
||||
"settings.lastSeenNever": "尚未上线",
|
||||
"settings.push.title": "推送通知",
|
||||
"settings.push.hint": "页面关闭时，新文件、消息和传输结果会以系统通知提醒；页面打开时仍走应用内提示。",
|
||||
"settings.push.enable": "启用推送",
|
||||
|
||||
@@ -18,6 +18,10 @@ export const zhTW: Partial<TranslationDict> = {
|
||||
"app.disconnectedTitle": "正在重新連線",
|
||||
"app.disconnectedHint": "與伺服器的連線已中斷，正在自動重新連線，無需重新整理頁面。",
|
||||
|
||||
// ---- 工作階段失效（被遠端撤銷 / 逾期）-------------------------------
|
||||
"auth.sessionLost.title": "登入已失效",
|
||||
"auth.sessionLost.body": "此裝置的登入憑證已被撤銷或逾期，請重新登入。",
|
||||
|
||||
// ---- 頂部列 / 使用者選單 ---------------------------------------------
|
||||
"nav.accountMenu": "帳號選單",
|
||||
"nav.thisDeviceLabel": "本機：",
|
||||
@@ -36,6 +40,7 @@ export const zhTW: Partial<TranslationDict> = {
|
||||
"home.deviceList.title": "裝置",
|
||||
"home.deviceList.onlineSuffix": "（{{count}} 部線上）",
|
||||
"home.deviceList.showOffline": "顯示離線裝置（{{count}}）",
|
||||
"home.deviceList.hideOffline": "隱藏離線裝置",
|
||||
"home.deviceList.empty":
|
||||
"尚無其他裝置。在另一個分頁或裝置上以同一帳號登入，並設定一個不同的裝置名稱（設定 → 裝置名稱），即可在此處看到它。",
|
||||
"home.tabs.file": "檔案",
|
||||
@@ -97,6 +102,20 @@ export const zhTW: Partial<TranslationDict> = {
|
||||
|
||||
// ---- 掃碼登入 · 入口 -------------------------------------------------
|
||||
"qr.entry.fromLogin": "掃碼登入此裝置",
|
||||
"qr.entry.scanNewDevice": "掃碼登入新裝置",
|
||||
|
||||
// 應用內掃碼器：在已登入裝置上掃新裝置的 QR 碼，把它接入帳號。
|
||||
"qr.scan.title": "掃碼登入新裝置",
|
||||
"qr.scan.subtitle": "把另一部裝置顯示的 QR 碼對準取景框。批准全程留在這部已登入裝置上。",
|
||||
"qr.scan.starting": "正在啟動相機…",
|
||||
"qr.scan.aiming": "把 QR 碼對準取景框",
|
||||
"qr.scan.foreign": "這不是本站的登入 QR 碼。請對準新裝置上「掃碼登入此裝置」產生的碼。",
|
||||
"qr.scan.noCamera": "這部裝置沒有可用的相機。請改用有相機的手機或平板掃碼。",
|
||||
"qr.scan.denied": "相機權限被拒絕。請在瀏覽器網站設定裡允許使用相機，再重新開啟此頁。",
|
||||
"qr.scan.error": "無法開啟相機。請重試，或改用有相機的裝置掃碼。",
|
||||
"qr.scan.howto1": "在新裝置上開啟「掃碼登入此裝置」，產生一張 QR 碼。",
|
||||
"qr.scan.howto2": "把那張 QR 碼對準上方取景框，辨識後會自動進入批准。",
|
||||
"qr.scan.back": "返回",
|
||||
|
||||
// ---- 掃碼登入 · 顯碼頁（新裝置）-------------------------------------
|
||||
"qr.show.title": "掃碼登入此裝置",
|
||||
@@ -111,6 +130,8 @@ export const zhTW: Partial<TranslationDict> = {
|
||||
"qr.show.expired": "QR 碼已逾時。重新產生一張再掃。",
|
||||
"qr.show.denied": "這次接入被拒絕。如確為你本人操作，重新產生 QR 碼再試。",
|
||||
"qr.show.regenerate": "重新產生 QR 碼",
|
||||
"qr.show.back": "返回首頁",
|
||||
"qr.show.backToName": "返回上一步",
|
||||
|
||||
// ---- 掃碼登入 · 批准頁（手機）-------------------------------------
|
||||
"qr.approve.title": "批准新裝置",
|
||||
@@ -119,11 +140,12 @@ export const zhTW: Partial<TranslationDict> = {
|
||||
"qr.approve.badLink": "這個批准連結不完整。請在新裝置上重新產生 QR 碼再掃。",
|
||||
"qr.approve.signInFirst": "先登入你的帳號，再批准這部裝置接入。",
|
||||
"qr.approve.trustLabel": "信任時長",
|
||||
"qr.approve.trust.title": "信任此裝置",
|
||||
"qr.approve.trust.title": "信任此裝置（7 天）",
|
||||
"qr.approve.trust.hint": "7 天內免再次批准，每次使用自動續期。",
|
||||
"qr.approve.once.title": "僅此一次",
|
||||
"qr.approve.once.title": "僅此一次（1 小時）",
|
||||
"qr.approve.once.hint": "登入有效 1 小時，逾時需重新掃碼。",
|
||||
"qr.approve.scopeGuest": "這部裝置將以受限訪客身分登入：可收發檔案與訊息，但不能變更帳號、不能批准其他裝置。",
|
||||
"qr.approve.scopeFull": "這部裝置將完整登入你的帳號、7 天內有效：可正常收發檔案與訊息，並能管理帳號與裝置。",
|
||||
"qr.approve.scopeGuest": "以受限訪客身分登入——可收發檔案與訊息，但不能變更帳號、不能批准其他裝置；1 小時後失效。",
|
||||
"qr.approve.approve": "批准登入",
|
||||
"qr.approve.stepUp.notice": "為安全起見，批准前需先驗證你的身分——點下方按鈕會引導你重新登入一次。",
|
||||
"qr.approve.stepUp.button": "驗證並批准",
|
||||
@@ -152,16 +174,38 @@ export const zhTW: Partial<TranslationDict> = {
|
||||
"settings.unregister.currentHint": "將登出並移除本裝置的註冊。",
|
||||
"settings.unregister.currentConfirm":
|
||||
"解除註冊本裝置會移除其註冊並登出，確認繼續？",
|
||||
"settings.unregister.peerConfirm": "確認要移除裝置「{{name}}」？",
|
||||
"settings.peers.title": "其他裝置",
|
||||
"settings.peers.empty": "尚無其他裝置。",
|
||||
"settings.peers.remove": "移除",
|
||||
"settings.peers.removing": "正在移除…",
|
||||
"settings.error.delete": "操作失敗：{{message}}",
|
||||
|
||||
// ---- 受限訪客標識 ----------------------------------------------------
|
||||
"settings.guest.badge": "受限訪客",
|
||||
"settings.guest.title": "這部裝置是受限訪客",
|
||||
"settings.guest.body": "本裝置以受限訪客身分登入：可正常收發檔案、訊息與剪貼簿，但不能管理帳號、移除裝置或授權新裝置。需要完整權限，請在你的主裝置上重新登入。",
|
||||
|
||||
// ---- 登入工作階段 / 裝置管理 ------------------------------------------
|
||||
"settings.sessions.title": "登入工作階段",
|
||||
"settings.sessions.hint": "這裡列出目前登入此帳號的所有裝置，含瀏覽器、桌面與行動用戶端；線上的排在上方。登出某台裝置會立即結束它的登入，需在該裝置上重新登入才能繼續使用。",
|
||||
"settings.sessions.guestNote": "受限訪客無法管理登入工作階段；如需管理，請在你的主裝置上完整登入。",
|
||||
"settings.sessions.empty": "尚無其他登入工作階段。",
|
||||
"settings.sessions.loadError": "登入工作階段載入失敗。",
|
||||
"settings.sessions.retry": "重試",
|
||||
"settings.sessions.current": "本機",
|
||||
"settings.sessions.scopeFull": "完整",
|
||||
"settings.sessions.scopeGuest": "受限訪客",
|
||||
"settings.sessions.kind.oidc": "帳號登入",
|
||||
"settings.sessions.kind.self": "本機帳號",
|
||||
"settings.sessions.kind.guest": "掃碼訪客",
|
||||
"settings.sessions.lastUsed": "最近活躍 {{time}}",
|
||||
"settings.sessions.neverUsed": "尚未活躍",
|
||||
"settings.sessions.signOut": "登出",
|
||||
"settings.sessions.signingOut": "正在登出…",
|
||||
"settings.sessions.signOutCurrent": "登出本機",
|
||||
"settings.sessions.confirmOther": "確認登出裝置「{{name}}」？該工作階段將立即失效，需重新登入。",
|
||||
"settings.sessions.confirmCurrent": "登出本機等同於登出帳號，確認繼續？",
|
||||
"settings.sessions.revoked": "已登出該裝置",
|
||||
"settings.sessions.stepUpRejected": "身分驗證未通過或已過期，請再試一次。",
|
||||
"settings.online": "線上",
|
||||
"settings.offline": "離線",
|
||||
"settings.lastSeen": "上次活躍 {{time}}",
|
||||
"settings.lastSeenNever": "尚未上線",
|
||||
"settings.push.title": "推播通知",
|
||||
"settings.push.hint": "頁面關閉時，新檔案、訊息與傳輸結果會以系統通知提醒；頁面開啟時仍走應用內提示。",
|
||||
"settings.push.enable": "啟用推播",
|
||||
|
||||
+19
-3
@@ -1,5 +1,5 @@
|
||||
import { useAppStore } from "../store";
|
||||
import { refreshTokens } from "../features/auth/auth";
|
||||
import { refreshTokens, forceLogout } from "../features/auth/auth";
|
||||
import { readInjectedApiBase, readInjectedDeviceType } from "../store/helpers";
|
||||
import { toAsciiDeviceName } from "../utils/format";
|
||||
import { t } from "../i18n";
|
||||
@@ -26,19 +26,35 @@ function withBase(input: RequestInfo): RequestInfo
|
||||
// - always sets X-Device-Name from the store
|
||||
// - in prod, on a 401 response transparently refreshes the access token via
|
||||
// /api/auth/refresh and retries once
|
||||
// - in prod, ONLY if the server authoritatively confirms the session is gone
|
||||
// (refresh → HTTP 401), forces a local logout so the app returns to login
|
||||
//
|
||||
// Returns the fetch Response untouched so callers can drive streaming bodies
|
||||
// (SSE, relay GET stream) themselves.
|
||||
//
|
||||
// State is cleared ONLY on server-confirmed credential invalidation. Short-term
|
||||
// failures never clear it: a transient refresh response (5xx / same-origin 403)
|
||||
// yields "transient", and a network error during refresh THROWS out of here —
|
||||
// both keep the session, leaving the original 401 for the caller as a retryable
|
||||
// error. So a flaky network or a server blip can't log the user out; only a
|
||||
// genuine revoke/expire (refresh → 401) does.
|
||||
export async function apiFetch(input: RequestInfo, init?: RequestInit): Promise<Response>
|
||||
{
|
||||
let r = await doFetch(input, init);
|
||||
if (r.status === 401 && useAppStore.getState().authMode === "prod")
|
||||
{
|
||||
const ok = await refreshTokens();
|
||||
if (ok)
|
||||
const outcome = await refreshTokens();
|
||||
if (outcome === "refreshed")
|
||||
{
|
||||
r = await doFetch(input, init);
|
||||
}
|
||||
else if (outcome === "invalid")
|
||||
{
|
||||
// 服务端确证会话已失效（/auth/refresh 返回 401，已被吊销 / 过期）→
|
||||
// 清空本地登录态，由 __root 守卫把界面送回登录页。返回这次 401 让调用
|
||||
// 方照常收尾。"transient"（5xx / 网络抖动）不进此分支：保留登录态。
|
||||
forceLogout();
|
||||
}
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
+34
-2
@@ -217,8 +217,9 @@ export class StepUpRequiredError extends Error
|
||||
}
|
||||
}
|
||||
|
||||
// qrApprove 批准该设备登入本账号。scope 本期固定 guest（受限访客）；persist 决定
|
||||
// 信任时长（persist=7 天滑动 / once=1 小时）。成功 204。
|
||||
// qrApprove 批准该设备登入本账号。scope 决定授予的会话级别：full=完整登录、
|
||||
// guest=受限访客；与 persist 时长一一对应（full+persist=7 天滑动、guest+once=1 小时）。
|
||||
// 成功 204。
|
||||
//
|
||||
// step_up 开启时须带上一次新鲜 prompt=login 再认证拿到的 stepUpCode + stepUpVerifier，
|
||||
// 后端就地向 IdP 换 id_token、验签 + 校 auth_time 新鲜 + sub 匹配；缺失 / 过期 →
|
||||
@@ -278,3 +279,34 @@ function sleep(ms: number): Promise<void>
|
||||
{
|
||||
return new Promise((resolve) => { window.setTimeout(resolve, ms); });
|
||||
}
|
||||
|
||||
// ---- 应用内扫码：批准链接解析 --------------------------------------------------
|
||||
|
||||
export interface LinkParams
|
||||
{
|
||||
requestId: string;
|
||||
code: string;
|
||||
}
|
||||
|
||||
// parseLinkApprovalUrl 把扫到的二维码内容解析成批准页参数，严格校验后才放行——
|
||||
// 这是应用内扫码器的安全闸门，决定扫到的码能否在已登录会话内被导航。
|
||||
// 只接受「本站 origin + /link 路径 + 同时带 r 与 c」的 URL：
|
||||
// - 同源（origin 严格等于当前页 origin）——挡开放重定向 / 钓鱼站二维码；
|
||||
// - 路径恰为 /link——挡指向本站其他页的码；
|
||||
// - r/c 皆非空——挡残缺码。
|
||||
// 任一不满足返回 null（调用方据此提示「继续对准」，不导航）。
|
||||
export function parseLinkApprovalUrl(raw: string): LinkParams | null
|
||||
{
|
||||
let url: URL;
|
||||
try { url = new URL(raw); }
|
||||
catch { return null; }
|
||||
|
||||
if (url.origin !== window.location.origin) { return null; }
|
||||
if (url.pathname !== "/link") { return null; }
|
||||
|
||||
const requestId = url.searchParams.get("r");
|
||||
const code = url.searchParams.get("c");
|
||||
if (!requestId || !code) { return null; }
|
||||
|
||||
return { requestId, code };
|
||||
}
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
import { apiFetch, apiJSON } from "./api";
|
||||
|
||||
// 登录会话 / 设备的网络封装。全部走 apiFetch（带 Bearer + 401 自动续期）；
|
||||
// refresh_token 永不进 JS——吊销由后端令短 TTL 的 access_token 随之失效完成。
|
||||
|
||||
// ---- /api/me：本会话权限级别 ------------------------------------------------
|
||||
|
||||
export type SessionScopeValue = "full" | "guest";
|
||||
|
||||
interface MeRaw
|
||||
{
|
||||
// /api/me 现回传本会话的 scope（full=完整登录、guest=受限访客）。旧后端 / 异常
|
||||
// 缺字段时按 "full" 解析（只多展示入口，后端仍 403 兜底）。
|
||||
scope?: string;
|
||||
}
|
||||
|
||||
// fetchMeScope 拉取 /api/me 并解析本会话权限级别。失败 / 缺字段回退 "full"。
|
||||
export async function fetchMeScope(): Promise<SessionScopeValue>
|
||||
{
|
||||
try
|
||||
{
|
||||
const data = await apiJSON<MeRaw>("/api/me");
|
||||
return data.scope === "guest" ? "guest" : "full";
|
||||
}
|
||||
catch
|
||||
{
|
||||
return "full";
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 登录会话列表 / 吊销 / step-up ------------------------------------------
|
||||
|
||||
// 会话「种类」：oidc / self / guest 为网页 / 扫码会话；macos / windows / linux / ios
|
||||
// 为原生客户端（桌面 / 移动）——它们用 IdP 令牌、不入 web_sessions，由设备登记表呈现。
|
||||
export type SessionKind =
|
||||
| "oidc" | "self" | "guest"
|
||||
| "macos" | "windows" | "linux" | "ios";
|
||||
|
||||
const KNOWN_KINDS: readonly SessionKind[] = [
|
||||
"oidc", "self", "guest", "macos", "windows", "linux", "ios",
|
||||
];
|
||||
|
||||
export interface AuthSession
|
||||
{
|
||||
id: string;
|
||||
deviceName: string;
|
||||
kind: SessionKind;
|
||||
scope: SessionScopeValue;
|
||||
// current=true：这条就是本机当前会话（登出它等价于退出登录）。
|
||||
current: boolean;
|
||||
// online=true：该设备当前在线（有活跃 SSE 连接）。用于列表排序与在线指示。
|
||||
online: boolean;
|
||||
// native=true：原生客户端（无 web_session），登出走设备登记端点而非会话端点。
|
||||
native: boolean;
|
||||
createdAt: number;
|
||||
lastUsedAt: number;
|
||||
expiresAt: number;
|
||||
}
|
||||
|
||||
interface AuthSessionRaw
|
||||
{
|
||||
id: string;
|
||||
device_name?: string;
|
||||
kind?: string;
|
||||
scope?: string;
|
||||
current?: boolean;
|
||||
online?: boolean;
|
||||
native?: boolean;
|
||||
created_at?: number;
|
||||
last_used_at?: number;
|
||||
expires_at?: number;
|
||||
}
|
||||
|
||||
interface SessionsResp
|
||||
{
|
||||
sessions: AuthSessionRaw[];
|
||||
}
|
||||
|
||||
function normalizeKind(kind: string | undefined): SessionKind
|
||||
{
|
||||
return KNOWN_KINDS.includes(kind as SessionKind) ? (kind as SessionKind) : "oidc";
|
||||
}
|
||||
|
||||
// listSessions 拉取当前账号下的全部登录会话（含本机），每条带 online（当前是否在线）。
|
||||
// 受限访客无权管理登录会话、后端会 403，故调用方（SessionsPanel）在 guest 时根本不发
|
||||
// 此请求、直接展示克制说明，不会走到这里。
|
||||
export async function listSessions(): Promise<AuthSession[]>
|
||||
{
|
||||
const data = await apiJSON<SessionsResp>("/api/auth/sessions");
|
||||
const rows = Array.isArray(data.sessions) ? data.sessions : [];
|
||||
return rows.map((r) => (
|
||||
{
|
||||
id: r.id,
|
||||
deviceName: r.device_name ?? "",
|
||||
kind: normalizeKind(r.kind),
|
||||
scope: r.scope === "guest" ? "guest" : "full",
|
||||
current: r.current === true,
|
||||
online: r.online === true,
|
||||
native: r.native === true,
|
||||
createdAt: r.created_at ?? 0,
|
||||
lastUsedAt: r.last_used_at ?? 0,
|
||||
expiresAt: r.expires_at ?? 0,
|
||||
}));
|
||||
}
|
||||
|
||||
// StepUpRequiredError：DELETE /api/auth/sessions/{id} 因再认证缺失 / 过期被后端拒
|
||||
// （403 {error:"step_up_required"}）。调用方据此发起一次 step-up 再认证而非当成
|
||||
// 普通错误。
|
||||
export class StepUpRequiredError extends Error
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super("step_up_required");
|
||||
this.name = "StepUpRequiredError";
|
||||
}
|
||||
}
|
||||
|
||||
// revokeSession 真正吊销一条登录会话。网页 / 扫码会话走 /auth/sessions/{id}（删会话
|
||||
// 行 + 连带删设备）；原生客户端（id 形如 "device:设备名"）无 web_session，改走
|
||||
// /devices/{name} 按设备名注销。两者均：成功 204；后端要求再认证时抛
|
||||
// StepUpRequiredError（403 step_up_required），其余非 2xx 抛普通错误。
|
||||
const NATIVE_ID_PREFIX = "device:";
|
||||
|
||||
export async function revokeSession(id: string): Promise<void>
|
||||
{
|
||||
const path = id.startsWith(NATIVE_ID_PREFIX)
|
||||
? `/api/devices/${encodeURIComponent(id.slice(NATIVE_ID_PREFIX.length))}`
|
||||
: `/api/auth/sessions/${encodeURIComponent(id)}`;
|
||||
const r = await apiFetch(path, { method: "DELETE" });
|
||||
if (!r.ok)
|
||||
{
|
||||
const text = await r.text().catch(() => r.statusText);
|
||||
if (r.status === 403 && /step_up_required/.test(text))
|
||||
{
|
||||
throw new StepUpRequiredError();
|
||||
}
|
||||
throw new Error(`revoke session ${r.status}: ${text}`);
|
||||
}
|
||||
}
|
||||
|
||||
// postStepUp 把一次新鲜 prompt=login 再认证拿到的 {code, verifier} 交给后端就地
|
||||
// 核验，成功后服务端在本会话记下 stepped_up_at（5 分钟窗口内复用，不再反复要求）。
|
||||
// 成功 204；step-up 未开后端亦 204（视作通过）；失败 403。
|
||||
export async function postStepUp(code: string, verifier: string): Promise<void>
|
||||
{
|
||||
const r = await apiFetch("/api/auth/stepup", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ code, verifier }),
|
||||
});
|
||||
if (!r.ok)
|
||||
{
|
||||
const text = await r.text().catch(() => r.statusText);
|
||||
throw new Error(`step-up ${r.status}: ${text}`);
|
||||
}
|
||||
}
|
||||
@@ -11,14 +11,14 @@ import { Outlet, Link, createRootRoute, useLocation, useNavigate } from "@tansta
|
||||
import { Check, ChevronDown, LogOut, Monitor, Moon, Settings, Sun, Wifi, WifiOff } from "lucide-react";
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import { useAppStore, type ThemeMode } from "../store";
|
||||
import { logout } from "../features/auth/auth";
|
||||
import { logout, refreshSessionScope } from "../features/auth/auth";
|
||||
import { uploadClipboard } from "../features/clipboard/clipboard";
|
||||
import { onNativeClipboard } from "../net/desktop";
|
||||
import { startHub } from "../features/transfer/hub";
|
||||
import { resyncPush } from "../net/push";
|
||||
import { refreshICEServers, stopICEServerRefresh } from "../features/transfer/iceServers";
|
||||
import { t, type Locale } from "../i18n";
|
||||
import { Callout, IconButton, Tooltip } from "../ui/primitives";
|
||||
import { Badge, Callout, IconButton, Tooltip } from "../ui/primitives";
|
||||
import { Wordmark } from "../ui/brand";
|
||||
|
||||
export const Route = createRootRoute({ component: RootLayout });
|
||||
@@ -26,6 +26,8 @@ export const Route = createRootRoute({ component: RootLayout });
|
||||
function RootLayout()
|
||||
{
|
||||
const user = useAppStore((s) => s.user);
|
||||
const authMode = useAppStore((s) => s.authMode);
|
||||
const sessionScope = useAppStore((s) => s.sessionScope);
|
||||
const selfDeviceName = useAppStore((s) => s.selfDeviceName);
|
||||
const sseConnected = useAppStore((s) => s.sseConnected);
|
||||
const sseReconnecting = useAppStore((s) => s.sseReconnecting);
|
||||
@@ -39,6 +41,19 @@ function RootLayout()
|
||||
// 这里只渲染 <Outlet/>，不包 AppShell，从而隐去顶栏。
|
||||
const fullscreen = isAuthRoute(location.pathname);
|
||||
|
||||
// 反应式登出守卫：当登录态在运行中被清空（access token 被远程吊销 / 过期 →
|
||||
// apiFetch 触发 forceLogout，见 net/api.ts），把界面送回登录页。路由的
|
||||
// beforeLoad 只在导航时跑，停在当前页时不会自动重定向，故这里补一道反应式跳转。
|
||||
// 仅 prod：dev 无远程吊销概念，登录态由 loginDev 同步建立。已在认证类路由上则
|
||||
// 不跳（避免与 /login 自身、扫码显码 / 批准页打架）。
|
||||
useEffect(() =>
|
||||
{
|
||||
if (authMode !== "prod") { return; }
|
||||
if (user) { return; }
|
||||
if (isAuthRoute(location.pathname)) { return; }
|
||||
navigate({ to: "/login", search: { dev_user: undefined } });
|
||||
}, [ authMode, user, location.pathname, navigate ]);
|
||||
|
||||
// SSE 在登录后立即开启；user.id 或 selfDeviceName 任一变化即重连
|
||||
// （改名后会自动以新设备名重新注册）。
|
||||
useEffect(() =>
|
||||
@@ -46,6 +61,9 @@ function RootLayout()
|
||||
if (!user || !selfDeviceName) { return; }
|
||||
const ctrl = new AbortController();
|
||||
startHub(ctrl.signal);
|
||||
// 校正本会话权限级别（/api/me 的 scope）：受限访客据此隐藏账号管理入口。
|
||||
// 覆盖所有登录路径（OAuth / 扫码新设备 / 开机水合 / dev），一处搞定。
|
||||
void refreshSessionScope();
|
||||
// 预取 Cloudflare TURN 凭据（或 STUN 回退），首次 WebRTC 同步可用。
|
||||
void refreshICEServers();
|
||||
// 已开启推送的浏览器：登录后把订阅重新登记到当前用户名下（自愈换用户 /
|
||||
@@ -125,7 +143,12 @@ function RootLayout()
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Stack gap={2} px="sm" pt="xs" pb={6}>
|
||||
<Text size="sm" fw={500} truncate>{user.name}</Text>
|
||||
<Group gap={6} wrap="nowrap" align="center">
|
||||
<Text size="sm" fw={500} truncate>{user.name}</Text>
|
||||
{sessionScope === "guest" && (
|
||||
<Badge tone="warn">{t("settings.guest.badge")}</Badge>
|
||||
)}
|
||||
</Group>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("nav.thisDeviceLabel")}
|
||||
<Text span fw={500}>{selfDeviceName}</Text>
|
||||
@@ -316,6 +339,7 @@ function isAuthRoute(pathname: string): boolean
|
||||
|| pathname === "/setup"
|
||||
|| pathname === "/link"
|
||||
|| pathname === "/link/new"
|
||||
|| pathname === "/link/scan"
|
||||
|| pathname.startsWith("/oauth/");
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { Container } from "@mantine/core";
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
|
||||
import { useAppStore } from "../store";
|
||||
import { consumeLinkReturn } from "../features/qr/returnTo";
|
||||
import { DeviceStrip } from "../features/devices/DeviceStrip";
|
||||
@@ -33,7 +33,9 @@ void CLIPBOARD_MAX_BYTES;
|
||||
|
||||
function HomePage()
|
||||
{
|
||||
const navigate = useNavigate();
|
||||
const user = useAppStore((s) => s.user);
|
||||
const sessionScope = useAppStore((s) => s.sessionScope);
|
||||
const devices = useAppStore((s) => s.devices);
|
||||
const selfDeviceName = useAppStore((s) => s.selfDeviceName);
|
||||
const activeTransfers = useAppStore((s) => s.activeTransfers);
|
||||
@@ -96,6 +98,13 @@ function HomePage()
|
||||
selectedDevice={selectedDevice}
|
||||
onSelect={setSelectedDevice}
|
||||
onDropFile={handleDropFile}
|
||||
// 受限访客不能授权新设备：不传 onLinkDevice，DeviceStrip 据此
|
||||
// 隐藏「扫码登录新设备」入口（条件渲染已在组件内）。
|
||||
onLinkDevice={
|
||||
sessionScope === "guest"
|
||||
? undefined
|
||||
: () => navigate({ to: "/link/scan" })
|
||||
}
|
||||
/>
|
||||
|
||||
<div className={s.dualColumn}>
|
||||
|
||||
@@ -77,27 +77,34 @@
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--surface);
|
||||
/* 未选中态明显更轻：sunken 底 + 细分隔线左条，与选中态拉开对比。 */
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--divider);
|
||||
border-left: 3px solid var(--divider);
|
||||
border-radius: var(--radius-control);
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
color: var(--text-muted);
|
||||
transition:
|
||||
border-color var(--dur-fast) var(--ease-out),
|
||||
background-color var(--dur-fast) var(--ease-out);
|
||||
background-color var(--dur-fast) var(--ease-out),
|
||||
box-shadow var(--dur-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.choice:hover { border-color: var(--divider-strong); }
|
||||
|
||||
/* 选中态：accent 左色条 + soft 底（同 Callout / Activity 的状态编码语汇）。 */
|
||||
/* 选中态：实心 accent 边框 + 加粗左色条 + accent 描边环 + soft 底（同
|
||||
DeviceStrip.portSelected 的强选中语汇），与未选中态形成明显对比。 */
|
||||
.choiceOn
|
||||
{
|
||||
background: var(--accent-softer);
|
||||
border-color: var(--accent-ring);
|
||||
border-left-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
border-color: var(--accent);
|
||||
border-left: 4px solid var(--accent);
|
||||
color: var(--text);
|
||||
box-shadow: 0 0 0 1px var(--accent);
|
||||
}
|
||||
|
||||
.choiceOn:hover { border-color: var(--accent); }
|
||||
|
||||
.choice:focus-visible
|
||||
{
|
||||
outline: 2px solid var(--accent-ring);
|
||||
@@ -130,6 +137,9 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 选中项标题着 accent 色，进一步强化「当前选的是这个」。 */
|
||||
.choiceOn .choiceTitle { color: var(--accent); }
|
||||
|
||||
.choiceHint
|
||||
{
|
||||
font-size: var(--fs-12);
|
||||
@@ -137,6 +147,9 @@
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* 选中项说明文字恢复常规对比（未选中时整块被压暗）。 */
|
||||
.choiceOn .choiceHint { color: var(--text-muted); }
|
||||
|
||||
/* 批准 / 拒绝：批准是主色行动，拒绝是安静的 ghost。 */
|
||||
.actions
|
||||
{
|
||||
|
||||
+36
-11
@@ -23,6 +23,8 @@ export const Route = createFileRoute("/link")({
|
||||
({
|
||||
r: typeof search.r === "string" ? search.r : undefined,
|
||||
c: typeof search.c === "string" ? search.c : undefined,
|
||||
// p：信任时长选择（persist/once）。step-up 整页跳转回来后据此恢复，避免选择丢失。
|
||||
p: typeof search.p === "string" ? search.p : undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -31,12 +33,14 @@ type Outcome = "approved" | "denied" | "expired" | "error" | null;
|
||||
function LinkApprovePage()
|
||||
{
|
||||
const navigate = useNavigate();
|
||||
const { r: requestId, c: code } = Route.useSearch();
|
||||
const { r: requestId, c: code, p: persistParam } = Route.useSearch();
|
||||
const user = useAppStore((s) => s.user);
|
||||
|
||||
const [ info, setInfo ] = useState<QrRequestInfo | null>(null);
|
||||
const [ loadError, setLoadError ] = useState<string | null>(null);
|
||||
const [ persist, setPersist ] = useState<QrPersist>("persist");
|
||||
// 初值优先取 URL 的 p（step-up 跳转回来后恢复选择），否则默认更安全的「仅此次」
|
||||
// （受限访客）——避免一路默认到完整会话（full）。
|
||||
const [ persist, setPersist ] = useState<QrPersist>(persistParam === "persist" ? "persist" : "once");
|
||||
const [ submitting, setSubmitting ] = useState(false);
|
||||
const [ outcome, setOutcome ] = useState<Outcome>(null);
|
||||
const [ actionError, setActionError ] = useState<string | null>(null);
|
||||
@@ -92,7 +96,10 @@ function LinkApprovePage()
|
||||
setStepUpRejected(false);
|
||||
try
|
||||
{
|
||||
await qrApprove(requestId, code, "guest", persist, stash?.code, stash?.verifier);
|
||||
// persist=「信任此设备」→ 完整会话（scope=full）；once=「仅此次」→ 受限访客
|
||||
// （scope=guest）。后端按 scope 决定授予的会话级别，二者与 persist 时长一一对应。
|
||||
const scope = persist === "persist" ? "full" : "guest";
|
||||
await qrApprove(requestId, code, scope, persist, stash?.code, stash?.verifier);
|
||||
setOutcome("approved");
|
||||
}
|
||||
catch (e)
|
||||
@@ -124,7 +131,15 @@ function LinkApprovePage()
|
||||
setSubmitting(true);
|
||||
setActionError(null);
|
||||
setStepUpRejected(false);
|
||||
try { await startStepUpReauth(window.location.pathname + window.location.search); }
|
||||
try
|
||||
{
|
||||
// 把当前「信任时长」选择编进 returnTo：step-up 整页跳转回来后页面重载、
|
||||
// React state 复位，必须从 URL 恢复 persist，否则会回落默认、令本应受限
|
||||
// 的设备被建成完整会话（#2 根因）。
|
||||
const back = new URLSearchParams(window.location.search);
|
||||
back.set("p", persist);
|
||||
await startStepUpReauth(window.location.pathname + "?" + back.toString());
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
setActionError(e instanceof Error ? e.message : String(e));
|
||||
@@ -155,10 +170,13 @@ function LinkApprovePage()
|
||||
if (!requestId || !code)
|
||||
{
|
||||
return (
|
||||
<AuthShell title={t("qr.approve.title")} hideBrand>
|
||||
<AuthShell title={t("qr.approve.title")} hideBrand skipAutospace>
|
||||
<Callout tone="error" icon={<AlertTriangle size={16} />}>
|
||||
{t("qr.approve.badLink")}
|
||||
</Callout>
|
||||
<Button variant="secondary" size="lg" block onClick={() => navigate({ to: "/" })}>
|
||||
{t("qr.approve.backHome")}
|
||||
</Button>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
@@ -170,6 +188,7 @@ function LinkApprovePage()
|
||||
title={t("qr.approve.title")}
|
||||
subtitle={t("qr.approve.signInFirst")}
|
||||
hideBrand
|
||||
skipAutospace
|
||||
>
|
||||
<Button
|
||||
variant="primary"
|
||||
@@ -189,8 +208,11 @@ function LinkApprovePage()
|
||||
if (loadError)
|
||||
{
|
||||
return (
|
||||
<AuthShell title={t("qr.approve.title")} hideBrand>
|
||||
<AuthShell title={t("qr.approve.title")} hideBrand skipAutospace>
|
||||
<Callout tone="error" icon={<AlertTriangle size={16} />}>{loadError}</Callout>
|
||||
<Button variant="secondary" size="lg" block onClick={() => navigate({ to: "/" })}>
|
||||
{t("qr.approve.backHome")}
|
||||
</Button>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
@@ -198,12 +220,12 @@ function LinkApprovePage()
|
||||
if (!info)
|
||||
{
|
||||
return (
|
||||
<AuthShell title={t("qr.approve.title")} subtitle={t("qr.approve.loading")} hideBrand />
|
||||
<AuthShell title={t("qr.approve.title")} subtitle={t("qr.approve.loading")} hideBrand skipAutospace />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthShell title={t("qr.approve.title")} subtitle={t("qr.approve.subtitle")} hideBrand>
|
||||
<AuthShell title={t("qr.approve.title")} subtitle={t("qr.approve.subtitle")} hideBrand skipAutospace>
|
||||
{/* 待批准设备：单行身份块——图标 + 名字 + 来源 IP（monospace 元数据）。 */}
|
||||
<div className={s.device}>
|
||||
<span className={s.deviceIcon}>
|
||||
@@ -237,9 +259,12 @@ function LinkApprovePage()
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 权限范围说明：本期固定受限访客，明确告知边界（非装饰）。 */}
|
||||
{/* 权限范围说明：随选中项切换——信任=完整登录、仅此次=受限访客，明确告知
|
||||
这台设备将以什么身份登录（非装饰）。 */}
|
||||
<Callout tone="info" icon={<ShieldCheck size={16} />}>
|
||||
{t("qr.approve.scopeGuest")}
|
||||
{persist === "persist"
|
||||
? t("qr.approve.scopeFull")
|
||||
: t("qr.approve.scopeGuest")}
|
||||
</Callout>
|
||||
|
||||
{/* step-up：批准前的明确安全步骤——需先验证身份（provider 2FA 即此处过）。 */}
|
||||
@@ -332,7 +357,7 @@ function OutcomeView(props: { outcome: Exclude<Outcome, null>; onHome: () => voi
|
||||
title: t("qr.approve.errorTitle"), body: t("qr.approve.error") },
|
||||
}[outcome];
|
||||
return (
|
||||
<AuthShell title={map.title} hideBrand>
|
||||
<AuthShell title={map.title} hideBrand skipAutospace>
|
||||
<Callout tone={map.tone} icon={map.icon}>{map.body}</Callout>
|
||||
<Button variant="secondary" size="lg" block onClick={onHome}>
|
||||
{t("qr.approve.backHome")}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { AlertTriangle, ArrowRight, RefreshCw, ScanLine } from "lucide-react";
|
||||
import { AlertTriangle, ArrowLeft, ArrowRight, RefreshCw, ScanLine } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { AuthShell } from "../features/auth/AuthShell";
|
||||
import { syncWebDeviceName } from "../features/auth/auth";
|
||||
@@ -109,6 +109,16 @@ function LinkNewPage()
|
||||
void begin(name.trim());
|
||||
};
|
||||
|
||||
// 回上一步：弃掉当前二维码会话，退回命名步骤（轮询随 session 清空由 effect 清理）。
|
||||
const handleBackToName = () =>
|
||||
{
|
||||
cancelPollRef.current?.();
|
||||
cancelPollRef.current = null;
|
||||
setSession(null);
|
||||
setError(null);
|
||||
setStep("name");
|
||||
};
|
||||
|
||||
if (step === "name")
|
||||
{
|
||||
return (
|
||||
@@ -116,6 +126,7 @@ function LinkNewPage()
|
||||
title={t("qr.show.title")}
|
||||
subtitle={t("qr.show.subtitle")}
|
||||
hideBrand
|
||||
skipAutospace
|
||||
>
|
||||
{error && (
|
||||
<Callout tone="error" icon={<AlertTriangle size={16} />}>{error}</Callout>
|
||||
@@ -146,12 +157,21 @@ function LinkNewPage()
|
||||
>
|
||||
{t("qr.show.generate")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
block
|
||||
leftIcon={<ArrowLeft size={16} />}
|
||||
onClick={() => navigate({ to: "/" })}
|
||||
>
|
||||
{t("qr.show.back")}
|
||||
</Button>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthShell title={t("qr.show.scanTitle")} hideBrand>
|
||||
<AuthShell title={t("qr.show.scanTitle")} hideBrand skipAutospace>
|
||||
{error && (
|
||||
<Callout tone="error" icon={<AlertTriangle size={16} />}>{error}</Callout>
|
||||
)}
|
||||
@@ -189,6 +209,19 @@ function LinkNewPage()
|
||||
{t("qr.show.regenerate")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 始终给一个明确退出口：回到命名步骤，避免卡在显码 / 终态页。 */}
|
||||
{phase !== "approved" && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
block
|
||||
leftIcon={<ArrowLeft size={16} />}
|
||||
onClick={handleBackToName}
|
||||
>
|
||||
{t("qr.show.backToName")}
|
||||
</Button>
|
||||
)}
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
/* 应用内扫码器：取景框是这一屏的签名时刻——与显码页的 QrCanvas 互为镜像。
|
||||
显码页把一枚码托在四角定位记号里给人看，扫码页则在同一组记号里「找」一枚码。
|
||||
同一套 accent L 形角标，同一套 recessed plate 语汇，零新全局样式。 */
|
||||
|
||||
.stage
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-2) 0 var(--space-1);
|
||||
}
|
||||
|
||||
/* 取景框：方形 viewport，下沉 plate 把相机画面托成「一个对准的对象」。 */
|
||||
.viewport
|
||||
{
|
||||
position: relative;
|
||||
width: 248px;
|
||||
height: 248px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--divider);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
/* 视频铺满取景框，居中裁切。镜像关闭——后置 / 外接相机扫码不应翻转。 */
|
||||
.video
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 四角定位记号：与 QrCanvas 同款 accent L 形角标，内缩到取景框内沿。 */
|
||||
.tick
|
||||
{
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid var(--accent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tl { top: var(--space-3); left: var(--space-3);
|
||||
border-right: none; border-bottom: none; border-top-left-radius: 4px; }
|
||||
.tr { top: var(--space-3); right: var(--space-3);
|
||||
border-left: none; border-bottom: none; border-top-right-radius: 4px; }
|
||||
.bl { bottom: var(--space-3); left: var(--space-3);
|
||||
border-right: none; border-top: none; border-bottom-left-radius: 4px; }
|
||||
.br { bottom: var(--space-3); right: var(--space-3);
|
||||
border-left: none; border-top: none; border-bottom-right-radius: 4px; }
|
||||
|
||||
/* 扫描线：唯一的动效「时刻」，accent 横线在取景框内上下扫动，传达「正在找」。
|
||||
reduced-motion 下归零（见底部 media query）。 */
|
||||
.beam
|
||||
{
|
||||
position: absolute;
|
||||
left: var(--space-3);
|
||||
right: var(--space-3);
|
||||
top: var(--space-3);
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 8px 0 var(--accent-ring);
|
||||
opacity: 0.85;
|
||||
animation: scan-beam 2.4s var(--ease-in-out) infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes scan-beam
|
||||
{
|
||||
0% { transform: translateY(0); }
|
||||
50% { transform: translateY(202px); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* 命中过渡：解出有效码后取景框整体淡出，承接导航到批准页。 */
|
||||
.viewportHit
|
||||
{
|
||||
border-color: var(--accent-ring);
|
||||
}
|
||||
|
||||
.statusLine
|
||||
{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--fs-13);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* 两步指引：与显码页同款语义序号列表。 */
|
||||
.steps
|
||||
{
|
||||
margin: 0;
|
||||
padding-left: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--fs-13);
|
||||
line-height: var(--lh-body);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.steps li::marker
|
||||
{
|
||||
color: var(--accent);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.actions
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce)
|
||||
{
|
||||
.beam { animation: none; opacity: 0; }
|
||||
}
|
||||
@@ -0,0 +1,259 @@
|
||||
import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
|
||||
import { AlertTriangle, ArrowLeft, Camera, CameraOff, ScanLine } from "lucide-react";
|
||||
import jsQR from "jsqr";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { AuthShell } from "../features/auth/AuthShell";
|
||||
import { parseLinkApprovalUrl } from "../net/qr";
|
||||
import { useAppStore } from "../store";
|
||||
import { t } from "../i18n";
|
||||
import { Button, Callout } from "../ui/primitives";
|
||||
import s from "./link_.scan.module.css";
|
||||
|
||||
// 应用内扫码器：在已登录的 cdrop 里直接调相机扫码，解出 /link?r=&c= 后在同一已鉴权
|
||||
// 会话内导航到批准页——绕开「系统相机打开链接落到未登录浏览器」的断流。批准走既有
|
||||
// /link 页（step-up 开启时该页会自动要求再认证），本组件只负责「扫到合法码 → 导航」。
|
||||
export const Route = createFileRoute("/link_/scan")({
|
||||
component: LinkScanPage,
|
||||
// 守卫：受限访客（scope=guest）不能授权新设备（后端 approve 亦 403），故连扫码
|
||||
// 授权页都不让进——直接弹回首页，避免误触。未登录交由批准页处理，这里只挡访客。
|
||||
beforeLoad: () =>
|
||||
{
|
||||
if (useAppStore.getState().sessionScope === "guest")
|
||||
{
|
||||
throw redirect({ to: "/" });
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// 扫码器的几种态：请求相机中 / 正在扫 / 命中（淡出过渡）/ 无摄像头 / 权限被拒 / 其他错误。
|
||||
type ScanState = "starting" | "scanning" | "hit" | "noCamera" | "denied" | "error";
|
||||
|
||||
function LinkScanPage()
|
||||
{
|
||||
const navigate = useNavigate();
|
||||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||||
// 解码用的离屏 canvas，逐帧把视频画上去再喂给 jsQR。
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const streamRef = useRef<MediaStream | null>(null);
|
||||
const rafRef = useRef<number | null>(null);
|
||||
// 命中后置位：阻止 rAF 循环继续解码 / 重复导航。
|
||||
const doneRef = useRef(false);
|
||||
|
||||
const [ state, setState ] = useState<ScanState>("starting");
|
||||
const [ errorMsg, setErrorMsg ] = useState<string | null>(null);
|
||||
// 扫到无关 / 非本站二维码：提示「继续对准」，但相机继续扫，不打断。
|
||||
const [ sawForeignCode, setSawForeignCode ] = useState(false);
|
||||
|
||||
// stop 释放相机：停轨道 + 取消 rAF。卸载、命中、出错时都调用，确保相机指示灯熄灭。
|
||||
const stop = useCallback(() =>
|
||||
{
|
||||
if (rafRef.current !== null) { cancelAnimationFrame(rafRef.current); rafRef.current = null; }
|
||||
const stream = streamRef.current;
|
||||
if (stream) { stream.getTracks().forEach((tr) => tr.stop()); streamRef.current = null; }
|
||||
}, []);
|
||||
|
||||
// tick：单帧解码循环。把当前视频帧画到离屏 canvas，jsQR 解一次；解出有效本站
|
||||
// /link 码即停机 + 应用内导航，否则下一帧继续。
|
||||
const tick = useCallback(() =>
|
||||
{
|
||||
if (doneRef.current) { return; }
|
||||
const video = videoRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
if (!video || !canvas || video.readyState < video.HAVE_ENOUGH_DATA)
|
||||
{
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
return;
|
||||
}
|
||||
|
||||
const w = video.videoWidth;
|
||||
const h = video.videoHeight;
|
||||
if (!w || !h)
|
||||
{
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
return;
|
||||
}
|
||||
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext("2d", { willReadFrequently: true });
|
||||
if (!ctx)
|
||||
{
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.drawImage(video, 0, 0, w, h);
|
||||
const image = ctx.getImageData(0, 0, w, h);
|
||||
const result = jsQR(image.data, w, h, { inversionAttempts: "dontInvert" });
|
||||
|
||||
if (result && result.data)
|
||||
{
|
||||
const link = parseLinkApprovalUrl(result.data);
|
||||
if (link)
|
||||
{
|
||||
// 命中合法本站码：停机、淡出，应用内导航到批准页（留在已登录 SPA 会话）。
|
||||
doneRef.current = true;
|
||||
stop();
|
||||
setState("hit");
|
||||
// p 不带：批准页会回落到更安全的默认「仅此次」（受限访客）。
|
||||
navigate({ to: "/link", search: { r: link.requestId, c: link.code, p: undefined } });
|
||||
return;
|
||||
}
|
||||
// 扫到了码，但不是本站 /link 码（别的二维码 / 钓鱼链接）：提示继续对准。
|
||||
setSawForeignCode(true);
|
||||
}
|
||||
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
}, [ navigate, stop ]);
|
||||
|
||||
// 进页面即请求相机并起解码循环。无摄像头 / 权限被拒分别落到清晰的引导态。
|
||||
useEffect(() =>
|
||||
{
|
||||
doneRef.current = false;
|
||||
let cancelled = false;
|
||||
|
||||
const start = async () =>
|
||||
{
|
||||
if (!navigator.mediaDevices?.getUserMedia)
|
||||
{
|
||||
setState("noCamera");
|
||||
return;
|
||||
}
|
||||
try
|
||||
{
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
// 优先后置相机（手机扫码自然朝外）；桌面无后置则退到任意可用相机。
|
||||
video: { facingMode: { ideal: "environment" } },
|
||||
audio: false,
|
||||
});
|
||||
if (cancelled) { stream.getTracks().forEach((tr) => tr.stop()); return; }
|
||||
streamRef.current = stream;
|
||||
const video = videoRef.current;
|
||||
if (video)
|
||||
{
|
||||
video.srcObject = stream;
|
||||
// iOS Safari 要求 playsInline + 显式 play()，否则不出画面。
|
||||
await video.play().catch(() => { /* 自动播放被拦：画面仍随轨道更新 */ });
|
||||
}
|
||||
setState("scanning");
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
if (cancelled) { return; }
|
||||
const name = e instanceof DOMException ? e.name : "";
|
||||
if (name === "NotAllowedError" || name === "SecurityError")
|
||||
{
|
||||
setState("denied");
|
||||
}
|
||||
else if (name === "NotFoundError" || name === "OverconstrainedError")
|
||||
{
|
||||
setState("noCamera");
|
||||
}
|
||||
else
|
||||
{
|
||||
setErrorMsg(e instanceof Error ? e.message : String(e));
|
||||
setState("error");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
void start();
|
||||
return () => { cancelled = true; stop(); };
|
||||
}, [ tick, stop ]);
|
||||
|
||||
const goBack = () => navigate({ to: "/" });
|
||||
|
||||
// ---- 渲染分支 --------------------------------------------------------
|
||||
|
||||
// 无摄像头（桌面常见）：优雅降级，引导改用手机扫，不报错。
|
||||
if (state === "noCamera")
|
||||
{
|
||||
return (
|
||||
<AuthShell title={t("qr.scan.title")} hideBrand skipAutospace>
|
||||
<Callout tone="info" icon={<CameraOff size={16} />}>
|
||||
{t("qr.scan.noCamera")}
|
||||
</Callout>
|
||||
<Button variant="secondary" size="lg" block leftIcon={<ArrowLeft size={16} />} onClick={goBack}>
|
||||
{t("qr.scan.back")}
|
||||
</Button>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
// 权限被拒：明确告诉用户去哪儿改回来。
|
||||
if (state === "denied")
|
||||
{
|
||||
return (
|
||||
<AuthShell title={t("qr.scan.title")} hideBrand skipAutospace>
|
||||
<Callout tone="warn" icon={<CameraOff size={16} />}>
|
||||
{t("qr.scan.denied")}
|
||||
</Callout>
|
||||
<Button variant="secondary" size="lg" block leftIcon={<ArrowLeft size={16} />} onClick={goBack}>
|
||||
{t("qr.scan.back")}
|
||||
</Button>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
if (state === "error")
|
||||
{
|
||||
return (
|
||||
<AuthShell title={t("qr.scan.title")} hideBrand skipAutospace>
|
||||
<Callout tone="error" icon={<AlertTriangle size={16} />}>
|
||||
{errorMsg ?? t("qr.scan.error")}
|
||||
</Callout>
|
||||
<Button variant="secondary" size="lg" block leftIcon={<ArrowLeft size={16} />} onClick={goBack}>
|
||||
{t("qr.scan.back")}
|
||||
</Button>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthShell title={t("qr.scan.title")} subtitle={t("qr.scan.subtitle")} hideBrand skipAutospace>
|
||||
<div className={s.stage}>
|
||||
<div className={`${s.viewport} ${state === "hit" ? s.viewportHit : ""}`}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
className={s.video}
|
||||
muted
|
||||
playsInline
|
||||
// 仅装饰性预览，扫码内容不读屏；语义流程在批准页。
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{state === "scanning" && <span className={s.beam} aria-hidden="true" />}
|
||||
<span className={`${s.tick} ${s.tl}`} aria-hidden="true" />
|
||||
<span className={`${s.tick} ${s.tr}`} aria-hidden="true" />
|
||||
<span className={`${s.tick} ${s.bl}`} aria-hidden="true" />
|
||||
<span className={`${s.tick} ${s.br}`} aria-hidden="true" />
|
||||
</div>
|
||||
<canvas ref={canvasRef} style={{ display: "none" }} />
|
||||
|
||||
<div className={s.statusLine}>
|
||||
{state === "starting"
|
||||
? <><Camera size={14} />{t("qr.scan.starting")}</>
|
||||
: <><ScanLine size={14} />{t("qr.scan.aiming")}</>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 扫到非本站码：安静提示继续对准，相机不中断。 */}
|
||||
{sawForeignCode && state === "scanning" && (
|
||||
<Callout tone="info" icon={<ScanLine size={16} />}>
|
||||
{t("qr.scan.foreign")}
|
||||
</Callout>
|
||||
)}
|
||||
|
||||
<ol className={s.steps} data-jz-level="paragraph">
|
||||
<li>{t("qr.scan.howto1")}</li>
|
||||
<li>{t("qr.scan.howto2")}</li>
|
||||
</ol>
|
||||
|
||||
<div className={s.actions}>
|
||||
<Button variant="ghost" size="lg" block leftIcon={<ArrowLeft size={16} />} onClick={goBack}>
|
||||
{t("qr.scan.back")}
|
||||
</Button>
|
||||
</div>
|
||||
</AuthShell>
|
||||
);
|
||||
}
|
||||
+12
-19
@@ -1,4 +1,4 @@
|
||||
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { AlertTriangle, LogIn, QrCode } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { fetchAuthConfig, loginDev, loginProd } from "../features/auth/auth";
|
||||
@@ -131,25 +131,18 @@ function LoginPage()
|
||||
>
|
||||
{t("login.prod.button")}
|
||||
</Button>
|
||||
{/* 扫码登录入口：从已登录的另一台设备批准本机接入，无需在此重登。
|
||||
克制——一行带图标的次级链接，不与主 CTA 争重。 */}
|
||||
<Link
|
||||
to="/link/new"
|
||||
search={{}}
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: "var(--space-2)",
|
||||
marginTop: "calc(var(--space-1) * -1)",
|
||||
color: "var(--text-muted)",
|
||||
fontSize: "var(--fs-13)",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
{/* 扫码登录入口：与 OAuth 登录平级的另一种登录方式——从已登录的
|
||||
另一台设备批准本机接入，无需在此重登。secondary 变体、等宽、
|
||||
同 size，与主登录按钮同级视觉重量。 */}
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
block
|
||||
leftIcon={<QrCode size={16} />}
|
||||
onClick={() => navigate({ to: "/link/new" })}
|
||||
>
|
||||
<QrCode size={15} />
|
||||
<span>{t("qr.entry.fromLogin")}</span>
|
||||
</Link>
|
||||
{t("qr.entry.fromLogin")}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</AuthShell>
|
||||
|
||||
+289
-107
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
Anchor,
|
||||
Container,
|
||||
@@ -8,9 +8,12 @@ import {
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { createFileRoute, Link, redirect, useNavigate } from "@tanstack/react-router";
|
||||
import { Bell, LogOut, Trash2 } from "lucide-react";
|
||||
import { logout, syncWebDeviceName } from "../features/auth/auth";
|
||||
import { AlertTriangle, Bell, LogOut, ShieldAlert, Trash2 } from "lucide-react";
|
||||
import { logout, startStepUpReauth, syncWebDeviceName } from "../features/auth/auth";
|
||||
import { DesktopSettings } from "../features/desktop/DesktopSettings";
|
||||
import {
|
||||
consumePendingRevoke, consumeStepUpCode, stashPendingRevoke,
|
||||
} from "../features/qr/stepUp";
|
||||
import { isDesktop, persistDesktopDeviceName } from "../net/desktop";
|
||||
import { apiFetch } from "../net/api";
|
||||
import {
|
||||
@@ -20,25 +23,15 @@ import {
|
||||
pushSupported,
|
||||
type PushState,
|
||||
} from "../net/push";
|
||||
import { useAppStore, type DeviceInfo } from "../store";
|
||||
import {
|
||||
listSessions, postStepUp, revokeSession, StepUpRequiredError,
|
||||
type AuthSession,
|
||||
} from "../net/sessions";
|
||||
import { useAppStore } from "../store";
|
||||
import { t } from "../i18n";
|
||||
import { formatRelative, isAsciiDeviceName } from "../utils/format";
|
||||
import { Badge, Button, Panel, TextField } from "../ui/primitives";
|
||||
import { Badge, Button, Callout, Panel, TextField } from "../ui/primitives";
|
||||
import { StateDot } from "../ui/glyphs";
|
||||
|
||||
// deviceTypeLabel 把后端存的设备类型本地化展示（浏览器 / macOS 客户端 / …）。
|
||||
// 容错匹配（与 DeviceStrip 的 mapKind 一致），未知类型回退原值。
|
||||
function deviceTypeLabel(type: string): string
|
||||
{
|
||||
const k = type.toLowerCase();
|
||||
if (k.includes("mac") || k === "darwin") { return t("deviceType.macos"); }
|
||||
if (k.includes("win")) { return t("deviceType.windows"); }
|
||||
if (k.includes("linux")) { return t("deviceType.linux"); }
|
||||
if (k === "shortcut") { return t("deviceType.shortcut"); }
|
||||
if (k.includes("ios") || k === "iphone" || k === "ipad") { return t("deviceType.ios"); }
|
||||
if (k === "browser") { return t("deviceType.browser"); }
|
||||
return type;
|
||||
}
|
||||
import { toast } from "../ui/feedback";
|
||||
|
||||
export const Route = createFileRoute("/settings")({
|
||||
@@ -55,19 +48,14 @@ function SettingsPage()
|
||||
{
|
||||
const navigate = useNavigate();
|
||||
const user = useAppStore((s) => s.user);
|
||||
const sessionScope = useAppStore((s) => s.sessionScope);
|
||||
const isGuest = sessionScope === "guest";
|
||||
const selfDeviceName = useAppStore((s) => s.selfDeviceName);
|
||||
const setSelfDeviceName = useAppStore((s) => s.setSelfDeviceName);
|
||||
const storeDevices = useAppStore((s) => s.devices);
|
||||
|
||||
const [ pendingName, setPendingName ] = useState(selfDeviceName ?? "");
|
||||
const [ removing, setRemoving ] = useState<Set<string>>(new Set());
|
||||
const [ renaming, setRenaming ] = useState(false);
|
||||
|
||||
const peerDevices = useMemo(
|
||||
() => storeDevices.filter((d) => d.name !== selfDeviceName),
|
||||
[ storeDevices, selfDeviceName ],
|
||||
);
|
||||
|
||||
const trimmedName = pendingName.trim();
|
||||
const canSaveName = !!trimmedName && trimmedName !== selfDeviceName;
|
||||
|
||||
@@ -118,48 +106,6 @@ function SettingsPage()
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemovePeer = async (name: string) =>
|
||||
{
|
||||
if (!window.confirm(t("settings.unregister.peerConfirm", { name }))) { return; }
|
||||
|
||||
setRemoving((prev) =>
|
||||
{
|
||||
const next = new Set(prev);
|
||||
next.add(name);
|
||||
return next;
|
||||
});
|
||||
try
|
||||
{
|
||||
const r = await apiFetch(
|
||||
`/api/devices/${encodeURIComponent(name)}`,
|
||||
{ method: "DELETE" },
|
||||
);
|
||||
if (!r.ok)
|
||||
{
|
||||
const text = await r.text().catch(() => r.statusText);
|
||||
throw new Error(`${r.status}: ${text}`);
|
||||
}
|
||||
// 服务端的 publishPresence 会通过 SSE 推送新的设备列表，store
|
||||
// 会随之更新，这里不需要手动 setDevices。
|
||||
toast.ok("设备已移除", name);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
toast.error(t("settings.error.delete", {
|
||||
message: e instanceof Error ? e.message : String(e),
|
||||
}));
|
||||
}
|
||||
finally
|
||||
{
|
||||
setRemoving((prev) =>
|
||||
{
|
||||
const next = new Set(prev);
|
||||
next.delete(name);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnregisterSelf = async () =>
|
||||
{
|
||||
if (!selfDeviceName) { return; }
|
||||
@@ -194,12 +140,27 @@ function SettingsPage()
|
||||
<Container size="sm" py="lg">
|
||||
<Stack gap="lg">
|
||||
<Group justify="space-between" align="center" wrap="nowrap">
|
||||
<Title order={2}>{t("settings.title")}</Title>
|
||||
<Group gap="xs" align="center" wrap="nowrap">
|
||||
<Title order={2}>{t("settings.title")}</Title>
|
||||
{isGuest && <Badge tone="warn">{t("settings.guest.badge")}</Badge>}
|
||||
</Group>
|
||||
<Anchor component={Link} to="/" size="sm">
|
||||
{t("nav.backToHome")}
|
||||
</Anchor>
|
||||
</Group>
|
||||
|
||||
{/* 受限访客标识：说明这台设备不能管理账号 / 授权设备，要完整权限请在
|
||||
主设备上重新登录。放在最显眼处（标题下第一块）。 */}
|
||||
{isGuest && (
|
||||
<Callout
|
||||
tone="warn"
|
||||
icon={<ShieldAlert size={16} />}
|
||||
title={t("settings.guest.title")}
|
||||
>
|
||||
{t("settings.guest.body")}
|
||||
</Callout>
|
||||
)}
|
||||
|
||||
<Panel title={t("settings.currentDevice.title")}>
|
||||
<Stack gap="sm">
|
||||
<TextField
|
||||
@@ -226,7 +187,7 @@ function SettingsPage()
|
||||
</Button>
|
||||
</Group>
|
||||
<div style={{ height: 1, background: "var(--divider)" }} />
|
||||
<Text size="sm" c="dimmed">
|
||||
<Text size="sm" c="dimmed" className="justify" data-jz-level="paragraph">
|
||||
{t("settings.unregister.currentHint")}
|
||||
</Text>
|
||||
<Group>
|
||||
@@ -245,22 +206,10 @@ function SettingsPage()
|
||||
|
||||
{pushSupported() && <PushPanel />}
|
||||
|
||||
<Panel title={t("settings.peers.title")}>
|
||||
{peerDevices.length === 0 ? (
|
||||
<Text size="sm" c="dimmed">{t("settings.peers.empty")}</Text>
|
||||
) : (
|
||||
<Stack gap="xs">
|
||||
{peerDevices.map((d) => (
|
||||
<PeerRow
|
||||
key={d.name}
|
||||
device={d}
|
||||
removing={removing.has(d.name)}
|
||||
onRemove={() => handleRemovePeer(d.name)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Panel>
|
||||
<SessionsPanel
|
||||
isGuest={isGuest}
|
||||
onSignedOutSelf={handleSignOut}
|
||||
/>
|
||||
|
||||
<Panel title={t("settings.account.title")}>
|
||||
<Stack gap="sm">
|
||||
@@ -335,9 +284,9 @@ function PushPanel()
|
||||
return (
|
||||
<Panel title={t("settings.push.title")}>
|
||||
<Stack gap="sm">
|
||||
<Text size="sm" c="dimmed">{t("settings.push.hint")}</Text>
|
||||
<Text size="sm" c="dimmed" className="justify" data-jz-level="paragraph">{t("settings.push.hint")}</Text>
|
||||
{denied && !subscribed && (
|
||||
<Text size="sm" style={{ color: "var(--state-error)" }}>
|
||||
<Text size="sm" className="justify" data-jz-level="paragraph" style={{ color: "var(--state-error)" }}>
|
||||
{t("settings.push.deniedHint")}
|
||||
</Text>
|
||||
)}
|
||||
@@ -371,37 +320,270 @@ function PushPanel()
|
||||
);
|
||||
}
|
||||
|
||||
function PeerRow(props: { device: DeviceInfo; removing: boolean; onRemove: () => void })
|
||||
// sortSessions 把会话排成「在线在上、未活跃（offline）在下」，组内按最近活跃时间降序
|
||||
// （活跃越近越靠前）。不改变原数组，返回新数组。
|
||||
function sortSessions(list: AuthSession[]): AuthSession[]
|
||||
{
|
||||
const { device, removing, onRemove } = props;
|
||||
const lastSeenText = device.lastSeen
|
||||
? t("settings.lastSeen", { time: formatRelative(device.lastSeen) })
|
||||
: t("settings.lastSeenNever");
|
||||
return [ ...list ].sort((a, b) =>
|
||||
{
|
||||
if (a.online !== b.online) { return a.online ? -1 : 1; }
|
||||
return b.lastUsedAt - a.lastUsedAt;
|
||||
});
|
||||
}
|
||||
|
||||
// SessionsPanel：登录会话管理——浏览器 / 扫码登录的设备会话。每条显示在线状态点 +
|
||||
// 设备名 + 权限级别 Badge + 「本机」标记 + 最近活跃，并提供「登出」（真正吊销该登录
|
||||
// 的访问令牌）。在线会话排在上、未活跃（offline）的排在下；离线会话仍可登出。
|
||||
//
|
||||
// step-up：DELETE 返回 403 step_up_required 时，把待登出的 sessionId 暂存 → 发起
|
||||
// 一次 prompt=login 再认证（returnTo=/settings）→ 整页跳走 → 回来后由本组件 mount
|
||||
// effect 取出暂存的 {code, verifier} + sessionId，POST /auth/stepup 记录窗口，再
|
||||
// 重试那条 DELETE。step-up 窗口内（后端 5 分钟）后续登出不再 403、直接成功。
|
||||
//
|
||||
// 受限访客（isGuest）：无权管理登录会话、后端 GET 会 403，故根本不发该请求，直接展示
|
||||
// 一句克制的说明 Callout（不出现任何加载 / 失败态）。
|
||||
function SessionsPanel(props: { isGuest: boolean; onSignedOutSelf: () => void })
|
||||
{
|
||||
const { isGuest, onSignedOutSelf } = props;
|
||||
const [ sessions, setSessions ] = useState<AuthSession[] | null>(null);
|
||||
const [ loadError, setLoadError ] = useState(false);
|
||||
const [ busyId, setBusyId ] = useState<string | null>(null);
|
||||
const [ stepUpRejected, setStepUpRejected ] = useState(false);
|
||||
|
||||
// reload 拉取并写入列表，同时把结果回传给调用方（step-up 重试路径需在 revoke
|
||||
// 前从这份列表里查出 current，不能在 revoke 之后再拉——若登出的正是本机会话，
|
||||
// 令牌已失效、那次 listSessions 会 401）。在线会话排前、未活跃的排后，组内按最近
|
||||
// 活跃时间降序。失败回 null。受限访客不会走到这里（调用方在 guest 分支直接返回）。
|
||||
const reload = useCallback(async (): Promise<AuthSession[] | null> =>
|
||||
{
|
||||
setLoadError(false);
|
||||
try
|
||||
{
|
||||
const list = sortSessions(await listSessions());
|
||||
setSessions(list);
|
||||
return list;
|
||||
}
|
||||
catch { setLoadError(true); setSessions(null); return null; }
|
||||
}, []);
|
||||
|
||||
// doRevoke 真正执行一条登出。current（本机）会话登出后清本地 auth、回登录页
|
||||
// （等价退出登录）；其余刷新列表。403 step_up_required 由调用方分流，不入此处。
|
||||
const finishRevoke = useCallback((sess: AuthSession) =>
|
||||
{
|
||||
if (sess.current) { onSignedOutSelf(); return; }
|
||||
toast.ok(t("settings.sessions.revoked"));
|
||||
void reload();
|
||||
}, [ onSignedOutSelf, reload ]);
|
||||
|
||||
// 进页面拉一次。返回时若检测到 step-up 往返暂存（{code, verifier} + 待登出 id），
|
||||
// 先 POST /auth/stepup 记录窗口，再重试那条 DELETE——一次性串起整页跳转两端。
|
||||
// 受限访客无权管理会话、后端 GET 会 403，故根本不发请求、直接走说明态。
|
||||
useEffect(() =>
|
||||
{
|
||||
if (isGuest) { return; }
|
||||
let cancelled = false;
|
||||
|
||||
const run = async () =>
|
||||
{
|
||||
// step-up 往返恢复：取出暂存（一次性）。无暂存则普通进页只拉列表。
|
||||
const stash = consumeStepUpCode();
|
||||
const pendingId = consumePendingRevoke();
|
||||
const list = await reload();
|
||||
if (cancelled) { return; }
|
||||
|
||||
if (stash && pendingId)
|
||||
{
|
||||
// 在 revoke 前就从这份列表里查出待登出的那条（尤其 current 标记）：
|
||||
// 若登出的正是本机会话，revoke 后令牌即失效，不能再 listSessions。
|
||||
const target = list?.find((x) => x.id === pendingId);
|
||||
setBusyId(pendingId);
|
||||
try
|
||||
{
|
||||
await postStepUp(stash.code, stash.verifier);
|
||||
await revokeSession(pendingId);
|
||||
if (cancelled) { return; }
|
||||
if (target) { finishRevoke(target); }
|
||||
else { toast.ok(t("settings.sessions.revoked")); await reload(); }
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
if (cancelled) { return; }
|
||||
if (e instanceof StepUpRequiredError) { setStepUpRejected(true); }
|
||||
else
|
||||
{
|
||||
toast.error(t("settings.error.delete", {
|
||||
message: e instanceof Error ? e.message : String(e),
|
||||
}));
|
||||
}
|
||||
void reload();
|
||||
}
|
||||
finally { if (!cancelled) { setBusyId(null); } }
|
||||
}
|
||||
};
|
||||
|
||||
void run();
|
||||
return () => { cancelled = true; };
|
||||
}, [ isGuest, reload, finishRevoke ]);
|
||||
|
||||
const handleRevoke = async (sess: AuthSession) =>
|
||||
{
|
||||
const confirmMsg = sess.current
|
||||
? t("settings.sessions.confirmCurrent")
|
||||
: t("settings.sessions.confirmOther", { name: sess.deviceName });
|
||||
if (!window.confirm(confirmMsg)) { return; }
|
||||
|
||||
setBusyId(sess.id);
|
||||
setStepUpRejected(false);
|
||||
try
|
||||
{
|
||||
await revokeSession(sess.id);
|
||||
finishRevoke(sess);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
if (e instanceof StepUpRequiredError)
|
||||
{
|
||||
// 需再认证：暂存待登出 id，发起 prompt=login 往返，回到 /settings 后
|
||||
// 由 mount effect 接力重试。成功则整页跳走、本组件卸载。
|
||||
stashPendingRevoke(sess.id);
|
||||
try
|
||||
{
|
||||
await startStepUpReauth("/settings");
|
||||
return; // 跳转去 provider，不再 setBusyId。
|
||||
}
|
||||
catch (reauthErr)
|
||||
{
|
||||
toast.error(t("settings.error.delete", {
|
||||
message: reauthErr instanceof Error ? reauthErr.message : String(reauthErr),
|
||||
}));
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
toast.error(t("settings.error.delete", {
|
||||
message: e instanceof Error ? e.message : String(e),
|
||||
}));
|
||||
}
|
||||
}
|
||||
finally { setBusyId(null); }
|
||||
};
|
||||
|
||||
// 受限访客：不展示列表 / 加载 / 失败态，只给一句克制的说明——管理登录会话需在主设备
|
||||
// 上完整登录。后端 GET 本就 403，前面 effect 也已跳过请求，这里纯文案分支。
|
||||
if (isGuest)
|
||||
{
|
||||
return (
|
||||
<Panel title={t("settings.sessions.title")}>
|
||||
<Callout tone="warn" icon={<ShieldAlert size={16} />}>
|
||||
{t("settings.sessions.guestNote")}
|
||||
</Callout>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Panel title={t("settings.sessions.title")}>
|
||||
<Stack gap="sm">
|
||||
<Text size="sm" c="dimmed" className="justify" data-jz-level="paragraph">{t("settings.sessions.hint")}</Text>
|
||||
{stepUpRejected && (
|
||||
<Callout tone="warn" icon={<AlertTriangle size={16} />}>
|
||||
{t("settings.sessions.stepUpRejected")}
|
||||
</Callout>
|
||||
)}
|
||||
{loadError ? (
|
||||
<Group>
|
||||
<Text size="sm" style={{ color: "var(--state-error)" }}>
|
||||
{t("settings.sessions.loadError")}
|
||||
</Text>
|
||||
<Button size="sm" variant="ghost" onClick={() => void reload()}>
|
||||
{t("settings.sessions.retry")}
|
||||
</Button>
|
||||
</Group>
|
||||
) : sessions === null ? (
|
||||
// 仍在加载（首屏闪一帧）：不渲染占位文案，避免「暂无」误闪。
|
||||
null
|
||||
) : sessions.length === 0 ? (
|
||||
<Text size="sm" c="dimmed">{t("settings.sessions.empty")}</Text>
|
||||
) : (
|
||||
<Stack gap="xs">
|
||||
{sessions.map((sess) => (
|
||||
<SessionRow
|
||||
key={sess.id}
|
||||
session={sess}
|
||||
busy={busyId === sess.id}
|
||||
// 在线、离线会话都可登出（离线亦走 step-up，流程一致）。
|
||||
onRevoke={() => handleRevoke(sess)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
// 会话种类标签：网页 / 扫码会话用 settings.sessions.kind.*；原生客户端
|
||||
// （macos / windows / linux / ios）复用设备类型标签（「macOS 客户端」等）。
|
||||
function sessionKindLabel(kind: AuthSession["kind"]): string
|
||||
{
|
||||
if (kind === "oidc" || kind === "self" || kind === "guest")
|
||||
{
|
||||
return t(`settings.sessions.kind.${kind}` as const);
|
||||
}
|
||||
return t(`deviceType.${kind}` as const);
|
||||
}
|
||||
|
||||
function SessionRow(props: { session: AuthSession; busy: boolean; onRevoke?: () => void })
|
||||
{
|
||||
const { session, busy, onRevoke } = props;
|
||||
const lastUsedText = session.lastUsedAt
|
||||
? t("settings.sessions.lastUsed", { time: formatRelative(session.lastUsedAt) })
|
||||
: t("settings.sessions.neverUsed");
|
||||
const kindLabel = sessionKindLabel(session.kind);
|
||||
const onlineLabel = t(session.online ? "settings.online" : "settings.offline");
|
||||
return (
|
||||
<Panel variant="sunken" padding="tight">
|
||||
<Group justify="space-between" wrap="nowrap" align="center">
|
||||
<Stack gap={2} style={{ minWidth: 0, flex: 1 }}>
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<StateDot tone={device.online ? "online" : "offline"} />
|
||||
<Text fw={500} size="sm" truncate>{device.name}</Text>
|
||||
<Badge tone={device.online ? "online" : "neutral"}>
|
||||
{t(device.online ? "settings.online" : "settings.offline")}
|
||||
<StateDot
|
||||
tone={session.online ? "online" : "offline"}
|
||||
title={onlineLabel}
|
||||
/>
|
||||
<Text fw={500} size="sm" truncate>
|
||||
{session.deviceName || kindLabel}
|
||||
</Text>
|
||||
<Badge tone={session.scope === "guest" ? "warn" : "accent"}>
|
||||
{session.scope === "guest"
|
||||
? t("settings.sessions.scopeGuest")
|
||||
: t("settings.sessions.scopeFull")}
|
||||
</Badge>
|
||||
{session.current && (
|
||||
<Badge tone="online">{t("settings.sessions.current")}</Badge>
|
||||
)}
|
||||
</Group>
|
||||
<Text size="xs" c="dimmed" truncate>
|
||||
{deviceTypeLabel(device.type)} · {lastSeenText}
|
||||
{onlineLabel} · {kindLabel} · {lastUsedText}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
loading={removing}
|
||||
onClick={onRemove}
|
||||
style={{ color: "var(--state-error)" }}
|
||||
>
|
||||
{removing ? t("settings.peers.removing") : t("settings.peers.remove")}
|
||||
</Button>
|
||||
{onRevoke && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
loading={busy}
|
||||
leftIcon={<LogOut size={13} />}
|
||||
onClick={onRevoke}
|
||||
style={{ color: "var(--state-error)" }}
|
||||
>
|
||||
{busy
|
||||
? t("settings.sessions.signingOut")
|
||||
: session.current
|
||||
? t("settings.sessions.signOutCurrent")
|
||||
: t("settings.sessions.signOut")}
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { TransferRecord, ThemeMode, User } from "./types";
|
||||
import type { TransferRecord, ThemeMode, User, SessionScope } from "./types";
|
||||
|
||||
// DONE 是"全部数据已交付"的语义终态，把进行时遥测残留归一到这一事实，避免
|
||||
// history 行还显示"传输中字节 / 待发送 X MB"等错觉。FAILED / CANCELLED 不归
|
||||
@@ -23,6 +23,7 @@ export function normalizeTerminal(cur: TransferRecord, finalState: string): Tran
|
||||
|
||||
export const ACCESS_TOKEN_KEY = "cdrop.access_token";
|
||||
export const USER_KEY = "cdrop.user";
|
||||
export const SESSION_SCOPE_KEY = "cdrop.session_scope";
|
||||
export const SELF_DEVICE_KEY = "cdrop.self_device";
|
||||
export const THEME_KEY = "cdrop.theme";
|
||||
|
||||
@@ -125,6 +126,16 @@ export function readSessionUser(): User | null
|
||||
}
|
||||
}
|
||||
|
||||
// 本会话权限级别随 access_token 一并持久化（sessionStorage，同 tab 刷新存活、
|
||||
// 关标签即清）。缺失 / 非法回退 "full"——/api/me 会在登录 / 水合后校正它，回退到
|
||||
// 完整态只会多展示入口（后端仍 403），不会把受限态误升级。
|
||||
export function readSessionScope(): SessionScope
|
||||
{
|
||||
if (typeof window === "undefined") { return "full"; }
|
||||
const raw = window.sessionStorage.getItem(SESSION_SCOPE_KEY);
|
||||
return raw === "guest" ? "guest" : "full";
|
||||
}
|
||||
|
||||
export function readSelfDevice(): string | null
|
||||
{
|
||||
if (typeof window === "undefined") { return null; }
|
||||
|
||||
@@ -27,6 +27,7 @@ export const useAppStore = create<AppState>()((...a) =>
|
||||
export type {
|
||||
AppState,
|
||||
AuthMode,
|
||||
SessionScope,
|
||||
ThemeMode,
|
||||
User,
|
||||
DeviceInfo,
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
import type { StateCreator } from "zustand";
|
||||
import type { AppState, AuthMode } from "../types";
|
||||
import type { AppState, AuthMode, SessionScope } from "../types";
|
||||
import {
|
||||
ACCESS_TOKEN_KEY,
|
||||
SESSION_SCOPE_KEY,
|
||||
USER_KEY,
|
||||
readSessionAccess,
|
||||
readSessionScope,
|
||||
readSessionUser,
|
||||
} from "../helpers";
|
||||
|
||||
export type AuthSlice = Pick<
|
||||
AppState,
|
||||
"authMode" | "accessToken" | "user" | "setAuth" | "clearAuth"
|
||||
"authMode" | "accessToken" | "user" | "sessionScope"
|
||||
| "setAuth" | "setSessionScope" | "clearAuth"
|
||||
>;
|
||||
|
||||
const initialAuthMode: AuthMode = import.meta.env.DEV ? "dev" : "prod";
|
||||
@@ -23,6 +26,7 @@ export const createAuthSlice: StateCreator<AppState, [], [], AuthSlice> = (set)
|
||||
authMode: initialAuthMode,
|
||||
accessToken: readSessionAccess(),
|
||||
user: readSessionUser(),
|
||||
sessionScope: readSessionScope(),
|
||||
|
||||
setAuth: (a) =>
|
||||
{
|
||||
@@ -37,13 +41,27 @@ export const createAuthSlice: StateCreator<AppState, [], [], AuthSlice> = (set)
|
||||
});
|
||||
},
|
||||
|
||||
// setSessionScope 由 /api/me 解析结果驱动（登录成功 / 开机水合后调用）。
|
||||
// 持久化到 sessionStorage，使同 tab 刷新沿用，不必再次往返 /api/me 才能正确
|
||||
// 隐藏受限入口。
|
||||
setSessionScope: (scope: SessionScope) =>
|
||||
{
|
||||
if (typeof window !== "undefined")
|
||||
{
|
||||
window.sessionStorage.setItem(SESSION_SCOPE_KEY, scope);
|
||||
}
|
||||
set({ sessionScope: scope });
|
||||
},
|
||||
|
||||
clearAuth: () =>
|
||||
{
|
||||
if (typeof window !== "undefined")
|
||||
{
|
||||
window.sessionStorage.removeItem(ACCESS_TOKEN_KEY);
|
||||
window.sessionStorage.removeItem(USER_KEY);
|
||||
window.sessionStorage.removeItem(SESSION_SCOPE_KEY);
|
||||
}
|
||||
set({ accessToken: null, user: null });
|
||||
// scope 回 "full"：登出后下一个登录者默认完整态，再由其自己的 /api/me 校正。
|
||||
set({ accessToken: null, user: null, sessionScope: "full" });
|
||||
},
|
||||
});
|
||||
|
||||
@@ -24,6 +24,10 @@ export interface DeviceInfo
|
||||
|
||||
export type AuthMode = "dev" | "prod";
|
||||
|
||||
// 本会话的权限级别（来自 /api/me 的 scope）：full=完整登录、guest=受限访客。
|
||||
// 受限访客不能管理账号 / 授权设备——前端据此隐藏相关入口（后端亦 403 兜底）。
|
||||
export type SessionScope = "full" | "guest";
|
||||
|
||||
export type ThemeMode = "light" | "dark" | "system";
|
||||
|
||||
// 客户端侧细颗粒度阶段，与服务端的 state（PENDING/ACCEPTED/...）正交；
|
||||
@@ -118,7 +122,12 @@ export interface AppState
|
||||
authMode: AuthMode;
|
||||
accessToken: string | null;
|
||||
user: User | null;
|
||||
// 本会话权限级别（/api/me 的 scope）。默认 "full"；登录成功 / 开机水合后据
|
||||
// /api/me 校正为 "guest" 时，UI 隐藏「扫码登录新设备」「移除设备」「登出他人」
|
||||
// 等账号管理入口，并展示「受限访客」标识。
|
||||
sessionScope: SessionScope;
|
||||
setAuth: (a: { accessToken: string; user: User }) => void;
|
||||
setSessionScope: (scope: SessionScope) => void;
|
||||
clearAuth: () => void;
|
||||
|
||||
// ---- device slice ----
|
||||
|
||||
Reference in New Issue
Block a user