From f6d484aa56b3c106e3692486f907e0f9a24489b2 Mon Sep 17 00:00:00 2001
From: Jos Vooges | STH <jos@sthbv.nl>
Date: Sun, 13 Sep 2026 16:36:10 +0200
Subject: [PATCH] Allow admin email edits and cap the viewer list to 12 rows
 without a scrollbar.

---
 apps/admin-ui/src/app/viewers/page.tsx | 85 +++++++++++++++++++++++++-
 apps/master-api/src/viewer/routes.ts   |  1 +
 apps/master-api/src/viewer/service.ts  | 24 +++++++-
 3 files changed, 107 insertions(+), 3 deletions(-)

diff --git a/apps/admin-ui/src/app/viewers/page.tsx b/apps/admin-ui/src/app/viewers/page.tsx
index 0a7d89a..cf51d02 100644
--- a/apps/admin-ui/src/app/viewers/page.tsx
+++ b/apps/admin-ui/src/app/viewers/page.tsx
@@ -167,6 +167,7 @@ export default function ViewersPage() {
   const [addonInstallUrls, setAddonInstallUrls] = useState<Record<string, string | null>>({});
   const [claimCodes, setClaimCodes] = useState<Record<string, string>>({});
   const [newPasswords, setNewPasswords] = useState<Record<string, string>>({});
+  const [editEmails, setEditEmails] = useState<Record<string, string>>({});
 
   const load = useCallback(() => {
     fetch("/api/v1/admin/viewers", { credentials: "include" })
@@ -633,6 +634,39 @@ export default function ViewersPage() {
     }
   }
 
+  async function changeViewerEmail(v: Viewer) {
+    const next = (editEmails[v.id] ?? v.email).trim().toLowerCase();
+    if (!next || !next.includes("@")) {
+      setErr("Ongeldig e-mailadres");
+      return;
+    }
+    if (next === v.email.toLowerCase()) {
+      setMsg("E-mailadres is ongewijzigd");
+      return;
+    }
+    setActionId(`email-${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({ email: next }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setErr(data.error?.message ?? "E-mail wijzigen mislukt");
+        return;
+      }
+      setEditEmails((prev) => ({ ...prev, [v.id]: next }));
+      setMsg(`E-mail gewijzigd naar ${next}`);
+      load();
+    } finally {
+      setActionId(null);
+    }
+  }
+
   async function deleteViewer(v: Viewer) {
     const label = v.name || v.email;
     if (
@@ -979,6 +1013,41 @@ export default function ViewersPage() {
                       </button>
                     </div>
                     <div className="form-group password-change">
+                      <label className="field">
+                        E-mailadres
+                        <input
+                          type="email"
+                          autoComplete="off"
+                          spellCheck={false}
+                          value={editEmails[selected.id] ?? selected.email}
+                          onChange={(e) =>
+                            setEditEmails((prev) => ({
+                              ...prev,
+                              [selected.id]: e.target.value,
+                            }))
+                          }
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault();
+                              void changeViewerEmail(selected);
+                            }
+                          }}
+                        />
+                      </label>
+                      <button
+                        type="button"
+                        className="btn-primary"
+                        disabled={
+                          actionId === `email-${selected.id}` ||
+                          (editEmails[selected.id] ?? selected.email).trim().toLowerCase() ===
+                            selected.email.toLowerCase()
+                        }
+                        onClick={() => void changeViewerEmail(selected)}
+                      >
+                        {actionId === `email-${selected.id}`
+                          ? "Opslaan…"
+                          : "E-mail wijzigen"}
+                      </button>
                       <label className="field">
                         Nieuw wachtwoord
                         <input
@@ -1468,19 +1537,31 @@ export default function ViewersPage() {
           text-align: center;
         }
         .user-list {
+          --user-gap: 0.3rem;
+          --user-row-h: 4.45rem;
           list-style: none;
           margin: 0;
           padding: 0;
           overflow-y: auto;
           display: grid;
-          gap: 0.3rem;
+          gap: var(--user-gap);
           min-height: 0;
+          max-height: calc(12 * var(--user-row-h) + 11 * var(--user-gap));
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+        }
+        .user-list::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+          display: none;
         }
         .user-row {
           width: 100%;
+          min-height: var(--user-row-h);
+          box-sizing: border-box;
           display: grid;
           gap: 0.35rem;
-          padding: 0.7rem 0.75rem;
+          padding: 0.55rem 0.75rem;
           border-radius: 8px;
           border: 1px solid transparent;
           background: transparent;
diff --git a/apps/master-api/src/viewer/routes.ts b/apps/master-api/src/viewer/routes.ts
index c64d5c1..537b931 100644
--- a/apps/master-api/src/viewer/routes.ts
+++ b/apps/master-api/src/viewer/routes.ts
@@ -44,6 +44,7 @@ export function registerViewerRoutes(
     const { id } = request.params as { id: string };
     const body = request.body as {
       name?: string | null;
+      email?: string;
       enabled?: boolean;
       appAccess?: boolean;
       iptvAccess?: boolean;
diff --git a/apps/master-api/src/viewer/service.ts b/apps/master-api/src/viewer/service.ts
index 35667b5..bc0aab7 100644
--- a/apps/master-api/src/viewer/service.ts
+++ b/apps/master-api/src/viewer/service.ts
@@ -224,6 +224,7 @@ export class ViewerService {
     id: string,
     data: {
       name?: string | null;
+      email?: string;
       enabled?: boolean;
       appAccess?: boolean;
       iptvAccess?: boolean;
@@ -231,8 +232,15 @@ export class ViewerService {
       password?: string;
     }
   ) {
+    const existing = await prisma.viewerUser.findUnique({
+      where: { id },
+      select: { id: true, email: true },
+    });
+    if (!existing) throw new AppError("NOT_FOUND", "Gebruiker niet gevonden", 404);
+
     const patch: {
       name?: string | null;
+      email?: string;
       enabled?: boolean;
       appAccess?: boolean;
       iptvAccess?: boolean;
@@ -246,6 +254,17 @@ export class ViewerService {
     if (data.iptvAddonTokenId !== undefined) {
       patch.iptvAddonTokenId = data.iptvAddonTokenId?.trim() || null;
     }
+    if (data.email !== undefined) {
+      const email = data.email.trim().toLowerCase();
+      if (!email || !email.includes("@")) {
+        throw new AppError("INVALID_REQUEST", "Ongeldig e-mailadres", 400);
+      }
+      if (email !== existing.email.toLowerCase()) {
+        const clash = await prisma.viewerUser.findUnique({ where: { email } });
+        if (clash) throw new AppError("CONFLICT", "E-mail bestaat al", 409);
+        patch.email = email;
+      }
+    }
     if (data.password?.trim()) {
       if (data.password.length < 8) {
         throw new AppError("INVALID_REQUEST", "Wachtwoord minstens 8 tekens", 400);
@@ -266,7 +285,10 @@ export class ViewerService {
         createdAt: true,
       },
     });
-    if (patch.passwordHash) {
+    if (patch.email) {
+      await this.clearLoginLock(existing.email.toLowerCase());
+      await this.clearLoginLock(updated.email.toLowerCase());
+    } else if (patch.passwordHash) {
       await this.clearLoginLock(updated.email.toLowerCase());
     }
     return updated;