feat(scanner): ean-barcode mit der handykamera scannen

Knopf im Katalog neben "Set anlegen": Strichcode ins Bild halten, und entweder oeffnet sich das passende Set oder das Formular "Neues Set" mit ausgefuellter EAN. Dekodiert wird im Browser mit zxing, das nur beim Oeffnen des Scanners nachgeladen wird - nichts verlaesst das Geraet, und die Katalogseite bleibt leicht fuer alle, die nie scannen. Jeder gelesene Code wird gegen seine Pruefziffer geprueft, bevor er verwendet wird. Ohne das wuerde eine falsch erkannte Ziffer stillschweigend ein zweites Katalog-Set fuer ein Set anlegen, das es schon gibt; bei einem Fehlversuch scannt die Kamera einfach weiter. Die Kamera braucht wie Passkeys einen sicheren Kontext. Fehlt HTTPS oder wird der Zugriff abgelehnt, steht das als deutscher Hinweis im Dialog statt einer stummen schwarzen Flaeche. 8 Unit-Tests mit echten EAN-13-, EAN-8- und UPC-A-Beispielen. Refs Phase 2 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-07 07:15:41 +02:00
parent 4e3cbb81ce
commit baa94bf7e5
9 changed files with 468 additions and 80 deletions
@@ -24,6 +24,8 @@
  },
  "dependencies": {
    "@better-auth/passkey": "^1.7.3",
+    "@zxing/browser": "^0.2.1",
+    "@zxing/library": "^0.23.0",
    "better-auth": "^1.7.3",
    "better-sqlite3": "^13.0.3",
    "class-variance-authority": "^0.7.1",
@@ -11,6 +11,12 @@ importers:
      '@better-auth/passkey':
        specifier: ^1.7.3
        version: 1.7.3(@better-auth/core@1.7.3(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-call@1.4.0(zod@4.5.4))(jose@6.2.12)(kysely@0.29.5)(nanostores@1.5.3))(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(better-auth@1.7.3(better-sqlite3@13.0.3)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@types/better-sqlite3@9.6.0)(better-sqlite3@13.0.3)(kysely@0.29.5))(next@15.5.25(@babel/core@7.29.7)(@playwright/test@1.63.0)(@types/node@20.19.43)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(vitest@5.0.0(@types/node@20.19.43)(vite@8.2.2(@types/node@20.19.43)(esbuild@0.25.12)(jiti@2.7.0)(tsx@4.23.13))))(better-call@1.4.0(zod@4.5.4))(nanostores@1.5.3)
+      '@zxing/browser':
+        specifier: ^0.2.1
+        version: 0.2.1(@zxing/library@0.23.0)
+      '@zxing/library':
+        specifier: ^0.23.0
+        version: 0.23.0
      better-auth:
        specifier: ^1.7.3
        version: 1.7.3(better-sqlite3@13.0.3)(drizzle-kit@0.31.10)(drizzle-orm@0.45.2(@types/better-sqlite3@9.6.0)(better-sqlite3@13.0.3)(kysely@0.29.5))(next@15.5.25(@babel/core@7.29.7)(@playwright/test@1.63.0)(@types/node@20.19.43)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(vitest@5.0.0(@types/node@20.19.43)(vite@8.2.2(@types/node@20.19.43)(esbuild@0.25.12)(jiti@2.7.0)(tsx@4.23.13)))
@@ -2457,6 +2463,18 @@ packages:
  '@vitest/spy@5.0.0':
    resolution: {integrity: sha512-uy+luWBAPw9XfthoHi5AkfHUnuPYEESjl0p/r+meoBnU8bxg5GDQ3Ey8MjcJ6sqahkL4PFyrvfMJJBw7LbU06g==}

+  '@zxing/browser@0.2.1':
+    resolution: {integrity: sha512-92pVfVDUXbc15xu9vIEmhNyqIEASMEkDF92CwT6T+7sg2EHXJRktH9CQKoQSXe51UtbNsj+Fm09H/JBWHMs/Sw==}
+    peerDependencies:
+      '@zxing/library': ^0.23.0
+
+  '@zxing/library@0.23.0':
+    resolution: {integrity: sha512-6fkkoFwP8CHxl6ugnPsj74PLJgX2iRv5zczGAyt5OBzQgxFhuhF0NCEc4t4OvSr8xAv2MRLlI0Iu9ZGDZQ2urA==}
+    engines: {node: '>= 24.0.0'}
+
+  '@zxing/text-encoding@0.9.0':
+    resolution: {integrity: sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==}
+
  accepts@2.0.0:
    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
    engines: {node: '>= 0.6'}
@@ -4745,6 +4763,10 @@ packages:
    peerDependencies:
      typescript: '>=4.8.4'

+  ts-custom-error@3.3.1:
+    resolution: {integrity: sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==}
+    engines: {node: '>=14.0.0'}
+
  ts-morph@26.0.0:
    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}

@@ -7104,6 +7126,21 @@ snapshots:

  '@vitest/spy@5.0.0': {}

+  '@zxing/browser@0.2.1(@zxing/library@0.23.0)':
+    dependencies:
+      '@zxing/library': 0.23.0
+    optionalDependencies:
+      '@zxing/text-encoding': 0.9.0
+
+  '@zxing/library@0.23.0':
+    dependencies:
+      ts-custom-error: 3.3.1
+    optionalDependencies:
+      '@zxing/text-encoding': 0.9.0
+
+  '@zxing/text-encoding@0.9.0':
+    optional: true
+
  accepts@2.0.0:
    dependencies:
      mime-types: 3.0.2
@@ -9555,6 +9592,8 @@ snapshots:
    dependencies:
      typescript: 5.9.3

+  ts-custom-error@3.3.1: {}
+
  ts-morph@26.0.0:
    dependencies:
      '@ts-morph/common': 0.27.0
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import { Plus } from 'lucide-react';
+import { BarcodeScannerButton } from '@/components/katalog/barcode-scanner';
 import { CatalogFilters } from '@/components/katalog/catalog-filters';
 import { CatalogGrid } from '@/components/katalog/catalog-grid';
 import { Pagination } from '@/components/katalog/pagination';
@@ -60,12 +61,15 @@ export default async function KatalogPage({ searchParams }: { searchParams: Sear
              : 'Alle bekannten Sets – unabhängig davon, ob sie schon da sind.'}
          </p>
        </div>
-        <Button asChild size="lg" className="shrink-0">
-          <Link href="/katalog/neu">
-            <Plus />
-            <span className="hidden sm:inline">Set anlegen</span>
-          </Link>
-        </Button>
+        <div className="flex shrink-0 gap-2">
+          <BarcodeScannerButton />
+          <Button asChild size="lg">
+            <Link href="/katalog/neu">
+              <Plus />
+              <span className="hidden sm:inline">Set anlegen</span>
+            </Link>
+          </Button>
+        </div>
      </div>

      <CatalogFilters options={{ manufacturers, themes, years: listSetYears() }} />
@@ -0,0 +1,37 @@
+'use server';
+
+import { actionData, actionError, type ActionResult } from '@/lib/action-result';
+import { isValidEan } from '@/lib/ean';
+import { findSetByEan } from '@/lib/queries/catalog';
+import { requireUser } from '@/lib/session';
+
+export type ScanLookup =
+  | { found: true; setId: string; setNumber: string; name: string }
+  | { found: false; ean: string };
+
+/**
+ * Resolves a scanned barcode.
+ *
+ * Either the set is already in the catalog - then we jump straight to it - or
+ * it is not, and the caller opens the "new set" form with the number filled in.
+ */
+export async function lookupScannedEan(rawEan: unknown): Promise<ActionResult<ScanLookup>> {
+  await requireUser();
+
+  const ean = typeof rawEan === 'string' ? rawEan.replace(/\D/g, '') : '';
+  if (!isValidEan(ean)) {
+    return actionError('Der Strichcode wurde nicht sauber erkannt. Bitte noch einmal scannen.');
+  }
+
+  const match = findSetByEan(ean);
+  if (match) {
+    return actionData({
+      found: true as const,
+      setId: match.id,
+      setNumber: match.setNumber,
+      name: match.name,
+    });
+  }
+
+  return actionData({ found: false as const, ean });
+}
@@ -0,0 +1,199 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Loader2, ScanLine } from 'lucide-react';
+import { toast } from 'sonner';
+import { lookupScannedEan } from '@/app/(app)/katalog/scan-actions';
+import { formatEan, isValidEan } from '@/lib/ean';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+type Controls = { stop: () => void };
+
+/**
+ * Scans the barcode on a box with the phone camera.
+ *
+ * Decoding runs in the browser with zxing, which is bundled with the app and
+ * loaded only when the scanner is opened - nothing leaves the device, and the
+ * catalog pages stay light for everyone who never scans.
+ */
+export function BarcodeScannerButton() {
+  const router = useRouter();
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const controlsRef = useRef<Controls | null>(null);
+  const handledRef = useRef(false);
+
+  const [open, setOpen] = useState(false);
+  const [status, setStatus] = useState<'starting' | 'scanning' | 'checking' | 'error'>('starting');
+  const [message, setMessage] = useState<string | null>(null);
+
+  const stop = useCallback(() => {
+    controlsRef.current?.stop();
+    controlsRef.current = null;
+  }, []);
+
+  const onDetected = useCallback(
+    (raw: string) => {
+      if (handledRef.current) return;
+      if (!isValidEan(raw)) return; // keep scanning on a misread
+
+      handledRef.current = true;
+      stop();
+      setStatus('checking');
+
+      void lookupScannedEan(raw).then((result) => {
+        if (!result.ok) {
+          toast.error(result.error);
+          setOpen(false);
+          return;
+        }
+
+        setOpen(false);
+
+        if (result.data.found) {
+          toast.success(`${result.data.setNumber} · ${result.data.name}`);
+          router.push(`/katalog/${result.data.setId}`);
+        } else {
+          toast.info(`${formatEan(result.data.ean)} ist noch nicht im Katalog.`);
+          router.push(`/katalog/neu?ean=${encodeURIComponent(result.data.ean)}`);
+        }
+        router.refresh();
+      });
+    },
+    [router, stop],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+
+    handledRef.current = false;
+    setStatus('starting');
+    setMessage(null);
+
+    // The camera needs a secure context - same rule as for passkeys.
+    if (!window.isSecureContext) {
+      setStatus('error');
+      setMessage(
+        'Die Kamera funktioniert nur über HTTPS. Ruf Bricktrack über deine Domain auf, nicht über die IP-Adresse.',
+      );
+      return;
+    }
+
+    let cancelled = false;
+
+    void (async () => {
+      try {
+        const { BrowserMultiFormatReader } = await import('@zxing/browser');
+        const reader = new BrowserMultiFormatReader();
+        const video = videoRef.current;
+        if (!video || cancelled) return;
+
+        const controls = await reader.decodeFromConstraints(
+          // The rear camera is the one pointing at the box.
+          { video: { facingMode: 'environment' } },
+          video,
+          (result) => {
+            if (result) onDetected(result.getText());
+          },
+        );
+
+        if (cancelled) {
+          controls.stop();
+          return;
+        }
+
+        controlsRef.current = controls;
+        setStatus('scanning');
+      } catch (error) {
+        if (cancelled) return;
+        console.error('[scan] Kamera konnte nicht gestartet werden', error);
+        setStatus('error');
+
+        const name = (error as { name?: string })?.name;
+        setMessage(
+          name === 'NotAllowedError'
+            ? 'Der Zugriff auf die Kamera wurde abgelehnt. Erlaube ihn in den Browser-Einstellungen und versuch es noch einmal.'
+            : name === 'NotFoundError'
+              ? 'Dieses Gerät hat keine nutzbare Kamera.'
+              : 'Die Kamera lässt sich nicht starten.',
+        );
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      stop();
+    };
+  }, [open, onDetected, stop]);
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="icon-lg"
+        aria-label="Barcode scannen"
+        title="Barcode scannen"
+        onClick={() => setOpen(true)}
+      >
+        <ScanLine />
+      </Button>
+
+      <Dialog
+        open={open}
+        onOpenChange={(next) => {
+          if (!next) stop();
+          setOpen(next);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Barcode scannen</DialogTitle>
+            <DialogDescription>
+              Halte den Strichcode auf der Packung ins Bild. Kennt der Katalog das Set schon,
+              landest du direkt darauf – sonst im Formular mit ausgefüllter EAN.
+            </DialogDescription>
+          </DialogHeader>
+
+          {status === 'error' ? (
+            <p className="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground">
+              {message}
+            </p>
+          ) : (
+            <div className="relative overflow-hidden rounded-lg bg-black">
+              <video
+                ref={videoRef}
+                className="aspect-[3/4] w-full object-cover"
+                muted
+                playsInline
+                aria-label="Kamerabild"
+              />
+              {/* A guide line makes people hold the box the right way round. */}
+              <div className="pointer-events-none absolute inset-x-6 top-1/2 h-0.5 -translate-y-1/2 bg-red-500/80" />
+
+              {status !== 'scanning' ? (
+                <div className="absolute inset-0 flex items-center justify-center gap-2 bg-black/60 text-sm text-white">
+                  <Loader2 className="size-4 animate-spin" />
+                  {status === 'checking' ? 'Im Katalog nachsehen …' : 'Kamera startet …'}
+                </div>
+              ) : null}
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Abbrechen
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
@@ -0,0 +1,41 @@
+/**
+ * Barcode helpers.
+ *
+ * Kept free of server-only imports so both the scanner in the browser and the
+ * lookup on the server use the very same rules.
+ */
+
+/** Digits only - scanners and humans disagree about spaces and dashes. */
+export function normalizeEan(input: string): string {
+  return input.replace(/\D/g, '');
+}
+
+/**
+ * Checks an EAN-8, EAN-13 or UPC-A against its check digit.
+ *
+ * Worth doing: a camera occasionally reads a digit wrong, and without this a
+ * misread would silently create a second catalog entry for a set that is
+ * already there.
+ */
+export function isValidEan(input: string): boolean {
+  const digits = normalizeEan(input);
+  if (![8, 12, 13].includes(digits.length)) return false;
+
+  // From the right: every second digit counts three times.
+  const checkDigit = Number(digits[digits.length - 1]);
+  const body = digits.slice(0, -1);
+
+  let sum = 0;
+  for (let index = body.length - 1, weight = 3; index >= 0; index -= 1, weight = weight === 3 ? 1 : 3) {
+    sum += Number(body[index]) * weight;
+  }
+
+  return (10 - (sum % 10)) % 10 === checkDigit;
+}
+
+/** "4005556603985" -> "4 005556 603985" for readable display. */
+export function formatEan(input: string): string {
+  const digits = normalizeEan(input);
+  if (digits.length !== 13) return digits;
+  return `${digits.slice(0, 1)} ${digits.slice(1, 7)} ${digits.slice(7)}`;
+}
@@ -160,6 +160,24 @@ export function getSetById(id: string) {
  return row ?? null;
 }

+/**
+ * Lookup by barcode. EANs are stored as typed, so the comparison strips
+ * everything but digits on both sides - a scanner never produces the spaces
+ * and dashes people write by hand.
+ */
+export function findSetByEan(ean: string) {
+  const digits = ean.replace(/\D/g, '');
+  if (digits.length === 0) return null;
+
+  return (
+    db
+      .select({ id: set.id, setNumber: set.setNumber, name: set.name })
+      .from(set)
+      .where(sql`replace(replace(coalesce(${set.ean}, ''), '-', ''), ' ', '') = ${digits}`)
+      .get() ?? null
+  );
+}
+
 export function getSetByNumber(manufacturerId: string, setNumber: string) {
  return (
    db
@@ -10,7 +10,7 @@
 * public base path and sets it to "/", which is not a URL. The clash only
 * exists under Vite-based tooling, never in the app itself.
 */
-process.env.NODE_ENV ??= 'test';
+// NODE_ENV is typed read-only; vitest already sets it to 'test'.
 process.env.BASE_URL = 'http://localhost:3000';
 process.env.BETTER_AUTH_SECRET =
  process.env.BETTER_AUTH_SECRET || 'test-secret-mindestens-32-zeichen-lang-0123';
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { formatEan, isValidEan, normalizeEan } from '@/lib/ean';
+
+describe('EAN normalisieren', () => {
+  it('behaelt nur Ziffern', () => {
+    expect(normalizeEan('4 005556 603985')).toBe('4005556603985');
+    expect(normalizeEan('4005556-603985')).toBe('4005556603985');
+  });
+});
+
+describe('EAN pruefen', () => {
+  it('akzeptiert gueltige EAN-13', () => {
+    // Playmobil 70392 und ein Lego-Beispiel.
+    expect(isValidEan('4008789703927')).toBe(true);
+    expect(isValidEan('5702017152677')).toBe(true);
+  });
+
+  it('akzeptiert gueltige EAN-8 und UPC-A', () => {
+    expect(isValidEan('96385074')).toBe(true);
+    expect(isValidEan('036000291452')).toBe(true);
+  });
+
+  it('lehnt eine falsche Pruefziffer ab', () => {
+    // Letzte Ziffer verdreht - genau der Fall, den eine Kamera produziert.
+    expect(isValidEan('4008789703928')).toBe(false);
+    expect(isValidEan('5702017152678')).toBe(false);
+  });
+
+  it('lehnt falsche Laengen ab', () => {
+    expect(isValidEan('')).toBe(false);
+    expect(isValidEan('123')).toBe(false);
+    expect(isValidEan('40087897039271')).toBe(false);
+  });
+
+  it('ignoriert Trennzeichen bei der Pruefung', () => {
+    expect(isValidEan('4 008789 703927')).toBe(true);
+  });
+});
+
+describe('EAN anzeigen', () => {
+  it('gruppiert eine EAN-13 lesbar', () => {
+    expect(formatEan('4008789703927')).toBe('4 008789 703927');
+  });
+
+  it('laesst andere Laengen unveraendert', () => {
+    expect(formatEan('96385074')).toBe('96385074');
+  });
+});