61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import type { AuthStateValue } from "../shared/auth-messages";
|
|
|
|
export function renderLoggedOut(root: HTMLElement, error?: string | null): void {
|
|
root.innerHTML = `
|
|
<section data-popup-state="logged-out">
|
|
<h1>Star Chart Search Enhancer</h1>
|
|
<p>登录后才能使用星图增强功能</p>
|
|
${error ? `<p data-popup-error="true">${error}</p>` : ""}
|
|
<button type="button" data-popup-sign-in="button">登录 Logto</button>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
export function renderLoggedIn(
|
|
root: HTMLElement,
|
|
authState: AuthStateValue
|
|
): void {
|
|
const userInfo = authState.userInfo;
|
|
|
|
root.innerHTML = `
|
|
<section data-popup-state="logged-in">
|
|
<h1>Star Chart Search Enhancer</h1>
|
|
<p>已登录</p>
|
|
<p>${userInfo?.name ?? userInfo?.username ?? "未知用户"}</p>
|
|
<p>${userInfo?.email ?? ""}</p>
|
|
<button type="button" data-popup-sign-out="button">退出登录</button>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
export function renderDevPanel(
|
|
root: HTMLElement,
|
|
authState: AuthStateValue
|
|
): void {
|
|
const panel = root.ownerDocument.createElement("section");
|
|
panel.dataset.popupDevPanel = "root";
|
|
panel.innerHTML = `
|
|
<h2>dev auth panel</h2>
|
|
<p>resource: ${authState.resource ?? ""}</p>
|
|
<p>scopes: ${(authState.scopes ?? []).join(", ")}</p>
|
|
<p>token: ${authState.tokenAvailable ? "available" : "missing"}</p>
|
|
<p>expires: ${authState.accessTokenExpiresAt ?? "unknown"}</p>
|
|
<p>error: ${authState.lastError ?? ""}</p>
|
|
<button type="button" data-popup-test-protected-api="button">测试受保护接口</button>
|
|
<pre data-popup-protected-api-result="output"></pre>
|
|
`;
|
|
root.appendChild(panel);
|
|
}
|
|
|
|
export function setProtectedApiResult(root: HTMLElement, value: string): void {
|
|
const output = root.querySelector(
|
|
'[data-popup-protected-api-result="output"]'
|
|
);
|
|
|
|
if (!output) {
|
|
return;
|
|
}
|
|
|
|
output.textContent = value;
|
|
}
|