make login page background image configurable via LOGIN_IMAGE

The login page hardcoded the bundled splash. Read LOGIN_IMAGE (a filename in
/public) in getServerSideProps and use it, falling back to the bundled splash
when unset. Same-origin only by design (the CSP is img-src 'self').

A shared helper (lib/loginImage.ts) resolves the path for both the login page
and proxy.ts, so the auth allowlist always matches the URL the page requests —
without it the /public image is gated and 307-redirected to login, leaving the
splash blank. Documented in .env_example.

Author: gunwald

.env_example

@@ -96,6 +96,10 @@ REMINDER_RENEWAL_COUNT=5
 # 🖼️ Background template for user ID labels (filename in /public directory)
 USERID_LABEL_IMAGE=userlabeltemplate.jpg
 
+# 🖼️ Login page background image (filename in /public directory)
+# Leave unset to use the built-in default splash image.
+# LOGIN_IMAGE="schule_login.jpg"
+
 # 📐 Size and layout
 USERLABEL_WIDTH="42vw"
 USERLABEL_PER_PAGE=6

lib/loginImage.ts

@@ -0,0 +1,17 @@
+/**
+ * Resolve the configured login background image (LOGIN_IMAGE env) to the URL the
+ * login page renders:
+ *   - a bare filename ("schule_login.jpg") is served from /public → "/schule_login.jpg"
+ *   - an already-rooted path ("/img/x.jpg") is returned as-is
+ *   - unset → null, and the login page falls back to the bundled splash
+ *
+ * Same-origin only by design: the CSP is `img-src 'self'`, so the image must be
+ * served from this app (i.e. /public). Shared by the login page (to render it)
+ * and proxy.ts (to let it through the auth gate) so the allowlisted path always
+ * matches the requested one.
+ */
+export function resolveLoginImage(): string | null {
+  const raw = process.env.LOGIN_IMAGE?.trim();
+  if (!raw) return null;
+  return raw.startsWith("/") ? raw : `/${raw}`;
+}

pages/auth/login.tsx

@@ -10,11 +10,16 @@ import { getCsrfToken } from "next-auth/react";
 import Head from "next/head";
 
 import { t } from "@/lib/i18n";
+import { resolveLoginImage } from "@/lib/loginImage";
 import loginsplash from "./loginsplashscreen.jpg";
 
 export default function Login({
   csrfToken,
+  loginImage,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  // Configurable via LOGIN_IMAGE (a file in /public); falls back to the bundled
+  // splash when unset.
+  const splashSrc = loginImage ?? loginsplash.src;
   const [user, setUser] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
@@ -61,7 +66,7 @@ export default function Login({
         <div
           className="hidden sm:block sm:w-5/12 md:w-7/12 relative"
           style={{
-            backgroundImage: `url(${loginsplash.src})`,
+            backgroundImage: `url(${splashSrc})`,
             backgroundRepeat: "no-repeat",
             backgroundSize: "cover",
             backgroundPosition: "center",
@@ -163,9 +168,12 @@ export default function Login({
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const loginImage = resolveLoginImage();
+
   return {
     props: {
       csrfToken: (await getCsrfToken(context)) ?? null,
+      loginImage,
     },
   };
 }

proxy.ts

@@ -1,3 +1,4 @@
+import { resolveLoginImage } from "@/lib/loginImage";
 import { withAuth } from "next-auth/middleware";
 import { NextRequest, NextResponse } from "next/server";
 
@@ -41,12 +42,16 @@ export default withAuth(
 
         // Routes explicitly excluded from authentication.
         // Keep this list narrow — every entry here is a public attack surface.
+        // The configured login background lives in /public and must load on the
+        // (unauthenticated) login page, so allow exactly that one file.
+        const loginImage = resolveLoginImage();
         const isPublicRoute =
           pathname === "/publicbookview" ||
           pathname === "/catalog" ||
           pathname.startsWith("/api/images") ||
           pathname === "/api/version" ||
-          pathname.startsWith("/api/public/");
+          pathname.startsWith("/api/public/") ||
+          (loginImage !== null && pathname === loginImage);
 
         if (isPublicRoute) return true;