Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ebab5627de | ||
|
|
01bbb3ba9a | ||
|
|
ebdd6c313a | ||
|
|
7d75e4345a | ||
|
|
7d7711eb8d | ||
|
|
a8d933bf5b | ||
|
|
295da414bb | ||
|
|
d5ffcbae60 |
@@ -33,9 +33,9 @@ TZ=Europe/Berlin
|
||||
# Kostenlos anlegen: https://rebrickable.com/api/ (Konto -> Settings -> API)
|
||||
# REBRICKABLE_API_KEY=
|
||||
|
||||
# Optional: Mailversand fuer Erinnerungen an Wunschlisten-Termine. Ohne
|
||||
# SMTP_HOST und SMTP_FROM sind Erinnerungen komplett aus - alles andere
|
||||
# funktioniert unveraendert.
|
||||
# Optional: Mailversand fuer Erinnerungen an Wunschlisten-Termine. Einfacher
|
||||
# geht es in der App unter Mehr -> Erinnerungen -> Mailserver. Steht der
|
||||
# Server hier, hat die .env Vorrang und die App zeigt ihn nur an.
|
||||
# SMTP_HOST=mail.example.de
|
||||
# SMTP_PORT=587
|
||||
# SMTP_SECURE=false
|
||||
|
||||
@@ -9,6 +9,11 @@ die Versionierung [Semantic Versioning](https://semver.org/lang/de/).
|
||||
|
||||
### Hinzugefügt
|
||||
|
||||
- **Mailserver in der App einrichten**: Unter Mehr → Erinnerungen → Mailserver
|
||||
lassen sich Server, Port, Verschlüsselung, Zugang und Absender eintragen –
|
||||
ohne `.env` und ohne Neustart. Das Passwort wird verschlüsselt gespeichert
|
||||
(AES-256-GCM, Schlüssel aus `BETTER_AUTH_SECRET`), nie wieder angezeigt und
|
||||
nicht exportiert. Steht der Server in der `.env`, hat sie weiter Vorrang.
|
||||
- **Set aus einem Link übernehmen**, für alle Hersteller: Amazon, idealo,
|
||||
geizhals, Hersteller-Shops, Brickfact oder Merlins Bricks. Bricktrack liest
|
||||
Produktdaten (schema.org, Open Graph, bei Amazon die Produktseite) und, wenn
|
||||
@@ -16,6 +21,27 @@ die Versionierung [Semantic Versioning](https://semver.org/lang/de/).
|
||||
BlueBrixx und Cobi über Merlins Bricks. Das Ergebnis füllt das Formular vor,
|
||||
das Bild wird beim Speichern lokal abgelegt.
|
||||
|
||||
### Geändert
|
||||
|
||||
- Der Zeitplan für Erinnerungen läuft immer und prüft bei jedem Durchlauf, ob
|
||||
ein Mailserver eingerichtet ist. Vorher wurde er nur gestartet, wenn SMTP
|
||||
schon beim Containerstart in der `.env` stand.
|
||||
- **Neue Navigation**: unten Start, Katalog, Sammlung, Wünsche und in der
|
||||
Mitte ein +-Stein mit allen Wegen zu einem neuen Set (Scannen, aus Link,
|
||||
Lego-Nummer, von Hand).
|
||||
- **„Mehr" statt Konto-Menü und Verwaltungsreitern**: Konto, Design,
|
||||
Sammler, Einladungen, Erinnerungen, Hersteller, Themen, Standorte und
|
||||
Export/Import als Kacheln in Gruppen, hinter dem Button „Mehr" oben rechts.
|
||||
- **„Für wen?" in der Kopfzeile**: Bei mehreren Sammlern wird das Kind einmal
|
||||
oben gewählt und gilt für Startseite, Katalog und Sammlung. Jedes Gerät
|
||||
merkt sich die Wahl; ein `?sammler=` im Link hat weiterhin Vorrang.
|
||||
|
||||
### Behoben
|
||||
|
||||
- Mitglieder (nicht Admin) kamen nicht an Sammler, Hersteller, Themen und
|
||||
Standorte heran, obwohl sie diese pflegen dürfen: Der Eintrag
|
||||
„Verwaltung" stand nur im Menü des Administrators.
|
||||
|
||||
### Sicherheit
|
||||
|
||||
- Abrufe im Auftrag eines Nutzers gehen nur an öffentliche Adressen: Jede
|
||||
|
||||
@@ -61,8 +61,11 @@ Bild-URLs, die der Nutzer selbst hinterlegt hat.
|
||||
| `src/lib/prices.ts` | Wertentwicklung aus notierten Preisen (rein) |
|
||||
| `src/lib/reminders.ts` | Regeln, wann eine Erinnerung faellig ist (rein) |
|
||||
| `src/lib/reminder-job.ts`, `src/lib/mailer.ts` | Versand und Zeitplan |
|
||||
| `src/lib/mail-settings.ts`, `src/lib/secret-box.ts` | SMTP aus .env oder App (`app_setting`), Passwort verschluesselt |
|
||||
| `src/lib/export.ts` | Export und Import des gesamten Bestands |
|
||||
| `src/lib/money.ts`, `src/lib/format.ts` | Cent-Umrechnung, dd.MM.yyyy |
|
||||
| `src/components/layout/more-items.ts` | Eintraege der Seite „Mehr" (Konto, Design, Stammdaten), auch Titel der Verwaltungsseiten |
|
||||
| `src/lib/collector-choice.ts` | Aktiver Sammler: `?sammler=` vor Cookie aus dem Umschalter „Fuer wen?" |
|
||||
| `src/lib/link-import.ts` | Set-Daten aus Link und Seite lesen (rein, testbar) |
|
||||
| `src/lib/safe-fetch.ts`, `src/lib/net-guard.ts` | Abruf fremder URLs nur an oeffentliche Adressen |
|
||||
| `src/lib/design.ts`, `src/app/designs.css` | Designs: Namen und Cookie bzw. Tokens je `data-design` |
|
||||
@@ -203,7 +206,7 @@ Session.
|
||||
5. Session-Cookies: `httpOnly`, `secure`, `sameSite=lax`.
|
||||
Rate-Limiting auf den Login-Endpunkten.
|
||||
6. Der Export enthaelt **keine** Konten, Passwoerter oder Passkeys - und
|
||||
keine Reservierungen oder Teilen-Token. Das Backup ist `./data`, nicht der
|
||||
keine Reservierungen, Teilen-Token oder `app_setting` (SMTP-Zugang). Das Backup ist `./data`, nicht der
|
||||
Export.
|
||||
7. Der Service Worker beantwortet nur GET-Anfragen aus dem Cache und niemals
|
||||
`/api/auth`, `/api/export` oder den Healthcheck. Beim Abmelden wird der
|
||||
|
||||
@@ -144,16 +144,16 @@ tut.
|
||||
|
||||
## 7. Passkey hinterlegen
|
||||
|
||||
Unter **Konto → Passkeys → Passkey hinzufügen**. Ab dann meldest du dich per
|
||||
Unter **Mehr → Konto & Passkeys → Passkey hinzufügen** (der Button „Mehr" oben rechts). Ab dann meldest du dich per
|
||||
Fingerabdruck, Gesichtserkennung oder Geräte-PIN an. Für jedes Gerät ein
|
||||
eigener Passkey – Handy, Tablet, Laptop.
|
||||
|
||||
## 8. Loslegen
|
||||
|
||||
1. **Verwaltung → Hersteller**: Lego, Playmobil, Cobi … anlegen.
|
||||
2. **Verwaltung → Themen**: „City", „Technic", „Novelmore" …
|
||||
3. **Verwaltung → Standorte**: „Regal Kinderzimmer", „Kiste Keller 3" …
|
||||
4. **Katalog → Set anlegen**: Setnummer, Name, Bild.
|
||||
1. **Mehr → Hersteller**: Lego, Playmobil, Cobi … anlegen.
|
||||
2. **Mehr → Themen**: „City", „Technic", „Novelmore" …
|
||||
3. **Mehr → Standorte**: „Regal Kinderzimmer", „Kiste Keller 3" …
|
||||
4. **+ in der Navigation → Von Hand**: Setnummer, Name, Bild.
|
||||
5. Auf der Set-Seite **„Zur Sammlung hinzufügen"**, wenn das Set da ist.
|
||||
6. **Katalog → Filter „Fehlt noch"**: Kachel lange drücken, mehrere auswählen,
|
||||
**„Zur Wunschliste hinzufügen"**.
|
||||
|
||||
@@ -63,7 +63,21 @@ Die Startseite zeigt auf einen Blick, wo die Sammlung steht:
|
||||
| **Abkürzungen** | Direkt zu den fehlenden Sets, zu den Wunschlisten oder zu einem neuen Set |
|
||||
|
||||
Unten am Bildschirmrand liegt die Navigation – auf dem Handy mit dem Daumen
|
||||
erreichbar. Der aktive Bereich sitzt auf einer kleinen Platte.
|
||||
erreichbar: **Start, Katalog, Sammlung, Wünsche** und in der Mitte der rote
|
||||
**+-Stein**. Der aktive Bereich sitzt auf einer kleinen Platte.
|
||||
|
||||

|
||||
|
||||
Das **+** bündelt alle Wege, wie ein Set in den Katalog kommt: Strichcode
|
||||
scannen, aus einem Link übernehmen, Lego-Nummer holen oder von Hand eintragen.
|
||||
|
||||

|
||||
|
||||
Alles, was man nicht täglich braucht, liegt hinter dem Button
|
||||
**„Mehr"** oben rechts: Konto und Passkeys, Design,
|
||||
Sammler, Einladungen, Erinnerungen, Hersteller, Themen, Standorte sowie
|
||||
Export und Import. Was nur der Administrator darf, sehen Mitglieder dort gar
|
||||
nicht erst.
|
||||
|
||||
Sets ohne Bild bekommen einen farbigen Platzhalter mit der Setnummer. Jeder
|
||||
Hersteller hat seine eigene Farbe – Lego gelb, Playmobil blau, Cobi grün.
|
||||
@@ -74,8 +88,9 @@ Hersteller hat seine eigene Farbe – Lego gelb, Playmobil blau, Cobi grün.
|
||||
|
||||

|
||||
|
||||
Bevor du Sets anlegst, brauchst du mindestens einen **Hersteller**. Zu finden
|
||||
über das Konto-Menü oben rechts → **Verwaltung**.
|
||||
Bevor du Sets von Hand anlegst, brauchst du mindestens einen **Hersteller**.
|
||||
Zu finden unter **Mehr → Hersteller**. Der Lego-Import und die Übernahme aus
|
||||
einem Link legen fehlende Hersteller selbst an.
|
||||
|
||||
Drei Arten von Stammdaten:
|
||||
|
||||
@@ -117,7 +132,7 @@ Die Kacheln zeigen auf einen Blick:
|
||||
- **„Auf Wunschliste"** – steht auf mindestens einer Liste
|
||||
- Setnummer, Hersteller, Thema, Jahr und UVP
|
||||
|
||||
Mit **„Set anlegen"** oben rechts kommt ein neues Set dazu. Pflicht sind nur
|
||||
Über das **+** in der Navigation kommt ein neues Set dazu. Pflicht sind nur
|
||||
Hersteller, Setnummer und Name; alles andere kannst du nachtragen. Ein Bild
|
||||
lädst du entweder hoch (es wird verkleinert und lokal gespeichert) oder du
|
||||
hinterlegst eine Bild-URL.
|
||||
@@ -286,7 +301,7 @@ zweites Mal.
|
||||
|
||||

|
||||
|
||||
Unter **Konto → Passkeys → Passkey hinzufügen** hinterlegst du Fingerabdruck,
|
||||
Unter **Mehr → Konto & Passkeys → Passkey hinzufügen** hinterlegst du Fingerabdruck,
|
||||
Gesichtserkennung oder die Geräte-PIN als Anmeldung. Danach reicht auf der
|
||||
Anmeldeseite ein Tipp auf „Mit Passkey anmelden" – auf vielen Geräten schlägt
|
||||
der Browser den Passkey sogar von selbst vor.
|
||||
@@ -310,7 +325,7 @@ Sets von Hand einzutippen ist der langsame Weg. Es gibt drei schnellere.
|
||||
|
||||
### Aus einem Link übernehmen – für alle Hersteller
|
||||
|
||||
Auf **Katalog → Set anlegen** steht das Feld „Aus einem Link übernehmen".
|
||||
Über **+ → Aus Link** landest du im Feld „Aus einem Link übernehmen".
|
||||
Dort passt jeder Link zu einem Set hinein: Amazon, idealo, geizhals, der Shop
|
||||
des Herstellers oder eine Set-Datenbank wie
|
||||
[Brickfact](https://brickfact.com) (Lego) und
|
||||
@@ -340,7 +355,7 @@ Katalog, kommt statt des Formulars ein Link zum vorhandenen Eintrag.
|
||||
|
||||

|
||||
|
||||
Auf **Katalog → Set anlegen** steht oben das Feld für den Import. Setnummer
|
||||
Über **+ → Lego-Nummer** landest du im Feld für den Import. Setnummer
|
||||
von der Packung eintippen, „Holen" – und Name, Jahr, Teile, Minifiguren und
|
||||
Thema stehen drin. Das Bild wird **lokal gespeichert**, funktioniert also auch
|
||||
weiter, wenn die Quelle es irgendwann austauscht. Fehlen Hersteller oder
|
||||
@@ -393,7 +408,7 @@ der Sammlung stimmt damit, ohne dass du daran denken musst.
|
||||
|
||||
Die Registrierung ist nach dem ersten Konto geschlossen – sonst könnte sich
|
||||
jeder, der die Adresse kennt, ein Konto anlegen. Für den zweiten Elternteil
|
||||
gibt es deshalb **Verwaltung → Einladungen**:
|
||||
gibt es deshalb **Mehr → Einladungen**:
|
||||
|
||||
1. „Einladung erstellen", optional an eine E-Mail-Adresse gebunden, mit Rolle
|
||||
und Gültigkeit.
|
||||
@@ -411,7 +426,7 @@ zusätzlich einladen und Daten exportieren.
|
||||
|
||||

|
||||
|
||||
Unter **Verwaltung → Daten** gibt es drei Downloads:
|
||||
Unter **Mehr → Export & Import** gibt es drei Downloads:
|
||||
|
||||
| | Wofür |
|
||||
|---|---|
|
||||
@@ -471,14 +486,16 @@ Sammler. Ein Set, das nur die Schwester hat, fällt für den Bruder wieder unter
|
||||
> vorher. Erst der zweite Sammler schaltet all das frei – und dann willst du
|
||||
> es auch.
|
||||
|
||||
Anlegen unter **Verwaltung → Sammler**. Jeder bekommt einen Namen und eine
|
||||
Anlegen unter **Mehr → Sammler**. Jeder bekommt einen Namen und eine
|
||||
Farbe zur Unterscheidung.
|
||||
|
||||

|
||||
|
||||
Danach steht in Katalog und Sammlung oben ein Umschalter. „Alle zusammen"
|
||||
zeigt den Haushalt als Ganzes, ein Name zeigt genau dessen Sicht – inklusive
|
||||
der Frage, was **diesem** Kind noch fehlt.
|
||||
Danach steht oben unter dem Logo der Umschalter **„Für wen?"**. „Alle"
|
||||
zeigt den Haushalt als Ganzes, ein Name zeigt genau dessen Sicht – auf der
|
||||
Startseite, im Katalog und in der Sammlung, inklusive der Frage, was
|
||||
**diesem** Kind noch fehlt. Die Wahl merkt sich jedes Gerät: Das Tablet im
|
||||
Kinderzimmer öffnet direkt bei Max.
|
||||
|
||||
Beim Hinzufügen zur Sammlung fragt die App jetzt, wer das Set bekommt. Und
|
||||
beim Anlegen einer Wunschliste, für wen sie ist: Das bestimmt, wessen Sammlung
|
||||
@@ -486,7 +503,7 @@ als „hat er schon" zählt und wann ein Wunsch automatisch als erfüllt gilt.
|
||||
|
||||
> Die Umstellung einer bestehenden Instanz macht nichts kaputt: Beim Update
|
||||
> entsteht ein Sammler namens „Sammlung", dem alles Vorhandene gehört.
|
||||
> Umbenennen unter **Verwaltung → Sammler**, fertig.
|
||||
> Umbenennen unter **Mehr → Sammler**, fertig.
|
||||
|
||||
---
|
||||
|
||||
@@ -521,25 +538,27 @@ schickt Bricktrack dir eine E-Mail – standardmäßig 14 Tage vorher, höchsten
|
||||
einmal pro Woche je Liste. Ist alles reserviert, bleibt es still: eine
|
||||
Erinnerung ohne Handlungsbedarf ist nur Lärm.
|
||||
|
||||
Dafür braucht es einen SMTP-Zugang in der `.env`:
|
||||
Dafür braucht es einen Mailserver (SMTP). Den trägst du direkt in der App ein:
|
||||
**Mehr → Erinnerungen → Mailserver**. Die Angaben – Server, Port,
|
||||
Verschlüsselung, Benutzername, Passwort und Absender – findest du bei deinem
|
||||
Mail-Anbieter unter „SMTP" oder „Postausgangsserver". Ein Neustart ist nicht
|
||||
nötig.
|
||||
|
||||
```bash
|
||||
SMTP_HOST=mail.example.de
|
||||
SMTP_PORT=587
|
||||
SMTP_USER=bricktrack@example.de
|
||||
SMTP_PASSWORD=…
|
||||
SMTP_FROM=Bricktrack <bricktrack@example.de>
|
||||
Das Passwort wird verschlüsselt gespeichert und nie wieder angezeigt; zum
|
||||
Ändern einfach ein neues eintragen. Es landet auch nicht im Export.
|
||||
|
||||
# Optional, Standard ist 14:
|
||||
REMINDER_DAYS_BEFORE=14
|
||||
```
|
||||
> Wer lieber mit der `.env` arbeitet, kann den Mailserver weiterhin dort
|
||||
> eintragen (`SMTP_HOST`, `SMTP_PORT`, `SMTP_USER`, `SMTP_PASSWORD`,
|
||||
> `SMTP_FROM`). Dann hat die `.env` Vorrang, und die App zeigt die Werte nur
|
||||
> an. Wie viele Tage vorher erinnert wird, steht in `REMINDER_DAYS_BEFORE`
|
||||
> (Standard 14).
|
||||
|
||||
Unter **Verwaltung → Erinnerungen** kannst du die Verbindung prüfen, dir eine
|
||||
Unter **Mehr → Erinnerungen** kannst du außerdem die Verbindung prüfen, dir eine
|
||||
Testnachricht schicken und die Prüfung sofort auslösen, statt auf die nächste
|
||||
Stunde zu warten. Dort steht auch, welche Listen einen Termin haben und wie
|
||||
viel dort noch offen ist.
|
||||
|
||||
Ohne SMTP-Zugang ist die Funktion vollständig aus – alles andere funktioniert
|
||||
Ohne Mailserver ist die Funktion vollständig aus – alles andere funktioniert
|
||||
unverändert.
|
||||
|
||||
---
|
||||
@@ -583,7 +602,7 @@ Haken dran, habt ihr es schon.
|
||||
|
||||

|
||||
|
||||
Unter **Konto → Design** gibt es sechs Looks zur Auswahl:
|
||||
Unter **Mehr → Design** gibt es sechs Looks zur Auswahl:
|
||||
|
||||
| Design | |
|
||||
|---|---|
|
||||
|
||||
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 187 KiB |
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 435 KiB After Width: | Height: | Size: 445 KiB |
|
Before Width: | Height: | Size: 322 KiB After Width: | Height: | Size: 331 KiB |
|
Before Width: | Height: | Size: 361 KiB After Width: | Height: | Size: 371 KiB |
|
Before Width: | Height: | Size: 326 KiB After Width: | Height: | Size: 490 KiB |
|
Before Width: | Height: | Size: 329 KiB After Width: | Height: | Size: 350 KiB |
|
Before Width: | Height: | Size: 320 KiB After Width: | Height: | Size: 331 KiB |
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 476 KiB After Width: | Height: | Size: 497 KiB |
|
Before Width: | Height: | Size: 477 KiB After Width: | Height: | Size: 498 KiB |
|
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 302 KiB |
|
Before Width: | Height: | Size: 361 KiB After Width: | Height: | Size: 383 KiB |
|
Before Width: | Height: | Size: 206 KiB After Width: | Height: | Size: 245 KiB |
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 259 KiB |
|
Before Width: | Height: | Size: 297 KiB After Width: | Height: | Size: 310 KiB |
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 368 KiB After Width: | Height: | Size: 380 KiB |
|
Before Width: | Height: | Size: 336 KiB After Width: | Height: | Size: 345 KiB |
|
Before Width: | Height: | Size: 222 KiB After Width: | Height: | Size: 345 KiB |
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 451 KiB |
|
After Width: | Height: | Size: 271 KiB |
@@ -0,0 +1,5 @@
|
||||
CREATE TABLE `app_setting` (
|
||||
`key` text PRIMARY KEY NOT NULL,
|
||||
`value` text NOT NULL,
|
||||
`updated_at` integer NOT NULL
|
||||
);
|
||||
@@ -29,6 +29,13 @@
|
||||
"when": 1788765478965,
|
||||
"tag": "0003_powerful_sally_floyd",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 4,
|
||||
"version": "6",
|
||||
"when": 1792963951232,
|
||||
"tag": "0004_modern_agent_brand",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -52,6 +52,17 @@ test('Screenshots fuer die Anleitung', async ({ page, browser }) => {
|
||||
await visit(page, '/');
|
||||
await shoot(page, '02-start');
|
||||
|
||||
// The plus in the middle of the navigation, opened.
|
||||
await page.getByRole('button', { name: 'Neues Set' }).click();
|
||||
await expect(page.getByText('Was kommt dazu?')).toBeVisible();
|
||||
await page.waitForTimeout(400); // let the sheet finish sliding in
|
||||
await page.screenshot({ path: shotPath('26-plus-menue') });
|
||||
await page.keyboard.press('Escape');
|
||||
|
||||
await visit(page, '/mehr');
|
||||
await expect(page.getByText('Katalog pflegen')).toBeVisible();
|
||||
await shoot(page, '27-mehr');
|
||||
|
||||
// --- 3. master data -------------------------------------------------------
|
||||
await visit(page, '/verwaltung/hersteller');
|
||||
await expect(page.getByText('Lego', { exact: true })).toBeVisible();
|
||||
@@ -186,10 +197,13 @@ test('Screenshots fuer die Anleitung', async ({ page, browser }) => {
|
||||
|
||||
// The switcher only exists because the seed created two collectors.
|
||||
await visit(page, '/katalog?besitz=fehlt');
|
||||
await expect(page.getByRole('button', { name: /Max/ })).toBeVisible();
|
||||
await page.getByRole('button', { name: /Max/ }).click();
|
||||
await expect(page.getByRole('radio', { name: /Max/ })).toBeVisible();
|
||||
await page.getByRole('radio', { name: /Max/ }).click();
|
||||
await expect(page.getByText('Sets, die Max noch nicht hat')).toBeVisible();
|
||||
await shoot(page, '22-sammler-filter');
|
||||
// Back to everybody, so the following pictures show the whole family.
|
||||
await page.getByRole('radio', { name: /Alle/ }).click();
|
||||
await expect(page.getByText('Sets, die noch nicht in der Sammlung sind')).toBeVisible();
|
||||
|
||||
// --- 17. prices -----------------------------------------------------------
|
||||
await visit(page, '/katalog?q=60398');
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
'use server';
|
||||
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { cookies } from 'next/headers';
|
||||
import { z } from 'zod';
|
||||
import { env } from '@/env';
|
||||
import { actionError, actionOk, type ActionResult } from '@/lib/action-result';
|
||||
import { COLLECTOR_COOKIE } from '@/lib/collector-choice';
|
||||
import { resolveCollectorId } from '@/lib/queries/collectors';
|
||||
import { requireUser } from '@/lib/session';
|
||||
|
||||
const schema = z.object({ id: z.string().max(64) });
|
||||
|
||||
/** Remembers the collector chosen in the header; an empty id means "alle". */
|
||||
export async function chooseCollectorAction(input: unknown): Promise<ActionResult> {
|
||||
await requireUser();
|
||||
|
||||
const parsed = schema.safeParse(input);
|
||||
if (!parsed.success) return actionError('Ungültige Auswahl.');
|
||||
|
||||
const store = await cookies();
|
||||
if (parsed.data.id === '') {
|
||||
store.delete(COLLECTOR_COOKIE);
|
||||
} else {
|
||||
const id = resolveCollectorId(parsed.data.id);
|
||||
if (!id) return actionError('Diesen Sammler gibt es nicht mehr.');
|
||||
store.set(COLLECTOR_COOKIE, id, {
|
||||
httpOnly: true,
|
||||
secure: env.isProduction,
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
maxAge: 60 * 60 * 24 * 365,
|
||||
});
|
||||
}
|
||||
|
||||
revalidatePath('/', 'layout');
|
||||
return actionOk();
|
||||
}
|
||||
@@ -23,7 +23,8 @@ import {
|
||||
listPricePoints,
|
||||
} from '@/lib/queries/catalog';
|
||||
import { listMissingParts } from '@/lib/queries/collection';
|
||||
import { listCollectors, resolveCollectorId } from '@/lib/queries/collectors';
|
||||
import { activeCollectorId } from '@/lib/collector-choice';
|
||||
import { listCollectors } from '@/lib/queries/collectors';
|
||||
import { listLocations } from '@/lib/queries/master-data';
|
||||
import { listWishlistsForSet, listWishlistTargets } from '@/lib/queries/wishlists';
|
||||
import { requireUser } from '@/lib/session';
|
||||
@@ -47,7 +48,7 @@ export default async function SetDetailPage({ params, searchParams }: Props) {
|
||||
// Keeps the "vorhanden / fehlt" badge in step with the collector the user
|
||||
// was looking at in the catalog.
|
||||
const rawCollector = Array.isArray(query.sammler) ? query.sammler[0] : query.sammler;
|
||||
const collectorId = resolveCollectorId(rawCollector);
|
||||
const collectorId = await activeCollectorId(rawCollector);
|
||||
const collectors = listCollectors();
|
||||
|
||||
const set = getSetById(id, collectorId);
|
||||
|
||||
@@ -15,6 +15,8 @@ export default async function NeuesSetPage({ searchParams }: { searchParams: Sea
|
||||
await requireUser();
|
||||
const params = await searchParams;
|
||||
const ean = typeof params.ean === 'string' ? params.ean : undefined;
|
||||
// Which way the plus menu chose: the matching field gets the cursor.
|
||||
const way = typeof params.weg === 'string' ? params.weg : undefined;
|
||||
|
||||
const manufacturers = listManufacturers().map((row) => ({ id: row.id, name: row.name }));
|
||||
const themes = listThemes().map((row) => ({
|
||||
@@ -38,9 +40,14 @@ export default async function NeuesSetPage({ searchParams }: { searchParams: Sea
|
||||
</div>
|
||||
{/* The Lego import creates its manufacturer itself, so it works even
|
||||
on a completely empty instance. */}
|
||||
<RebrickableImport enabled={importEnabled} />
|
||||
<RebrickableImport enabled={importEnabled} autoFocus={way === 'lego'} />
|
||||
|
||||
<NewSetEntry manufacturers={manufacturers} themes={themes} defaultEan={ean}>
|
||||
<NewSetEntry
|
||||
manufacturers={manufacturers}
|
||||
themes={themes}
|
||||
defaultEan={ean}
|
||||
focus={way === 'link' || way === 'hand' ? way : undefined}
|
||||
>
|
||||
<p className="rounded-lg border border-dashed border-border p-6 text-sm text-muted-foreground">
|
||||
Für ein Set von Hand brauchst du zuerst einen Hersteller – Lego, Playmobil, Cobi oder
|
||||
was auch immer im Kinderzimmer steht.
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { CollectorFilter } from '@/components/layout/collector-filter';
|
||||
import { BarcodeScannerButton } from '@/components/katalog/barcode-scanner';
|
||||
import { CatalogFilters } from '@/components/katalog/catalog-filters';
|
||||
import { CatalogGrid } from '@/components/katalog/catalog-grid';
|
||||
@@ -10,7 +9,8 @@ import { Button } from '@/components/ui/button';
|
||||
import { pluralize } from '@/lib/format';
|
||||
import { OWNERSHIP_FILTER_LABELS, parseOwnershipFilter } from '@/lib/ownership';
|
||||
import { CATALOG_PAGE_SIZE, listSets, listSetYears } from '@/lib/queries/catalog';
|
||||
import { listCollectors, resolveCollectorId } from '@/lib/queries/collectors';
|
||||
import { activeCollectorId } from '@/lib/collector-choice';
|
||||
import { listCollectors } from '@/lib/queries/collectors';
|
||||
import { listManufacturers, listThemes } from '@/lib/queries/master-data';
|
||||
import { listWishlistTargets } from '@/lib/queries/wishlists';
|
||||
import { requireUser } from '@/lib/session';
|
||||
@@ -30,7 +30,7 @@ export default async function KatalogPage({ searchParams }: { searchParams: Sear
|
||||
|
||||
const ownership = parseOwnershipFilter(single(params.besitz));
|
||||
const collectors = listCollectors();
|
||||
const collectorId = resolveCollectorId(single(params.sammler));
|
||||
const collectorId = await activeCollectorId(single(params.sammler));
|
||||
const activeCollector = collectors.find((row) => row.id === collectorId) ?? null;
|
||||
const yearParam = single(params.jahr);
|
||||
const page = Number(single(params.seite) ?? '1') || 1;
|
||||
@@ -80,11 +80,6 @@ export default async function KatalogPage({ searchParams }: { searchParams: Sear
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CollectorFilter
|
||||
collectors={collectors.map((row) => ({ id: row.id, name: row.name, color: row.color }))}
|
||||
allLabel="Alle zusammen"
|
||||
/>
|
||||
|
||||
<CatalogFilters options={{ manufacturers, themes, years: listSetYears() }} />
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import { AppHeader } from '@/components/layout/app-header';
|
||||
import { BottomNav } from '@/components/layout/bottom-nav';
|
||||
import { storedCollectorId } from '@/lib/collector-choice';
|
||||
import { listCollectors } from '@/lib/queries/collectors';
|
||||
import { isRebrickableEnabled } from '@/lib/rebrickable';
|
||||
import { ensureReminderScheduler } from '@/lib/reminder-job';
|
||||
import { requireUser } from '@/lib/session';
|
||||
|
||||
@@ -9,13 +12,24 @@ export default async function AppLayout({ children }: { children: React.ReactNod
|
||||
ensureReminderScheduler();
|
||||
|
||||
const user = await requireUser();
|
||||
const collectors = listCollectors().map((row) => ({
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
color: row.color,
|
||||
}));
|
||||
const legoImport = isRebrickableEnabled();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-dvh flex-col">
|
||||
<AppHeader user={user} />
|
||||
<AppHeader
|
||||
user={user}
|
||||
collectors={collectors}
|
||||
storedCollectorId={(await storedCollectorId()) ?? null}
|
||||
legoImport={legoImport}
|
||||
/>
|
||||
{/* Bottom padding keeps the mobile nav from covering the last row. */}
|
||||
<main className="mx-auto w-full max-w-5xl flex-1 px-4 pt-4 pb-24 md:pb-10">{children}</main>
|
||||
<BottomNav />
|
||||
<main className="mx-auto w-full max-w-5xl flex-1 px-4 pt-4 pb-28 md:pb-10">{children}</main>
|
||||
<BottomNav legoImport={legoImport} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { cn } from 'cn';
|
||||
import { Studs } from '@/components/brick/studs';
|
||||
import { MORE_GROUPS, moreItemsFor } from '@/components/layout/more-items';
|
||||
import { SignOutButton } from '@/components/layout/sign-out-button';
|
||||
import { requireUser } from '@/lib/session';
|
||||
|
||||
export const metadata: Metadata = { title: 'Mehr' };
|
||||
|
||||
const GROUP_TONES: Record<string, string> = {
|
||||
ich: 'bg-tone-1',
|
||||
familie: 'bg-tone-2',
|
||||
katalog: 'bg-tone-3',
|
||||
daten: 'bg-tone-4',
|
||||
};
|
||||
|
||||
export default async function MehrPage() {
|
||||
const user = await requireUser();
|
||||
const items = moreItemsFor(user.role);
|
||||
|
||||
return (
|
||||
<div className="space-y-7">
|
||||
<div className="flex items-center gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{user.name}</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{user.email} · {user.role === 'admin' ? 'Administrator' : 'Mitglied'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{MORE_GROUPS.map((group) => {
|
||||
const entries = items.filter((item) => item.group === group.id);
|
||||
if (entries.length === 0) return null;
|
||||
return (
|
||||
<section key={group.id} className="space-y-4">
|
||||
<h2 className="text-xs font-bold tracking-widest text-muted-foreground uppercase">
|
||||
{group.label}
|
||||
</h2>
|
||||
<ul className="grid grid-cols-2 gap-x-3 gap-y-5 sm:grid-cols-3">
|
||||
{entries.map((item) => (
|
||||
<li key={item.href} className="relative">
|
||||
<Studs studClassName={GROUP_TONES[group.id]} />
|
||||
<Link
|
||||
href={item.href}
|
||||
className={cn(
|
||||
'brick flex h-full flex-col gap-1 rounded-xl p-3.5 text-tone-ink outline-none focus-visible:ring-3 focus-visible:ring-ring/50',
|
||||
GROUP_TONES[group.id],
|
||||
)}
|
||||
>
|
||||
<item.icon className="size-6" aria-hidden />
|
||||
<span className="font-bold">{item.label}</span>
|
||||
<span className="text-xs leading-snug opacity-80">{item.description}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
|
||||
<SignOutButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { cn } from 'cn';
|
||||
import { Studs } from '@/components/brick/studs';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { brickRow } from '@/lib/brick-row';
|
||||
import { activeCollectorId } from '@/lib/collector-choice';
|
||||
import { collectorDotClass } from '@/lib/collector-colors';
|
||||
import { formatDate, formatNumber, pluralize } from '@/lib/format';
|
||||
import { formatEuro } from '@/lib/money';
|
||||
@@ -19,22 +20,31 @@ function daysLabel(days: number): string {
|
||||
return `in ${days} Tagen`;
|
||||
}
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const user = await requireUser();
|
||||
type SearchParams = Promise<Record<string, string | string[] | undefined>>;
|
||||
|
||||
const stats = getCollectionStats();
|
||||
const missing = countMissingSets();
|
||||
export default async function DashboardPage({ searchParams }: { searchParams: SearchParams }) {
|
||||
const user = await requireUser();
|
||||
const params = await searchParams;
|
||||
const rawCollector = Array.isArray(params.sammler) ? params.sammler[0] : params.sammler;
|
||||
|
||||
// With a child chosen in the header, the start page is about that child.
|
||||
const collectorId = await activeCollectorId(rawCollector);
|
||||
const stats = getCollectionStats(collectorId);
|
||||
const missing = countMissingSets(collectorId);
|
||||
const totalSets = stats.setCount + missing;
|
||||
|
||||
const collectors = listCollectors();
|
||||
const activeCollector = collectors.find((entry) => entry.id === collectorId) ?? null;
|
||||
const perCollector = countItemsPerCollector();
|
||||
const showCollectors = collectors.length > 1;
|
||||
const showCollectors = collectors.length > 1 && !activeCollector;
|
||||
const bricks = brickRow(
|
||||
stats.setCount,
|
||||
totalSets,
|
||||
showCollectors
|
||||
? collectors.map((entry) => ({ key: entry.id, count: perCollector.get(entry.id) ?? 0 }))
|
||||
: [],
|
||||
activeCollector
|
||||
? [{ key: activeCollector.id, count: 1 }]
|
||||
: showCollectors
|
||||
? collectors.map((entry) => ({ key: entry.id, count: perCollector.get(entry.id) ?? 0 }))
|
||||
: [],
|
||||
);
|
||||
const colorById = new Map(collectors.map((entry) => [entry.id, entry.color]));
|
||||
|
||||
@@ -53,7 +63,9 @@ export default async function DashboardPage() {
|
||||
<Studs count={3} />
|
||||
<div className="brick rounded-xl bg-card p-4 text-card-foreground">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<h2 className="text-lg font-semibold">Unsere Sammlung</h2>
|
||||
<h2 className="text-lg font-semibold">
|
||||
{activeCollector ? `Sammlung von ${activeCollector.name}` : 'Unsere Sammlung'}
|
||||
</h2>
|
||||
<p className="text-sm font-semibold text-muted-foreground">
|
||||
{formatNumber(stats.setCount)} von {pluralize(totalSets, 'Set', 'Sets')}
|
||||
</p>
|
||||
|
||||
@@ -3,7 +3,6 @@ import Link from 'next/link';
|
||||
import { Boxes, Euro, Layers, PackageSearch } from 'lucide-react';
|
||||
import { SetPlaceholder } from '@/components/brick/set-placeholder';
|
||||
import { Studs } from '@/components/brick/studs';
|
||||
import { CollectorFilter } from '@/components/layout/collector-filter';
|
||||
import { CollectionFilters } from '@/components/sammlung/collection-filters';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
@@ -19,7 +18,8 @@ import {
|
||||
listCollectionItems,
|
||||
type CollectionFilters as Filters,
|
||||
} from '@/lib/queries/collection';
|
||||
import { listCollectors, resolveCollectorId } from '@/lib/queries/collectors';
|
||||
import { activeCollectorId } from '@/lib/collector-choice';
|
||||
import { listCollectors } from '@/lib/queries/collectors';
|
||||
import { listLocations, listManufacturers } from '@/lib/queries/master-data';
|
||||
import { requireUser } from '@/lib/session';
|
||||
import type { CollectionStatus, Completeness } from '@/db/types';
|
||||
@@ -38,7 +38,7 @@ export default async function SammlungPage({ searchParams }: { searchParams: Sea
|
||||
const params = await searchParams;
|
||||
|
||||
const collectors = listCollectors();
|
||||
const collectorId = resolveCollectorId(single(params.sammler));
|
||||
const collectorId = await activeCollectorId(single(params.sammler));
|
||||
const activeCollector = collectors.find((row) => row.id === collectorId) ?? null;
|
||||
|
||||
const filters: Filters = {
|
||||
@@ -78,11 +78,6 @@ export default async function SammlungPage({ searchParams }: { searchParams: Sea
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<CollectorFilter
|
||||
collectors={collectors.map((row) => ({ id: row.id, name: row.name, color: row.color }))}
|
||||
allLabel="Alle zusammen"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
{tiles.map((tile) => (
|
||||
<Card key={tile.label}>
|
||||
|
||||
@@ -1,9 +1,23 @@
|
||||
'use server';
|
||||
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { actionData, actionError, type ActionResult } from '@/lib/action-result';
|
||||
import {
|
||||
actionData,
|
||||
actionError,
|
||||
actionOk,
|
||||
formToObject,
|
||||
parseForm,
|
||||
type ActionResult,
|
||||
} from '@/lib/action-result';
|
||||
import { env } from '@/env';
|
||||
import {
|
||||
deleteMailSettings,
|
||||
getMailConfig,
|
||||
isMailConfigured,
|
||||
saveMailSettings,
|
||||
} from '@/lib/mail-settings';
|
||||
import { sendMail, verifyMailConnection } from '@/lib/mailer';
|
||||
import { mailSettingsSchema } from '@/lib/validation';
|
||||
import { runReminderJob, type ReminderRun } from '@/lib/reminder-job';
|
||||
import { requireAdmin } from '@/lib/session';
|
||||
|
||||
@@ -17,7 +31,7 @@ export async function testMailConnection(): Promise<ActionResult> {
|
||||
export async function sendTestMail(): Promise<ActionResult> {
|
||||
const admin = await requireAdmin();
|
||||
|
||||
if (!env.isMailConfigured) {
|
||||
if (!isMailConfigured()) {
|
||||
return actionError('Es ist kein SMTP-Server konfiguriert.');
|
||||
}
|
||||
|
||||
@@ -41,7 +55,7 @@ export async function sendTestMail(): Promise<ActionResult> {
|
||||
export async function runRemindersNow(): Promise<ActionResult<ReminderRun>> {
|
||||
await requireAdmin();
|
||||
|
||||
if (!env.isMailConfigured) {
|
||||
if (!isMailConfigured()) {
|
||||
return actionError('Es ist kein SMTP-Server konfiguriert.');
|
||||
}
|
||||
|
||||
@@ -49,3 +63,26 @@ export async function runRemindersNow(): Promise<ActionResult<ReminderRun>> {
|
||||
revalidatePath('/verwaltung/erinnerungen');
|
||||
return actionData(run);
|
||||
}
|
||||
|
||||
/** Stores the SMTP server set up on the reminders page. */
|
||||
export async function saveMailSettingsAction(formData: FormData): Promise<ActionResult> {
|
||||
await requireAdmin();
|
||||
|
||||
if (getMailConfig()?.source === 'env') {
|
||||
return actionError('Der Mailserver kommt aus der .env. Änderungen bitte dort vornehmen.');
|
||||
}
|
||||
|
||||
const parsed = parseForm(mailSettingsSchema, formToObject(formData));
|
||||
if (!parsed.ok) return parsed;
|
||||
|
||||
saveMailSettings(parsed.data);
|
||||
revalidatePath('/verwaltung/erinnerungen');
|
||||
return actionOk();
|
||||
}
|
||||
|
||||
export async function deleteMailSettingsAction(): Promise<ActionResult> {
|
||||
await requireAdmin();
|
||||
deleteMailSettings();
|
||||
revalidatePath('/verwaltung/erinnerungen');
|
||||
return actionOk();
|
||||
}
|
||||
|
||||
@@ -3,10 +3,12 @@ import { eq, sql } from 'drizzle-orm';
|
||||
import { db } from '@/db';
|
||||
import { wishlist } from '@/db/schema';
|
||||
import { env } from '@/env';
|
||||
import { MailSettingsForm } from '@/components/verwaltung/mail-settings-form';
|
||||
import {
|
||||
ReminderSettings,
|
||||
type ReminderListRow,
|
||||
} from '@/components/verwaltung/reminder-settings';
|
||||
import { getMailSettingsView } from '@/lib/mail-settings';
|
||||
import { daysUntil } from '@/lib/reminders';
|
||||
import { requireAdmin } from '@/lib/session';
|
||||
|
||||
@@ -41,11 +43,16 @@ export default async function ErinnerungenPage() {
|
||||
}))
|
||||
.sort((a, b) => (a.daysLeft ?? 0) - (b.daysLeft ?? 0));
|
||||
|
||||
const mail = getMailSettingsView();
|
||||
|
||||
return (
|
||||
<ReminderSettings
|
||||
configured={env.isMailConfigured}
|
||||
daysBefore={env.REMINDER_DAYS_BEFORE}
|
||||
lists={lists}
|
||||
/>
|
||||
<div className="space-y-6">
|
||||
<ReminderSettings
|
||||
configured={mail.source !== null}
|
||||
daysBefore={env.REMINDER_DAYS_BEFORE}
|
||||
lists={lists}
|
||||
/>
|
||||
<MailSettingsForm view={mail} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,21 +1,15 @@
|
||||
import type { Metadata } from 'next';
|
||||
import { VerwaltungNav } from '@/components/verwaltung/verwaltung-nav';
|
||||
import { VerwaltungHeader } from '@/components/verwaltung/verwaltung-header';
|
||||
import { requireUser } from '@/lib/session';
|
||||
|
||||
export const metadata: Metadata = { title: 'Verwaltung' };
|
||||
|
||||
export default async function VerwaltungLayout({ children }: { children: React.ReactNode }) {
|
||||
const user = await requireUser();
|
||||
await requireUser();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Verwaltung</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Stammdaten, die im Katalog und in der Sammlung ausgewählt werden.
|
||||
</p>
|
||||
</div>
|
||||
<VerwaltungNav isAdmin={user.role === 'admin'} />
|
||||
<VerwaltungHeader />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -25,13 +25,18 @@ type Controls = { stop: () => void };
|
||||
* 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() {
|
||||
export function BarcodeScannerDialog({
|
||||
open,
|
||||
onOpenChange: setOpen,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
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);
|
||||
|
||||
@@ -68,7 +73,7 @@ export function BarcodeScannerButton() {
|
||||
router.refresh();
|
||||
});
|
||||
},
|
||||
[router, stop],
|
||||
[router, setOpen, stop],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -134,6 +139,61 @@ export function BarcodeScannerButton() {
|
||||
};
|
||||
}, [open, onDetected, stop]);
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export function BarcodeScannerButton() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
@@ -145,55 +205,7 @@ export function BarcodeScannerButton() {
|
||||
>
|
||||
<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>
|
||||
<BarcodeScannerDialog open={open} onOpenChange={setOpen} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState, useTransition } from 'react';
|
||||
import { useEffect, useState, useTransition } from 'react';
|
||||
import { Link2, Loader2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { previewSetFromLink, type LinkPreview } from '@/app/(app)/katalog/link-actions';
|
||||
@@ -35,11 +35,14 @@ export function NewSetEntry({
|
||||
manufacturers,
|
||||
themes,
|
||||
defaultEan,
|
||||
focus,
|
||||
children,
|
||||
}: {
|
||||
manufacturers: Array<{ id: string; name: string }>;
|
||||
themes: Array<{ id: string; name: string; manufacturerId: string }>;
|
||||
defaultEan?: string;
|
||||
/** Set by the plus menu: start in the link field or in the form. */
|
||||
focus?: 'link' | 'hand';
|
||||
/** Shown instead of the form while there is no manufacturer yet. */
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
@@ -50,6 +53,13 @@ export function NewSetEntry({
|
||||
const [existing, setExisting] = useState<{ id: string; label: string } | null>(null);
|
||||
const [pending, startTransition] = useTransition();
|
||||
|
||||
useEffect(() => {
|
||||
if (focus !== 'hand') return;
|
||||
const field = document.getElementById('setNumber');
|
||||
field?.scrollIntoView({ block: 'center' });
|
||||
field?.focus({ preventScroll: true });
|
||||
}, [focus]);
|
||||
|
||||
function submit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setExisting(null);
|
||||
@@ -114,6 +124,7 @@ export function NewSetEntry({
|
||||
onChange={(event) => setUrl(event.target.value)}
|
||||
placeholder="https://…"
|
||||
maxLength={2000}
|
||||
autoFocus={focus === 'link'}
|
||||
/>
|
||||
</Field>
|
||||
<Button type="submit" size="lg" disabled={pending || url.trim().length === 0}>
|
||||
|
||||
@@ -14,7 +14,7 @@ import { Input } from '@/components/ui/input';
|
||||
* One-field Lego import: type the number from the box, get a finished catalog
|
||||
* entry. Hidden entirely when no API key is configured.
|
||||
*/
|
||||
export function RebrickableImport({ enabled }: { enabled: boolean }) {
|
||||
export function RebrickableImport({ enabled, autoFocus }: { enabled: boolean; autoFocus?: boolean }) {
|
||||
const router = useRouter();
|
||||
const [setNumber, setSetNumber] = useState('');
|
||||
const [pending, startTransition] = useTransition();
|
||||
@@ -80,6 +80,7 @@ export function RebrickableImport({ enabled }: { enabled: boolean }) {
|
||||
onChange={(event) => setSetNumber(event.target.value)}
|
||||
placeholder="60398"
|
||||
inputMode="numeric"
|
||||
autoFocus={autoFocus}
|
||||
maxLength={40}
|
||||
className="font-mono"
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { Hash, Link2, PencilLine, Plus, ScanLine, type LucideIcon } from 'lucide-react';
|
||||
import { cn } from 'cn';
|
||||
import { Studs } from '@/components/brick/studs';
|
||||
import { BarcodeScannerDialog } from '@/components/katalog/barcode-scanner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/components/ui/sheet';
|
||||
|
||||
type Action = {
|
||||
id: string;
|
||||
label: string;
|
||||
hint: string;
|
||||
icon: LucideIcon;
|
||||
tone: string;
|
||||
href?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* The plus in the middle of the navigation: every way a set gets into the
|
||||
* catalog, in one place. Opens as a sheet from the bottom.
|
||||
*/
|
||||
export function AddMenu({
|
||||
legoImport,
|
||||
variant = 'nav',
|
||||
}: {
|
||||
/** Rebrickable is configured. */
|
||||
legoImport: boolean;
|
||||
variant?: 'nav' | 'button';
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [scanning, setScanning] = useState(false);
|
||||
|
||||
const actions: Action[] = [
|
||||
{ id: 'scan', label: 'Scannen', hint: 'Strichcode der Packung', icon: ScanLine, tone: 'bg-tone-1' },
|
||||
{
|
||||
id: 'link',
|
||||
label: 'Aus Link',
|
||||
hint: 'Amazon, idealo, Shop',
|
||||
icon: Link2,
|
||||
tone: 'bg-tone-2',
|
||||
href: '/katalog/neu?weg=link',
|
||||
},
|
||||
...(legoImport
|
||||
? [
|
||||
{
|
||||
id: 'lego',
|
||||
label: 'Lego-Nummer',
|
||||
hint: 'über Rebrickable',
|
||||
icon: Hash,
|
||||
tone: 'bg-tone-3',
|
||||
href: '/katalog/neu?weg=lego',
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
id: 'hand',
|
||||
label: 'Von Hand',
|
||||
hint: 'alles selbst eintragen',
|
||||
icon: PencilLine,
|
||||
tone: 'bg-card',
|
||||
href: '/katalog/neu?weg=hand',
|
||||
},
|
||||
];
|
||||
|
||||
function run(action: Action) {
|
||||
setOpen(false);
|
||||
if (action.id === 'scan') {
|
||||
setScanning(true);
|
||||
return;
|
||||
}
|
||||
if (action.href) router.push(action.href);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetTrigger asChild>
|
||||
{variant === 'nav' ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Neues Set"
|
||||
className="relative -mt-7 flex h-14 w-16 items-center justify-center rounded-[calc(var(--radius)*0.9)] border-[length:var(--edge-w)] border-edge bg-primary text-primary-foreground shadow-(--lift) outline-none focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-0.5"
|
||||
>
|
||||
<Studs count={2} className="left-2.5 gap-3 [&>.stud]:w-3.5 [&>.stud]:bg-primary" />
|
||||
<Plus className={cn('size-7 transition-transform', open && 'rotate-45')} strokeWidth={3} />
|
||||
</button>
|
||||
) : (
|
||||
<Button size="lg">
|
||||
<Plus />
|
||||
Neu
|
||||
</Button>
|
||||
)}
|
||||
</SheetTrigger>
|
||||
<SheetContent
|
||||
side="bottom"
|
||||
className="rounded-t-[calc(var(--radius)*1.6)] border-t-[length:max(1px,var(--edge-w))] border-edge bg-background pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"
|
||||
>
|
||||
<SheetHeader>
|
||||
<SheetTitle className="text-xl">Was kommt dazu?</SheetTitle>
|
||||
<SheetDescription>Ein Set in den Katalog bringen – auf dem schnellsten Weg.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="mx-auto grid w-full max-w-lg grid-cols-2 gap-x-3 gap-y-5 px-4 pt-2">
|
||||
{actions.map((action) => (
|
||||
<button
|
||||
key={action.id}
|
||||
type="button"
|
||||
onClick={() => run(action)}
|
||||
className="relative text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
>
|
||||
<Studs studClassName={action.tone} />
|
||||
<span
|
||||
className={cn(
|
||||
'brick flex h-full flex-col gap-1 rounded-xl p-3.5 text-foreground',
|
||||
action.tone,
|
||||
action.tone !== 'bg-card' && 'text-tone-ink',
|
||||
)}
|
||||
>
|
||||
<action.icon className="size-6" aria-hidden />
|
||||
<span className="text-base font-bold">{action.label}</span>
|
||||
<span className="text-xs font-semibold opacity-80">{action.hint}</span>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
<BarcodeScannerDialog open={scanning} onOpenChange={setScanning} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,22 @@
|
||||
import { Suspense } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Menu } from 'lucide-react';
|
||||
import { BrickLogo } from '@/components/brick/logo';
|
||||
import { DesktopNav } from './bottom-nav';
|
||||
import { UserMenu } from './user-menu';
|
||||
import { CollectorSwitch, type CollectorOption } from './collector-switch';
|
||||
import type { SessionUser } from '@/lib/session';
|
||||
|
||||
export function AppHeader({ user }: { user: SessionUser }) {
|
||||
export function AppHeader({
|
||||
user,
|
||||
collectors,
|
||||
storedCollectorId,
|
||||
legoImport,
|
||||
}: {
|
||||
user: SessionUser;
|
||||
collectors: CollectorOption[];
|
||||
storedCollectorId: string | null;
|
||||
legoImport: boolean;
|
||||
}) {
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur">
|
||||
<div className="mx-auto flex h-14 max-w-5xl items-center gap-3 px-4">
|
||||
@@ -16,9 +28,27 @@ export function AppHeader({ user }: { user: SessionUser }) {
|
||||
<span>Bricktrack</span>
|
||||
</Link>
|
||||
<div className="flex-1" />
|
||||
<DesktopNav />
|
||||
<UserMenu user={user} />
|
||||
<DesktopNav legoImport={legoImport} />
|
||||
{/* Account, design and master data: everything that is not daily use. */}
|
||||
{/* Labelled on purpose: an initials-only box was not recognisable. */}
|
||||
<Link
|
||||
href="/mehr"
|
||||
title={`Mehr: Konto (${user.name}), Design und Verwaltung`}
|
||||
className="flex h-10 items-center gap-2 rounded-[calc(var(--radius)*0.7)] border-[length:max(1px,var(--edge-w))] border-edge bg-card px-3 text-sm font-bold shadow-(--lift-sm) outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
>
|
||||
<Menu className="size-5" aria-hidden />
|
||||
Mehr
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{collectors.length > 1 ? (
|
||||
<div className="mx-auto max-w-5xl px-4 pb-2">
|
||||
{/* useSearchParams needs a boundary; the switch reads ?sammler=. */}
|
||||
<Suspense fallback={<div className="h-11" />}>
|
||||
<CollectorSwitch collectors={collectors} storedId={storedCollectorId} />
|
||||
</Suspense>
|
||||
</div>
|
||||
) : null}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,17 +2,52 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Boxes, Gift, LayoutGrid, User } from 'lucide-react';
|
||||
import { Boxes, Gift, House, LayoutGrid } from 'lucide-react';
|
||||
import { cn } from 'cn';
|
||||
import { AddMenu } from './add-menu';
|
||||
|
||||
/**
|
||||
* Four places and the plus in the middle. Account, design and master data
|
||||
* sit behind "Mehr" in the header - they are not part of the daily routine.
|
||||
*/
|
||||
const items = [
|
||||
{ href: '/', label: 'Start', icon: House },
|
||||
{ href: '/katalog', label: 'Katalog', icon: LayoutGrid },
|
||||
{ href: '/sammlung', label: 'Sammlung', icon: Boxes },
|
||||
{ href: '/wunschlisten', label: 'Wünsche', icon: Gift },
|
||||
{ href: '/konto', label: 'Konto', icon: User },
|
||||
] as const;
|
||||
|
||||
export function BottomNav() {
|
||||
function isActive(pathname: string, href: string) {
|
||||
if (href === '/') return pathname === '/';
|
||||
return pathname === href || pathname.startsWith(`${href}/`);
|
||||
}
|
||||
|
||||
function NavLink({ item, pathname }: { item: (typeof items)[number]; pathname: string }) {
|
||||
const active = isActive(pathname, item.href);
|
||||
return (
|
||||
<Link
|
||||
href={item.href}
|
||||
aria-current={active ? 'page' : undefined}
|
||||
className={cn(
|
||||
'flex h-16 flex-col items-center justify-center gap-1 text-xs transition-colors',
|
||||
active ? 'font-bold text-foreground' : 'font-medium text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
{/* The active tab sits on a small plate, like a tile on a baseplate. */}
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-7 w-12 items-center justify-center rounded-[calc(var(--radius)*0.6)] border-[length:var(--edge-w)]',
|
||||
active ? 'border-edge bg-secondary text-secondary-foreground' : 'border-transparent',
|
||||
)}
|
||||
>
|
||||
<item.icon className="size-5" aria-hidden />
|
||||
</span>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export function BottomNav({ legoImport }: { legoImport: boolean }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
@@ -20,49 +55,32 @@ export function BottomNav() {
|
||||
aria-label="Hauptnavigation"
|
||||
className="fixed inset-x-0 bottom-0 z-40 border-t-[length:max(1px,var(--edge-w))] border-border bg-card/95 pb-[env(safe-area-inset-bottom)] backdrop-blur md:hidden"
|
||||
>
|
||||
<ul className="mx-auto flex max-w-lg">
|
||||
{items.map((item) => {
|
||||
const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||||
return (
|
||||
<li key={item.href} className="flex-1">
|
||||
<Link
|
||||
href={item.href}
|
||||
aria-current={active ? 'page' : undefined}
|
||||
className={cn(
|
||||
'flex h-16 flex-col items-center justify-center gap-1 text-xs transition-colors',
|
||||
active
|
||||
? 'font-bold text-foreground'
|
||||
: 'font-medium text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
{/* The active tab sits on a small plate, like a tile on a baseplate. */}
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-7 w-12 items-center justify-center rounded-[calc(var(--radius)*0.6)] border-[length:var(--edge-w)]',
|
||||
active
|
||||
? 'border-edge bg-secondary text-secondary-foreground'
|
||||
: 'border-transparent',
|
||||
)}
|
||||
>
|
||||
<item.icon className="size-5" aria-hidden />
|
||||
</span>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<ul className="mx-auto grid max-w-lg grid-cols-5 items-center">
|
||||
{items.slice(0, 2).map((item) => (
|
||||
<li key={item.href}>
|
||||
<NavLink item={item} pathname={pathname} />
|
||||
</li>
|
||||
))}
|
||||
<li className="flex justify-center">
|
||||
<AddMenu legoImport={legoImport} />
|
||||
</li>
|
||||
{items.slice(2).map((item) => (
|
||||
<li key={item.href}>
|
||||
<NavLink item={item} pathname={pathname} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export function DesktopNav() {
|
||||
export function DesktopNav({ legoImport }: { legoImport: boolean }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<nav aria-label="Hauptnavigation" className="hidden items-center gap-1 md:flex">
|
||||
{items.map((item) => {
|
||||
const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||||
const active = isActive(pathname, item.href);
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
@@ -80,6 +98,9 @@ export function DesktopNav() {
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<span className="ml-2">
|
||||
<AddMenu legoImport={legoImport} variant="button" />
|
||||
</span>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useTransition } from 'react';
|
||||
import { cn } from 'cn';
|
||||
import { collectorDotClass } from '@/lib/collector-colors';
|
||||
|
||||
export type CollectorOption = { id: string; name: string; color: string };
|
||||
|
||||
/**
|
||||
* Switches the view between collectors.
|
||||
*
|
||||
* Rendered only when there is more than one - with a single collector the
|
||||
* whole question does not exist, and the app should not ask it. The choice
|
||||
* lives in the URL (`?sammler=`), so a filtered view stays shareable and the
|
||||
* back button behaves.
|
||||
*/
|
||||
export function CollectorFilter({
|
||||
collectors,
|
||||
allLabel = 'Alle',
|
||||
}: {
|
||||
collectors: CollectorOption[];
|
||||
allLabel?: string;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const [, startTransition] = useTransition();
|
||||
|
||||
if (collectors.length < 2) return null;
|
||||
|
||||
const current = searchParams.get('sammler') ?? '';
|
||||
|
||||
function select(id: string) {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (id) params.set('sammler', id);
|
||||
else params.delete('sammler');
|
||||
params.delete('seite');
|
||||
|
||||
const query = params.toString();
|
||||
startTransition(() => router.push(query ? `${pathname}?${query}` : pathname));
|
||||
}
|
||||
|
||||
const options = [{ id: '', name: allLabel, color: 'slate' }, ...collectors];
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label="Sammler"
|
||||
className="flex gap-1 overflow-x-auto rounded-lg bg-muted p-1"
|
||||
>
|
||||
{options.map((option) => {
|
||||
const active = current === option.id;
|
||||
return (
|
||||
<button
|
||||
key={option.id || 'alle'}
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
onClick={() => select(option.id)}
|
||||
className={cn(
|
||||
'flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors',
|
||||
active
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
{option.id ? (
|
||||
<span
|
||||
className={cn('size-2 rounded-full', collectorDotClass(option.color))}
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
{option.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
'use client';
|
||||
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useTransition } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { cn } from 'cn';
|
||||
import { chooseCollectorAction } from '@/app/(app)/collector-actions';
|
||||
import { collectorDotClass } from '@/lib/collector-colors';
|
||||
|
||||
export type CollectorOption = { id: string; name: string; color: string };
|
||||
|
||||
/**
|
||||
* "Für wen?" in the header: picks the child the whole app is looking at.
|
||||
*
|
||||
* Only rendered with more than one collector - with a single one the question
|
||||
* does not exist. The choice is remembered per device; a `?sammler=` in the
|
||||
* URL (a shared link) takes precedence and is shown as active.
|
||||
*/
|
||||
export function CollectorSwitch({
|
||||
collectors,
|
||||
storedId,
|
||||
}: {
|
||||
collectors: CollectorOption[];
|
||||
storedId: string | null;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const [pending, startTransition] = useTransition();
|
||||
|
||||
const fromUrl = searchParams.get('sammler');
|
||||
const current = fromUrl === 'alle' ? '' : (fromUrl ?? storedId ?? '');
|
||||
|
||||
function select(id: string) {
|
||||
startTransition(async () => {
|
||||
const result = await chooseCollectorAction({ id });
|
||||
if (!result.ok) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
// The header choice replaces a collector that came in via the URL.
|
||||
if (fromUrl !== null) {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.delete('sammler');
|
||||
params.delete('seite');
|
||||
const query = params.toString();
|
||||
router.replace(query ? `${pathname}?${query}` : pathname);
|
||||
}
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
const options = [{ id: '', name: 'Alle', color: '' }, ...collectors];
|
||||
|
||||
return (
|
||||
<div role="radiogroup" aria-label="Für wen?" className="flex gap-2 overflow-x-auto pb-1">
|
||||
{options.map((option) => {
|
||||
const active = current === option.id;
|
||||
return (
|
||||
<button
|
||||
key={option.id || 'alle'}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={active}
|
||||
disabled={pending}
|
||||
onClick={() => select(option.id)}
|
||||
className={cn(
|
||||
'flex h-10 shrink-0 items-center gap-2 rounded-[calc(var(--radius)*0.7)] border-[length:max(1px,var(--edge-w))] px-3 text-sm font-bold transition-colors',
|
||||
active
|
||||
? 'border-edge bg-card text-card-foreground shadow-(--lift-sm)'
|
||||
: 'border-transparent text-muted-foreground hover:bg-muted',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'flex size-6 items-center justify-center rounded-md border-[length:var(--edge-w)] border-edge text-xs font-bold text-white',
|
||||
option.id ? collectorDotClass(option.color) : 'bg-secondary text-secondary-foreground',
|
||||
)}
|
||||
>
|
||||
{option.id ? option.name.charAt(0).toUpperCase() : '★'}
|
||||
</span>
|
||||
{option.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import {
|
||||
Bell,
|
||||
Building2,
|
||||
Database,
|
||||
Mail,
|
||||
MapPin,
|
||||
Palette,
|
||||
Tag,
|
||||
UserRound,
|
||||
Users,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
|
||||
/**
|
||||
* Everything that is not part of the daily routine lives behind "Mehr":
|
||||
* the account, the design, family settings and master data. One list feeds
|
||||
* the "Mehr" page and the title bar of each of those pages.
|
||||
*/
|
||||
|
||||
export type MoreGroup = 'ich' | 'familie' | 'katalog' | 'daten';
|
||||
|
||||
export type MoreItem = {
|
||||
href: string;
|
||||
label: string;
|
||||
description: string;
|
||||
group: MoreGroup;
|
||||
icon: LucideIcon;
|
||||
adminOnly: boolean;
|
||||
};
|
||||
|
||||
export const MORE_GROUPS: Array<{ id: MoreGroup; label: string }> = [
|
||||
{ id: 'ich', label: 'Ich' },
|
||||
{ id: 'familie', label: 'Familie' },
|
||||
{ id: 'katalog', label: 'Katalog pflegen' },
|
||||
{ id: 'daten', label: 'Daten' },
|
||||
];
|
||||
|
||||
export const MORE_ITEMS: MoreItem[] = [
|
||||
{
|
||||
href: '/konto',
|
||||
label: 'Konto & Passkeys',
|
||||
description: 'Profil, Anmeldung per Passkey.',
|
||||
group: 'ich',
|
||||
icon: UserRound,
|
||||
adminOnly: false,
|
||||
},
|
||||
{
|
||||
href: '/konto#design',
|
||||
label: 'Design',
|
||||
description: 'Wie Bricktrack auf diesem Gerät aussieht.',
|
||||
group: 'ich',
|
||||
icon: Palette,
|
||||
adminOnly: false,
|
||||
},
|
||||
{
|
||||
href: '/verwaltung/sammler',
|
||||
label: 'Sammler',
|
||||
description: 'Wer sammelt – jedes Kind mit eigener Sammlung und eigenen Wunschlisten.',
|
||||
group: 'familie',
|
||||
icon: Users,
|
||||
adminOnly: false,
|
||||
},
|
||||
{
|
||||
href: '/verwaltung/einladungen',
|
||||
label: 'Einladungen',
|
||||
description: 'Weitere Konten für die Familie.',
|
||||
group: 'familie',
|
||||
icon: Mail,
|
||||
adminOnly: true,
|
||||
},
|
||||
{
|
||||
href: '/verwaltung/erinnerungen',
|
||||
label: 'Erinnerungen',
|
||||
description: 'E-Mail, wenn ein Wunschlisten-Termin näher rückt.',
|
||||
group: 'familie',
|
||||
icon: Bell,
|
||||
adminOnly: true,
|
||||
},
|
||||
{
|
||||
href: '/verwaltung/hersteller',
|
||||
label: 'Hersteller',
|
||||
description: 'Die Marken, deren Sets im Katalog stehen.',
|
||||
group: 'katalog',
|
||||
icon: Building2,
|
||||
adminOnly: false,
|
||||
},
|
||||
{
|
||||
href: '/verwaltung/themen',
|
||||
label: 'Themen',
|
||||
description: 'Serien je Hersteller, auch verschachtelt.',
|
||||
group: 'katalog',
|
||||
icon: Tag,
|
||||
adminOnly: false,
|
||||
},
|
||||
{
|
||||
href: '/verwaltung/standorte',
|
||||
label: 'Standorte',
|
||||
description: 'Wo die Sets aufbewahrt werden.',
|
||||
group: 'katalog',
|
||||
icon: MapPin,
|
||||
adminOnly: false,
|
||||
},
|
||||
{
|
||||
href: '/verwaltung/daten',
|
||||
label: 'Export & Import',
|
||||
description: 'Bestand sichern, umziehen oder als Tabelle auswerten.',
|
||||
group: 'daten',
|
||||
icon: Database,
|
||||
adminOnly: true,
|
||||
},
|
||||
];
|
||||
|
||||
export function moreItemsFor(role: string): MoreItem[] {
|
||||
return MORE_ITEMS.filter((item) => !item.adminOnly || role === 'admin');
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { Loader2, LogOut } from 'lucide-react';
|
||||
import { clearOfflineCaches } from '@/components/layout/service-worker';
|
||||
import { authClient } from '@/lib/auth-client';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export function SignOutButton() {
|
||||
const router = useRouter();
|
||||
const [pending, setPending] = useState(false);
|
||||
|
||||
async function signOut() {
|
||||
setPending(true);
|
||||
await authClient.signOut();
|
||||
// Cached pages must not stay readable on a shared device.
|
||||
await clearOfflineCaches();
|
||||
router.push('/anmelden');
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<Button variant="outline" size="lg" onClick={() => void signOut()} disabled={pending}>
|
||||
{pending ? <Loader2 className="animate-spin" /> : <LogOut />}
|
||||
Abmelden
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { LogOut, Settings, UserRound } from 'lucide-react';
|
||||
import { clearOfflineCaches } from '@/components/layout/service-worker';
|
||||
import { authClient } from '@/lib/auth-client';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import type { SessionUser } from '@/lib/session';
|
||||
|
||||
export function UserMenu({ user }: { user: SessionUser }) {
|
||||
const router = useRouter();
|
||||
|
||||
async function signOut() {
|
||||
await authClient.signOut();
|
||||
// Cached pages must not stay readable on a shared device.
|
||||
await clearOfflineCaches();
|
||||
router.push('/anmelden');
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" aria-label="Konto-Menü">
|
||||
<UserRound />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<span className="block text-sm font-medium">{user.name}</span>
|
||||
<span className="block truncate text-xs text-muted-foreground">{user.email}</span>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/konto">
|
||||
<UserRound />
|
||||
Konto und Passkeys
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
{user.role === 'admin' ? (
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/verwaltung/hersteller">
|
||||
<Settings />
|
||||
Verwaltung
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
) : null}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onSelect={() => void signOut()}>
|
||||
<LogOut />
|
||||
Abmelden
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState, useTransition } from 'react';
|
||||
import { Loader2, Save, Server, Trash2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
deleteMailSettingsAction,
|
||||
saveMailSettingsAction,
|
||||
} from '@/app/(app)/verwaltung/erinnerungen/actions';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Field } from '@/components/ui/field';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { NativeSelect } from '@/components/ui/native-select';
|
||||
|
||||
export type MailSettingsFormView = {
|
||||
source: 'env' | 'app' | null;
|
||||
host: string;
|
||||
port: number;
|
||||
security: 'starttls' | 'tls' | 'none';
|
||||
user: string;
|
||||
from: string;
|
||||
hasPassword: boolean;
|
||||
passwordUnreadable: boolean;
|
||||
};
|
||||
|
||||
const SECURITY_LABELS = {
|
||||
starttls: 'STARTTLS (meist Port 587)',
|
||||
tls: 'SSL/TLS (meist Port 465)',
|
||||
none: 'Unverschlüsselt (nur im eigenen Netz)',
|
||||
} as const;
|
||||
|
||||
/** The SMTP server for reminders, set up right here instead of in the .env. */
|
||||
export function MailSettingsForm({ view }: { view: MailSettingsFormView }) {
|
||||
const router = useRouter();
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [security, setSecurity] = useState(view.security);
|
||||
const [port, setPort] = useState(String(view.port));
|
||||
|
||||
if (view.source === 'env') {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Server className="size-5 text-primary" aria-hidden />
|
||||
Mailserver
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Kommt aus der .env und hat dort Vorrang. Ändern lässt er sich nur dort, danach den
|
||||
Container neu starten.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-1 text-sm">
|
||||
<p>
|
||||
<span className="text-muted-foreground">Server:</span> {view.host}:{view.port} ·{' '}
|
||||
{SECURITY_LABELS[view.security].split(' (')[0]}
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-muted-foreground">Absender:</span> {view.from}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function changeSecurity(next: 'starttls' | 'tls' | 'none') {
|
||||
setSecurity(next);
|
||||
// Follow the usual port while the user has not picked a special one.
|
||||
if (next === 'tls' && port === '587') setPort('465');
|
||||
if (next !== 'tls' && port === '465') setPort('587');
|
||||
}
|
||||
|
||||
function submit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
const form = event.currentTarget;
|
||||
const formData = new FormData(form);
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await saveMailSettingsAction(formData);
|
||||
if (!result.ok) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
// The password never stays visible, not even as dots.
|
||||
const password = form.elements.namedItem('password');
|
||||
if (password instanceof HTMLInputElement) password.value = '';
|
||||
toast.success('Mailserver gespeichert. Prüf ihn gleich mit „Verbindung prüfen“.');
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
function remove() {
|
||||
startTransition(async () => {
|
||||
const result = await deleteMailSettingsAction();
|
||||
if (!result.ok) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
toast.success('Mailserver entfernt. Erinnerungen sind aus.');
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Server className="size-5 text-primary" aria-hidden />
|
||||
Mailserver
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Über diesen Server gehen die Erinnerungen raus. Die Angaben findest du bei deinem
|
||||
Mail-Anbieter unter „SMTP“ oder „Postausgangsserver“. Das Passwort wird verschlüsselt
|
||||
gespeichert und nie wieder angezeigt.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-[1fr_8rem]">
|
||||
<Field label="SMTP-Server" htmlFor="mail-host" required>
|
||||
<Input
|
||||
id="mail-host"
|
||||
name="host"
|
||||
defaultValue={view.host}
|
||||
placeholder="mail.example.de"
|
||||
autoComplete="off"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Port" htmlFor="mail-port" required>
|
||||
<Input
|
||||
id="mail-port"
|
||||
name="port"
|
||||
inputMode="numeric"
|
||||
value={port}
|
||||
onChange={(event) => setPort(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field label="Verschlüsselung" htmlFor="mail-security">
|
||||
<NativeSelect
|
||||
id="mail-security"
|
||||
name="security"
|
||||
value={security}
|
||||
onChange={(event) => changeSecurity(event.target.value as typeof security)}
|
||||
>
|
||||
{Object.entries(SECURITY_LABELS).map(([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</NativeSelect>
|
||||
</Field>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Field label="Benutzername" htmlFor="mail-user">
|
||||
<Input
|
||||
id="mail-user"
|
||||
name="user"
|
||||
defaultValue={view.user}
|
||||
placeholder="bricktrack@example.de"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Passwort"
|
||||
htmlFor="mail-password"
|
||||
|
||||
hint={
|
||||
view.passwordUnreadable
|
||||
? 'Das gespeicherte Passwort ist nicht mehr lesbar (BETTER_AUTH_SECRET wurde geändert). Bitte neu eingeben.'
|
||||
: view.hasPassword
|
||||
? 'Gespeichert. Leer lassen, um es zu behalten.'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Input
|
||||
id="mail-password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
placeholder={view.hasPassword ? '••••••••' : ''}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{view.hasPassword ? (
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<Checkbox name="clearPassword" value="on" />
|
||||
Gespeichertes Passwort entfernen
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
<Field
|
||||
label="Absender"
|
||||
htmlFor="mail-from"
|
||||
required
|
||||
|
||||
hint="So steht es im Postfach, z. B. Bricktrack <bricktrack@example.de>."
|
||||
>
|
||||
<Input
|
||||
id="mail-from"
|
||||
name="from"
|
||||
defaultValue={view.from}
|
||||
placeholder="Bricktrack <bricktrack@example.de>"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button type="submit" size="lg" disabled={pending}>
|
||||
{pending ? <Loader2 className="animate-spin" /> : <Save />}
|
||||
Speichern
|
||||
</Button>
|
||||
{view.source === 'app' ? (
|
||||
<Button type="button" variant="ghost" size="lg" onClick={remove} disabled={pending}>
|
||||
<Trash2 />
|
||||
Entfernen
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -98,17 +98,10 @@ export function ReminderSettings({
|
||||
) : (
|
||||
<div className="space-y-2 rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground">
|
||||
<p>
|
||||
Es ist kein Mailversand eingerichtet – Erinnerungen sind damit aus, alles andere
|
||||
Es ist noch kein Mailserver eingerichtet – Erinnerungen sind damit aus, alles andere
|
||||
funktioniert unverändert.
|
||||
</p>
|
||||
<p>Zum Aktivieren in die .env eintragen und den Container neu starten:</p>
|
||||
<pre className="overflow-x-auto rounded-md bg-muted p-3 font-mono text-xs">
|
||||
{`SMTP_HOST=mail.example.de
|
||||
SMTP_PORT=587
|
||||
SMTP_USER=bricktrack@example.de
|
||||
SMTP_PASSWORD=…
|
||||
SMTP_FROM=Bricktrack <bricktrack@example.de>`}
|
||||
</pre>
|
||||
<p>Trag ihn unten unter „Mailserver“ ein. Ein Neustart ist nicht nötig.</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { ChevronLeft } from 'lucide-react';
|
||||
import { MORE_ITEMS } from '@/components/layout/more-items';
|
||||
|
||||
/** Title of a master-data page, with the way back to "Mehr". */
|
||||
export function VerwaltungHeader() {
|
||||
const pathname = usePathname();
|
||||
const item = MORE_ITEMS.find((entry) => entry.href === pathname);
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Link
|
||||
href="/mehr"
|
||||
className="inline-flex items-center gap-1 text-sm font-semibold text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ChevronLeft className="size-4" aria-hidden />
|
||||
Mehr
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{item?.label ?? 'Verwaltung'}</h1>
|
||||
{item ? <p className="text-sm text-muted-foreground">{item.description}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { cn } from 'cn';
|
||||
|
||||
const tabs = [
|
||||
{ href: '/verwaltung/sammler', label: 'Sammler', adminOnly: false },
|
||||
{ href: '/verwaltung/hersteller', label: 'Hersteller', adminOnly: false },
|
||||
{ href: '/verwaltung/themen', label: 'Themen', adminOnly: false },
|
||||
{ href: '/verwaltung/standorte', label: 'Standorte', adminOnly: false },
|
||||
{ href: '/verwaltung/einladungen', label: 'Einladungen', adminOnly: true },
|
||||
{ href: '/verwaltung/erinnerungen', label: 'Erinnerungen', adminOnly: true },
|
||||
{ href: '/verwaltung/daten', label: 'Daten', adminOnly: true },
|
||||
] as const;
|
||||
|
||||
export function VerwaltungNav({ isAdmin }: { isAdmin: boolean }) {
|
||||
const pathname = usePathname();
|
||||
const visible = tabs.filter((tab) => !tab.adminOnly || isAdmin);
|
||||
|
||||
return (
|
||||
<nav className="flex gap-1 overflow-x-auto rounded-lg bg-muted p-1" aria-label="Stammdaten">
|
||||
{visible.map((tab) => {
|
||||
const active = pathname === tab.href;
|
||||
return (
|
||||
<Link
|
||||
key={tab.href}
|
||||
href={tab.href}
|
||||
aria-current={active ? 'page' : undefined}
|
||||
className={cn(
|
||||
'flex-1 whitespace-nowrap rounded-md px-3 py-2 text-center text-sm font-medium transition-colors',
|
||||
active
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -4,4 +4,5 @@ export * from './collector';
|
||||
export * from './prices';
|
||||
export * from './collection';
|
||||
export * from './wishlist';
|
||||
export * from './settings';
|
||||
export * from './relations';
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
|
||||
|
||||
/**
|
||||
* Settings made in the app rather than in the .env - for now the SMTP server
|
||||
* for reminders. One row per topic, the value as JSON.
|
||||
*
|
||||
* Never part of the export: it may hold credentials (the SMTP password is
|
||||
* stored encrypted, see src/lib/secret-box.ts).
|
||||
*/
|
||||
export const appSetting = sqliteTable('app_setting', {
|
||||
key: text('key').primaryKey(),
|
||||
value: text('value', { mode: 'json' }).notNull(),
|
||||
updatedAt: integer('updated_at', { mode: 'timestamp' }).notNull(),
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
import 'server-only';
|
||||
import { cookies } from 'next/headers';
|
||||
import { resolveCollectorId } from '@/lib/queries/collectors';
|
||||
|
||||
/**
|
||||
* Which collector the app is looking at.
|
||||
*
|
||||
* The switch in the header remembers the choice per device (cookie), so Max's
|
||||
* tablet opens on Max. A `?sammler=` in the URL still wins - shared links and
|
||||
* the back button keep working - and `?sammler=alle` shows everybody.
|
||||
*/
|
||||
|
||||
export const COLLECTOR_COOKIE = 'bricktrack-sammler';
|
||||
export const ALL_COLLECTORS = 'alle';
|
||||
|
||||
export async function storedCollectorId(): Promise<string | undefined> {
|
||||
return resolveCollectorId((await cookies()).get(COLLECTOR_COOKIE)?.value);
|
||||
}
|
||||
|
||||
export async function activeCollectorId(param: string | undefined): Promise<string | undefined> {
|
||||
if (param === ALL_COLLECTORS) return undefined;
|
||||
if (param) return resolveCollectorId(param);
|
||||
return storedCollectorId();
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import 'server-only';
|
||||
import { eq } from 'drizzle-orm';
|
||||
import { db } from '@/db';
|
||||
import { appSetting } from '@/db/schema';
|
||||
import { env } from '@/env';
|
||||
import { openSecret, sealSecret } from '@/lib/secret-box';
|
||||
import type { MailSettingsInput } from '@/lib/validation';
|
||||
|
||||
/**
|
||||
* Where the SMTP server comes from.
|
||||
*
|
||||
* The .env wins when it names a server: an admin who configured it there
|
||||
* expects exactly that. Otherwise the settings made on the reminders page
|
||||
* apply. Without either, reminders stay off.
|
||||
*/
|
||||
|
||||
export type MailSecurity = 'starttls' | 'tls' | 'none';
|
||||
|
||||
export type MailConfig = {
|
||||
source: 'env' | 'app';
|
||||
host: string;
|
||||
port: number;
|
||||
security: MailSecurity;
|
||||
user: string | null;
|
||||
password: string | null;
|
||||
from: string;
|
||||
};
|
||||
|
||||
type StoredMail = {
|
||||
host: string;
|
||||
port: number;
|
||||
security: MailSecurity;
|
||||
user: string | null;
|
||||
/** Encrypted, see secret-box.ts. */
|
||||
password: string | null;
|
||||
from: string;
|
||||
};
|
||||
|
||||
const KEY = 'smtp';
|
||||
|
||||
function readStored(): StoredMail | null {
|
||||
const row = db.select().from(appSetting).where(eq(appSetting.key, KEY)).get();
|
||||
return (row?.value as StoredMail | undefined) ?? null;
|
||||
}
|
||||
|
||||
export function getMailConfig(): MailConfig | null {
|
||||
if (env.isMailConfigured) {
|
||||
return {
|
||||
source: 'env',
|
||||
host: env.SMTP_HOST!,
|
||||
port: env.SMTP_PORT,
|
||||
security: env.SMTP_SECURE || env.SMTP_PORT === 465 ? 'tls' : 'starttls',
|
||||
user: env.SMTP_USER ?? null,
|
||||
password: env.SMTP_PASSWORD ?? null,
|
||||
from: env.SMTP_FROM!,
|
||||
};
|
||||
}
|
||||
|
||||
const stored = readStored();
|
||||
if (!stored) return null;
|
||||
return {
|
||||
source: 'app',
|
||||
host: stored.host,
|
||||
port: stored.port,
|
||||
security: stored.security,
|
||||
user: stored.user,
|
||||
password: stored.password ? openSecret(stored.password, env.BETTER_AUTH_SECRET) : null,
|
||||
from: stored.from,
|
||||
};
|
||||
}
|
||||
|
||||
export function isMailConfigured(): boolean {
|
||||
return getMailConfig() !== null;
|
||||
}
|
||||
|
||||
/** What the settings form may show - never the password itself. */
|
||||
export type MailSettingsView = {
|
||||
source: 'env' | 'app' | null;
|
||||
host: string;
|
||||
port: number;
|
||||
security: MailSecurity;
|
||||
user: string;
|
||||
from: string;
|
||||
hasPassword: boolean;
|
||||
/** A password is stored but cannot be decrypted (BETTER_AUTH_SECRET changed). */
|
||||
passwordUnreadable: boolean;
|
||||
};
|
||||
|
||||
export function getMailSettingsView(): MailSettingsView {
|
||||
const config = getMailConfig();
|
||||
const stored = config?.source === 'env' ? null : readStored();
|
||||
|
||||
return {
|
||||
source: config?.source ?? null,
|
||||
host: config?.host ?? '',
|
||||
port: config?.port ?? 587,
|
||||
security: config?.security ?? 'starttls',
|
||||
user: config?.user ?? '',
|
||||
from: config?.from ?? '',
|
||||
hasPassword: Boolean(config?.password),
|
||||
passwordUnreadable: Boolean(stored?.password && !config?.password),
|
||||
};
|
||||
}
|
||||
|
||||
export function saveMailSettings(input: MailSettingsInput): void {
|
||||
const previous = readStored();
|
||||
|
||||
let password = previous?.password ?? null;
|
||||
if (input.clearPassword) password = null;
|
||||
if (input.password) password = sealSecret(input.password, env.BETTER_AUTH_SECRET);
|
||||
|
||||
const value: StoredMail = {
|
||||
host: input.host,
|
||||
port: input.port,
|
||||
security: input.security,
|
||||
user: input.user,
|
||||
password,
|
||||
from: input.from,
|
||||
};
|
||||
|
||||
db.insert(appSetting)
|
||||
.values({ key: KEY, value, updatedAt: new Date() })
|
||||
.onConflictDoUpdate({ target: appSetting.key, set: { value, updatedAt: new Date() } })
|
||||
.run();
|
||||
}
|
||||
|
||||
export function deleteMailSettings(): void {
|
||||
db.delete(appSetting).where(eq(appSetting.key, KEY)).run();
|
||||
}
|
||||
@@ -1,32 +1,39 @@
|
||||
import 'server-only';
|
||||
import nodemailer, { type Transporter } from 'nodemailer';
|
||||
import { env } from '@/env';
|
||||
import { getMailConfig, type MailConfig } from '@/lib/mail-settings';
|
||||
|
||||
/**
|
||||
* Outgoing mail.
|
||||
*
|
||||
* Entirely optional: without SMTP_HOST and SMTP_FROM nothing is scheduled and
|
||||
* Entirely optional: without a server - in the .env or on the reminders page -
|
||||
* nothing is sent. The app never depends on mail working.
|
||||
*/
|
||||
|
||||
let transporter: Transporter | null = null;
|
||||
let cached: { key: string; transporter: Transporter; from: string } | null = null;
|
||||
|
||||
function getTransporter(): Transporter | null {
|
||||
if (!env.isMailConfigured) return null;
|
||||
if (transporter) return transporter;
|
||||
function connectionKey(config: MailConfig): string {
|
||||
return JSON.stringify([config.host, config.port, config.security, config.user, config.password]);
|
||||
}
|
||||
|
||||
transporter = nodemailer.createTransport({
|
||||
host: env.SMTP_HOST,
|
||||
port: env.SMTP_PORT,
|
||||
function getTransport(): { transporter: Transporter; from: string } | null {
|
||||
const config = getMailConfig();
|
||||
if (!config) return null;
|
||||
|
||||
// Settings can change at runtime now; a new connection follows them.
|
||||
const key = connectionKey(config);
|
||||
if (cached?.key === key) return { transporter: cached.transporter, from: config.from };
|
||||
|
||||
const transporter = nodemailer.createTransport({
|
||||
host: config.host,
|
||||
port: config.port,
|
||||
// Implicit TLS on 465, STARTTLS on 587 - the usual pair.
|
||||
secure: env.SMTP_SECURE || env.SMTP_PORT === 465,
|
||||
auth:
|
||||
env.SMTP_USER && env.SMTP_PASSWORD
|
||||
? { user: env.SMTP_USER, pass: env.SMTP_PASSWORD }
|
||||
: undefined,
|
||||
secure: config.security === 'tls',
|
||||
ignoreTLS: config.security === 'none',
|
||||
auth: config.user && config.password ? { user: config.user, pass: config.password } : undefined,
|
||||
});
|
||||
|
||||
return transporter;
|
||||
cached = { key, transporter, from: config.from };
|
||||
return { transporter, from: config.from };
|
||||
}
|
||||
|
||||
export type MailResult = { ok: true } | { ok: false; error: string };
|
||||
@@ -36,14 +43,14 @@ export async function sendMail(input: {
|
||||
subject: string;
|
||||
text: string;
|
||||
}): Promise<MailResult> {
|
||||
const transport = getTransporter();
|
||||
const transport = getTransport();
|
||||
if (!transport) {
|
||||
return { ok: false, error: 'Es ist kein SMTP-Server konfiguriert.' };
|
||||
}
|
||||
|
||||
try {
|
||||
await transport.sendMail({
|
||||
from: env.SMTP_FROM,
|
||||
await transport.transporter.sendMail({
|
||||
from: transport.from,
|
||||
to: input.to,
|
||||
subject: input.subject,
|
||||
text: input.text,
|
||||
@@ -60,13 +67,13 @@ export async function sendMail(input: {
|
||||
|
||||
/** Checks the connection without sending anything. */
|
||||
export async function verifyMailConnection(): Promise<MailResult> {
|
||||
const transport = getTransporter();
|
||||
const transport = getTransport();
|
||||
if (!transport) {
|
||||
return { ok: false, error: 'Es ist kein SMTP-Server konfiguriert.' };
|
||||
}
|
||||
|
||||
try {
|
||||
await transport.verify();
|
||||
await transport.transporter.verify();
|
||||
return { ok: true };
|
||||
} catch (error) {
|
||||
return {
|
||||
|
||||
@@ -3,6 +3,7 @@ import { eq, sql } from 'drizzle-orm';
|
||||
import { db } from '@/db';
|
||||
import { user, wishlist } from '@/db/schema';
|
||||
import { env } from '@/env';
|
||||
import { isMailConfigured } from './mail-settings';
|
||||
import { sendMail } from './mailer';
|
||||
import {
|
||||
reminderSubject,
|
||||
@@ -59,7 +60,7 @@ function loadCandidates(): Candidate[] {
|
||||
|
||||
export async function runReminderJob(now = new Date()): Promise<ReminderRun> {
|
||||
const result: ReminderRun = { checked: 0, sent: 0, skipped: 0, failures: [] };
|
||||
if (!env.isMailConfigured) return result;
|
||||
if (!isMailConfigured()) return result;
|
||||
|
||||
const candidates = loadCandidates();
|
||||
result.checked = candidates.length;
|
||||
@@ -129,13 +130,12 @@ export function ensureReminderScheduler(): void {
|
||||
* cooldown keeps that from turning into repeated mail.
|
||||
*/
|
||||
export function startReminderScheduler(): void {
|
||||
if (!env.isMailConfigured) {
|
||||
console.log('[reminders] Kein SMTP konfiguriert - Erinnerungen sind aus.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Always scheduled: the mail server can be set up in the app at any time,
|
||||
// and each run checks whether one is configured.
|
||||
console.log(
|
||||
`[reminders] Aktiv: Erinnerung ${env.REMINDER_DAYS_BEFORE} Tage vor dem Termin, stuendliche Pruefung.`,
|
||||
isMailConfigured()
|
||||
? `[reminders] Aktiv: Erinnerung ${env.REMINDER_DAYS_BEFORE} Tage vor dem Termin, stuendliche Pruefung.`
|
||||
: '[reminders] Noch kein SMTP-Server eingerichtet - Erinnerungen starten, sobald es einen gibt.',
|
||||
);
|
||||
|
||||
const tick = () => {
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { createCipheriv, createDecipheriv, hkdfSync, randomBytes } from 'node:crypto';
|
||||
|
||||
/**
|
||||
* Encrypts secrets that settings must keep, such as the SMTP password.
|
||||
*
|
||||
* AES-256-GCM with a key derived from BETTER_AUTH_SECRET: a copy of the
|
||||
* database alone does not reveal the password. Changing BETTER_AUTH_SECRET
|
||||
* makes stored secrets unreadable - `openSecret` then returns null and the
|
||||
* password has to be entered again. Pure apart from node:crypto, so tested.
|
||||
*/
|
||||
|
||||
const VERSION = 'v1';
|
||||
|
||||
function deriveKey(masterSecret: string): Buffer {
|
||||
return Buffer.from(hkdfSync('sha256', masterSecret, 'bricktrack', 'app-setting-secret', 32));
|
||||
}
|
||||
|
||||
export function sealSecret(plain: string, masterSecret: string): string {
|
||||
const iv = randomBytes(12);
|
||||
const cipher = createCipheriv('aes-256-gcm', deriveKey(masterSecret), iv);
|
||||
const encrypted = Buffer.concat([cipher.update(plain, 'utf8'), cipher.final()]);
|
||||
const tag = cipher.getAuthTag();
|
||||
return [VERSION, iv.toString('base64'), tag.toString('base64'), encrypted.toString('base64')].join(':');
|
||||
}
|
||||
|
||||
export function openSecret(sealed: string, masterSecret: string): string | null {
|
||||
const [version, iv, tag, encrypted] = sealed.split(':');
|
||||
if (version !== VERSION || !iv || !tag || encrypted === undefined) return null;
|
||||
|
||||
try {
|
||||
const decipher = createDecipheriv('aes-256-gcm', deriveKey(masterSecret), Buffer.from(iv, 'base64'));
|
||||
decipher.setAuthTag(Buffer.from(tag, 'base64'));
|
||||
return Buffer.concat([
|
||||
decipher.update(Buffer.from(encrypted, 'base64')),
|
||||
decipher.final(),
|
||||
]).toString('utf8');
|
||||
} catch {
|
||||
// Wrong key or tampered value: treat as "no password stored".
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -219,6 +219,39 @@ export const reservationSchema = z.object({
|
||||
|
||||
export type ManufacturerInput = z.infer<typeof manufacturerSchema>;
|
||||
export type ThemeInput = z.infer<typeof themeSchema>;
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mail (reminders)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export const mailSecurityEnum = z.enum(['starttls', 'tls', 'none']);
|
||||
|
||||
export const mailSettingsSchema = z.object({
|
||||
host: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, 'Bitte den SMTP-Server angeben.')
|
||||
.max(255)
|
||||
.regex(/^[a-z0-9.-]+$/i, 'Nur der Servername, z. B. mail.example.de – ohne https:// und Port.'),
|
||||
port: z.coerce.number().int().min(1, 'Ungültiger Port.').max(65535, 'Ungültiger Port.').default(587),
|
||||
security: mailSecurityEnum.default('starttls'),
|
||||
user: optionalText(255),
|
||||
/** Empty keeps the stored password; see clearPassword to remove it. Not trimmed. */
|
||||
password: z
|
||||
.string()
|
||||
.max(500)
|
||||
.nullish()
|
||||
.transform((value) => (value ? value : null)),
|
||||
clearPassword: checkbox,
|
||||
from: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(3, 'Bitte einen Absender angeben.')
|
||||
.max(255)
|
||||
.refine((value) => /@[^@\s>]+\.[^@\s>]+/.test(value), 'Der Absender braucht eine E-Mail-Adresse.'),
|
||||
});
|
||||
|
||||
export type MailSettingsInput = z.infer<typeof mailSettingsSchema>;
|
||||
|
||||
export type LocationInput = z.infer<typeof locationSchema>;
|
||||
export type SetInput = z.infer<typeof setSchema>;
|
||||
export type CollectionItemInput = z.infer<typeof collectionItemSchema>;
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { openSecret, sealSecret } from '@/lib/secret-box';
|
||||
import { mailSettingsSchema } from '@/lib/validation';
|
||||
|
||||
const SECRET = 'test-secret-0123456789-abcdefghijklmnop';
|
||||
|
||||
describe('Passwort verschluesselt speichern', () => {
|
||||
it('kommt mit demselben Schluessel unveraendert zurueck', () => {
|
||||
const sealed = sealSecret('geheim mit Leerzeichen ', SECRET);
|
||||
expect(sealed).not.toContain('geheim');
|
||||
expect(openSecret(sealed, SECRET)).toBe('geheim mit Leerzeichen ');
|
||||
});
|
||||
|
||||
it('verschluesselt dasselbe Passwort jedes Mal anders', () => {
|
||||
expect(sealSecret('x', SECRET)).not.toBe(sealSecret('x', SECRET));
|
||||
});
|
||||
|
||||
it('liefert nichts bei anderem Schluessel oder veraendertem Wert', () => {
|
||||
const sealed = sealSecret('geheim', SECRET);
|
||||
expect(openSecret(sealed, 'ein-anderes-secret-0123456789-abcdefgh')).toBeNull();
|
||||
|
||||
const [version, iv, tag, data] = sealed.split(':');
|
||||
const flipped = Buffer.from(data!, 'base64');
|
||||
flipped[0] = flipped[0]! ^ 0xff;
|
||||
expect(openSecret([version, iv, tag, flipped.toString('base64')].join(':'), SECRET)).toBeNull();
|
||||
expect(openSecret('kaputt', SECRET)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('SMTP-Eingaben pruefen', () => {
|
||||
const valid = {
|
||||
host: 'mail.example.de',
|
||||
port: '587',
|
||||
security: 'starttls',
|
||||
user: 'bricktrack@example.de',
|
||||
password: ' mit Rand ',
|
||||
from: 'Bricktrack <bricktrack@example.de>',
|
||||
};
|
||||
|
||||
it('nimmt gueltige Angaben und laesst das Passwort, wie es ist', () => {
|
||||
const parsed = mailSettingsSchema.parse(valid);
|
||||
expect(parsed.port).toBe(587);
|
||||
expect(parsed.password).toBe(' mit Rand ');
|
||||
expect(parsed.clearPassword).toBe(false);
|
||||
});
|
||||
|
||||
it('macht aus einem leeren Passwort "unveraendert"', () => {
|
||||
expect(mailSettingsSchema.parse({ ...valid, password: '' }).password).toBeNull();
|
||||
});
|
||||
|
||||
it('lehnt URLs, Ports und Absender ohne Adresse ab', () => {
|
||||
expect(mailSettingsSchema.safeParse({ ...valid, host: 'https://mail.example.de' }).success).toBe(false);
|
||||
expect(mailSettingsSchema.safeParse({ ...valid, host: 'mail.example.de:587' }).success).toBe(false);
|
||||
expect(mailSettingsSchema.safeParse({ ...valid, port: '70000' }).success).toBe(false);
|
||||
expect(mailSettingsSchema.safeParse({ ...valid, from: 'Bricktrack' }).success).toBe(false);
|
||||
expect(mailSettingsSchema.safeParse({ ...valid, security: 'ssl3' }).success).toBe(false);
|
||||
});
|
||||
});
|
||||