1913 lines
64 KiB
TypeScript
1913 lines
64 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
|
||
import { Nav, useAuth } from "@/components/Nav";
|
||
|
||
type Device = {
|
||
id: string;
|
||
name: string;
|
||
platform: string;
|
||
lastSeenAt: string | null;
|
||
createdAt: string;
|
||
};
|
||
|
||
type GooglePlaySyncStatus =
|
||
| "NOT_ENABLED"
|
||
| "PENDING_ADD"
|
||
| "ACTIVE"
|
||
| "PENDING_REMOVE"
|
||
| "REMOVED"
|
||
| "ERROR";
|
||
|
||
type ViewerIptv = {
|
||
id: string;
|
||
label: string | null;
|
||
baseUrl: string;
|
||
username: string;
|
||
hasPassword: boolean;
|
||
enableLive: boolean;
|
||
enableVod: boolean;
|
||
enableSeries: boolean;
|
||
lastOkAt: string | null;
|
||
lastError: string | null;
|
||
ok: boolean;
|
||
};
|
||
|
||
type AddonTokenRow = {
|
||
id: string;
|
||
label: string | null;
|
||
revoked: boolean;
|
||
createdAt: string;
|
||
hasOwnIptv: boolean;
|
||
};
|
||
|
||
type Viewer = {
|
||
id: string;
|
||
email: string;
|
||
name: string | null;
|
||
enabled: boolean;
|
||
appAccess: boolean;
|
||
iptvAccess: boolean;
|
||
iptvAddonTokenId: string | null;
|
||
googlePlayEmail: string | null;
|
||
googlePlayAccess: boolean;
|
||
googlePlayMembershipId: string | null;
|
||
googlePlaySyncStatus: GooglePlaySyncStatus;
|
||
googlePlayLastSyncedAt: string | null;
|
||
googlePlaySyncError: string | null;
|
||
googlePlayResolvedEmail: string;
|
||
createdAt: string;
|
||
deviceCount: number;
|
||
devices: Device[];
|
||
iptv?: ViewerIptv | null;
|
||
addonTokens?: AddonTokenRow[];
|
||
loginFailedCount?: number;
|
||
loginLocked?: boolean;
|
||
loginLockedUntil?: string | null;
|
||
};
|
||
|
||
type IptvFormState = {
|
||
label: string;
|
||
baseUrl: string;
|
||
username: string;
|
||
password: string;
|
||
enableLive: boolean;
|
||
enableVod: boolean;
|
||
enableSeries: boolean;
|
||
};
|
||
|
||
type PlayConfig = {
|
||
configured: boolean;
|
||
groupEmail: string | null;
|
||
groupId: string | null;
|
||
optInUrl: string | null;
|
||
};
|
||
|
||
const MASTER_BASE = "https://master.vonas.nl";
|
||
|
||
const SYNC_LABELS: Record<GooglePlaySyncStatus, string> = {
|
||
NOT_ENABLED: "Uit",
|
||
PENDING_ADD: "Bezig…",
|
||
ACTIVE: "Actief",
|
||
PENDING_REMOVE: "Bezig…",
|
||
REMOVED: "Uit",
|
||
ERROR: "Fout",
|
||
};
|
||
|
||
function formatWhen(iso: string | null) {
|
||
if (!iso) return null;
|
||
return new Date(iso).toLocaleString("nl-NL", {
|
||
day: "numeric",
|
||
month: "short",
|
||
year: "numeric",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
}
|
||
|
||
function emptyIptvForm(): IptvFormState {
|
||
return {
|
||
label: "",
|
||
baseUrl: "",
|
||
username: "",
|
||
password: "",
|
||
enableLive: true,
|
||
enableVod: true,
|
||
enableSeries: true,
|
||
};
|
||
}
|
||
|
||
function formFromIptv(iptv: ViewerIptv | null | undefined): IptvFormState {
|
||
if (!iptv) return emptyIptvForm();
|
||
return {
|
||
label: iptv.label ?? "",
|
||
baseUrl: iptv.baseUrl ?? "",
|
||
username: iptv.username ?? "",
|
||
password: "",
|
||
enableLive: iptv.enableLive ?? true,
|
||
enableVod: iptv.enableVod ?? true,
|
||
enableSeries: iptv.enableSeries ?? true,
|
||
};
|
||
}
|
||
|
||
function iptvBadge(iptv: ViewerIptv | null | undefined): { label: string; tone: "ok" | "bad" | "off" } {
|
||
if (!iptv) return { label: "IPTV geen", tone: "off" };
|
||
if (iptv.ok) return { label: "IPTV OK", tone: "ok" };
|
||
return { label: "IPTV fout", tone: "bad" };
|
||
}
|
||
|
||
function playTone(v: Viewer): "ok" | "warn" | "bad" | "off" {
|
||
if (v.googlePlaySyncStatus === "ERROR") return "bad";
|
||
if (v.googlePlayAccess && v.googlePlaySyncStatus === "ACTIVE") return "ok";
|
||
if (v.googlePlayAccess) return "warn";
|
||
return "off";
|
||
}
|
||
|
||
export default function ViewersPage() {
|
||
useAuth();
|
||
const [viewers, setViewers] = useState<Viewer[]>([]);
|
||
const [playConfig, setPlayConfig] = useState<PlayConfig | null>(null);
|
||
const [email, setEmail] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const [name, setName] = useState("");
|
||
const [busy, setBusy] = useState(false);
|
||
const [bulkBusy, setBulkBusy] = useState(false);
|
||
const [msg, setMsg] = useState<string | null>(null);
|
||
const [err, setErr] = useState<string | null>(null);
|
||
const [playEmails, setPlayEmails] = useState<Record<string, string>>({});
|
||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||
const [mobileShowDetail, setMobileShowDetail] = useState(false);
|
||
const [query, setQuery] = useState("");
|
||
const [showCreate, setShowCreate] = useState(false);
|
||
const [actionId, setActionId] = useState<string | null>(null);
|
||
const [iptvForms, setIptvForms] = useState<Record<string, IptvFormState>>({});
|
||
const [iptvLocalMsg, setIptvLocalMsg] = useState<Record<string, string | null>>({});
|
||
const [iptvLocalErr, setIptvLocalErr] = useState<Record<string, string | null>>({});
|
||
const [addonInstallUrls, setAddonInstallUrls] = useState<Record<string, string | null>>({});
|
||
const [claimCodes, setClaimCodes] = useState<Record<string, string>>({});
|
||
const [newPasswords, setNewPasswords] = useState<Record<string, string>>({});
|
||
|
||
const load = useCallback(() => {
|
||
fetch("/api/v1/admin/viewers", { credentials: "include" })
|
||
.then((r) => r.json())
|
||
.then((d) => {
|
||
const list: Viewer[] = d.viewers ?? [];
|
||
setViewers(list);
|
||
setPlayEmails((prev) => {
|
||
const next = { ...prev };
|
||
for (const v of list) {
|
||
if (next[v.id] === undefined) next[v.id] = v.googlePlayEmail ?? "";
|
||
}
|
||
return next;
|
||
});
|
||
})
|
||
.catch(() => setErr("Kon gebruikers niet laden"));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
load();
|
||
fetch("/api/v1/admin/google-play-access/config", { credentials: "include" })
|
||
.then((r) => r.json())
|
||
.then((d) => setPlayConfig(d.config ?? null))
|
||
.catch(() => undefined);
|
||
}, [load]);
|
||
|
||
const stats = useMemo(() => {
|
||
const active = viewers.filter((v) => v.enabled).length;
|
||
const appOn = viewers.filter((v) => v.appAccess).length;
|
||
const playOn = viewers.filter((v) => v.googlePlayAccess).length;
|
||
const playErr = viewers.filter((v) => v.googlePlaySyncStatus === "ERROR").length;
|
||
return { total: viewers.length, active, appOn, playOn, playErr };
|
||
}, [viewers]);
|
||
|
||
const filtered = useMemo(() => {
|
||
const q = query.trim().toLowerCase();
|
||
if (!q) return viewers;
|
||
return viewers.filter((v) => {
|
||
const hay = `${v.name ?? ""} ${v.email}`.toLowerCase();
|
||
return hay.includes(q);
|
||
});
|
||
}, [viewers, query]);
|
||
|
||
const selected = useMemo(
|
||
() => viewers.find((v) => v.id === selectedId) ?? null,
|
||
[viewers, selectedId]
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (viewers.length === 0) {
|
||
setSelectedId(null);
|
||
return;
|
||
}
|
||
if (selectedId && viewers.some((v) => v.id === selectedId)) return;
|
||
const first = viewers[0];
|
||
setSelectedId(first.id);
|
||
setIptvForms((prev) =>
|
||
prev[first.id] ? prev : { ...prev, [first.id]: formFromIptv(first.iptv) }
|
||
);
|
||
}, [viewers, selectedId]);
|
||
|
||
function selectViewer(v: Viewer) {
|
||
setSelectedId(v.id);
|
||
setMobileShowDetail(true);
|
||
setIptvForms((prev) => ({ ...prev, [v.id]: formFromIptv(v.iptv) }));
|
||
setIptvLocalMsg((prev) => ({ ...prev, [v.id]: null }));
|
||
setIptvLocalErr((prev) => ({ ...prev, [v.id]: null }));
|
||
}
|
||
|
||
function patchIptvForm(id: string, patch: Partial<IptvFormState>) {
|
||
setIptvForms((prev) => ({
|
||
...prev,
|
||
[id]: { ...(prev[id] ?? emptyIptvForm()), ...patch },
|
||
}));
|
||
}
|
||
|
||
async function createViewer(e: FormEvent) {
|
||
e.preventDefault();
|
||
setBusy(true);
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch("/api/v1/admin/viewers", {
|
||
method: "POST",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ email, password, name: name || undefined, appAccess: true }),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "Aanmaken mislukt");
|
||
return;
|
||
}
|
||
setMsg(`${data.viewer.email} aangemaakt`);
|
||
setEmail("");
|
||
setPassword("");
|
||
setName("");
|
||
setShowCreate(false);
|
||
setSelectedId(data.viewer.id);
|
||
setMobileShowDetail(true);
|
||
setIptvForms((prev) => ({ ...prev, [data.viewer.id]: emptyIptvForm() }));
|
||
load();
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function toggle(v: Viewer, field: "enabled" | "appAccess" | "iptvAccess") {
|
||
setActionId(v.id);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}`, {
|
||
method: "PATCH",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ [field]: !v[field] }),
|
||
});
|
||
if (!res.ok) {
|
||
const data = await res.json().catch(() => ({}));
|
||
setErr(data.error?.message ?? "Bijwerken mislukt");
|
||
}
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function saveIptv(v: Viewer) {
|
||
const form = iptvForms[v.id] ?? emptyIptvForm();
|
||
setActionId(v.id);
|
||
setIptvLocalMsg((prev) => ({ ...prev, [v.id]: null }));
|
||
setIptvLocalErr((prev) => ({ ...prev, [v.id]: null }));
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}/iptv`, {
|
||
method: "PUT",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
label: form.label.trim() || undefined,
|
||
baseUrl: form.baseUrl.trim(),
|
||
username: form.username.trim(),
|
||
password: form.password.trim() || undefined,
|
||
enableLive: form.enableLive,
|
||
enableVod: form.enableVod,
|
||
enableSeries: form.enableSeries,
|
||
}),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
const message = data.error?.message ?? "IPTV opslaan mislukt";
|
||
setIptvLocalErr((prev) => ({ ...prev, [v.id]: message }));
|
||
setErr(message);
|
||
return;
|
||
}
|
||
setIptvLocalMsg((prev) => ({ ...prev, [v.id]: "IPTV-lijn opgeslagen" }));
|
||
setMsg("IPTV-lijn opgeslagen");
|
||
patchIptvForm(v.id, { password: "" });
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function testIptv(v: Viewer) {
|
||
setActionId(v.id);
|
||
setIptvLocalMsg((prev) => ({ ...prev, [v.id]: null }));
|
||
setIptvLocalErr((prev) => ({ ...prev, [v.id]: null }));
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}/iptv/test`, {
|
||
method: "POST",
|
||
credentials: "include",
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
const message = data.error?.message ?? "IPTV-test mislukt";
|
||
setIptvLocalErr((prev) => ({ ...prev, [v.id]: message }));
|
||
setErr(message);
|
||
load();
|
||
return;
|
||
}
|
||
const summary = `OK · live ${data.liveCategories ?? 0} · vod ${data.vodCategories ?? 0} · series ${data.seriesCategories ?? 0}`;
|
||
setIptvLocalMsg((prev) => ({ ...prev, [v.id]: summary }));
|
||
setMsg("IPTV-test gelukt");
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function deleteIptv(v: Viewer) {
|
||
if (!confirm("IPTV-lijn ontkoppelen voor deze gebruiker?")) return;
|
||
setActionId(v.id);
|
||
setIptvLocalMsg((prev) => ({ ...prev, [v.id]: null }));
|
||
setIptvLocalErr((prev) => ({ ...prev, [v.id]: null }));
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}/iptv`, {
|
||
method: "DELETE",
|
||
credentials: "include",
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
const message = data.error?.message ?? "Ontkoppelen mislukt";
|
||
setIptvLocalErr((prev) => ({ ...prev, [v.id]: message }));
|
||
setErr(message);
|
||
return;
|
||
}
|
||
setIptvForms((prev) => ({ ...prev, [v.id]: emptyIptvForm() }));
|
||
setIptvLocalMsg((prev) => ({ ...prev, [v.id]: "IPTV-lijn ontkoppeld" }));
|
||
setMsg("IPTV-lijn ontkoppeld");
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function createAddonToken(v: Viewer) {
|
||
setActionId(v.id);
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}/addon-tokens`, {
|
||
method: "POST",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ label: v.name || v.email }),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "Addon aanmaken mislukt");
|
||
return;
|
||
}
|
||
const installPath = typeof data.installUrl === "string" ? data.installUrl : "";
|
||
const fullUrl = installPath.startsWith("http")
|
||
? installPath
|
||
: `${MASTER_BASE}${installPath.startsWith("/") ? "" : "/"}${installPath}`;
|
||
setAddonInstallUrls((prev) => ({ ...prev, [v.id]: fullUrl }));
|
||
setMsg("Stremio-addon aangemaakt — kopieer de installatie-URL (eenmalig)");
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function copyText(text: string) {
|
||
try {
|
||
await navigator.clipboard.writeText(text);
|
||
setMsg("Gekopieerd naar klembord");
|
||
} catch {
|
||
setErr("Kopiëren mislukt");
|
||
}
|
||
}
|
||
|
||
async function setPlayAccess(v: Viewer, enabled: boolean) {
|
||
setActionId(v.id);
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}/google-play-access`, {
|
||
method: "PATCH",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
enabled,
|
||
email: playEmails[v.id]?.trim() || null,
|
||
}),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "Google Play bijwerken mislukt");
|
||
} else {
|
||
setMsg(
|
||
enabled
|
||
? data.syncError
|
||
? "Instelling opgeslagen — synchronisatie mislukt, probeer opnieuw"
|
||
: "Google Play-toegang ingeschakeld"
|
||
: data.syncError
|
||
? "Instelling opgeslagen — synchronisatie mislukt, probeer opnieuw"
|
||
: "Google Play-toegang uitgeschakeld"
|
||
);
|
||
if (data.syncError) setErr(data.syncError);
|
||
}
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function savePlayEmail(v: Viewer) {
|
||
setActionId(v.id);
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}/google-play-access`, {
|
||
method: "PATCH",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
enabled: v.googlePlayAccess,
|
||
email: playEmails[v.id]?.trim() || null,
|
||
}),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "E-mail opslaan mislukt");
|
||
} else {
|
||
setMsg("Google Play-e-mail opgeslagen");
|
||
if (data.syncError) setErr(data.syncError);
|
||
}
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function retryPlaySync(v: Viewer) {
|
||
setActionId(v.id);
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}/google-play-access/retry`, {
|
||
method: "POST",
|
||
credentials: "include",
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "Synchronisatie mislukt");
|
||
} else {
|
||
setMsg(data.syncError ? "Synchronisatie mislukt" : "Synchronisatie gelukt");
|
||
if (data.syncError) setErr(data.syncError);
|
||
}
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function bulkAction(path: "sync-all" | "reconcile") {
|
||
setBulkBusy(true);
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/google-play-access/${path}`, {
|
||
method: "POST",
|
||
credentials: "include",
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "Actie mislukt");
|
||
return;
|
||
}
|
||
const s = data.summary;
|
||
setMsg(
|
||
`${path === "sync-all" ? "Sync" : "Reconcile"}: ${s.scanned} gecontroleerd · ${s.correct} ok · ${s.added} toegevoegd · ${s.removed} verwijderd · ${s.errors} fouten`
|
||
);
|
||
load();
|
||
} finally {
|
||
setBulkBusy(false);
|
||
}
|
||
}
|
||
|
||
async function revokeDevice(deviceId: string) {
|
||
if (!confirm("Apparaat loskoppelen? De app moet opnieuw worden gekoppeld.")) return;
|
||
setActionId(deviceId);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/devices/${deviceId}/revoke`, {
|
||
method: "POST",
|
||
credentials: "include",
|
||
});
|
||
if (!res.ok) {
|
||
const data = await res.json().catch(() => ({}));
|
||
setErr(data.error?.message ?? "Apparaat loskoppelen mislukt");
|
||
return;
|
||
}
|
||
setMsg("Apparaat losgekoppeld");
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function claimDeviceCode(viewerId: string) {
|
||
const raw = (claimCodes[viewerId] ?? "").trim();
|
||
if (!raw) {
|
||
setErr("Voer de koppelcode van het apparaat in");
|
||
return;
|
||
}
|
||
setActionId(`claim-${viewerId}`);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${viewerId}/devices/claim`, {
|
||
method: "POST",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ code: raw }),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "Code koppelen mislukt");
|
||
return;
|
||
}
|
||
const deviceName = data.deviceName ? ` (${data.deviceName})` : "";
|
||
setMsg(`Apparaat gekoppeld${deviceName} — de app/TV rondt zelf af`);
|
||
setClaimCodes((prev) => ({ ...prev, [viewerId]: "" }));
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function unlockLogin(v: Viewer) {
|
||
setActionId(`unlock-${v.id}`);
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}/unlock-login`, {
|
||
method: "POST",
|
||
credentials: "include",
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "Ontgrendelen mislukt");
|
||
return;
|
||
}
|
||
setMsg(`Login ontgrendeld voor ${v.email}`);
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function changeViewerPassword(v: Viewer) {
|
||
const next = (newPasswords[v.id] ?? "").trim();
|
||
if (next.length < 8) {
|
||
setErr("Nieuw wachtwoord minstens 8 tekens");
|
||
return;
|
||
}
|
||
setActionId(`pw-${v.id}`);
|
||
setMsg(null);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}`, {
|
||
method: "PATCH",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ password: next }),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "Wachtwoord wijzigen mislukt");
|
||
return;
|
||
}
|
||
setNewPasswords((prev) => ({ ...prev, [v.id]: "" }));
|
||
setMsg(`Wachtwoord bijgewerkt voor ${v.email}`);
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
async function deleteViewer(v: Viewer) {
|
||
const label = v.name || v.email;
|
||
if (
|
||
!confirm(
|
||
`Gebruiker “${label}” definitief verwijderen?\n\nApparaten, profielen, IPTV-lijn en voortgang verdwijnen. Stremio-addons blijven bestaan maar zonder koppeling.`
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
setActionId(v.id);
|
||
setErr(null);
|
||
try {
|
||
const res = await fetch(`/api/v1/admin/viewers/${v.id}`, {
|
||
method: "DELETE",
|
||
credentials: "include",
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
setErr(data.error?.message ?? "Verwijderen mislukt");
|
||
return;
|
||
}
|
||
if (selectedId === v.id) {
|
||
setSelectedId(null);
|
||
setMobileShowDetail(false);
|
||
}
|
||
setMsg(`${label} verwijderd`);
|
||
load();
|
||
} finally {
|
||
setActionId(null);
|
||
}
|
||
}
|
||
|
||
const iptv = selected?.iptv ?? null;
|
||
const iptvForm = selected
|
||
? iptvForms[selected.id] ?? formFromIptv(iptv)
|
||
: emptyIptvForm();
|
||
const tokens = selected?.addonTokens ?? [];
|
||
const installUrl = selected ? addonInstallUrls[selected.id] ?? null : null;
|
||
const badge = iptvBadge(iptv);
|
||
const pTone = selected ? playTone(selected) : "off";
|
||
|
||
return (
|
||
<>
|
||
<Nav />
|
||
<div className="container viewers-page">
|
||
<header className="page-header">
|
||
<div>
|
||
<p className="page-kicker">Mensen</p>
|
||
<h1>Gebruikers</h1>
|
||
<p className="page-lead muted">
|
||
Kies links een gebruiker · beheer rechts in blokken · apparaten via code of{" "}
|
||
<Link href="/link">/link</Link>.
|
||
</p>
|
||
</div>
|
||
<button type="button" className="btn-primary" onClick={() => setShowCreate((v) => !v)}>
|
||
{showCreate ? "Sluiten" : "Nieuwe gebruiker"}
|
||
</button>
|
||
</header>
|
||
|
||
<div className="stat-strip">
|
||
<span>
|
||
<strong>{stats.total}</strong> totaal
|
||
</span>
|
||
<span>
|
||
<strong>{stats.active}</strong> actief
|
||
</span>
|
||
<span>
|
||
<strong>{stats.appOn}</strong> app
|
||
</span>
|
||
<span>
|
||
<strong>{stats.playOn}</strong> play
|
||
{stats.playErr > 0 ? <em className="stat-warn"> · {stats.playErr} fout</em> : null}
|
||
</span>
|
||
</div>
|
||
|
||
{(msg || err) && (
|
||
<div className={`flash ${err ? "flash-err" : "flash-ok"}`} role="status">
|
||
{err ? err : msg}
|
||
<button
|
||
type="button"
|
||
className="flash-close"
|
||
onClick={() => {
|
||
setMsg(null);
|
||
setErr(null);
|
||
}}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{showCreate && (
|
||
<section className="card create-card">
|
||
<h2 className="card-subtitle">Nieuwe gebruiker</h2>
|
||
<form className="form-grid" onSubmit={createViewer}>
|
||
<label>
|
||
Naam
|
||
<input value={name} onChange={(e) => setName(e.target.value)} placeholder="Jos" />
|
||
</label>
|
||
<label>
|
||
Account-e-mail
|
||
<input
|
||
type="email"
|
||
required
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
autoComplete="off"
|
||
/>
|
||
</label>
|
||
<label>
|
||
Wachtwoord
|
||
<input
|
||
type="password"
|
||
required
|
||
minLength={8}
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
autoComplete="new-password"
|
||
/>
|
||
</label>
|
||
<div className="create-actions">
|
||
<button type="submit" className="btn-primary" disabled={busy}>
|
||
{busy ? "Bezig…" : "Aanmaken"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
)}
|
||
|
||
<div className={`workspace${mobileShowDetail && selected ? " show-detail" : ""}`}>
|
||
<aside className="sidebar">
|
||
<div className="sidebar-top">
|
||
<label className="search-field">
|
||
<span className="sr-only">Zoeken</span>
|
||
<input
|
||
type="search"
|
||
placeholder="Zoek naam of e-mail…"
|
||
value={query}
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
/>
|
||
</label>
|
||
<div className="sidebar-tools">
|
||
{playConfig?.configured ? (
|
||
<>
|
||
<button type="button" disabled={bulkBusy} onClick={() => void bulkAction("sync-all")}>
|
||
Sync Play
|
||
</button>
|
||
<button type="button" disabled={bulkBusy} onClick={() => void bulkAction("reconcile")}>
|
||
Reconcile
|
||
</button>
|
||
</>
|
||
) : (
|
||
<Link href="/settings?tab=google-play" className="setup-link">
|
||
Play instellen →
|
||
</Link>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{filtered.length === 0 ? (
|
||
<p className="muted empty">
|
||
{viewers.length === 0
|
||
? "Nog geen gebruikers."
|
||
: "Geen treffers voor deze zoekopdracht."}
|
||
</p>
|
||
) : (
|
||
<ul className="user-list">
|
||
{filtered.map((v) => {
|
||
const active = selectedId === v.id;
|
||
const ib = iptvBadge(v.iptv);
|
||
return (
|
||
<li key={v.id}>
|
||
<button
|
||
type="button"
|
||
className={`user-row${active ? " active" : ""}${!v.enabled ? " dim" : ""}`}
|
||
onClick={() => selectViewer(v)}
|
||
aria-current={active ? "true" : undefined}
|
||
>
|
||
<div className="user-row-main">
|
||
<strong>{v.name || v.email}</strong>
|
||
{v.name ? <span>{v.email}</span> : null}
|
||
</div>
|
||
<div className="user-row-meta">
|
||
<span className={`dot ${v.enabled ? "ok" : "off"}`} title="Account" />
|
||
<span className={`dot ${v.appAccess ? "ok" : "off"}`} title="App" />
|
||
<span className={`dot ${ib.tone}`} title={ib.label} />
|
||
<span className={`dot ${playTone(v)}`} title="Play" />
|
||
<span className="device-count">{v.deviceCount}</span>
|
||
</div>
|
||
</button>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</aside>
|
||
|
||
<section className="detail-pane" aria-live="polite">
|
||
{!selected ? (
|
||
<div className="detail-empty">
|
||
<p className="muted">Selecteer links een gebruiker om te beheren.</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="detail-head">
|
||
<button
|
||
type="button"
|
||
className="back-btn"
|
||
onClick={() => setMobileShowDetail(false)}
|
||
>
|
||
← Lijst
|
||
</button>
|
||
<div className="detail-who">
|
||
<h2>{selected.name || selected.email}</h2>
|
||
{selected.name ? <p className="muted">{selected.email}</p> : null}
|
||
</div>
|
||
<div className="detail-status">
|
||
<span className={`pill ${selected.enabled ? "ok" : "off"}`}>
|
||
{selected.enabled ? "Account aan" : "Account uit"}
|
||
</span>
|
||
<span className={`pill ${selected.appAccess ? "ok" : "off"}`}>
|
||
{selected.appAccess ? "App aan" : "App uit"}
|
||
</span>
|
||
<span className={`pill ${badge.tone}`}>{badge.label}</span>
|
||
<span className={`pill ${pTone}`}>
|
||
Play {SYNC_LABELS[selected.googlePlaySyncStatus]}
|
||
</span>
|
||
{selected.loginLocked ? <span className="pill bad">Login vergrendeld</span> : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="blocks">
|
||
<article className="block">
|
||
<header className="block-head">
|
||
<h3>Apparaten</h3>
|
||
<span className="muted">
|
||
{selected.deviceCount === 0
|
||
? "geen gekoppeld"
|
||
: `${selected.deviceCount} actief`}
|
||
</span>
|
||
</header>
|
||
{selected.devices.length === 0 ? (
|
||
<p className="muted detail-copy">Nog geen gekoppelde apparaten.</p>
|
||
) : (
|
||
<ul className="device-rows">
|
||
{selected.devices.map((d) => (
|
||
<li key={d.id}>
|
||
<div>
|
||
<strong>{d.name}</strong>
|
||
<span className="muted">
|
||
{d.platform}
|
||
{d.lastSeenAt
|
||
? ` · laatst gezien ${formatWhen(d.lastSeenAt)}`
|
||
: ""}
|
||
</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="danger"
|
||
disabled={actionId === d.id}
|
||
onClick={() => void revokeDevice(d.id)}
|
||
>
|
||
Loskoppelen
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
<div className="claim-code-row">
|
||
<p className="muted detail-copy">
|
||
Openstaande code van TV/app (zonder gebruikerswachtwoord).
|
||
</p>
|
||
<div className="claim-code-form">
|
||
<input
|
||
type="text"
|
||
inputMode="text"
|
||
autoComplete="off"
|
||
spellCheck={false}
|
||
placeholder="ABCD-EFGH"
|
||
value={claimCodes[selected.id] ?? ""}
|
||
onChange={(e) =>
|
||
setClaimCodes((prev) => ({
|
||
...prev,
|
||
[selected.id]: e.target.value.toUpperCase(),
|
||
}))
|
||
}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
void claimDeviceCode(selected.id);
|
||
}
|
||
}}
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="btn-primary"
|
||
disabled={
|
||
actionId === `claim-${selected.id}` ||
|
||
!(claimCodes[selected.id] ?? "").trim()
|
||
}
|
||
onClick={() => void claimDeviceCode(selected.id)}
|
||
>
|
||
{actionId === `claim-${selected.id}` ? "Koppelen…" : "Code koppelen"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article className="block">
|
||
<header className="block-head">
|
||
<h3>Account</h3>
|
||
</header>
|
||
<p className="muted detail-copy">
|
||
Bepaalt of deze gebruiker kan inloggen en de app-inhoud mag gebruiken.
|
||
</p>
|
||
<div
|
||
className={
|
||
selected.loginLocked || (selected.loginFailedCount ?? 0) > 0
|
||
? "login-lock-box"
|
||
: "login-lock-box idle"
|
||
}
|
||
>
|
||
<p>
|
||
{selected.loginLocked
|
||
? `Login vergrendeld tot ${
|
||
selected.loginLockedUntil
|
||
? new Date(selected.loginLockedUntil).toLocaleString("nl-NL")
|
||
: "…"
|
||
} (3 foute pogingen).`
|
||
: (selected.loginFailedCount ?? 0) > 0
|
||
? `${selected.loginFailedCount} foute wachtwoordpoging${
|
||
(selected.loginFailedCount ?? 0) === 1 ? "" : "en"
|
||
} (lock na 3).`
|
||
: "Geen login-blokkade actief. Ontgrendelen wist foute-pogingen-teller."}
|
||
</p>
|
||
<button
|
||
type="button"
|
||
disabled={actionId === `unlock-${selected.id}`}
|
||
onClick={() => void unlockLogin(selected)}
|
||
>
|
||
{actionId === `unlock-${selected.id}`
|
||
? "Ontgrendelen…"
|
||
: "Login ontgrendelen"}
|
||
</button>
|
||
</div>
|
||
<div className="form-group password-change">
|
||
<label className="field">
|
||
Nieuw wachtwoord
|
||
<input
|
||
type="password"
|
||
autoComplete="new-password"
|
||
placeholder="Minstens 8 tekens"
|
||
value={newPasswords[selected.id] ?? ""}
|
||
onChange={(e) =>
|
||
setNewPasswords((prev) => ({
|
||
...prev,
|
||
[selected.id]: e.target.value,
|
||
}))
|
||
}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
void changeViewerPassword(selected);
|
||
}
|
||
}}
|
||
/>
|
||
</label>
|
||
<button
|
||
type="button"
|
||
className="btn-primary"
|
||
disabled={
|
||
actionId === `pw-${selected.id}` ||
|
||
!(newPasswords[selected.id] ?? "").trim()
|
||
}
|
||
onClick={() => void changeViewerPassword(selected)}
|
||
>
|
||
{actionId === `pw-${selected.id}`
|
||
? "Opslaan…"
|
||
: "Wachtwoord wijzigen"}
|
||
</button>
|
||
</div>
|
||
<div className="toggle-rows">
|
||
<div className="toggle-row">
|
||
<div>
|
||
<strong>Account actief</strong>
|
||
<span className="muted">Uitschakelen blokkeert login</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className={`switch ${selected.enabled ? "on" : ""}`}
|
||
disabled={actionId === selected.id}
|
||
onClick={() => void toggle(selected, "enabled")}
|
||
aria-pressed={selected.enabled}
|
||
>
|
||
<span />
|
||
</button>
|
||
</div>
|
||
<div className="toggle-row">
|
||
<div>
|
||
<strong>App-toegang</strong>
|
||
<span className="muted">Toegang tot content in de app</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className={`switch ${selected.appAccess ? "on" : ""}`}
|
||
disabled={actionId === selected.id}
|
||
onClick={() => void toggle(selected, "appAccess")}
|
||
aria-pressed={selected.appAccess}
|
||
>
|
||
<span />
|
||
</button>
|
||
</div>
|
||
<div className="toggle-row">
|
||
<div>
|
||
<strong>Live TV (IPTV)</strong>
|
||
<span className="muted">Aan alleen met IPTV-lijn hiernaast</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className={`switch ${selected.iptvAccess ? "on" : ""}`}
|
||
disabled={actionId === selected.id || !selected.appAccess}
|
||
onClick={() => void toggle(selected, "iptvAccess")}
|
||
aria-pressed={selected.iptvAccess}
|
||
>
|
||
<span />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="detail-actions">
|
||
<button
|
||
type="button"
|
||
className="danger"
|
||
disabled={actionId === selected.id}
|
||
onClick={() => void deleteViewer(selected)}
|
||
>
|
||
Gebruiker verwijderen
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article className="block">
|
||
<header className="block-head">
|
||
<h3>IPTV · Xtream / XUI</h3>
|
||
</header>
|
||
<p className="muted detail-copy">
|
||
Eigen IPTV-lijn voor apps en gekoppelde Stremio-addons.
|
||
</p>
|
||
<div className="form-group">
|
||
<label className="field">
|
||
Label
|
||
<input
|
||
value={iptvForm.label}
|
||
onChange={(e) => patchIptvForm(selected.id, { label: e.target.value })}
|
||
placeholder="Thuis / XUI"
|
||
/>
|
||
</label>
|
||
<label className="field">
|
||
Base URL
|
||
<input
|
||
value={iptvForm.baseUrl}
|
||
onChange={(e) => patchIptvForm(selected.id, { baseUrl: e.target.value })}
|
||
placeholder="http://host:port"
|
||
inputMode="url"
|
||
/>
|
||
</label>
|
||
<label className="field">
|
||
Gebruikersnaam
|
||
<input
|
||
value={iptvForm.username}
|
||
onChange={(e) =>
|
||
patchIptvForm(selected.id, { username: e.target.value })
|
||
}
|
||
autoComplete="off"
|
||
/>
|
||
</label>
|
||
<label className="field">
|
||
Wachtwoord
|
||
<input
|
||
type="password"
|
||
value={iptvForm.password}
|
||
onChange={(e) =>
|
||
patchIptvForm(selected.id, { password: e.target.value })
|
||
}
|
||
placeholder={
|
||
iptv?.hasPassword ? "•••••••• (leeg = behouden)" : "Wachtwoord"
|
||
}
|
||
autoComplete="new-password"
|
||
/>
|
||
</label>
|
||
<div className="check-rows">
|
||
<label className="check-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={iptvForm.enableLive}
|
||
onChange={(e) =>
|
||
patchIptvForm(selected.id, { enableLive: e.target.checked })
|
||
}
|
||
/>
|
||
Live
|
||
</label>
|
||
<label className="check-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={iptvForm.enableVod}
|
||
onChange={(e) =>
|
||
patchIptvForm(selected.id, { enableVod: e.target.checked })
|
||
}
|
||
/>
|
||
VOD
|
||
</label>
|
||
<label className="check-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={iptvForm.enableSeries}
|
||
onChange={(e) =>
|
||
patchIptvForm(selected.id, { enableSeries: e.target.checked })
|
||
}
|
||
/>
|
||
Series
|
||
</label>
|
||
</div>
|
||
</div>
|
||
{iptv?.lastError && (
|
||
<p className="text-bad sync-err">Laatste fout: {iptv.lastError}</p>
|
||
)}
|
||
{iptvLocalErr[selected.id] && (
|
||
<p className="text-bad sync-err">{iptvLocalErr[selected.id]}</p>
|
||
)}
|
||
{iptvLocalMsg[selected.id] && (
|
||
<p className="muted detail-copy">{iptvLocalMsg[selected.id]}</p>
|
||
)}
|
||
{iptv?.lastOkAt && !iptv.lastError && (
|
||
<p className="muted field-hint">Laatst OK: {formatWhen(iptv.lastOkAt)}</p>
|
||
)}
|
||
<div className="detail-actions">
|
||
<button
|
||
type="button"
|
||
className="btn-primary"
|
||
disabled={actionId === selected.id}
|
||
onClick={() => void saveIptv(selected)}
|
||
>
|
||
Opslaan
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={actionId === selected.id || !iptv}
|
||
onClick={() => void testIptv(selected)}
|
||
>
|
||
Testen
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="danger"
|
||
disabled={actionId === selected.id || !iptv}
|
||
onClick={() => void deleteIptv(selected)}
|
||
>
|
||
Ontkoppelen
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article className="block">
|
||
<header className="block-head">
|
||
<h3>Stremio-addon</h3>
|
||
</header>
|
||
<p className="muted detail-copy">
|
||
Stremio gebruikt de IPTV-lijn van deze gebruiker.
|
||
</p>
|
||
{tokens.length === 0 ? (
|
||
<p className="muted">Nog geen addon-tokens.</p>
|
||
) : (
|
||
<ul className="addon-rows">
|
||
{tokens.map((t) => (
|
||
<li key={t.id}>
|
||
<div>
|
||
<strong>{t.label || "Addon"}</strong>
|
||
<span className="muted">
|
||
{t.revoked ? "Ingetrokken" : "Actief"}
|
||
{t.hasOwnIptv ? " · eigen IPTV" : ""}
|
||
{t.createdAt ? ` · aangemaakt ${formatWhen(t.createdAt)}` : ""}
|
||
</span>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
<div className="detail-actions">
|
||
<button
|
||
type="button"
|
||
className="btn-primary"
|
||
disabled={actionId === selected.id}
|
||
onClick={() => void createAddonToken(selected)}
|
||
>
|
||
Addon aanmaken
|
||
</button>
|
||
</div>
|
||
{installUrl && (
|
||
<div className="install-box">
|
||
<p className="muted field-hint">
|
||
Installatie-URL (eenmalig zichtbaar — kopieer nu):
|
||
</p>
|
||
<code className="install-url">{installUrl}</code>
|
||
<button type="button" onClick={() => void copyText(installUrl)}>
|
||
Kopiëren
|
||
</button>
|
||
</div>
|
||
)}
|
||
</article>
|
||
|
||
<article className="block">
|
||
<header className="block-head">
|
||
<h3>Google Play</h3>
|
||
</header>
|
||
{!playConfig?.configured ? (
|
||
<p className="muted detail-copy">
|
||
Nog niet geconfigureerd. Ga naar{" "}
|
||
<Link href="/settings?tab=google-play">Instellingen → Google Play</Link>.
|
||
</p>
|
||
) : (
|
||
<>
|
||
<p className="muted detail-copy">
|
||
Alleen installatierecht via Closed Testing — los van app-login.
|
||
</p>
|
||
<label className="field">
|
||
Google Play-e-mail
|
||
<input
|
||
type="email"
|
||
placeholder={selected.email}
|
||
value={playEmails[selected.id] ?? ""}
|
||
onChange={(e) =>
|
||
setPlayEmails((prev) => ({
|
||
...prev,
|
||
[selected.id]: e.target.value,
|
||
}))
|
||
}
|
||
/>
|
||
</label>
|
||
<p className="field-hint muted">
|
||
Leeg = account-e-mail (
|
||
{selected.googlePlayResolvedEmail || selected.email})
|
||
</p>
|
||
<div className="play-status-line">
|
||
<span>
|
||
Status:{" "}
|
||
<strong className={pTone === "bad" ? "text-bad" : ""}>
|
||
{SYNC_LABELS[selected.googlePlaySyncStatus]}
|
||
</strong>
|
||
</span>
|
||
{selected.googlePlayLastSyncedAt && (
|
||
<span className="muted">
|
||
Laatst: {formatWhen(selected.googlePlayLastSyncedAt)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{selected.googlePlaySyncError && (
|
||
<p className="text-bad sync-err">{selected.googlePlaySyncError}</p>
|
||
)}
|
||
<div className="detail-actions">
|
||
<button
|
||
type="button"
|
||
disabled={actionId === selected.id}
|
||
onClick={() => void savePlayEmail(selected)}
|
||
>
|
||
E-mail opslaan
|
||
</button>
|
||
{selected.googlePlayAccess ? (
|
||
<button
|
||
type="button"
|
||
className="danger"
|
||
disabled={actionId === selected.id}
|
||
onClick={() => void setPlayAccess(selected, false)}
|
||
>
|
||
Play uit
|
||
</button>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
className="btn-primary"
|
||
disabled={actionId === selected.id}
|
||
onClick={() => void setPlayAccess(selected, true)}
|
||
>
|
||
Play aan
|
||
</button>
|
||
)}
|
||
{selected.googlePlaySyncStatus === "ERROR" && (
|
||
<button
|
||
type="button"
|
||
disabled={actionId === selected.id}
|
||
onClick={() => void retryPlaySync(selected)}
|
||
>
|
||
Opnieuw syncen
|
||
</button>
|
||
)}
|
||
{selected.googlePlayAccess &&
|
||
selected.googlePlaySyncStatus === "ACTIVE" &&
|
||
playConfig.optInUrl && (
|
||
<a
|
||
href={playConfig.optInUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="optin-link"
|
||
>
|
||
Opt-in link
|
||
</a>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
</article>
|
||
</div>
|
||
</>
|
||
)}
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<style jsx>{`
|
||
.viewers-page {
|
||
max-width: 1440px;
|
||
}
|
||
.stat-strip {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.35rem 1.25rem;
|
||
margin: -0.5rem 0 1.1rem;
|
||
padding: 0.65rem 0.9rem;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border-dim);
|
||
background: var(--bg-panel);
|
||
font-size: 0.85rem;
|
||
color: var(--text-muted);
|
||
}
|
||
.stat-strip strong {
|
||
color: var(--text-bright);
|
||
font-family: var(--font-mono);
|
||
font-weight: 600;
|
||
margin-right: 0.25rem;
|
||
}
|
||
.stat-warn {
|
||
color: var(--warn);
|
||
font-style: normal;
|
||
}
|
||
.flash {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 0.75rem;
|
||
padding: 0.75rem 1rem;
|
||
border-radius: var(--radius);
|
||
margin-bottom: 1rem;
|
||
font-size: 0.9rem;
|
||
border: 1px solid transparent;
|
||
}
|
||
.flash-ok {
|
||
background: var(--ok-bg);
|
||
border-color: rgba(52, 211, 153, 0.35);
|
||
color: var(--ok);
|
||
}
|
||
.flash-err {
|
||
background: var(--danger-bg);
|
||
border-color: rgba(244, 63, 94, 0.35);
|
||
color: #fda4af;
|
||
}
|
||
.flash-close {
|
||
border: none;
|
||
background: transparent;
|
||
color: inherit;
|
||
font-size: 1.2rem;
|
||
line-height: 1;
|
||
padding: 0 0.2rem;
|
||
cursor: pointer;
|
||
opacity: 0.8;
|
||
}
|
||
.create-card {
|
||
margin-bottom: 1rem;
|
||
}
|
||
.card-subtitle {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--text-dim);
|
||
margin: 0 0 0.85rem;
|
||
}
|
||
.create-actions {
|
||
display: flex;
|
||
align-items: end;
|
||
}
|
||
.workspace {
|
||
display: grid;
|
||
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
|
||
gap: 1rem;
|
||
align-items: start;
|
||
min-height: 60vh;
|
||
}
|
||
.sidebar {
|
||
position: sticky;
|
||
top: 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.65rem;
|
||
max-height: calc(100vh - 2rem);
|
||
padding: 0.75rem;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
background:
|
||
linear-gradient(160deg, rgba(34, 211, 238, 0.04), transparent 45%),
|
||
var(--bg-panel);
|
||
box-shadow: var(--shadow-panel);
|
||
}
|
||
.sidebar-top {
|
||
display: grid;
|
||
gap: 0.55rem;
|
||
flex-shrink: 0;
|
||
}
|
||
.search-field input {
|
||
width: 100%;
|
||
}
|
||
.sidebar-tools {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.4rem;
|
||
}
|
||
.sidebar-tools button {
|
||
font-size: 0.75rem;
|
||
padding: 0.35rem 0.55rem;
|
||
}
|
||
.setup-link {
|
||
font-size: 0.8rem;
|
||
}
|
||
.empty {
|
||
padding: 1rem 0.25rem;
|
||
text-align: center;
|
||
}
|
||
.user-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow-y: auto;
|
||
display: grid;
|
||
gap: 0.3rem;
|
||
min-height: 0;
|
||
}
|
||
.user-row {
|
||
width: 100%;
|
||
display: grid;
|
||
gap: 0.35rem;
|
||
padding: 0.7rem 0.75rem;
|
||
border-radius: 8px;
|
||
border: 1px solid transparent;
|
||
background: transparent;
|
||
color: inherit;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: background 0.12s ease, border-color 0.12s ease;
|
||
}
|
||
.user-row:hover {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
}
|
||
.user-row.active {
|
||
background: var(--accent-dim);
|
||
border-color: var(--border-strong);
|
||
}
|
||
.user-row.dim strong {
|
||
color: var(--text-muted);
|
||
}
|
||
.user-row-main {
|
||
display: grid;
|
||
gap: 0.1rem;
|
||
min-width: 0;
|
||
}
|
||
.user-row-main strong {
|
||
color: var(--text-bright);
|
||
font-size: 0.92rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.user-row-main span {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.user-row-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
}
|
||
.dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: var(--text-dim);
|
||
flex-shrink: 0;
|
||
}
|
||
.dot.ok {
|
||
background: var(--ok);
|
||
}
|
||
.dot.warn {
|
||
background: var(--warn);
|
||
}
|
||
.dot.bad {
|
||
background: var(--danger);
|
||
}
|
||
.dot.off {
|
||
background: rgba(148, 163, 184, 0.35);
|
||
}
|
||
.device-count {
|
||
margin-left: auto;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
color: var(--text-dim);
|
||
}
|
||
.detail-pane {
|
||
min-width: 0;
|
||
padding: 1rem 1.1rem 1.25rem;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
background:
|
||
linear-gradient(145deg, rgba(34, 211, 238, 0.03), transparent 35%),
|
||
var(--bg-panel);
|
||
box-shadow: var(--shadow-panel);
|
||
}
|
||
.detail-empty {
|
||
display: grid;
|
||
place-items: center;
|
||
min-height: 280px;
|
||
}
|
||
.detail-head {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
gap: 0.75rem 1rem;
|
||
margin-bottom: 1.1rem;
|
||
padding-bottom: 0.9rem;
|
||
border-bottom: 1px solid var(--border-dim);
|
||
}
|
||
.back-btn {
|
||
display: none;
|
||
}
|
||
.detail-who {
|
||
flex: 1 1 12rem;
|
||
min-width: 0;
|
||
}
|
||
.detail-who h2 {
|
||
margin: 0;
|
||
font-size: 1.35rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
color: var(--text-bright);
|
||
font-family: var(--font-ui);
|
||
text-transform: none;
|
||
}
|
||
.detail-who p {
|
||
margin: 0.15rem 0 0;
|
||
}
|
||
.detail-status {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.35rem;
|
||
align-items: center;
|
||
}
|
||
.pill {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.65rem;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
padding: 0.28rem 0.5rem;
|
||
border-radius: 999px;
|
||
border: 1px solid transparent;
|
||
white-space: nowrap;
|
||
}
|
||
.pill.ok {
|
||
color: var(--ok);
|
||
background: var(--ok-bg);
|
||
border-color: rgba(52, 211, 153, 0.25);
|
||
}
|
||
.pill.warn {
|
||
color: var(--warn);
|
||
background: rgba(251, 191, 36, 0.12);
|
||
border-color: rgba(251, 191, 36, 0.28);
|
||
}
|
||
.pill.bad {
|
||
color: #fda4af;
|
||
background: var(--danger-bg);
|
||
border-color: rgba(244, 63, 94, 0.3);
|
||
}
|
||
.pill.off {
|
||
color: var(--text-muted);
|
||
background: rgba(148, 163, 184, 0.08);
|
||
border-color: var(--border-dim);
|
||
}
|
||
.blocks {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 0.85rem;
|
||
}
|
||
.block {
|
||
display: grid;
|
||
gap: 0.65rem;
|
||
align-content: start;
|
||
padding: 0.95rem 1rem;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--border-dim);
|
||
background: var(--bg-panel-2);
|
||
}
|
||
.block:first-child {
|
||
grid-column: 1 / -1;
|
||
}
|
||
.block-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 0.75rem;
|
||
}
|
||
.block-head h3 {
|
||
margin: 0;
|
||
font-size: 0.95rem;
|
||
color: var(--text-bright);
|
||
}
|
||
.detail-copy {
|
||
font-size: 0.82rem;
|
||
line-height: 1.4;
|
||
}
|
||
.login-lock-box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.75rem 0.9rem;
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(248, 113, 113, 0.35);
|
||
background: rgba(248, 113, 113, 0.08);
|
||
margin-bottom: 0.85rem;
|
||
}
|
||
.login-lock-box.idle {
|
||
border-color: var(--border-dim);
|
||
background: var(--bg-elevated);
|
||
}
|
||
.login-lock-box p {
|
||
margin: 0;
|
||
flex: 1;
|
||
min-width: 180px;
|
||
font-size: 0.88rem;
|
||
}
|
||
.password-change {
|
||
margin-bottom: 0.85rem;
|
||
padding: 0.75rem 0.9rem;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--border-dim);
|
||
background: var(--bg-elevated);
|
||
}
|
||
.password-change .btn-primary {
|
||
justify-self: start;
|
||
}
|
||
.toggle-rows {
|
||
display: grid;
|
||
gap: 0.55rem;
|
||
}
|
||
.toggle-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
padding: 0.7rem 0.8rem;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border-dim);
|
||
background: var(--bg-elevated);
|
||
}
|
||
.toggle-row strong {
|
||
display: block;
|
||
font-size: 0.9rem;
|
||
}
|
||
.toggle-row .muted {
|
||
display: block;
|
||
font-size: 0.75rem;
|
||
margin-top: 0.1rem;
|
||
}
|
||
.switch {
|
||
width: 44px;
|
||
height: 26px;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--border-dim);
|
||
background: rgba(148, 163, 184, 0.18);
|
||
padding: 2px;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
.switch span {
|
||
display: block;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: #cbd5e1;
|
||
transition: transform 0.15s ease;
|
||
}
|
||
.switch.on {
|
||
background: rgba(52, 211, 153, 0.35);
|
||
border-color: rgba(52, 211, 153, 0.55);
|
||
}
|
||
.switch.on span {
|
||
transform: translateX(18px);
|
||
background: var(--ok);
|
||
}
|
||
.form-group {
|
||
display: grid;
|
||
gap: 0.55rem;
|
||
}
|
||
.field {
|
||
display: grid;
|
||
gap: 0.3rem;
|
||
font-size: 0.82rem;
|
||
color: var(--text-muted);
|
||
}
|
||
.field input {
|
||
width: 100%;
|
||
}
|
||
.field-hint {
|
||
font-size: 0.75rem;
|
||
margin-top: -0.2rem;
|
||
}
|
||
.check-rows {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem 1rem;
|
||
}
|
||
.check-row {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
font-size: 0.85rem;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
}
|
||
.play-status-line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
font-size: 0.85rem;
|
||
}
|
||
.text-bad {
|
||
color: #fda4af;
|
||
}
|
||
.sync-err {
|
||
font-size: 0.8rem;
|
||
word-break: break-word;
|
||
}
|
||
.detail-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.45rem;
|
||
align-items: center;
|
||
}
|
||
.optin-link {
|
||
font-size: 0.85rem;
|
||
}
|
||
.addon-rows,
|
||
.device-rows {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: 0.45rem;
|
||
}
|
||
.addon-rows li,
|
||
.device-rows li {
|
||
padding: 0.65rem 0.75rem;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border-dim);
|
||
background: var(--bg-elevated);
|
||
}
|
||
.device-rows li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
.addon-rows strong,
|
||
.device-rows strong {
|
||
display: block;
|
||
font-size: 0.9rem;
|
||
}
|
||
.addon-rows .muted,
|
||
.device-rows .muted {
|
||
display: block;
|
||
font-size: 0.75rem;
|
||
margin-top: 0.1rem;
|
||
}
|
||
.install-box {
|
||
display: grid;
|
||
gap: 0.4rem;
|
||
padding: 0.7rem 0.8rem;
|
||
border-radius: 8px;
|
||
border: 1px dashed var(--border);
|
||
background: var(--bg-elevated);
|
||
}
|
||
.install-url {
|
||
display: block;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
word-break: break-all;
|
||
color: var(--text-bright);
|
||
}
|
||
.claim-code-row {
|
||
margin-top: 0.25rem;
|
||
padding-top: 0.65rem;
|
||
border-top: 1px solid var(--border-dim);
|
||
}
|
||
.claim-code-form {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
align-items: center;
|
||
}
|
||
.claim-code-form input {
|
||
flex: 1 1 10rem;
|
||
min-width: 8rem;
|
||
font-family: var(--font-mono);
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
}
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
border: 0;
|
||
}
|
||
@media (max-width: 980px) {
|
||
.blocks {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.block:first-child {
|
||
grid-column: auto;
|
||
}
|
||
}
|
||
@media (max-width: 820px) {
|
||
.workspace {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.sidebar {
|
||
position: static;
|
||
max-height: none;
|
||
}
|
||
.detail-pane {
|
||
display: none;
|
||
}
|
||
.workspace.show-detail .sidebar {
|
||
display: none;
|
||
}
|
||
.workspace.show-detail .detail-pane {
|
||
display: block;
|
||
}
|
||
.back-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 0.85rem;
|
||
padding: 0.35rem 0.6rem;
|
||
}
|
||
}
|
||
@media (max-width: 560px) {
|
||
.page-header {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
.page-header > button {
|
||
width: 100%;
|
||
}
|
||
}
|
||
`}</style>
|
||
</>
|
||
);
|
||
}
|