back to tunneling port 3000

Dockerfile

@@ -0,0 +1,58 @@
+# Based on https://github.com/vercel/next.js/tree/canary/examples/with-docker
+
+FROM node:24-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD HOSTNAME="0.0.0.0" node server.js

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "standalone",
 };
 
 export default nextConfig;

src/app/api/login/route.ts

@@ -6,10 +6,7 @@ export async function POST(req: NextRequest) {
     const { password } = await req.json();
 
     if (password !== process.env.PASSWORD) {
-      return NextResponse.json(
-        { error: "Invalid password" },
-        { status: 401 }
-      );
+      return NextResponse.json({ error: "Invalid password" }, { status: 401 });
     }
 
     const session = await getSession();
@@ -18,6 +15,7 @@ export async function POST(req: NextRequest) {
 
     return NextResponse.json({ success: true });
   } catch (error) {
+    console.error(error);
     return NextResponse.json(
       { error: "Authentication failed" },
       { status: 500 }

src/app/api/logout/route.ts

@@ -8,10 +8,7 @@ export async function POST(req: NextRequest) {
 
     return NextResponse.json({ success: true });
   } catch (error) {
-    return NextResponse.json(
-      { error: "Logout failed" },
-      { status: 500 }
-    );
+    console.error(error);
+    return NextResponse.json({ error: "Logout failed" }, { status: 500 });
   }
 }
-}

src/app/api/lookup/route.ts

@@ -68,10 +68,7 @@ export async function POST(req: NextRequest) {
       sessionOptions
     );
     if (!session.authenticated) {
-      return NextResponse.json(
-        { error: "Not authenticated" },
-        { status: 401 }
-      );
+      return NextResponse.json({ error: "Not authenticated" }, { status: 401 });
     }
 
     const token = await fetchOidcToken();
@@ -81,7 +78,7 @@ export async function POST(req: NextRequest) {
     const sessionUrl = apiBase + "/api/merchant/session";
 
     // parse sessionId from request body, handle missing/invalid JSON
-    let body: any;
+    let body: { sessionId?: unknown } | undefined;
     try {
       body = await req.json();
     } catch {
@@ -124,7 +121,11 @@ export async function POST(req: NextRequest) {
         { status: 500 }
       );
     }
-  } catch (err: any) {
-    return NextResponse.json({ error: err.message }, { status: 500 });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      { error: "An unexpected error occurred" },
+      { status: 500 }
+    );
   }
 }

src/app/api/session/route.ts

@@ -8,6 +8,7 @@ export async function GET() {
 
     return NextResponse.json({ authenticated: isAuthenticated });
   } catch (error) {
+    console.error(error)
     return NextResponse.json({ authenticated: false });
   }
 }

src/app/globals.css

@@ -29,5 +29,5 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
 }

src/app/layout.tsx

@@ -24,6 +24,15 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        {process.env.UMAMI_SCRIPT_URL && process.env.UMAMI_WEBSITE_ID && (
+          <script
+            defer
+            src={process.env.UMAMI_SCRIPT_URL}
+            data-website-id={process.env.UMAMI_WEBSITE_ID}
+          ></script>
+        )}
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

src/app/page.tsx

