+
+
+
+ );
+}
diff --git a/src/app/admin/(panel)/integrations/GamePicker.tsx b/src/app/admin/(panel)/integrations/GamePicker.tsx
new file mode 100644
index 0000000..5e0e82a
--- /dev/null
+++ b/src/app/admin/(panel)/integrations/GamePicker.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import { useRef, useState } from "react";
+import type { FavoriteGame } from "@/lib/integrations/types";
+
+// Searchable favorite-games picker. Mirrors the console picker UX, but results
+// come from the server (Steam store search via /games/search) since the catalog
+// is far too large to bundle. Typing debounces a fetch; clicking a result adds
+// it as a chip with its cover art. Free-text entry is always available for
+// console/retro titles the search doesn't surface.
+
+type Result = { name: string; image?: string; url?: string };
+
+function Cover({ image }: { image?: string }) {
+ if (!image) return 🎲;
+ // eslint-disable-next-line @next/next/no-img-element
+ return
+ {
+ setQuery(e.target.value);
+ setOpen(true);
+ }}
+ onFocus={() => setOpen(true)}
+ onBlur={() => setTimeout(() => setOpen(false), 150)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ if (suggestions[0]) add(suggestions[0]);
+ else addFreeform();
+ }
+ }}
+ />
+ {open && (suggestions.length > 0 || query.trim()) && (
+
+
+ {items.length > 0 && (
+ -
+ {suggestions.map((c) => (
+
- + + + ))} + {query.trim() && ( +
- + + + )} +
-
+ {items.map((it, i) => (
+
-
+
+ {it.name} + setNote(i, e.target.value)} + /> + +
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/app/admin/(panel)/integrations/games/search/route.ts b/src/app/admin/(panel)/integrations/games/search/route.ts
new file mode 100644
index 0000000..ac09f18
--- /dev/null
+++ b/src/app/admin/(panel)/integrations/games/search/route.ts
@@ -0,0 +1,42 @@
+import { NextResponse, type NextRequest } from "next/server";
+import { isAdmin } from "@/lib/auth";
+
+// Game search for the admin "favorite games" picker. Backed by Steam's public
+// store-search endpoint: keyless, returns capsule cover art, and its catalog is
+// broad enough to cover PC plus the countless console/retro titles that have
+// since been re-released on Steam. The picker also allows free-text entry for
+// anything the search can't find, so console-only games are never blocked.
+//
+// Admin-gated (it lives under the panel layout, but route handlers don't inherit
+// that guard, so we check here too) to avoid turning the blog into an open proxy.
+
+const STORE_SEARCH = "https://store.steampowered.com/api/storesearch/";
+const TIMEOUT = 6000;
+
+type StoreItem = { id: number; name: string; tiny_image?: string };
+
+export async function GET(req: NextRequest) {
+ if (!(await isAdmin())) {
+ return NextResponse.json({ error: "unauthorized" }, { status: 401 });
+ }
+
+ const q = (new URL(req.url).searchParams.get("q") ?? "").trim();
+ if (q.length < 2) return NextResponse.json({ games: [] });
+
+ const url = `${STORE_SEARCH}?term=${encodeURIComponent(q)}&cc=us&l=en`;
+ try {
+ const res = await fetch(url, { signal: AbortSignal.timeout(TIMEOUT) });
+ if (!res.ok) {
+ return NextResponse.json({ games: [], error: `Steam ${res.status}` });
+ }
+ const json = (await res.json()) as { items?: StoreItem[] };
+ const games = (json.items ?? []).slice(0, 10).map((it) => ({
+ name: it.name,
+ image: it.tiny_image,
+ url: `https://store.steampowered.com/app/${it.id}`,
+ }));
+ return NextResponse.json({ games });
+ } catch {
+ return NextResponse.json({ games: [], error: "Search timed out." });
+ }
+}
diff --git a/src/app/admin/(panel)/integrations/page.tsx b/src/app/admin/(panel)/integrations/page.tsx
index b63c7b1..2db0cdf 100644
--- a/src/app/admin/(panel)/integrations/page.tsx
+++ b/src/app/admin/(panel)/integrations/page.tsx
@@ -1,23 +1,46 @@
+import type { ReactNode } from "react";
import { getIntegrationConfig, getProfile } from "@/lib/integrations";
import { SOCIAL_NETWORKS } from "@/lib/integrations/social";
-import type {
- ConsoleItem,
- FavoriteGame,
- SocialLink,
-} from "@/lib/integrations/types";
+import type { SocialLink } from "@/lib/integrations/types";
import {
saveIntegrationsAction,
refreshIntegrationsAction,
+ testIntegrationAction,
} from "../../actions";
+import ConsolePicker from "./ConsolePicker";
+import GamePicker from "./GamePicker";
+
+// Expandable "how do I get this?" help, shown under credential fields. Uses a
+// native
+ onQueryChange(e.target.value)}
+ onFocus={() => setOpen(true)}
+ onBlur={() => setTimeout(() => setOpen(false), 150)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ if (results[0]) add(results[0]);
+ else addFreeform();
+ }
+ }}
+ />
+ {open && query.trim().length >= 2 && (
+
+
+ {items.length > 0 && (
+ -
+ {loading && results.length === 0 && (
+
- Searching… + )} + {results.map((g, i) => ( +
- + + + ))} +
- + + +
-
+ {items.map((it, i) => (
+
-
+
+ {it.name} + setNote(i, e.target.value)} + /> + +
+ ))}
+
so it works with zero JS and stays readable on mobile.
+function CredHelp({ title, children }: { title: string; children: ReactNode }) {
+ return (
+ ;
}) {
- const { saved, refreshed } = await searchParams;
+ const banners = await searchParams;
const cfg = getIntegrationConfig();
// Loads (cached) platform data so we can show freshness + any fetch errors.
const profile = await getProfile();
@@ -49,7 +105,7 @@ export default async function IntegrationsPage({
return (
): NextResponse {
+ const url = new URL("/admin/integrations", req.url);
+ for (const [k, v] of Object.entries(qs)) url.searchParams.set(k, v);
+ return NextResponse.redirect(url);
+}
+
+export async function GET(req: NextRequest) {
+ if (!(await isAdmin())) {
+ return NextResponse.redirect(new URL("/admin/login", req.url));
+ }
+
+ const incoming = new URL(req.url).searchParams;
+ const claimed = incoming.get("openid.claimed_id") ?? "";
+ const match = CLAIMED_RE.exec(claimed);
+ if (!match) return back(req, { steamErr: "Steam sign-in returned no identity." });
+
+ // Re-send every openid.* param back to Steam with mode=check_authentication.
+ const verify = new URLSearchParams();
+ for (const [k, v] of incoming) verify.set(k, v);
+ verify.set("openid.mode", "check_authentication");
+
+ let valid = false;
+ try {
+ const res = await fetch(STEAM_OPENID, {
+ method: "POST",
+ headers: { "Content-Type": "application/x-www-form-urlencoded" },
+ body: verify,
+ signal: AbortSignal.timeout(8000),
+ });
+ valid = (await res.text()).includes("is_valid:true");
+ } catch {
+ return back(req, { steamErr: "Could not reach Steam to verify sign-in." });
+ }
+ if (!valid) return back(req, { steamErr: "Steam sign-in could not be verified." });
+
+ const steamId = match[1];
+ const cfg = getIntegrationConfig();
+ saveIntegrationConfig({ ...cfg, steam: { ...cfg.steam, enabled: true, steamId } });
+ return back(req, { steam: steamId });
+}
diff --git a/src/app/admin/actions.ts b/src/app/admin/actions.ts
index f840508..1556b42 100644
--- a/src/app/admin/actions.ts
+++ b/src/app/admin/actions.ts
@@ -25,12 +25,14 @@ import {
getIntegrationConfig,
saveIntegrationConfig,
refreshPlatforms,
+ testPlatform,
} from "@/lib/integrations";
import { isSocialNetworkId, type SocialNetworkId } from "@/lib/integrations/social";
import type {
ConsoleItem,
FavoriteGame,
IntegrationConfig,
+ PlatformId,
SocialLink,
} from "@/lib/integrations/types";
import { THEMES, isThemeId, type ThemeId } from "@/themes/registry";
@@ -211,31 +213,57 @@ function parseSocialLines(raw: string): SocialLink[] {
return out;
}
-// Each line: `name|note?`.
-function parseNamedLines(raw: string): { name: string; note?: string }[] {
- const out: { name: string; note?: string }[] = [];
- for (const line of raw.split("\n")) {
- const [name, ...rest] = line.split("|").map((p) => p.trim());
- if (!name) continue;
- const note = rest.join("|").trim();
- out.push({ name, note: note || undefined });
+// The console / game pickers post their selection as a JSON array (one hidden
+// input each). Parse defensively — a malformed payload yields an empty list
+// rather than throwing. config.normalize* re-validates field shapes after this.
+function parseJsonArray(raw: string): Record[] {
+ if (!raw.trim()) return [];
+ try {
+ const parsed = JSON.parse(raw);
+ return Array.isArray(parsed) ? (parsed as Record[]) : [];
+ } catch {
+ return [];
}
- return out;
}
-export async function saveIntegrationsAction(formData: FormData) {
- const current = getIntegrationConfig();
+function parseConsolesJson(raw: string): ConsoleItem[] {
+ return parseJsonArray(raw)
+ .map((o) => ({
+ id: typeof o.id === "string" ? o.id : undefined,
+ name: typeof o.name === "string" ? o.name.trim() : "",
+ icon: typeof o.icon === "string" ? o.icon : undefined,
+ note: typeof o.note === "string" ? o.note.trim() || undefined : undefined,
+ }))
+ .filter((c) => c.name);
+}
- const next: IntegrationConfig = {
+function parseFavoritesJson(raw: string): FavoriteGame[] {
+ return parseJsonArray(raw)
+ .map((o) => ({
+ name: typeof o.name === "string" ? o.name.trim() : "",
+ image: typeof o.image === "string" ? o.image : undefined,
+ url: typeof o.url === "string" ? o.url : undefined,
+ note: typeof o.note === "string" ? o.note.trim() || undefined : undefined,
+ }))
+ .filter((f) => f.name);
+}
+
+// Build a full IntegrationConfig from the admin form. Blank credential fields
+// fall back to the stored secret so saving never wipes a key the user left
+// masked. Shared by save + test so both see identical (live) values.
+function configFromForm(
+ formData: FormData,
+ current: IntegrationConfig
+): IntegrationConfig {
+ return {
displayName: s(formData, "displayName"),
bio: s(formData, "bio"),
avatarUrl: s(formData, "avatarUrl"),
social: parseSocialLines(s(formData, "social")),
- consoles: parseNamedLines(s(formData, "consoles")) as ConsoleItem[],
- favorites: parseNamedLines(s(formData, "favorites")) as FavoriteGame[],
+ consoles: parseConsolesJson(s(formData, "consoles")),
+ favorites: parseFavoritesJson(s(formData, "favorites")),
steam: {
enabled: formData.get("steamEnabled") === "on",
- // Blank credential field = keep the stored one (so secrets aren't wiped on save).
apiKey: s(formData, "steamApiKey").trim() || current.steam.apiKey,
steamId: s(formData, "steamId").trim(),
},
@@ -248,16 +276,45 @@ export async function saveIntegrationsAction(formData: FormData) {
apiKey: s(formData, "xboxApiKey").trim() || current.xbox.apiKey,
xuid: s(formData, "xboxXuid").trim(),
},
+ retro: {
+ enabled: formData.get("retroEnabled") === "on",
+ username: s(formData, "retroUsername").trim(),
+ apiKey: s(formData, "retroApiKey").trim() || current.retro.apiKey,
+ },
cacheTtlMinutes: Number(s(formData, "cacheTtlMinutes")) || current.cacheTtlMinutes,
};
+}
- saveIntegrationConfig(next);
+export async function saveIntegrationsAction(formData: FormData) {
+ const current = getIntegrationConfig();
+ saveIntegrationConfig(configFromForm(formData, current));
// Config changed (creds/toggles) — drop cached payloads so they refetch.
refreshPlatforms();
revalidateSite();
redirect("/admin/integrations?saved=1");
}
+const PLATFORM_IDS: PlatformId[] = ["steam", "psn", "xbox", "retro"];
+function isPlatformId(v: string): v is PlatformId {
+ return (PLATFORM_IDS as string[]).includes(v);
+}
+
+// "Test connection": runs the chosen platform's fetcher against the live form
+// values (not the saved config) so the admin can validate creds before saving.
+export async function testIntegrationAction(platform: string, formData: FormData) {
+ if (!isPlatformId(platform)) redirect("/admin/integrations");
+
+ const cfg = configFromForm(formData, getIntegrationConfig());
+ const result = await testPlatform(platform, cfg);
+ const qs = new URLSearchParams({ test: platform });
+ if (result.error) qs.set("testErr", result.error);
+ else {
+ qs.set("testGames", String(result.games.length));
+ if (result.notice) qs.set("testNotice", result.notice);
+ }
+ redirect(`/admin/integrations?${qs}`);
+}
+
export async function refreshIntegrationsAction() {
refreshPlatforms();
revalidateSite();
diff --git a/src/app/admin/admin.css b/src/app/admin/admin.css
index 57ed41a..930d2f9 100644
--- a/src/app/admin/admin.css
+++ b/src/app/admin/admin.css
@@ -169,6 +169,7 @@
/* ---- banners ---- */
.rb-admin-ok,
+.rb-admin-warn,
.rb-admin-error {
border-radius: var(--a-radius);
padding: 10px 14px;
@@ -181,6 +182,11 @@
color: var(--a-ok-text);
}
+.rb-admin-warn {
+ background: color-mix(in srgb, #f5a623 22%, transparent);
+ color: #b8740f;
+}
+
.rb-admin-error {
background: var(--a-err-bg);
color: var(--a-err-text);
@@ -410,3 +416,212 @@
color: #555;
border-bottom: 2px solid #d0d0d0;
}
+
+/* integrations: per-credential expandable help (tooltips) */
+.rb-cred-help {
+ margin-top: 6px;
+ font-size: 13px;
+}
+.rb-cred-help > summary {
+ cursor: pointer;
+ color: var(--a-muted);
+ user-select: none;
+ list-style: none;
+}
+.rb-cred-help > summary:hover {
+ color: var(--a-text);
+ text-decoration: underline;
+}
+.rb-cred-help[open] > summary {
+ color: var(--a-text);
+ font-weight: 500;
+}
+.rb-cred-help-body {
+ margin-top: 6px;
+ padding: 10px 12px;
+ background: #f6f8fa;
+ border: 1px solid var(--a-border);
+ border-radius: 6px;
+ color: var(--a-text);
+}
+.rb-cred-help-body ol {
+ margin: 0;
+ padding-left: 18px;
+}
+.rb-cred-help-body li {
+ margin: 2px 0;
+}
+.rb-cred-help-body p {
+ margin: 8px 0 0;
+ color: var(--a-muted);
+}
+
+/* integrations: per-platform action row (e.g. Test connection) */
+.rb-form-actions-sub {
+ margin-top: 10px;
+ margin-bottom: 6px;
+}
+.rb-btn-inline {
+ padding: 4px 10px;
+ font-size: 13px;
+ border-color: var(--a-border);
+ background: #fff;
+}
+
+/* integrations: console / game pickers */
+.rb-picker {
+ margin-bottom: 16px;
+}
+.rb-pick-search {
+ position: relative;
+}
+.rb-pick-search > input {
+ font: inherit;
+ color: var(--a-text);
+ background: #fff;
+ border: 1px solid var(--a-border);
+ border-radius: 6px;
+ padding: 9px 11px;
+ width: 100%;
+}
+.rb-pick-search > input:focus {
+ outline: 2px solid var(--a-primary);
+ outline-offset: -1px;
+ border-color: var(--a-primary);
+}
+.rb-pick-suggest {
+ position: absolute;
+ z-index: 20;
+ top: calc(100% + 4px);
+ left: 0;
+ right: 0;
+ margin: 0;
+ padding: 4px;
+ list-style: none;
+ background: var(--a-surface);
+ border: 1px solid var(--a-border);
+ border-radius: 6px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ max-height: 320px;
+ overflow: auto;
+}
+.rb-pick-suggest > li > button {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ text-align: left;
+ font: inherit;
+ color: var(--a-text);
+ background: transparent;
+ border: 0;
+ border-radius: 4px;
+ padding: 7px 9px;
+ cursor: pointer;
+}
+.rb-pick-suggest > li > button:hover {
+ background: #eef1f6;
+}
+.rb-pick-status {
+ padding: 8px 9px;
+ color: var(--a-muted);
+}
+.rb-pick-suggest-name {
+ font-weight: 500;
+ flex: 1;
+}
+.rb-pick-suggest-meta {
+ color: var(--a-muted);
+ font-size: 12px;
+ white-space: nowrap;
+}
+.rb-pick-freeform {
+ color: var(--a-primary) !important;
+ font-weight: 500;
+}
+.rb-pick-glyph,
+.rb-pick-glyph-img,
+.rb-pick-cover {
+ flex: none;
+}
+.rb-pick-glyph {
+ font-size: 18px;
+ width: 28px;
+ text-align: center;
+}
+.rb-pick-glyph-img {
+ height: 20px;
+ width: auto;
+ max-width: 90px;
+ object-fit: contain;
+}
+.rb-pick-cover {
+ width: 46px;
+ height: 22px;
+ object-fit: cover;
+ border: 1px solid var(--a-border);
+}
+.rb-pick-cover-empty {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 46px;
+ height: 22px;
+ background: #eef1f6;
+ border: 1px solid var(--a-border);
+ font-size: 13px;
+}
+.rb-pick-list {
+ list-style: none;
+ margin: 10px 0 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+.rb-pick-chip {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 6px 8px;
+ border: 1px solid var(--a-border);
+ border-radius: 6px;
+ background: #fbfcfe;
+}
+.rb-pick-chip-name {
+ font-weight: 500;
+ min-width: 0;
+ flex: none;
+ max-width: 38%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.rb-pick-chip-note {
+ flex: 1;
+ font: inherit;
+ color: var(--a-text);
+ background: #fff;
+ border: 1px solid var(--a-border);
+ border-radius: 5px;
+ padding: 5px 8px;
+}
+.rb-pick-chip-note:focus {
+ outline: 2px solid var(--a-primary);
+ outline-offset: -1px;
+}
+.rb-pick-remove {
+ flex: none;
+ font: inherit;
+ line-height: 1;
+ color: var(--a-muted);
+ background: transparent;
+ border: 0;
+ border-radius: 4px;
+ padding: 4px 7px;
+ cursor: pointer;
+}
+.rb-pick-remove:hover {
+ background: var(--a-err-bg);
+ color: var(--a-danger);
+}
diff --git a/src/app/bio/page.tsx b/src/app/bio/page.tsx
index d5de7e6..85e6fee 100644
--- a/src/app/bio/page.tsx
+++ b/src/app/bio/page.tsx
@@ -3,10 +3,17 @@ import Shell from "@/components/Shell";
import SocialLinks from "@/components/SocialLinks";
import { getTheme } from "@/themes/server";
import { getProfile, hasIntegrations } from "@/lib/integrations";
+import { isIconUrl } from "@/lib/integrations/consoles";
import type { Achievement, Game } from "@/lib/integrations/types";
function platformLabel(p: string): string {
- return p === "psn" ? "PlayStation" : p === "xbox" ? "Xbox" : "Steam";
+ const labels: Record = {
+ psn: "PlayStation",
+ xbox: "Xbox",
+ retro: "RetroAchievements",
+ steam: "Steam",
+ };
+ return labels[p] ?? "Steam";
}
function fmtPlaytime(mins?: number): string | null {
@@ -123,12 +130,31 @@ export default async function BioPage() {
)}
@@ -140,6 +166,15 @@ export default async function BioPage() {
+
+ );
+}
+
+// A "Test connection" submit button. Submits the whole form to the test action
+// (so it validates the live, unsaved field values) tagged with which platform.
+function TestButton({ platform }: { platform: string }) {
+ return (
+
+ );
+}
function socialToText(links: SocialLink[]): string {
return links
.map((l) => [l.network, l.url, l.label].filter(Boolean).join(" | "))
.join("\n");
}
-function namedToText(items: (ConsoleItem | FavoriteGame)[]): string {
- return items.map((i) => [i.name, i.note].filter(Boolean).join(" | ")).join("\n");
-}
function fmtAge(iso: string): string {
const t = new Date(iso).getTime();
@@ -29,18 +52,51 @@ function fmtAge(iso: string): string {
return hrs < 24 ? `${hrs}h ago` : `${Math.round(hrs / 24)}d ago`;
}
-function Banner({ saved, refreshed }: { saved?: string; refreshed?: string }) {
- if (saved) return ⓘ {title}
+{children}
+ Integrations saved. Caches cleared.
; - if (refreshed) returnPlatform caches cleared — data refetches on next view.
; +type Banners = { + saved?: string; + refreshed?: string; + steam?: string; + steamErr?: string; + test?: string; + testErr?: string; + testGames?: string; + testNotice?: string; +}; + +function Banner(p: Banners) { + if (p.saved) returnIntegrations saved. Caches cleared.
; + if (p.refreshed) + returnPlatform caches cleared — data refetches on next view.
; + if (p.steam) + return ( +
+ Steam linked — SteamID {p.steam} saved. Add your API key below to pull
+ game data.
+
{p.steamErr}
; + if (p.test && p.testErr) + return ( ++ {p.test.toUpperCase()} test failed: {p.testErr} +
+ ); + if (p.test) + return ( ++ {p.test.toUpperCase()} connection OK — fetched {p.testGames ?? 0} game(s). + {p.testNotice ? ` ${p.testNotice}` : ""} +
+ ); return null; } export default async function IntegrationsPage({ searchParams, }: { - searchParams: Promise<{ saved?: string; refreshed?: string }>; + searchParams: PromiseIntegrations
-Build your gamer bio: a profile, social links, console list, favorite games, and live data pulled from gaming platforms. Everything here powers @@ -136,31 +192,19 @@ export default async function IntegrationsPage({ {/* ---- consoles + favorites ---- */}
Collection
-
-
-
+
+
+
+
+ Consoles owned{" "}
+ — search and click to add
+
+
+
+
+ Favorite games{" "}
+ — search (Steam catalog) and click to add
+
+
{/* ---- platforms ---- */}
@@ -169,12 +213,20 @@ export default async function IntegrationsPage({
Enable Steam integration
+ + One-click:{" "} + + Sign in with Steam + {" "} + to fill your SteamID automatically{cfg.steam.steamId ? ` (current: ${cfg.steam.steamId})` : ""}. + You still add an API key below for game data. +
+
PlayStation (PSN)
+
+
Xbox
+
+
+ RetroAchievements
+ +
+
+
+
+
+
{/* ---- cache ---- */}
Caching
diff --git a/src/app/admin/(panel)/integrations/steam/link/route.ts b/src/app/admin/(panel)/integrations/steam/link/route.ts new file mode 100644 index 0000000..07e5273 --- /dev/null +++ b/src/app/admin/(panel)/integrations/steam/link/route.ts @@ -0,0 +1,27 @@ +import { NextResponse, type NextRequest } from "next/server"; +import { isAdmin } from "@/lib/auth"; + +// Step 1 of Steam's one-click sign-in (OpenID 2.0). We bounce the admin to +// Steam, which authenticates them and redirects back to /return with their +// identity. No API key or secret is needed for this exchange — that's what makes +// it one-click: the admin just confirms on Steam and their SteamID flows back. + +const STEAM_OPENID = "https://steamcommunity.com/openid/login"; + +export async function GET(req: NextRequest) { + if (!(await isAdmin())) { + return NextResponse.redirect(new URL("/admin/login", req.url)); + } + + const origin = new URL(req.url).origin; + const params = new URLSearchParams({ + "openid.ns": "http://specs.openid.net/auth/2.0", + "openid.mode": "checkid_setup", + "openid.return_to": `${origin}/admin/integrations/steam/return`, + "openid.realm": origin, + "openid.identity": "http://specs.openid.net/auth/2.0/identifier_select", + "openid.claimed_id": "http://specs.openid.net/auth/2.0/identifier_select", + }); + + return NextResponse.redirect(`${STEAM_OPENID}?${params}`); +} diff --git a/src/app/admin/(panel)/integrations/steam/return/route.ts b/src/app/admin/(panel)/integrations/steam/return/route.ts new file mode 100644 index 0000000..a177c0a --- /dev/null +++ b/src/app/admin/(panel)/integrations/steam/return/route.ts @@ -0,0 +1,53 @@ +import { NextResponse, type NextRequest } from "next/server"; +import { isAdmin } from "@/lib/auth"; +import { getIntegrationConfig, saveIntegrationConfig } from "@/lib/integrations"; + +// Step 2 of Steam OpenID sign-in. Steam redirects back here with its assertion. +// We MUST verify it by echoing the params back to Steam with mode=check_auth; +// trusting the query string blindly would let anyone forge a SteamID. On success +// we extract the 64-bit id from the claimed_id URL and persist it. The Steam API +// key (needed to actually read game data) is still entered separately. + +const STEAM_OPENID = "https://steamcommunity.com/openid/login"; +const CLAIMED_RE = /^https:\/\/steamcommunity\.com\/openid\/id\/(\d{17})$/; + +function back(req: NextRequest, qs: RecordFavorite games
-
- {profile.favorites.map((f, i) => (
-
- - {f.name} - {f.note && {f.note}} - - ))} + {profile.favorites.map((f, i) => { + const body = ( + <> + {f.image && ( + // eslint-disable-next-line @next/next/no-img-element +
- + {f.url ? ( + + {body} + + ) : ( + body + )} + + ); + })}
-
{profile.consoles.map((c, i) => (
-
+ {c.icon &&
+ (isIconUrl(c.icon) ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : ( + + {c.icon} + + ))} {c.name} {c.note && {c.note}}
diff --git a/src/app/globals.css b/src/app/globals.css
index de22a8e..4eb3add 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -399,12 +399,44 @@ img {
.rb-fav,
.rb-console {
display: flex;
- flex-direction: column;
- gap: 2px;
+ align-items: center;
+ gap: 10px;
padding: 6px 10px;
border-left: 3px solid currentColor;
background: rgba(0, 0, 0, 0.04);
}
+.rb-fav-link {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ text-decoration: none;
+ color: inherit;
+ width: 100%;
+}
+.rb-fav-text {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+.rb-fav-cover {
+ width: 56px;
+ height: 26px;
+ object-fit: cover;
+ flex: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+}
+.rb-console-icon {
+ font-size: 1.2em;
+ line-height: 1;
+ flex: none;
+}
+.rb-console-icon-img {
+ height: 20px;
+ width: auto;
+ max-width: 96px;
+ object-fit: contain;
+ flex: none;
+}
.rb-fav-name,
.rb-console-name {
font-weight: bold;
diff --git a/src/lib/integrations/config.ts b/src/lib/integrations/config.ts
index 991ad7a..077a4ac 100644
--- a/src/lib/integrations/config.ts
+++ b/src/lib/integrations/config.ts
@@ -22,6 +22,7 @@ export const DEFAULT_CONFIG: IntegrationConfig = {
steam: { enabled: false, apiKey: "", steamId: "" },
psn: { enabled: false, npsso: "" },
xbox: { enabled: false, apiKey: "", xuid: "" },
+ retro: { enabled: false, username: "", apiKey: "" },
cacheTtlMinutes: 360,
};
@@ -54,7 +55,12 @@ function normConsoles(input: unknown): ConsoleItem[] {
return input
.map((raw) => {
const o = (raw ?? {}) as Record