@@ -28,34 +28,34 @@ function SessionInfo({
 }) {
   return (
     <div className="max-w-md mx-auto mt-2 p-2 bg-neuf-black space-y-4">
-      <div className="flex justify-center">
+      <div className="flex items-center relative bg-white rounded-lg overflow-hidden">
         <button
           onClick={onClear}
-          className="w-8 h-8 bg-red-600 text-white rounded-full hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center justify-center font-bold text-lg transition-colors duration-200"
+          className="w-10 h-10 absolute top-2 right-2 bg-red-600 text-white rounded-full hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center justify-center font-bold text-lg transition-colors duration-200"
           aria-label="Clear session"
         >
-          ×
+          &times;
         </button>
-      </div>
-      <div className="flex flex-col items-center">
         <Image
           src={`data:image/jpeg;base64,${session.documentPhoto}`}
           alt="Document"
           width={200}
           height={261}
-          className="w-40 h-50 object-cover rounded-lg mb-4 border border-black-300 shadow"
+          className="w-40 h-50 object-cover border border-black-300 shadow"
           unoptimized
         />
-        {(session.firstName || session.lastName) && (
-          <div className="text-xl font-bold text-white">
-            {[session.firstName, session.lastName].filter(Boolean).join(" ")}
-          </div>
-        )}
-        {typeof session.age === "number" && (
-          <div className="text-3xl font-extrabold text-white mt-2">
-            {session.age} år
-          </div>
-        )}
+        <div className="py-4 px-4">
+          {(session.firstName || session.lastName) && (
+            <div className="text-xl font-bold">
+              {[session.firstName, session.lastName].filter(Boolean).join(" ")}
+            </div>
+          )}
+          {typeof session.age === "number" && (
+            <div className="text-5xl font-extrabold text-neuf-black mt-2">
+              {session.age} år
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
@@ -70,6 +70,20 @@ async function lookupSession(sessionId: string) {
   return res.json();
 }
 
+declare global {
+  interface Window {
+    umami?: {
+      track: (eventName: string, eventData?: Record<string, unknown>) => void;
+    };
+  }
+}
+
+const trackEvent = (eventName: string, eventData?: Record<string, unknown>) => {
+  if (typeof window !== "undefined" && window.umami) {
+    window.umami.track(eventName, eventData);
+  }
+};
+
 function HomeInner() {
   const [session, setSession] = useState<SessionResponse | null>(null);
   const [scannedCodes, setScannedCodes] = useState<Set<string>>(new Set());
@@ -91,6 +105,7 @@ function HomeInner() {
       if (data && typeof data.age === "number") {
         setSession(data);
         setScannedCodes((prev) => new Set(prev).add(variables));
+        trackEvent("id-check");
       }
       pendingCodeRef.current = null;
     },

src/components/LoginForm.tsx

@@ -37,14 +37,14 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
 
   return (
     <div className="max-w-md mx-auto mt-20 p-6 bg-neuf-black">
-      <h1 className="text-2xl font-bold text-center mb-6 text-white">
+      <h1 className="text-5xl font-bold text-center mb-20 text-white">
         Oldeneuf?
       </h1>
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
           <label
             htmlFor="password"
-            className="block text-sm font-medium text-gray-300 mb-1"
+            className="block text-md font-medium text-gray-300 mb-1"
           >
             Passord
           </label>
@@ -56,17 +56,15 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
               setPassword(e.target.value);
               setError("");
             }}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full px-3 py-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
             required
             disabled={isLoading}
           />
-          {error && (
-            <p className="text-red-500 text-sm mt-1">{error}</p>
-          )}
+          {error && <p className="text-red-500 text-md mt-1">{error}</p>}
         </div>
         <button
           type="submit"
-          className="w-full bg-golden-orange text-neuf-black py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 disabled:opacity-50"
+          className="w-full font-bold bg-golden-orange text-neuf-black py-4 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 disabled:opacity-50"
           disabled={isLoading}
         >
           {isLoading ? "Logger inn..." : "Logg inn"}

src/components/Scanner.tsx

@@ -138,138 +138,149 @@ export default function Scanner({ onScan }: ScannerProps) {
 
   return (
     <div className="w-full max-w-2xl mx-auto">
-      <div className={getVideoContainerClass()}>
-        <video
-          ref={videoRef}
-          className="w-full h-auto rounded-lg border-2 border-gray-300 cursor-pointer"
-          playsInline
-          muted
-          onClick={isScanning ? stopScanner : startScanner}
-        />
-      </div>
-
-      <div className="p-2 space-y-2">
-        <div className="text-center">
-          {!hasStartedOnce && (
-            <p className="text-white-600 mb-4">
-              Trykk på området over for å skru av og på kameraet.
-            </p>
-          )}
-
-          {/* Controls */}
-          {showControls && (
-            <>
-              <div className="mt-0 space-y-2">
-                {/* Start/Stop Toggle Button */}
-                <div className="flex gap-2 justify-center">
-                  <button
-                    onClick={isScanning ? stopScanner : startScanner}
-                    className={`px-2 py-2 text-white rounded-lg transition-colors ${
-                      isScanning
-                        ? "bg-red-500 hover:bg-red-600"
-                        : "bg-green-500 hover:bg-green-600"
-                    }`}
-                  >
-                    {isScanning ? "Stopp" : "Start"}
-                  </button>
-                </div>
-                {/* Flash Toggle */}
-                {hasFlash && (
-                  <button
-                    onClick={toggleFlash}
-                    className="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
-                  >
-                    📸 Flash: {isFlashOn ? "on" : "off"}
-                  </button>
-                )}
-              </div>
-
-              <div>
-                {/* Settings */}
-                <div className="mt-2 space-y-2 text-left">
-                  {/* Camera Selection */}
-                  {cameras.length > 0 && (
-                    <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-2">
-                        Camera:
-                      </label>
-                      <select
-                        value={selectedCamera}
-                        onChange={(e) => handleCameraChange(e.target.value)}
-                        className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                      >
-                        <option value="environment">
-                          Environment Facing (Back Camera)
-                        </option>
-                        <option value="user">User Facing (Front Camera)</option>
-                        {cameras.map((camera) => (
-                          <option key={camera.id} value={camera.id}>
-                            {camera.label}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  )}
-
-                  {/* Highlight Style */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                      Highlight Style:
-                    </label>
-                    <select
-                      value={highlightStyle}
-                      onChange={(e) => setHighlightStyle(e.target.value)}
-                      className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                    >
-                      <option value="default-style">Default style</option>
-                      <option value="example-style-1">Custom style 1</option>
-                      <option value="example-style-2">Custom style 2</option>
-                    </select>
-                  </div>
-
-                  {/* Show Scan Region */}
-                  <div className="flex items-center">
-                    <input
-                      id="show-scan-region"
-                      type="checkbox"
-                      checked={showScanRegion}
-                      onChange={(e) => setShowScanRegion(e.target.checked)}
-                      className="mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                    />
-                    <label
-                      htmlFor="show-scan-region"
-                      className="text-sm font-medium text-gray-700"
-                    >
-                      Show scan region canvas
-                    </label>
-                  </div>
-                </div>
-
-                {/* Status Information */}
-                <div className="mt-6 space-y-2 text-sm text-gray-600">
-                  <div>
-                    <span className="font-medium">Device has camera:</span>{" "}
-                    {hasCamera !== null
-                      ? hasCamera
-                        ? "Yes"
-                        : "No"
-                      : "Checking..."}
-                  </div>
-                  <div>
-                    <span className="font-medium">Camera has flash:</span>{" "}
-                    {hasFlash ? "Yes" : "No"}
-                  </div>
-                  {error && (
-                    <div className="text-red-600 font-medium">
-                      <span className="font-medium">Error:</span> {error}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </>
-          )}
+      {hasCamera === false ? (
+        <div className="p-4 text-center">
+          <p className="text-red-600 text-lg">
+            Denne nettsiden krever tilgang til et kamera.
+          </p>
         </div>
-      </div>
+      ) : (
+        <>
+          <div className={getVideoContainerClass()}>
+            <video
+              ref={videoRef}
+              className="w-full h-auto rounded-lg border-2 border-gray-300 cursor-pointer"
+              playsInline
+              muted
+              onClick={isScanning ? stopScanner : startScanner}
+            />
+          </div>
+
+          <div className="p-2 space-y-2">
+            <div className="text-center">
+              {!hasStartedOnce && (
+                <p className="text-white-600 mb-4">
+                  Trykk på området over for å skru av og på kameraet.
+                </p>
+              )}
+
+              {/* Controls */}
+              {showControls && (
+                <>
+                  <div className="mt-0 space-y-2">
+                    {/* Start/Stop Toggle Button */}
+                    <div className="flex gap-2 justify-center">
+                      <button
+                        onClick={isScanning ? stopScanner : startScanner}
+                        className={`px-2 py-2 text-white rounded-lg transition-colors ${
+                          isScanning
+                            ? "bg-red-500 hover:bg-red-600"
+                            : "bg-green-500 hover:bg-green-600"
+                        }`}
+                      >
+                        {isScanning ? "Stopp" : "Start"}
+                      </button>
+                    </div>
+                    {/* Flash Toggle */}
+                    {hasFlash && (
+                      <button
+                        onClick={toggleFlash}
+                        className="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
+                      >
+                        📸 Flash: {isFlashOn ? "on" : "off"}
+                      </button>
+                    )}
+                  </div>
+
+                  <div>
+                    {/* Settings */}
+                    <div className="mt-2 space-y-2 text-left">
+                      {/* Camera Selection */}
+                      {cameras.length > 0 && (
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Camera:
+                          </label>
+                          <select
+                            value={selectedCamera}
+                            onChange={(e) => handleCameraChange(e.target.value)}
+                            className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          >
+                            <option value="environment">
+                              Environment Facing (Back Camera)
+                            </option>
+                            <option value="user">User Facing (Front Camera)</option>
+                            {cameras.map((camera) => (
+                              <option key={camera.id} value={camera.id}>
+                                {camera.label}
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+                      )}
+
+                      {/* Highlight Style */}
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Highlight Style:
+                        </label>
+                        <select
+                          value={highlightStyle}
+                          onChange={(e) => setHighlightStyle(e.target.value)}
+                          className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        >
+                          <option value="default-style">Default style</option>
+                          <option value="example-style-1">Custom style 1</option>
+                          <option value="example-style-2">Custom style 2</option>
+                        </select>
+                      </div>
+
+                      {/* Show Scan Region */}
+                      <div className="flex items-center">
+                        <input
+                          id="show-scan-region"
+                          type="checkbox"
+                          checked={showScanRegion}
+                          onChange={(e) => setShowScanRegion(e.target.checked)}
+                          className="mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                        />
+                        <label
+                          htmlFor="show-scan-region"
+                          className="text-sm font-medium text-gray-700"
+                        >
+                          Show scan region canvas
+                        </label>
+                      </div>
+                    </div>
+
+                    {/* Status Information */}
+                    <div className="mt-6 space-y-2 text-sm text-gray-600">
+                      <div>
+                        <span className="font-medium">Device has camera:</span>{" "}
+                        {hasCamera !== null
+                          ? hasCamera
+                            ? "Yes"
+                            : "No"
+                          : "Checking..."}
+                      </div>
+                      <div>
+                        <span className="font-medium">Camera has flash:</span>{" "}
+                        {hasFlash ? "Yes" : "No"}
+                      </div>
+                      {error && (
+                        <div className="text-red-600 font-medium">
+                          <span className="font-medium">Error:</span> {error}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
       <style jsx>{`
         /* Responsive video container for mobile portrait */
         @media (max-width: 768px) and (orientation: portrait) {
@@ -279,7 +290,7 @@ export default function Scanner({ onScan }: ScannerProps) {
             margin-left: 0 !important;
             margin-right: 0 !important;
             margin-top: 0 !important;
-            height: 50vh !important;
+            height: 55dvh !important;
             background: #000;
             border-radius: 0 !important;
             display: flex;
@@ -288,7 +299,7 @@ export default function Scanner({ onScan }: ScannerProps) {
           }
           .video-container-responsive video {
             width: 100vw !important;
-            height: 50vh !important;
+            height: 55dvh !important;
             object-fit: cover;
             border-radius: 0 !important;
             border: none !important;