Compare commits
+22
-6
@@ -23,11 +23,13 @@ APP_URL="http://localhost:3000"
|
||||
|
||||
# Port innerhalb des Containers bzw. im Standalone-Betrieb
|
||||
PORT="3000"
|
||||
# Host-Port-Mapping fuer den App-Container (--profile full)
|
||||
APP_PORT="3000"
|
||||
# Host-Port-Mapping fuer den App-Container (--profile full). Nur auf dem
|
||||
# Loopback – nach draussen geht es ueber einen Reverse Proxy. Soll die
|
||||
# Instanz im LAN erreichbar sein, hier "3000" eintragen.
|
||||
APP_PORT="127.0.0.1:3000"
|
||||
|
||||
# ── Datenbank ────────────────────────────────────────────────
|
||||
# Standalone-Betrieb: App laeuft lokal, Postgres via "docker compose up -d db"
|
||||
# Standalone-Betrieb: App laeuft lokal, Postgres via "npm run docker:db"
|
||||
# oder als nativ installierter Dienst.
|
||||
DATABASE_URL="postgresql://nebula:nebula@localhost:5432/nebula?schema=public"
|
||||
|
||||
@@ -38,10 +40,24 @@ DATABASE_URL="postgresql://nebula:nebula@localhost:5432/nebula?schema=public"
|
||||
POSTGRES_USER="nebula"
|
||||
POSTGRES_PASSWORD="nebula"
|
||||
POSTGRES_DB="nebula"
|
||||
# Host-Port, unter dem die Datenbank erreichbar ist
|
||||
POSTGRES_PORT="5432"
|
||||
# Host-Port der Datenbank. Wirkt NUR zusammen mit docker-compose.dev.yml
|
||||
# (npm run docker:db) – die Basisdatei veroeffentlicht keinen DB-Port, weil
|
||||
# die Anwendung im Container "db:5432" anspricht und nichts davon nach
|
||||
# aussen muss. Auf einem Server bleibt dieser Wert also folgenlos.
|
||||
POSTGRES_PORT="127.0.0.1:5432"
|
||||
# Host-Port fuer Adminer (--profile tools)
|
||||
ADMINER_PORT="8080"
|
||||
ADMINER_PORT="127.0.0.1:8080"
|
||||
|
||||
# ── Betrieb ohne veroeffentlichte Ports ──────────────────────
|
||||
# Liegen mehrere Stacks auf demselben Docker-Host und regelt ein gemeinsamer
|
||||
# Reverse Proxy den Zugang, veroeffentlicht Nebula gar keinen Port. Dann diese
|
||||
# beiden Zeilen aktivieren – danach genuegt ueberall "docker compose up -d":
|
||||
# COMPOSE_FILE="docker-compose.yml:docker-compose.server.yml"
|
||||
# COMPOSE_PROFILES="full"
|
||||
#
|
||||
# Name des geteilten Netzes und der Alias, unter dem der Proxy Nebula findet.
|
||||
# PROXY_NETWORK="proxy"
|
||||
# PROXY_ALIAS="nebula"
|
||||
|
||||
# ── Sicherheit ───────────────────────────────────────────────
|
||||
# Schluessel zur Verschluesselung der Git-Access-Tokens (AES-256-GCM).
|
||||
|
||||
@@ -4,12 +4,13 @@ Dashboard für Vibe-Coding-Projekte. Next.js 15 (App Router), TypeScript,
|
||||
Tailwind 4, Prisma, PostgreSQL. Oberfläche und Texte sind **deutsch**.
|
||||
|
||||
Funktionsumfang: [FEATURES.md](FEATURES.md) · Geplantes: [ROADMAP.md](ROADMAP.md) ·
|
||||
Betrieb: [README.md](README.md)
|
||||
Betrieb: [README.md](README.md) · Server: [DEPLOYMENT.md](DEPLOYMENT.md)
|
||||
|
||||
## Womit man arbeitet
|
||||
|
||||
```bash
|
||||
docker compose up -d db # Postgres, muss laufen
|
||||
npm run docker:db # Postgres, muss laufen (mit dem dev-Overlay,
|
||||
# sonst hat die DB keinen Host-Port)
|
||||
npm run dev # Entwicklung
|
||||
npm test # Unit-Tests (Vitest, ohne DB)
|
||||
npx tsc --noEmit # Typprüfung
|
||||
|
||||
+412
@@ -0,0 +1,412 @@
|
||||
# Nebula auf einem Server betreiben
|
||||
|
||||
Schritt für Schritt: von der leeren Maschine bis zur laufenden Instanz hinter
|
||||
TLS — und wie Updates danach ablaufen.
|
||||
|
||||
Für Installation zum Ausprobieren und die Entwicklungsvarianten siehe
|
||||
[README.md](README.md). Hier geht es um den Dauerbetrieb.
|
||||
|
||||
---
|
||||
|
||||
## Was du brauchst
|
||||
|
||||
| | |
|
||||
| --- | --- |
|
||||
| Server | Linux mit Docker Engine ≥ 24 und Compose v2 |
|
||||
| Sonst | `git`, `curl`, eine POSIX-Shell — **kein Node, kein npm** |
|
||||
| Arbeitsspeicher | 1 GB reichen; beim Bauen kurzzeitig ~2 GB |
|
||||
| Plattenplatz | ~2 GB für Abbilder, dazu die Datenbank |
|
||||
| Domain | Eine (Unter-)Domain, die auf den Server zeigt |
|
||||
| TLS | Pflicht, wenn du Passkeys willst — siehe Schritt 6 |
|
||||
|
||||
> **Warum TLS Pflicht ist:** Passkeys verlangen einen sicheren Kontext.
|
||||
> Über `http://` an einer LAN-IP funktionieren sie nicht. Passwort und
|
||||
> Zwei-Faktor gehen auch ohne, aber dann läuft dein Passwort im Klartext
|
||||
> übers Netz — betreibe Nebula nicht ohne TLS.
|
||||
|
||||
---
|
||||
|
||||
## 1 · Docker installieren
|
||||
|
||||
```bash
|
||||
curl -fsSL https://get.docker.com | sh
|
||||
sudo usermod -aG docker "$USER"
|
||||
newgrp docker # oder ab- und wieder anmelden
|
||||
|
||||
docker --version && docker compose version
|
||||
```
|
||||
|
||||
## 2 · Nebula holen
|
||||
|
||||
```bash
|
||||
sudo mkdir -p /opt/nebula && sudo chown "$USER" /opt/nebula
|
||||
git clone https://git.example.com/dein-name/nebula.git /opt/nebula
|
||||
cd /opt/nebula
|
||||
```
|
||||
|
||||
## 3 · Konfigurieren
|
||||
|
||||
```bash
|
||||
./scripts/setup.sh # legt .env an, würfelt ein APP_SECRET, setzt Rechte 600
|
||||
```
|
||||
|
||||
Das Skript ist reines POSIX-Shell und braucht **kein Node** — auf einem
|
||||
reinen Docker-Host ist keins installiert. Es nimmt `openssl`, falls
|
||||
vorhanden, sonst `/dev/urandom`.
|
||||
|
||||
Ganz von Hand geht auch:
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
chmod 600 .env
|
||||
openssl rand -base64 32 # den Wert als APP_SECRET eintragen
|
||||
```
|
||||
|
||||
Dann die `.env` öffnen und mindestens diese drei Werte anpassen:
|
||||
|
||||
```env
|
||||
# Die Adresse, unter der du Nebula im Browser aufrufst.
|
||||
# Bestimmt die WebAuthn-rpID — passt sie nicht, scheitern Passkeys.
|
||||
APP_URL="https://nebula.deine-domain.de"
|
||||
|
||||
# Verschlüsselt die Git-Tokens. Lang, zufällig, niemals teilen.
|
||||
APP_SECRET="…dein-langer-zufallswert…"
|
||||
|
||||
# Das Datenbankpasswort. Die Voreinstellung „nebula" ist für Entwicklung.
|
||||
POSTGRES_PASSWORD="…noch-ein-langer-zufallswert…"
|
||||
```
|
||||
|
||||
Die Ports müssen nicht angefasst werden: `APP_PORT` steht schon auf
|
||||
`127.0.0.1:3000`, und die Datenbank veröffentlicht gar nichts.
|
||||
|
||||
> **`APP_SECRET` später zu ändern** macht gespeicherte Git-Tokens unlesbar.
|
||||
> Sie müssen dann neu hinterlegt werden. Konten, Passwörter und Passkeys
|
||||
> bleiben unberührt.
|
||||
>
|
||||
> **`APP_URL` später zu ändern** macht bestehende **Passkeys ungültig**, weil
|
||||
> sie an die rpID gebunden sind. Passwörter funktionieren weiter.
|
||||
|
||||
### Welche Ports überhaupt hinausgehen
|
||||
|
||||
Nach einer regulären Installation ist es **genau einer**:
|
||||
|
||||
| Container | Host-Port | Wann |
|
||||
| --- | --- | --- |
|
||||
| `nebula-app` | `APP_PORT`, Vorgabe `127.0.0.1:3000` | `--profile full` |
|
||||
| `nebula-db` | — | **nie** |
|
||||
| `nebula-adminer` | `ADMINER_PORT`, Vorgabe `127.0.0.1:8080` | nur `--profile tools` |
|
||||
|
||||
**Die Datenbank veröffentlicht nichts.** Im Vollbetrieb spricht die Anwendung
|
||||
Postgres über das interne Docker-Netz als `db:5432` an — die `DATABASE_URL`
|
||||
setzt Compose selbst. Auch `scripts/backup.sh` und `restore.sh` gehen über
|
||||
`docker exec`, nicht über den Host. Ein Host-Port wäre nur eine zusätzliche
|
||||
Angriffsfläche und würde mit anderen Postgres-Containern auf demselben Host
|
||||
um den Port streiten.
|
||||
|
||||
Wer die Datenbank beim Entwickeln doch vom Host aus braucht — `npm run dev`
|
||||
läuft ja außerhalb des Containers — nimmt `docker-compose.dev.yml` dazu
|
||||
(`npm run docker:db`). Auf einem Server hat diese Datei nichts zu suchen.
|
||||
|
||||
Auch der Port der Anwendung liegt auf `127.0.0.1`: nach draußen geht es über
|
||||
den Reverse Proxy aus Schritt 6.
|
||||
|
||||
### Variante: gar keinen Port veröffentlichen
|
||||
|
||||
Liegen mehrere Stacks auf demselben Docker-Host und regelt ein gemeinsamer
|
||||
Reverse Proxy den Zugang, braucht Nebula überhaupt keinen Host-Port. Dafür
|
||||
gibt es **`docker-compose.server.yml`**: es nimmt die letzte verbliebene
|
||||
Freigabe zurück und hängt die Anwendung in ein geteiltes Netz.
|
||||
|
||||
```bash
|
||||
docker network create proxy # falls der Proxy-Stack es nicht schon anlegt
|
||||
```
|
||||
|
||||
```env
|
||||
# .env
|
||||
COMPOSE_FILE="docker-compose.yml:docker-compose.server.yml"
|
||||
COMPOSE_PROFILES="full"
|
||||
PROXY_NETWORK="proxy" # so heißt das Netz
|
||||
PROXY_ALIAS="nebula" # so findet der Proxy die Anwendung
|
||||
```
|
||||
|
||||
Compose liest beides aus der `.env`. Danach genügt überall — auch in
|
||||
`scripts/update.sh` — ein schlichtes `docker compose up -d`. Im Proxy zeigt
|
||||
das Ziel dann nicht mehr auf `127.0.0.1:3000`, sondern auf **`nebula:3000`**;
|
||||
Schritt 6 zeigt beide Schreibweisen.
|
||||
|
||||
> Ohne die Datei würde ein Override die Portlisten **zusammenhängen** statt
|
||||
> sie zu ersetzen — Compose führt `ports` anfügend zusammen. Das `!reset`
|
||||
> darin ist genau dafür da und braucht Compose 2.24 oder neuer.
|
||||
>
|
||||
> Das Trennzeichen in `COMPOSE_FILE` ist unter Linux der Doppelpunkt, unter
|
||||
> Windows das Semikolon.
|
||||
|
||||
## 4 · Starten
|
||||
|
||||
```bash
|
||||
docker compose --profile full up -d --build
|
||||
```
|
||||
|
||||
Der erste Bau dauert ein paar Minuten. Der Container spielt beim Start
|
||||
selbst die Migrationen ein und wartet dabei auf die Datenbank.
|
||||
|
||||
```bash
|
||||
docker compose --profile full logs -f app # mitlesen, Strg+C beendet nur das Lesen
|
||||
curl -s localhost:3000/api/health # {"status":"ok","database":"up",…}
|
||||
```
|
||||
|
||||
Ohne veröffentlichten Port geht die Frage an den Container statt an den Host
|
||||
— das Abbild bringt einen `HEALTHCHECK` mit:
|
||||
|
||||
```bash
|
||||
docker inspect --format '{{.State.Health.Status}}' nebula-app # healthy
|
||||
```
|
||||
|
||||
## 5 · Ersten Zugang anlegen
|
||||
|
||||
Ruf `https://nebula.deine-domain.de/setup` auf (nach Schritt 6) oder
|
||||
vorübergehend über einen SSH-Tunnel:
|
||||
|
||||
```bash
|
||||
ssh -L 3000:127.0.0.1:3000 benutzer@server
|
||||
# dann lokal http://localhost:3000/setup öffnen
|
||||
```
|
||||
|
||||
Dort legst du das Administratorkonto an und wählst die Betriebsart.
|
||||
**Danach ist `/setup` dauerhaft gesperrt.**
|
||||
|
||||
Anschließend gleich unter *Mein Konto*:
|
||||
|
||||
1. **Passkey hinzufügen** — geht erst, wenn TLS steht
|
||||
2. **Zwei-Faktor einrichten** und die Wiederherstellungscodes wegschreiben
|
||||
|
||||
## 6 · Reverse Proxy mit TLS
|
||||
|
||||
Nebula bringt keinen eigenen TLS-Abschluss mit. Beispiel mit **Caddy**, das
|
||||
Zertifikate von selbst besorgt und erneuert:
|
||||
|
||||
```caddyfile
|
||||
# /etc/caddy/Caddyfile
|
||||
nebula.deine-domain.de {
|
||||
reverse_proxy 127.0.0.1:3000
|
||||
}
|
||||
```
|
||||
|
||||
```bash
|
||||
sudo systemctl reload caddy
|
||||
```
|
||||
|
||||
Das genügt. Caddy setzt `X-Forwarded-*` von selbst, holt das Zertifikat bei
|
||||
Let's Encrypt und leitet `http` auf `https` um.
|
||||
|
||||
Läuft der Proxy selbst als Container im geteilten Netz (die Variante ohne
|
||||
veröffentlichte Ports), lautet das Ziel stattdessen `nebula:3000` —
|
||||
Docker löst den Alias auf:
|
||||
|
||||
```caddyfile
|
||||
nebula.deine-domain.de {
|
||||
reverse_proxy nebula:3000
|
||||
}
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Dasselbe mit nginx</summary>
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
server_name nebula.deine-domain.de;
|
||||
|
||||
ssl_certificate /etc/letsencrypt/live/nebula.deine-domain.de/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/nebula.deine-domain.de/privkey.pem;
|
||||
|
||||
location / {
|
||||
proxy_pass http://127.0.0.1:3000;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Zertifikat mit `certbot --nginx -d nebula.deine-domain.de`.
|
||||
</details>
|
||||
|
||||
> Steht `APP_URL` auf `https://…`, setzt Nebula das `Secure`-Flag auf die
|
||||
> Sitzungscookies. Läuft der Proxy auf `https`, die `APP_URL` aber noch auf
|
||||
> `http`, funktioniert die Anmeldung — nur ohne dieses Flag. Also beides
|
||||
> gleichziehen.
|
||||
|
||||
## 7 · Firewall
|
||||
|
||||
```bash
|
||||
sudo ufw allow 22/tcp
|
||||
sudo ufw allow 80,443/tcp
|
||||
sudo ufw enable
|
||||
```
|
||||
|
||||
Port 3000 bleibt **zu**, 5432 wird ohnehin nie veröffentlicht. Die Firewall
|
||||
ist hier der zweite Riegel, nicht der erste.
|
||||
|
||||
> Docker schreibt seine Portfreigaben direkt in `iptables` und geht dabei an
|
||||
> `ufw` **vorbei**. Eine Freigabe auf `0.0.0.0` steht also im Netz, auch wenn
|
||||
> `ufw` sie zu melden scheint. Genau deshalb wird hier an `127.0.0.1`
|
||||
> gebunden, statt sich auf die Firewall zu verlassen.
|
||||
|
||||
## 8 · Sicherungen automatisieren
|
||||
|
||||
`scripts/backup.sh` legt einen `pg_dump` unter `backups/` ab. Täglich per
|
||||
Cron:
|
||||
|
||||
```bash
|
||||
crontab -e
|
||||
```
|
||||
|
||||
```cron
|
||||
# Jede Nacht um 3:15 sichern, 30 Tage aufheben
|
||||
15 3 * * * cd /opt/nebula && ./scripts/backup.sh >> /var/log/nebula-backup.log 2>&1
|
||||
30 3 * * * find /opt/nebula/backups -name '*.sql.gz' -mtime +30 -delete
|
||||
```
|
||||
|
||||
Zurückspielen:
|
||||
|
||||
```bash
|
||||
./scripts/restore.sh backups/nebula-2026-07-27-03-15-00.sql.gz
|
||||
```
|
||||
|
||||
> Die Sicherungen liegen auf **demselben Server**. Das hilft gegen einen
|
||||
> verpatzten Import, nicht gegen einen Plattenausfall. Zieh sie regelmäßig
|
||||
> woandershin — `rsync`, `restic`, was du ohnehin nutzt.
|
||||
|
||||
---
|
||||
|
||||
## Updates
|
||||
|
||||
Dafür gibt es `scripts/update.sh`. Es macht alles in der richtigen
|
||||
Reihenfolge und bricht ab, sobald ein Schritt scheitert:
|
||||
|
||||
```bash
|
||||
cd /opt/nebula
|
||||
./scripts/update.sh
|
||||
```
|
||||
|
||||
Was es tut:
|
||||
|
||||
| Schritt | |
|
||||
| --- | --- |
|
||||
| **1 Prüfen** | docker, compose, `.env` da? Ist `APP_SECRET` gesetzt und nicht mehr der Entwicklungswert? |
|
||||
| | *(alles ohne Node — das Skript liest die Version selbst aus der `package.json`)* |
|
||||
| **2 Holen** | `git pull --ff-only`; zeigt die neuen Commits und fragt nach |
|
||||
| **3 Sichern** | `pg_dump` **vor** jeder Schemaänderung |
|
||||
| **4 Bauen** | Erst bauen, dann umschalten — ein gescheiterter Bau lässt die alte Fassung laufen |
|
||||
| **5 Starten** | Container neu; die Migrationen laufen im Entrypoint |
|
||||
| **6 Prüfen** | Bis zu zwei Minuten warten, bis der Container sich gesund meldet |
|
||||
|
||||
Scheitert die Gesundheitsprüfung, zeigt das Skript die letzten Logzeilen und
|
||||
nennt den Weg zurück.
|
||||
|
||||
```bash
|
||||
./scripts/update.sh --yes # ohne Rückfrage, für Cron
|
||||
./scripts/update.sh --ref v1.4.0 # auf eine bestimmte Fassung
|
||||
./scripts/update.sh --no-pull # nur neu bauen, ohne git pull
|
||||
```
|
||||
|
||||
### Wenn doch etwas schiefgeht
|
||||
|
||||
```bash
|
||||
# Zurück auf den vorigen Stand (die Kennung nennt das Skript beim Abbruch)
|
||||
git checkout <kennung>
|
||||
./scripts/update.sh --no-pull --yes
|
||||
|
||||
# Nur wenn eine Migration die Daten beschädigt hat:
|
||||
./scripts/restore.sh backups/<die-sicherung-von-vorhin>.sql.gz
|
||||
```
|
||||
|
||||
> **Migrationen werden nicht zurückgerollt.** Eine Migration, die eine Spalte
|
||||
> entfernt, ist nicht umkehrbar — deshalb sichert das Skript vorher. Steht
|
||||
> ein Update mit Datenmigration an, lies vorher den Änderungsverlauf
|
||||
> (Versionsnummer in der Fußzeile).
|
||||
|
||||
---
|
||||
|
||||
## Betrieb
|
||||
|
||||
### Zustand ansehen
|
||||
|
||||
```bash
|
||||
docker compose --profile full ps
|
||||
docker compose --profile full logs -f app
|
||||
curl -s localhost:3000/api/health
|
||||
```
|
||||
|
||||
### Neu starten
|
||||
|
||||
```bash
|
||||
docker compose --profile full restart app
|
||||
```
|
||||
|
||||
### Speicher- und Plattenverbrauch
|
||||
|
||||
```bash
|
||||
docker stats --no-stream nebula-app nebula-db
|
||||
docker system df
|
||||
docker image prune -f # alte Abbilder nach mehreren Updates
|
||||
```
|
||||
|
||||
### Automatischer Abgleich
|
||||
|
||||
Standardmäßig **aus**. Einzuschalten unter *Admin-Einstellungen →
|
||||
Automatischer Abgleich*: Abstand, Repositories je Durchlauf, ob fertige
|
||||
Projekte ausgelassen werden. Der Zeitgeber läuft im Serverprozess selbst —
|
||||
kein zusätzlicher Container, kein Cron.
|
||||
|
||||
Wer lieber von außen taktet, lässt ihn aus und ruft
|
||||
`POST /api/admin/sync/run` auf.
|
||||
|
||||
---
|
||||
|
||||
## Härtung, die schon eingebaut ist
|
||||
|
||||
Damit du weißt, worum du dich **nicht** kümmern musst:
|
||||
|
||||
- Der Container läuft als **unprivilegierter Benutzer** (`nextjs`, UID 1001),
|
||||
nicht als root.
|
||||
- **Content-Security-Policy** mit Nonce, `strict-dynamic` und ohne
|
||||
`unsafe-inline` für Skripte.
|
||||
- **CSRF-Prüfung** über `Sec-Fetch-Site`/`Origin` bei jedem schreibenden
|
||||
Zugriff.
|
||||
- **SSRF-Schutz** bei allen ausgehenden Aufrufen: jede Adresse wird
|
||||
aufgelöst und gegen Loopback, Link-Local und Metadaten-Endpunkte geprüft,
|
||||
Weiterleitungen eingeschlossen.
|
||||
- **Ratenbegrenzung** auf Anmeldung, ausgehende Abrufe und schreibende
|
||||
Zugriffe; Kontosperre nach acht Fehlversuchen.
|
||||
- **Git-Tokens** liegen AES-256-GCM-verschlüsselt in der Datenbank und
|
||||
verlassen den Server nie — auch nicht im Export.
|
||||
- Der **Bildoptimierer** von Next ist abgeschaltet: Nebula benutzt ihn nicht,
|
||||
und `/_next/image` wäre sonst eine Angriffsfläche ohne Gegenwert.
|
||||
|
||||
### Was du beisteuern musst
|
||||
|
||||
- **TLS** über den Reverse Proxy
|
||||
- **`APP_SECRET`** lang und zufällig
|
||||
- **Datenbankport** nicht nach außen öffnen
|
||||
- **Sicherungen** wegschaffen
|
||||
- **Systemupdates**: `unattended-upgrades` für das Betriebssystem,
|
||||
`./scripts/update.sh` für Nebula
|
||||
|
||||
---
|
||||
|
||||
## Mehrbenutzerbetrieb
|
||||
|
||||
Nebula kann beides. Im Einzelbetrieb gibt es genau ein Konto und keine
|
||||
Registrierung. Umschalten unter *Admin-Einstellungen*.
|
||||
|
||||
Wichtig zu wissen: **Projekte sind zwischen Konten hart getrennt.** Auch ein
|
||||
Administrator sieht fremde Projekte nicht — er verwaltet Konten, keine
|
||||
Inhalte. Wer gemeinsam an einem Projekt arbeiten will, ist mit Nebula falsch
|
||||
beraten; das ist [bewusst nicht](ROADMAP.md) vorgesehen.
|
||||
|
||||
Die Selbstregistrierung ist standardmäßig aus. Lass sie aus, wenn die
|
||||
Instanz aus dem Internet erreichbar ist und du nicht willst, dass sich
|
||||
Fremde Konten anlegen.
|
||||
+149
-2
@@ -109,13 +109,31 @@ Der Status ist **direkt auf der Projektkarte** umschaltbar, ohne den Detailberei
|
||||
|
||||
## 2. Dashboard
|
||||
|
||||
### Schnellerfassung
|
||||
|
||||
Ein Blitzsymbol in der Kopfleiste, auf jeder Seite erreichbar. Ein Feld, Enter, fertig —
|
||||
als **Idee** entsteht ein Projekt im Status `IDEA`, als **Aufgabe** eine Aufgabe im
|
||||
gewählten Projekt (`TODO`). Alles Weitere setzen die Vorgaben des Schemas.
|
||||
|
||||
Der Dialog **bleibt nach dem Anlegen offen** und leert nur das Feld. Wer eine Idee
|
||||
notiert, hat meistens gleich die nächste; ihn jedes Mal neu zu öffnen wäre genau die
|
||||
Hürde, die hier wegsoll. Angelegtes wird darunter mit Link bestätigt. Das zuletzt
|
||||
gewählte Projekt wird gemerkt.
|
||||
|
||||
Der Einstieg sitzt in der Kopfleiste und nicht als schwebender Knopf unten rechts —
|
||||
dort wäre er auf schmalen Anzeigen mit der Auswahlleiste kollidiert.
|
||||
|
||||
### Überblick
|
||||
|
||||
- **Kennzahlen** oben: Anzahl Projekte mit Ø-Fortschritt, offene Ideen, aktive
|
||||
Entwicklungen, fertige Projekte, verknüpfte Repositories.
|
||||
Entwicklungen, fertige Projekte, verknüpfte Repositories. Auf dem Telefon zweispaltig,
|
||||
damit die Projekte nicht erst nach dem zweiten Wischen beginnen.
|
||||
- **Volltextsuche** über Name, Kurzbeschreibung, Beschreibung, Tags und Repo-Pfad.
|
||||
- **Statusfilter** als Chips mit Trefferzähler, mehrere gleichzeitig kombinierbar.
|
||||
- **Sortierung** nach zuletzt geändert, Anlagedatum, Name, Fortschritt oder Priorität —
|
||||
Favoriten bleiben stets oben.
|
||||
- **Drei Ansichten**: freies Raster, nach Status gruppierte Abschnitte oder **Kanban**.
|
||||
- **Vier Ansichten**: freies Raster, **kompakte Liste**, nach Status gruppierte Abschnitte
|
||||
oder **Kanban**.
|
||||
- **Volltextsuche über Notizen.** Die Suche im Board arbeitet auf den geladenen Projekten
|
||||
(Name, Kurzbeschreibung, Tags, Repo-Pfad). Notizen liegen dort nicht vor — sie
|
||||
mitzuladen würde die Seite aufblähen. Stattdessen sucht Postgres serverseitig mit
|
||||
@@ -165,6 +183,23 @@ Karte dauerhaft eines steht. Sobald etwas ausgewählt ist, fährt unten eine Lei
|
||||
Was der Filter ausblendet, fällt aus der Auswahl. Sonst träfe eine Massenänderung Projekte,
|
||||
die man gar nicht mehr vor Augen hat. Fremde IDs fallen serverseitig still unter den Tisch.
|
||||
|
||||
### Liste
|
||||
|
||||
Eine Zeile je Projekt, alle gleich aufgebaut: Statusfarbe als Streifen, Name,
|
||||
Fortschrittsbalken mit Prozentwert, danach Aufgaben, Notizen, Branch und Alter des
|
||||
letzten Commits. Der Statuswechsler sitzt rechts, die ganze Zeile ist ein Link.
|
||||
|
||||
Gedacht ist die Ansicht für zwei Fälle:
|
||||
|
||||
- **Auf dem Telefon.** Eine Karte braucht rund 260 px Höhe und steht dort zwangsläufig
|
||||
allein in der Zeile — fünf Projekte füllen zwei Bildschirme, bevor man überhaupt
|
||||
etwas vergleichen kann. Eine Zeile kommt mit einem Viertel davon aus.
|
||||
- **Beim Vergleichen.** Weil alle Zeilen gleich gebaut sind, liegen Name, Fortschritt
|
||||
und Status untereinander. Genau das verliert das Raster, sobald es einspaltig wird.
|
||||
|
||||
Was nicht mehr in die Zeile passt, fällt der Reihe nach weg, statt sie zu sprengen:
|
||||
Notizen ab `sm`, Branch ab `md`, der letzte Commit und die Priorität ab `lg`.
|
||||
|
||||
### Kanban
|
||||
|
||||
Spalten je Status, Karten per Ziehen verschiebbar. Der Wechsel wird sofort angezeigt und
|
||||
@@ -255,6 +290,46 @@ statt verschoben.
|
||||
|
||||
---
|
||||
|
||||
## 2b. Aufgaben über alle Projekte
|
||||
|
||||
Die Seite `/tasks` sammelt jede Aufgabe aus jedem Projekt an einer Stelle. Erreichbar
|
||||
über die Kopfleiste und die Schnellsuche.
|
||||
|
||||
**Geordnet wird nach Fälligkeit, nicht nach Spalte.** Projektübergreifend lautet die
|
||||
Frage „was ist überfällig", nicht „was steht wo im Brett". Die Fächer:
|
||||
|
||||
| Fach | Inhalt |
|
||||
| --- | --- |
|
||||
| **Überfällig** | Termin liegt vor heute |
|
||||
| **Heute** | Termin ist der heutige Kalendertag |
|
||||
| **Diese Woche** | in den nächsten sieben Tagen |
|
||||
| **Später** | alles danach |
|
||||
| **Ohne Termin** | kein Fälligkeitsdatum gesetzt |
|
||||
|
||||
Gerechnet wird auf **Kalendertage in fester Zeitzone** (Europe/Berlin), nicht auf
|
||||
Stunden und nicht nach Serverzeit. Eine heute um 9 Uhr fällige Aufgabe ist um 17 Uhr
|
||||
nicht überfällig, sondern immer noch „heute" — sonst wanderte die halbe Liste im Lauf
|
||||
des Tages nach oben. Und im Container läuft die Anwendung nach UTC; ohne feste Zeitzone
|
||||
kippte die Einteilung abends um einen Tag. Das Fach bestimmt der **Server**, damit
|
||||
Server-Render und Hydration nicht auseinanderlaufen.
|
||||
|
||||
- **Filter** nach Status (mit Zähler) und Projekt; Erledigtes ist ausgeblendet und
|
||||
einzeln zuschaltbar.
|
||||
- **Abhaken direkt aus der Liste.** Der Endpunkt erledigt dabei den Rest: Zeitpunkt,
|
||||
abgeleiteter Projektfortschritt und — bei wiederkehrenden Aufgaben — die nächste
|
||||
Fassung.
|
||||
- Jede Zeile nennt ihr **Projekt** und verlinkt es; ohne das ist eine übergreifende
|
||||
Liste nicht zu lesen. Stammt die Aufgabe aus einem Git-Issue, führt ein Symbol dorthin.
|
||||
|
||||
**Bewusst nicht sortierbar per Ziehen.** Die Position einer Aufgabe gilt innerhalb ihrer
|
||||
Spalte in ihrem Projekt; hier wäre sie ohne Bedeutung. Eine Reihenfolge anzubieten, die
|
||||
nirgends ankommt, wäre ein Versprechen, das die Seite nicht halten kann.
|
||||
|
||||
Die Aufgabe kennt keinen Besitzer — die Trennung läuft über das Projekt
|
||||
(`project: { ownerId }` als einzige und erste Bedingung).
|
||||
|
||||
---
|
||||
|
||||
## 3. Notizen
|
||||
|
||||
- **Beliebig viele Notizen pro Projekt**, mit optionalem Titel und mehrzeiligem Text.
|
||||
@@ -428,6 +503,78 @@ Dateneinsicht. Ein Administrator sieht dadurch weiterhin keine fremden Projekte.
|
||||
- **Zeitlimit** pro Aufruf über `GIT_API_TIMEOUT_MS` einstellbar; die Teilabfragen laufen
|
||||
parallel, eine fehlschlagende Liste bricht den restlichen Sync nicht ab.
|
||||
|
||||
### 4.6 Aufgabe ↔ Git-Issue
|
||||
|
||||
Die Verbindung geht in beide Richtungen — mit einer bewussten Grenze.
|
||||
|
||||
**Nebula → Git.** Ein Knopf im Aufgabendialog legt zur Aufgabe ein Issue im
|
||||
verknüpften Repository an. Nummer und Adresse landen an der Aufgabe (`sourceIssue`,
|
||||
`sourceUrl`, `sourceRepositoryId` — dieselben Felder, die die Übernahme aus Issues seit
|
||||
v0.9.0 füllt, samt Eindeutigkeit je Repository gegen Dubletten). In den Rumpf kommt ein
|
||||
Rückverweis auf das Projekt.
|
||||
|
||||
Ausdrücklich **per Knopf und nie nebenbei**: was in ein fremdes System geschrieben wird,
|
||||
soll jemand gewollt haben. Danach wandert der Zustand allerdings mit — erledigt schließt
|
||||
das Issue, ein Zurückziehen öffnet es wieder. Schlägt der Aufruf fehl, zieht die Aufgabe
|
||||
trotzdem um; ein nicht erreichbares Git-System darf das Abhaken nicht verhindern.
|
||||
|
||||
**Git → Nebula** über Webhooks, siehe unten.
|
||||
|
||||
**Die Zustände passen nicht aufeinander, und das bleibt so.** Nebula kennt
|
||||
`Offen · In Arbeit · Blockiert · Erledigt`, ein Issue nur offen oder geschlossen. Nach
|
||||
außen geht deshalb nur die Grenze um „erledigt“; ein Rundlauf verliert *In Arbeit* und
|
||||
*Blockiert*. Labels wie `nebula:doing` wären die Alternative, würden aber den
|
||||
Issue-Tracker mit Zuständen füllen, die dort niemand pflegt. Die feine Abstufung bleibt
|
||||
in Nebula.
|
||||
|
||||
Eine echte beidseitige Synchronisation mit Konfliktauflösung gibt es **nicht** — das ist
|
||||
der klassische Ort für stillen Datenverlust.
|
||||
|
||||
**Kein Widerspruch zu „keine eigenen Git-Operationen“:** Issues laufen über die HTTP-API
|
||||
der Provider, dieselbe Schicht wie alles andere (`lib/git/http.ts`, SSRF-Schutz
|
||||
inklusive). Kein Klon, kein Arbeitsverzeichnis. Schreibende Aufrufe folgen dabei
|
||||
**keinen Umleitungen** — ein 307 auf eine interne Adresse nähme den Rumpf und den Token
|
||||
im Header mit.
|
||||
|
||||
### 4.7 Webhooks
|
||||
|
||||
Ein Push aktualisiert den Stand sofort, statt bis zum nächsten Durchlauf des Zeitgebers
|
||||
zu warten; ein geschlossenes Issue hakt seine Aufgabe ab. Der Zeitplan bleibt als
|
||||
Rückfalllösung bestehen.
|
||||
|
||||
Einzurichten am Repository (Funksymbol im Git-Bereich): Nebula erzeugt URL und
|
||||
Geheimnis, eingetragen wird der Haken im Git-System von Hand. Über die API anzulegen
|
||||
wäre machbar, verlangte aber Administrationsrechte am Repository — deutlich mehr, als
|
||||
Nebula sonst braucht.
|
||||
|
||||
Das Geheimnis ist **genau einmal** zu sehen; danach liegt es verschlüsselt in der
|
||||
Datenbank, wie die Zugangstoken, und verlässt den Server nicht mehr.
|
||||
|
||||
| System | Ausweis | Kopfzeile |
|
||||
| --- | --- | --- |
|
||||
| GitHub | HMAC-SHA256 über den Rumpf | `X-Hub-Signature-256: sha256=…` |
|
||||
| Gitea | dieselbe Rechnung, ohne Präfix | `X-Gitea-Signature` (ältere: `X-Hub-Signature-256`) |
|
||||
| GitLab | das Geheimnis im Klartext | `X-Gitlab-Token` |
|
||||
|
||||
GitLabs Verfahren ist schwächer: es beweist nur, dass der Absender das Geheimnis kennt,
|
||||
nicht dass der Rumpf unverändert ist. Mehr gibt die Plattform nicht her; verglichen wird
|
||||
trotzdem zeitkonstant.
|
||||
|
||||
Geprüft wird gegen den **rohen** Rumpf — durch `JSON.parse` und `JSON.stringify` gedreht
|
||||
käme eine andere Zeichenfolge heraus und die Signatur passte nie.
|
||||
|
||||
Was der Endpunkt bewusst **nicht** tut: den Rumpf als Quelle für Inhalte benutzen. Titel,
|
||||
Beschreibung und Zustand kommen weiter aus Nebula beziehungsweise beim nächsten Abgleich
|
||||
aus der API. Wer das Geheimnis kennt, kann also höchstens eine Aufgabe auf- oder zumachen
|
||||
und einen Abgleich auslösen — keine beliebigen Daten einschleusen.
|
||||
|
||||
Unbekannte Ereignisse werden angenommen und liegen gelassen. Ein Fehler brächte das
|
||||
Git-System zum Wiederholen und irgendwann zum Abschalten des Hakens.
|
||||
|
||||
Der Endpunkt ist der einzige ohne Anmeldung, der schreibt. Deshalb: Ratenbegrenzung je
|
||||
Repository (60/Minute), Deckel auf die Rumpfgröße, und ein unbekanntes Repository
|
||||
antwortet wie ein nicht eingerichtetes — mit 404, damit die ID nicht bestätigt wird.
|
||||
|
||||
---
|
||||
|
||||
## 4a. Export, Import und Sicherung
|
||||
|
||||
@@ -31,7 +31,8 @@ Alle Daten liegen in **deiner lokalen PostgreSQL**. Es gibt keinen Cloud-Dienst
|
||||
Access Tokens werden verschlüsselt abgelegt.
|
||||
|
||||
Eine vollständige Auflistung aller Funktionen steht in **[FEATURES.md](FEATURES.md)**,
|
||||
geplante Erweiterungen in **[ROADMAP.md](ROADMAP.md)**.
|
||||
geplante Erweiterungen in **[ROADMAP.md](ROADMAP.md)**. Für den Dauerbetrieb auf einem
|
||||
Server — TLS, Firewall, Sicherungen und Updates — gibt es **[DEPLOYMENT.md](DEPLOYMENT.md)**.
|
||||
|
||||
---
|
||||
|
||||
@@ -51,7 +52,7 @@ node scripts/setup.mjs # legt .env an und erzeugt ein zufälliges APP_SECRE
|
||||
Die App läuft nativ auf dem Rechner, nur PostgreSQL kommt aus dem Container:
|
||||
|
||||
```bash
|
||||
docker compose up -d db # Postgres 17 auf localhost:5432
|
||||
npm run docker:db # Postgres 17 auf 127.0.0.1:5432
|
||||
npm install
|
||||
npm run db:migrate # Schema anlegen
|
||||
npm run db:seed # optional: drei Beispielprojekte
|
||||
@@ -119,10 +120,10 @@ Alle Variablen sind in [`.env.example`](.env.example) dokumentiert.
|
||||
| `APP_SECRET` | Schlüssel für die Token-Verschlüsselung (AES-256-GCM) | — **unbedingt setzen** |
|
||||
| `SESSION_TTL_DAYS` | Lebensdauer einer Anmeldung in Tagen | `30` |
|
||||
| `PORT` | Port der Anwendung | `3000` |
|
||||
| `APP_PORT` | Host-Port-Mapping des App-Containers | `3000` |
|
||||
| `APP_PORT` | Host-Port-Mapping des App-Containers | `127.0.0.1:3000` |
|
||||
| `POSTGRES_USER` / `POSTGRES_PASSWORD` / `POSTGRES_DB` | Zugangsdaten des DB-Containers | `nebula` |
|
||||
| `POSTGRES_PORT` | Host-Port der Datenbank | `5432` |
|
||||
| `ADMINER_PORT` | Host-Port von Adminer (`--profile tools`) | `8080` |
|
||||
| `POSTGRES_PORT` | Host-Port der Datenbank — wirkt nur mit `docker-compose.dev.yml`, sonst hat die DB keinen | `127.0.0.1:5432` |
|
||||
| `ADMINER_PORT` | Host-Port von Adminer (`--profile tools`) | `127.0.0.1:8080` |
|
||||
| `GIT_API_TIMEOUT_MS` | Timeout für Git-API-Aufrufe | `15000` |
|
||||
| `GIT_ALLOW_LOOPBACK` | Git-Instanz auf demselben Rechner erlauben | `false` |
|
||||
| `GIT_BLOCK_PRIVATE` | Zugriff ins private LAN sperren | `false` |
|
||||
@@ -306,7 +307,7 @@ nebula/
|
||||
| `npm test` | Unit-Tests (Vitest, ohne Datenbank) |
|
||||
| `npm run test:e2e` | Ende-zu-Ende-Tests (Playwright, baut vorher) |
|
||||
| `npm run test:all` | Beides nacheinander |
|
||||
| `npm run docker:db` | Nur die Datenbank starten |
|
||||
| `npm run docker:db` | Nur die Datenbank starten, mit Host-Port für `npm run dev` |
|
||||
| `npm run docker:up` / `docker:down` | Kompletten Stack starten / stoppen |
|
||||
| `npm run docker:tools` | Adminer auf `http://localhost:8080` |
|
||||
|
||||
@@ -415,7 +416,7 @@ Grenzen, die du kennen solltest:
|
||||
|
||||
| Symptom | Ursache / Lösung |
|
||||
| --- | --- |
|
||||
| `Can't reach database server` | Läuft `docker compose up -d db`? Stimmt `DATABASE_URL`? |
|
||||
| `Can't reach database server` | Läuft `npm run docker:db`? Ein blosses `docker compose up -d db` startet die DB **ohne Host-Port** — dann ist sie von `npm run dev` aus nicht erreichbar. Stimmt `DATABASE_URL`? |
|
||||
| `The table ... does not exist` | Migrationen fehlen: `npm run db:migrate` |
|
||||
| Sync meldet `401` | Token abgelaufen oder falsche Scopes — unter Git-Verbindungen neu setzen |
|
||||
| Sync meldet `404` | Owner/Repo prüfen; bei GitLab gehört die volle Gruppenkette in „Owner" |
|
||||
|
||||
+34
-6
@@ -11,12 +11,19 @@ Was bereits steht, listet [FEATURES.md](FEATURES.md).
|
||||
|
||||
## 1 · Als Nächstes empfohlen
|
||||
|
||||
### 1.1 Webhooks statt Polling `M`
|
||||
### 1.0 Rest aus v1.6.0: persönliche API-Token `M`
|
||||
|
||||
Ein Push aktualisiert den Snapshot sofort, statt bis zum nächsten Durchlauf
|
||||
zu warten. Braucht einen öffentlich erreichbaren Endpunkt mit
|
||||
Signaturprüfung je Provider — sinnvoll erst, wenn die Instanz von außen
|
||||
erreichbar ist. Der Zeitplan bleibt als Rückfalllösung.
|
||||
Schnellerfassung und die projektübergreifende Aufgabenseite sind mit v1.6.0
|
||||
ausgeliefert. Offen bleibt der dritte Teil — siehe 1.3. Er gehört sachlich
|
||||
dazu: erfassen am Telefon, überblicken an einer Stelle, ansprechen per
|
||||
Shortcut.
|
||||
|
||||
Bewusst nicht mitgeliefert wurde ein **Index für die übergreifende
|
||||
Aufgabenabfrage**. `Task` hat kein `ownerId`, die Trennung läuft über
|
||||
`project: { ownerId }`, und `[projectId, status, position]` greift dafür
|
||||
nicht. Bei einigen hundert Aufgaben fällt das nicht auf; wird die Seite
|
||||
träge, ist ein Index auf `dueDate` der erste Griff — und dann eine
|
||||
Migration wert.
|
||||
|
||||
---
|
||||
|
||||
@@ -36,6 +43,24 @@ Sitzungen.
|
||||
|
||||
---
|
||||
|
||||
### 1.4 Aufgaben ↔ Issues: was noch fehlt `S`
|
||||
|
||||
Mit v1.7.0 stehen beide Richtungen: „als Issue anlegen“ und der Rückweg über
|
||||
Webhooks. Offen geblieben ist Kleinkram:
|
||||
|
||||
- **Mehrere Repositories.** Der Knopf nimmt immer das führende. Bei einem
|
||||
Projekt aus Frontend und Backend fehlt die Wahl.
|
||||
- **Beim Übernehmen aus Issues** wird der Rückweg nicht automatisch
|
||||
eingerichtet — der Webhook ist getrennt zu setzen.
|
||||
|
||||
Was **nicht** kommt, bleibt wie besprochen: eine echte beidseitige
|
||||
Synchronisation mit Konfliktauflösung. Die Zustände passen ohnehin nicht
|
||||
aufeinander — ein Issue kennt nur offen und geschlossen, `DOING` und
|
||||
`BLOCKED` gehen im Rundlauf verloren. Das ist hingenommen, statt den
|
||||
Issue-Tracker mit Labels zu füllen, die dort niemand pflegt.
|
||||
|
||||
---
|
||||
|
||||
## 2 · Größere Brocken
|
||||
|
||||
### 2.1 Passwort-Zurücksetzen per E-Mail `M`
|
||||
@@ -58,7 +83,7 @@ Voraussetzung, falls du das Projekt veröffentlichen willst.
|
||||
| Globale Zeitleiste | `S` | Derselbe Verlauf, aber projektübergreifend als eigene Seite |
|
||||
| Suche über Aufgaben | `S` | Die Volltextsuche deckt bisher nur Notizen ab |
|
||||
| Suchtreffer in Notizen hervorheben | `S` | In der Notiz selbst, nicht nur in der Trefferliste |
|
||||
| Aufgabe ↔ Commit verknüpfen | `M` | Enthält ein Commit `#5`, wird die übernommene Aufgabe verlinkt |
|
||||
| Aufgabe ↔ Commit verknüpfen | `M` | Enthält ein Commit `#5`, wird die übernommene Aufgabe verlinkt — fällt weitgehend mit 1.4 ab |
|
||||
| Tastaturkürzel-Übersicht mit `?` | `S` | Es gibt inzwischen genug davon |
|
||||
| Hell/Dunkel umschaltbar | `M` | Aktuell nur dunkel |
|
||||
| Eigenes Logo und Farbe | `S` | Ergänzt `APP_NAME` |
|
||||
@@ -110,6 +135,9 @@ Damit klar ist, was **nicht** kommt und warum:
|
||||
| **v1.2.0** Commit-Heatmap über ein Jahr, Projektvorlagen | ✓ |
|
||||
| **v1.3.0** Wiederkehrende Aufgaben, Barrierefreiheit nach WCAG 2.1 AA | ✓ |
|
||||
| **v1.4.0** README-Vorschau auf der Projektseite | ✓ |
|
||||
| **v1.5.0** Sicherheitsdurchsicht, Server-Anleitung und Update-Skript | ✓ |
|
||||
| **v1.6.0** Mobile Ansicht, Listenansicht, Schnellerfassung, Aufgaben über alle Projekte | ✓ |
|
||||
| **v1.7.0** Aufgabe als Git-Issue anlegen, Webhooks für Push und Issues | ✓ |
|
||||
|
||||
Zur Entscheidung beim Export: Git-Tokens gehen **nicht** mit. Die Verbindung wird nur
|
||||
beschrieben, das Token ist nach dem Import neu zu hinterlegen. Snapshots bleiben
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Overlay fuer die Entwicklung: macht die Datenbank auf dem Host erreichbar.
|
||||
#
|
||||
# Gebraucht wird das nur, wenn die Anwendung ausserhalb des Containers
|
||||
# laeuft – "npm run dev" verbindet sich dann ueber localhost:5432. Im
|
||||
# Vollbetrieb spricht die Anwendung "db:5432" im Docker-Netz an und braucht
|
||||
# diese Datei nicht.
|
||||
#
|
||||
# Aufruf:
|
||||
# docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d db
|
||||
# npm run dev
|
||||
#
|
||||
# Kuerzer: npm run docker:db
|
||||
#
|
||||
# Gebunden wird auf 127.0.0.1, nicht auf 0.0.0.0. Docker traegt Freigaben
|
||||
# direkt in iptables ein und umgeht dabei ufw – eine offene Bindung stuende
|
||||
# also auch bei aktiver Firewall im Netz.
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
|
||||
services:
|
||||
db:
|
||||
ports:
|
||||
- "${POSTGRES_PORT:-127.0.0.1:5432}:5432"
|
||||
@@ -0,0 +1,46 @@
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Overlay fuer den Serverbetrieb: kein einziger Port geht zum Host.
|
||||
#
|
||||
# Gedacht fuer einen Docker-Host, auf dem mehrere Stacks liegen und ein
|
||||
# gemeinsamer Reverse Proxy die einzige Tuer nach draussen ist. Die
|
||||
# Datenbank veroeffentlicht ohnehin nichts; diese Datei nimmt zusaetzlich
|
||||
# die Freigabe der Anwendung zurueck und haengt sie in ein geteiltes Netz,
|
||||
# ueber das der Proxy sie erreicht.
|
||||
#
|
||||
# Aufruf:
|
||||
# docker compose -f docker-compose.yml -f docker-compose.server.yml \
|
||||
# --profile full up -d --build
|
||||
#
|
||||
# Bequemer ist, das dauerhaft in die .env zu schreiben:
|
||||
# COMPOSE_FILE=docker-compose.yml:docker-compose.server.yml
|
||||
# COMPOSE_PROFILES=full
|
||||
# Danach genuegt ueberall "docker compose up -d" – auch in update.sh.
|
||||
# (Trennzeichen: Doppelpunkt unter Linux, Semikolon unter Windows.)
|
||||
#
|
||||
# Das Netz muss es vorher geben (der Proxy-Stack legt es ueblicherweise an):
|
||||
# docker network create proxy
|
||||
#
|
||||
# Im Proxy zeigt das Ziel dann auf http://nebula:3000 bzw. nebula-app:3000.
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
|
||||
services:
|
||||
app:
|
||||
# !reset loescht die Portfreigabe aus der Basisdatei. Ohne dieses Tag
|
||||
# wuerden die Listen zusammengefuegt statt ersetzt – Compose behandelt
|
||||
# "ports" beim Zusammenfuehren als anzuhaengende Liste. Braucht
|
||||
# Compose 2.24 oder neuer.
|
||||
ports: !reset []
|
||||
networks:
|
||||
# Das stackeigene Netz: darueber spricht die Anwendung mit der Datenbank.
|
||||
default:
|
||||
# Das geteilte Netz zum Reverse Proxy. Der Alias ist der Name, unter dem
|
||||
# der Proxy Nebula anspricht – kurz und eindeutig, denn "app" hiessen in
|
||||
# einem geteilten Netz schnell mehrere Container.
|
||||
proxy:
|
||||
aliases:
|
||||
- ${PROXY_ALIAS:-nebula}
|
||||
|
||||
networks:
|
||||
proxy:
|
||||
external: true
|
||||
name: ${PROXY_NETWORK:-proxy}
|
||||
+21
-9
@@ -1,14 +1,20 @@
|
||||
name: nebula
|
||||
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Zwei Betriebsarten aus einer Datei:
|
||||
# Diese Datei veroeffentlicht nur einen einzigen Port, und den auf dem
|
||||
# Loopback: den der Anwendung. Die Datenbank bleibt im Docker-Netz.
|
||||
#
|
||||
# 1) Standalone-Entwicklung – nur die Datenbank im Container:
|
||||
# docker compose up -d db
|
||||
# 1) Alles im Container (Server wie Entwicklung):
|
||||
# docker compose --profile full up -d --build
|
||||
#
|
||||
# 2) Standalone-Entwicklung – Datenbank im Container, App auf dem Host.
|
||||
# Dafuer muss Postgres auf dem Host erreichbar sein, also mit dem
|
||||
# Entwicklungs-Overlay (oder kurz: npm run docker:db):
|
||||
# docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d db
|
||||
# npm run dev
|
||||
#
|
||||
# 2) Alles im Container:
|
||||
# docker compose --profile full up -d --build
|
||||
# 3) Server ohne jede Portfreigabe, hinter einem Reverse Proxy im
|
||||
# gemeinsamen Docker-Netz: siehe docker-compose.server.yml
|
||||
#
|
||||
# Optionales DB-Webinterface:
|
||||
# docker compose --profile tools up -d adminer → http://localhost:8080
|
||||
@@ -25,8 +31,10 @@ services:
|
||||
POSTGRES_DB: ${POSTGRES_DB:-nebula}
|
||||
# Deterministische Sortierung unabhaengig vom Host-Locale
|
||||
POSTGRES_INITDB_ARGS: "--encoding=UTF8"
|
||||
ports:
|
||||
- "${POSTGRES_PORT:-5432}:5432"
|
||||
# Absichtlich keine Portfreigabe: die Anwendung erreicht die Datenbank im
|
||||
# Container ueber "db:5432", und backup.sh geht ueber "docker exec". Nach
|
||||
# aussen muss hier nichts. Wer die Datenbank vom Host aus braucht – fuer
|
||||
# "npm run dev" oder psql – nimmt docker-compose.dev.yml dazu.
|
||||
volumes:
|
||||
- nebula-db-data:/var/lib/postgresql/data
|
||||
healthcheck:
|
||||
@@ -73,7 +81,11 @@ services:
|
||||
PORT: 3000
|
||||
HOSTNAME: 0.0.0.0
|
||||
ports:
|
||||
- "${APP_PORT:-3000}:3000"
|
||||
# Nur auf dem Loopback: nach draussen kommt man ueber den Reverse Proxy.
|
||||
# Docker schreibt seine Freigaben an ufw vorbei direkt in iptables – eine
|
||||
# Bindung auf 0.0.0.0 stuende also im Netz, auch bei aktiver Firewall.
|
||||
# Ganz ohne Host-Port: docker-compose.server.yml.
|
||||
- "${APP_PORT:-127.0.0.1:3000}:3000"
|
||||
|
||||
adminer:
|
||||
profiles: ["tools"]
|
||||
@@ -87,7 +99,7 @@ services:
|
||||
ADMINER_DEFAULT_SERVER: db
|
||||
ADMINER_DESIGN: dracula
|
||||
ports:
|
||||
- "${ADMINER_PORT:-8080}:8080"
|
||||
- "${ADMINER_PORT:-127.0.0.1:8080}:8080"
|
||||
|
||||
volumes:
|
||||
nebula-db-data:
|
||||
|
||||
Regular → Executable
+116
@@ -279,6 +279,109 @@ test("Mehrere Repositories je Projekt", async ({ request, playwright }) => {
|
||||
expect(zumSchluss.repositories[0].repoName).toBe("swr");
|
||||
});
|
||||
|
||||
test("Webhook: Signatur entscheidet, sonst passiert nichts", async ({ request, playwright }) => {
|
||||
await login(request, ADMIN);
|
||||
|
||||
const projekt = (
|
||||
await (
|
||||
await request.post("/api/projects", {
|
||||
data: { name: "Hakenprojekt", repoUrl: "https://github.com/vercel/swr" },
|
||||
})
|
||||
).json()
|
||||
).project;
|
||||
const repoId = projekt.repositories[0].id;
|
||||
|
||||
// Ohne eingerichteten Webhook ist der Endpunkt stumm – und zwar mit 404,
|
||||
// damit die ID nicht bestaetigt wird.
|
||||
const ohne = await request.post(`/api/webhooks/${repoId}`, {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
data: { action: "closed", issue: { number: 1 } },
|
||||
});
|
||||
expect(ohne.status()).toBe(404);
|
||||
|
||||
// Einrichten liefert das Geheimnis genau einmal zurueck.
|
||||
const eingerichtet = await request.post(`/api/repositories/${repoId}/webhook`);
|
||||
expect(eingerichtet.status()).toBe(200);
|
||||
const { secret, url } = await eingerichtet.json();
|
||||
expect(typeof secret).toBe("string");
|
||||
expect(secret.length).toBeGreaterThanOrEqual(64);
|
||||
expect(url).toContain(`/api/webhooks/${repoId}`);
|
||||
|
||||
// Und danach nirgends mehr: weder im Projekt noch am Repository.
|
||||
const geladen = await (await request.get(`/api/projects/${projekt.id}`)).json();
|
||||
expect(JSON.stringify(geladen)).not.toContain(secret);
|
||||
expect(geladen.project.repositories[0].webhookSecret).toBeUndefined();
|
||||
|
||||
// Eine Aufgabe, die an einem Issue haengt – von Hand gesetzt gibt es
|
||||
// nicht, also ueber die Uebernahme aus dem Snapshot. Stattdessen prueft
|
||||
// dieser Test die Grenze selbst: ohne gueltige Signatur passiert nichts.
|
||||
const rumpf = JSON.stringify({ action: "closed", issue: { number: 4242 } });
|
||||
|
||||
const falsch = await request.post(`/api/webhooks/${repoId}`, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-GitHub-Event": "issues",
|
||||
"X-Hub-Signature-256": "sha256=00",
|
||||
},
|
||||
data: rumpf,
|
||||
});
|
||||
expect(falsch.status()).toBe(401);
|
||||
|
||||
const gar_keine = await request.post(`/api/webhooks/${repoId}`, {
|
||||
headers: { "Content-Type": "application/json", "X-GitHub-Event": "issues" },
|
||||
data: rumpf,
|
||||
});
|
||||
expect(gar_keine.status()).toBe(401);
|
||||
|
||||
// Mit richtiger Signatur wird der Aufruf angenommen. Zu Issue 4242 gibt
|
||||
// es keine Aufgabe – erwartet ist also "angenommen, nichts zugeordnet".
|
||||
const { createHmac } = await import("node:crypto");
|
||||
const signatur = createHmac("sha256", secret).update(rumpf, "utf8").digest("hex");
|
||||
const richtig = await request.post(`/api/webhooks/${repoId}`, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-GitHub-Event": "issues",
|
||||
"X-Hub-Signature-256": `sha256=${signatur}`,
|
||||
},
|
||||
data: rumpf,
|
||||
});
|
||||
expect(richtig.status()).toBe(200);
|
||||
const antwort = await richtig.json();
|
||||
expect(antwort).toMatchObject({ ok: true, handled: "issue", matched: false });
|
||||
|
||||
// Dieselbe Signatur zu einem anderen Rumpf gilt nicht.
|
||||
const veraendert = await request.post(`/api/webhooks/${repoId}`, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-GitHub-Event": "issues",
|
||||
"X-Hub-Signature-256": `sha256=${signatur}`,
|
||||
},
|
||||
data: JSON.stringify({ action: "closed", issue: { number: 9999 } }),
|
||||
});
|
||||
expect(veraendert.status()).toBe(401);
|
||||
|
||||
// Fremde Konten koennen den Haken weder einrichten noch zuruecknehmen.
|
||||
const fremd = await playwright.request.newContext({
|
||||
baseURL: test.info().project.use.baseURL,
|
||||
});
|
||||
await login(fremd, ZWEITER);
|
||||
expect((await fremd.post(`/api/repositories/${repoId}/webhook`)).status()).toBe(404);
|
||||
expect((await fremd.delete(`/api/repositories/${repoId}/webhook`)).status()).toBe(404);
|
||||
await fremd.dispose();
|
||||
|
||||
// Zuruecknehmen schliesst den Endpunkt wieder.
|
||||
expect((await request.delete(`/api/repositories/${repoId}/webhook`)).ok()).toBeTruthy();
|
||||
const danach = await request.post(`/api/webhooks/${repoId}`, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-GitHub-Event": "issues",
|
||||
"X-Hub-Signature-256": `sha256=${signatur}`,
|
||||
},
|
||||
data: rumpf,
|
||||
});
|
||||
expect(danach.status()).toBe(404);
|
||||
});
|
||||
|
||||
test("Brett: Reihenfolge und Mehrfachauswahl", async ({ request, playwright }) => {
|
||||
await login(request, ADMIN);
|
||||
|
||||
@@ -532,6 +635,19 @@ test("Projektvorlagen: aus Projekt sichern und anwenden", async ({ request, play
|
||||
expect((await request.delete(`/api/templates/${vorlage.id}`)).ok()).toBeTruthy();
|
||||
});
|
||||
|
||||
test("Der Bildoptimierer ist zu", async ({ playwright }) => {
|
||||
// /_next/image reicht jedes Bild durch sharp und damit durch libvips, fuer
|
||||
// das es regelmaessig Schwachstellen gibt. Nebula benutzt next/image
|
||||
// nirgends – der Endpunkt darf ohne Anmeldung nicht antworten.
|
||||
const anonym = await playwright.request.newContext({
|
||||
baseURL: test.info().project.use.baseURL,
|
||||
maxRedirects: 0,
|
||||
});
|
||||
const antwort = await anonym.get("/_next/image?url=%2Ficon-192.png&w=64&q=75");
|
||||
expect(antwort.status(), "kein 200 ohne Anmeldung").not.toBe(200);
|
||||
await anonym.dispose();
|
||||
});
|
||||
|
||||
test("Export enthaelt keine Geheimnisse, Import beachtet die Strategie", async ({ request }) => {
|
||||
await login(request, ADMIN);
|
||||
|
||||
|
||||
+117
@@ -106,6 +106,123 @@ test("Volltextsuche findet Notizen", async ({ page }) => {
|
||||
await expect(page.getByText("Treffer in Notizen")).toBeVisible();
|
||||
});
|
||||
|
||||
test("Listenansicht auf Telefonbreite ohne seitliches Scrollen", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
|
||||
await page.getByRole("button", { name: "Liste" }).click();
|
||||
await expect(page.getByRole("link", { name: /Projekt Oberflaechentest/ })).toBeVisible();
|
||||
|
||||
// Der eigentliche Punkt der Ansicht: sie passt in die Breite. Frueher schob
|
||||
// die Steuerleiste den Knopf "Neues Projekt" aus dem Bild und die ganze
|
||||
// Seite liess sich seitwaerts schieben.
|
||||
const masse = await page.evaluate(() => ({
|
||||
scrollWidth: document.documentElement.scrollWidth,
|
||||
clientWidth: document.documentElement.clientWidth,
|
||||
}));
|
||||
expect(masse.scrollWidth).toBeLessThanOrEqual(masse.clientWidth + 1);
|
||||
|
||||
// Auch der Knopf muss erreichbar bleiben – auf dieser Breite traegt er nur
|
||||
// noch das Pluszeichen und lebt von seinem aria-label. Geprueft wird die
|
||||
// rechte Kante: genau die lag vorher ausserhalb des Bildschirms.
|
||||
const knopf = page.getByRole("button", { name: "Neues Projekt" });
|
||||
await expect(knopf).toBeVisible();
|
||||
const kasten = await knopf.boundingBox();
|
||||
expect(kasten).not.toBeNull();
|
||||
expect(kasten!.x + kasten!.width).toBeLessThanOrEqual(masse.clientWidth);
|
||||
});
|
||||
|
||||
test("Schnellerfassung legt Idee und Aufgabe mit einem Feld an", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
|
||||
await page.getByRole("button", { name: "Schnell erfassen" }).click();
|
||||
const dialog = page.getByRole("dialog");
|
||||
await expect(dialog).toBeVisible();
|
||||
|
||||
// Idee: nur der Name, alles andere kommt aus den Vorgaben des Schemas.
|
||||
await page.fill("#quick-title", "Aus der Bahn notiert");
|
||||
await dialog.getByRole("button", { name: "Anlegen" }).click();
|
||||
|
||||
// Der Dialog bleibt offen und bestaetigt – das ist der Punkt der
|
||||
// Schnellerfassung: die naechste Idee soll ohne Umweg hineingehen.
|
||||
await expect(dialog.getByText("Angelegt")).toBeVisible();
|
||||
await expect(dialog.getByRole("link", { name: "Aus der Bahn notiert" })).toBeVisible();
|
||||
await expect(page.locator("#quick-title")).toHaveValue("");
|
||||
|
||||
// Aufgabe: derselbe Dialog, ein Feld mehr.
|
||||
await dialog.getByRole("button", { name: "Aufgabe", exact: true }).click();
|
||||
await page.fill("#quick-title", "Unterwegs eingefallen");
|
||||
await expect(page.locator("#quick-project")).toBeVisible();
|
||||
await dialog.getByRole("button", { name: "Anlegen" }).click();
|
||||
await expect(dialog.getByRole("link", { name: "Unterwegs eingefallen" })).toBeVisible();
|
||||
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(dialog).toBeHidden();
|
||||
|
||||
// Die Idee steht als Projekt im Dashboard.
|
||||
await page.goto("/");
|
||||
await expect(page.getByText("Aus der Bahn notiert")).toBeVisible();
|
||||
});
|
||||
|
||||
test("Dialoge weichen der Bildschirmtastatur aus", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.getByRole("button", { name: "Schnell erfassen" }).click();
|
||||
await expect(page.getByRole("dialog")).toBeVisible();
|
||||
|
||||
const TASTATUR = 336;
|
||||
|
||||
/**
|
||||
* Eine echte Tastatur laesst sich nicht einblenden. Stattdessen meldet
|
||||
* visualViewport eine kleinere Hoehe – genau die Schnittstelle, an der
|
||||
* der Dialog haengt. Ueberschrieben wird am echten Objekt: der Dialog
|
||||
* merkt sich beim Oeffnen eine Referenz darauf.
|
||||
*/
|
||||
await page.evaluate((tastatur) => {
|
||||
const fenster = window.visualViewport;
|
||||
if (!fenster) throw new Error("visualViewport fehlt");
|
||||
const hoehe = window.innerHeight - tastatur;
|
||||
Object.defineProperty(fenster, "height", { get: () => hoehe, configurable: true });
|
||||
Object.defineProperty(fenster, "offsetTop", { get: () => 0, configurable: true });
|
||||
fenster.dispatchEvent(new Event("resize"));
|
||||
}, TASTATUR);
|
||||
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
// Eingabefeld und Absendeknopf muessen oberhalb der Tastatur liegen.
|
||||
// Vorher stand der Dialog mittig im vollen Fenster – und damit zur
|
||||
// Haelfte darunter.
|
||||
const frei = 667 - TASTATUR;
|
||||
for (const ziel of [
|
||||
page.locator("#quick-title"),
|
||||
page.getByRole("dialog").getByRole("button", { name: "Anlegen" }),
|
||||
]) {
|
||||
const kasten = await ziel.boundingBox();
|
||||
expect(kasten).not.toBeNull();
|
||||
expect(kasten!.y + kasten!.height).toBeLessThanOrEqual(frei);
|
||||
}
|
||||
|
||||
await page.keyboard.press("Escape");
|
||||
});
|
||||
|
||||
test("Aufgabenuebersicht sammelt ueber alle Projekte und hakt ab", async ({ page }) => {
|
||||
await page.getByRole("link", { name: "Aufgaben", exact: true }).click();
|
||||
await expect(page.getByRole("heading", { name: "Aufgaben", level: 1 })).toBeVisible();
|
||||
|
||||
// Die zuvor per Schnellerfassung angelegte Aufgabe taucht hier auf,
|
||||
// obwohl sie in einem anderen Projekt haengt.
|
||||
const zeile = page.getByRole("listitem").filter({ hasText: "Unterwegs eingefallen" });
|
||||
await expect(zeile).toBeVisible();
|
||||
|
||||
// Abhaken aus der Uebersicht heraus.
|
||||
await zeile.getByRole("button", { name: /abhaken/ }).click();
|
||||
// Ohne "Erledigte einblenden" verschwindet sie damit aus der Liste.
|
||||
await expect(zeile).toBeHidden();
|
||||
|
||||
await page.getByLabel("Erledigte einblenden").check();
|
||||
await expect(
|
||||
page.getByRole("listitem").filter({ hasText: "Unterwegs eingefallen" }),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("Schnellsuche findet Projekt und Notiz", async ({ page }) => {
|
||||
await page.keyboard.press("Control+k");
|
||||
await expect(page.getByRole("dialog", { name: "Schnellsuche" })).toBeVisible();
|
||||
|
||||
@@ -9,6 +9,21 @@ const nextConfig: NextConfig = {
|
||||
poweredByHeader: false,
|
||||
// Prisma darf nicht gebundlet werden, sonst findet der Client seine Engine nicht.
|
||||
serverExternalPackages: ["@prisma/client", "prisma"],
|
||||
images: {
|
||||
/**
|
||||
* Der Bildoptimierer ist abgeschaltet.
|
||||
*
|
||||
* Nebula benutzt next/image nirgends – die paar Symbole sind SVG und
|
||||
* PNG in fester Groesse. Der Endpunkt /_next/image waere aber trotzdem
|
||||
* da, und zwar ohne Anmeldung: die Middleware nimmt ihn aus, weil dort
|
||||
* sonst nur Rechenzeit verbraucht wuerde.
|
||||
*
|
||||
* Er reicht jedes Bild durch sharp und damit durch libvips, fuer das es
|
||||
* regelmaessig Schwachstellen gibt (aktuell CVE-2026-33327 und drei
|
||||
* weitere). Eine Angriffsflaeche ohne Gegenwert – also weg damit.
|
||||
*/
|
||||
unoptimized: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nebula",
|
||||
"version": "1.4.0",
|
||||
"version": "1.7.0",
|
||||
"private": true,
|
||||
"description": "Nebula – Dashboard fuer Vibe-Coding Projekte mit Git-Anbindung (GitHub, GitLab, Gitea)",
|
||||
"scripts": {
|
||||
@@ -16,7 +16,7 @@
|
||||
"db:studio": "prisma studio",
|
||||
"db:seed": "prisma db seed",
|
||||
"db:reset": "prisma migrate reset",
|
||||
"docker:db": "docker compose up -d db",
|
||||
"docker:db": "docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d db",
|
||||
"docker:db:down": "docker compose stop db",
|
||||
"docker:up": "docker compose --profile full up -d --build",
|
||||
"docker:down": "docker compose --profile full down",
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "User" ADD COLUMN "totpLastCounter" INTEGER;
|
||||
@@ -0,0 +1,3 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "Repository" ADD COLUMN "webhookLastAt" TIMESTAMP(3),
|
||||
ADD COLUMN "webhookSecret" TEXT;
|
||||
@@ -128,6 +128,10 @@ model User {
|
||||
/// sperrt sich aus, wer die Einrichtung abbricht.
|
||||
totpSecretCipher String?
|
||||
totpEnabledAt DateTime?
|
||||
/// Zuletzt eingeloestes Zeitfenster. RFC 6238 verlangt, denselben Code
|
||||
/// kein zweites Mal anzunehmen – ohne diesen Merker liesse sich ein
|
||||
/// abgefangener Code die restliche Gueltigkeit ueber wiederverwenden.
|
||||
totpLastCounter Int?
|
||||
|
||||
sessions Session[]
|
||||
credentials Credential[]
|
||||
@@ -403,6 +407,16 @@ model Repository {
|
||||
notifiedCiState String?
|
||||
notifiedRelease String?
|
||||
|
||||
/// Gemeinsames Geheimnis fuer eingehende Webhooks, verschluesselt wie die
|
||||
/// Zugangstoken. Je Repository, weil der Haken im Git-System dort
|
||||
/// eingetragen wird und sich einzeln zuruecknehmen laesst.
|
||||
/// NULL heisst: fuer dieses Repository ist kein Webhook eingerichtet, und
|
||||
/// eingehende Aufrufe werden abgewiesen.
|
||||
webhookSecret String?
|
||||
/// Wann zuletzt ein gueltiger Webhook ankam – die einzige Rueckmeldung
|
||||
/// darueber, ob der Haken im Git-System wirklich funktioniert.
|
||||
webhookLastAt DateTime?
|
||||
|
||||
snapshot RepoSnapshot?
|
||||
|
||||
createdAt DateTime @default(now())
|
||||
|
||||
Regular → Executable
Regular → Executable
Executable
+79
@@ -0,0 +1,79 @@
|
||||
#!/bin/sh
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Legt die .env an und wuerfelt ein APP_SECRET.
|
||||
#
|
||||
# Dasselbe wie scripts/setup.mjs, aber ohne Node: auf einem reinen
|
||||
# Docker-Host ist keins installiert, und nur zum Erzeugen einer Textdatei
|
||||
# eines zu verlangen waere albern. Braucht nichts ausser einer POSIX-Shell.
|
||||
#
|
||||
# Aufruf: ./scripts/setup.sh
|
||||
# ./scripts/setup.sh --force (vorhandene .env ueberschreiben)
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
set -eu
|
||||
|
||||
root="$(cd "$(dirname "$0")/.." && pwd)"
|
||||
env_datei="$root/.env"
|
||||
vorlage="$root/.env.example"
|
||||
force=0
|
||||
|
||||
[ "${1:-}" = "--force" ] && force=1
|
||||
|
||||
if [ -t 1 ]; then
|
||||
gruen=$'\033[32m'; gelb=$'\033[33m'; cyan=$'\033[36m'; dim=$'\033[2m'; aus=$'\033[0m'
|
||||
else
|
||||
gruen=""; gelb=""; cyan=""; dim=""; aus=""
|
||||
fi
|
||||
|
||||
[ -f "$vorlage" ] || { echo "${gelb}.env.example nicht gefunden – abgebrochen.${aus}" >&2; exit 1; }
|
||||
|
||||
# ── Zufall ───────────────────────────────────────────────────
|
||||
# openssl ist auf den meisten Systemen da, aber nicht auf allen. /dev/urandom
|
||||
# gibt es ueberall, wo diese Shell laeuft – und base64 ebenso.
|
||||
zufall() {
|
||||
if command -v openssl >/dev/null 2>&1; then
|
||||
openssl rand -base64 32
|
||||
else
|
||||
head -c 32 /dev/urandom | base64
|
||||
fi | tr -d '\n'
|
||||
}
|
||||
|
||||
if [ -f "$env_datei" ] && [ "$force" -eq 0 ]; then
|
||||
echo "${gelb}·${aus} .env existiert bereits – sie wird nicht ueberschrieben."
|
||||
echo " ${dim}Mit --force neu anlegen (die alte wird gesichert).${aus}"
|
||||
else
|
||||
if [ -f "$env_datei" ]; then
|
||||
sicherung="$env_datei.$(date +%Y%m%d%H%M%S).bak"
|
||||
cp "$env_datei" "$sicherung"
|
||||
echo "${gelb}·${aus} Alte .env gesichert: $(basename "$sicherung")"
|
||||
fi
|
||||
|
||||
secret="$(zufall)"
|
||||
# Das Geheimnis kann / und + enthalten; als sed-Ersetzung waeren das
|
||||
# Sonderzeichen. Deshalb zeilenweise ersetzen statt mit einem Ausdruck.
|
||||
: > "$env_datei"
|
||||
while IFS= read -r zeile || [ -n "$zeile" ]; do
|
||||
case "$zeile" in
|
||||
APP_SECRET=*) printf 'APP_SECRET="%s"\n' "$secret" >> "$env_datei" ;;
|
||||
*) printf '%s\n' "$zeile" >> "$env_datei" ;;
|
||||
esac
|
||||
done < "$vorlage"
|
||||
|
||||
chmod 600 "$env_datei"
|
||||
echo "${gruen}✓${aus} .env angelegt, APP_SECRET zufaellig erzeugt, Rechte auf 600."
|
||||
fi
|
||||
|
||||
echo
|
||||
echo "${cyan}Noch anzupassen${aus}"
|
||||
echo "${dim}─────────────────────────────────────────────${aus}"
|
||||
echo " APP_URL die Adresse, unter der du Nebula aufrufst"
|
||||
echo " ${dim}bestimmt die WebAuthn-rpID – passt sie nicht, scheitern Passkeys${aus}"
|
||||
echo " POSTGRES_PASSWORD die Voreinstellung ist fuer Entwicklung gedacht"
|
||||
echo " APP_PORT auf einem Server: 127.0.0.1:3000 hinter den Reverse Proxy"
|
||||
echo
|
||||
echo "${cyan}Danach${aus}"
|
||||
echo "${dim}─────────────────────────────────────────────${aus}"
|
||||
echo " docker compose --profile full up -d --build"
|
||||
echo " ${dim}Der Container spielt die Migrationen beim Start selbst ein.${aus}"
|
||||
echo
|
||||
echo " Ausfuehrlich: DEPLOYMENT.md"
|
||||
echo
|
||||
Executable
+194
@@ -0,0 +1,194 @@
|
||||
#!/usr/bin/env bash
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
# Nebula auf einem Server aktualisieren.
|
||||
#
|
||||
# Holt den neuen Stand, sichert die Datenbank, baut das Abbild, spielt die
|
||||
# Migrationen ein und startet neu. Bricht ab, sobald ein Schritt scheitert –
|
||||
# und sagt dann, wie zurueckzukommen ist.
|
||||
#
|
||||
# Aufruf: ./scripts/update.sh
|
||||
# ./scripts/update.sh --no-pull (nur neu bauen und starten)
|
||||
# ./scripts/update.sh --ref v1.4.0 (auf einen Stand festlegen)
|
||||
# ./scripts/update.sh --yes (ohne Rueckfrage)
|
||||
#
|
||||
# Rueckgabe 0 heisst: die neue Fassung laeuft und antwortet gesund.
|
||||
# ─────────────────────────────────────────────────────────────
|
||||
set -euo pipefail
|
||||
|
||||
root="$(cd "$(dirname "$0")/.." && pwd)"
|
||||
cd "$root"
|
||||
|
||||
pull=1
|
||||
ref=""
|
||||
zusage=0
|
||||
|
||||
while [ $# -gt 0 ]; do
|
||||
case "$1" in
|
||||
--no-pull) pull=0 ;;
|
||||
--ref) ref="${2:-}"; shift ;;
|
||||
--yes|-y) zusage=1 ;;
|
||||
-h|--help) sed -n '3,15p' "$0" | sed 's/^# \{0,1\}//'; exit 0 ;;
|
||||
*) echo "Unbekannte Option: $1" >&2; exit 2 ;;
|
||||
esac
|
||||
shift
|
||||
done
|
||||
|
||||
# ── Farben, aber nur wenn ein Terminal zusieht ───────────────
|
||||
if [ -t 1 ]; then
|
||||
rot=$'\033[31m'; gruen=$'\033[32m'; gelb=$'\033[33m'; fett=$'\033[1m'; aus=$'\033[0m'
|
||||
else
|
||||
rot=""; gruen=""; gelb=""; fett=""; aus=""
|
||||
fi
|
||||
|
||||
# Die Version aus der package.json lesen – ohne Node. Auf einem reinen
|
||||
# Docker-Host ist keins installiert, und dieses Skript soll dort laufen.
|
||||
paket_version() {
|
||||
sed -n 's/.*"version"[[:space:]]*:[[:space:]]*"\([^"]*\)".*/\1/p' "$root/package.json" \
|
||||
| head -n 1
|
||||
}
|
||||
|
||||
schritt() { printf '\n%s▸ %s%s\n' "$fett" "$1" "$aus"; }
|
||||
ok() { printf ' %s✓%s %s\n' "$gruen" "$aus" "$1"; }
|
||||
warnung() { printf ' %s!%s %s\n' "$gelb" "$aus" "$1"; }
|
||||
abbruch() { printf '\n%s✗ %s%s\n' "$rot" "$1" "$aus" >&2; exit 1; }
|
||||
|
||||
# ── Voraussetzungen ──────────────────────────────────────────
|
||||
schritt "Voraussetzungen"
|
||||
|
||||
command -v docker >/dev/null || abbruch "docker nicht gefunden."
|
||||
docker compose version >/dev/null 2>&1 || abbruch "docker compose (v2) nicht gefunden."
|
||||
[ -f "$root/.env" ] || abbruch "Keine .env in $root. Zuerst './scripts/setup.sh' ausfuehren."
|
||||
[ -f "$root/docker-compose.yml" ] || abbruch "Kein docker-compose.yml in $root."
|
||||
ok "docker, compose und .env vorhanden"
|
||||
|
||||
# APP_SECRET muss gesetzt sein – sonst liegen die Git-Tokens faktisch offen.
|
||||
if grep -qE '^\s*APP_SECRET\s*=\s*("?)(nebula-dev-secret[^"]*|)\1\s*$' "$root/.env"; then
|
||||
abbruch "APP_SECRET ist leer oder noch der Entwicklungswert. Bitte in der .env setzen."
|
||||
fi
|
||||
ok "APP_SECRET gesetzt"
|
||||
|
||||
vorher="$(git rev-parse --short HEAD 2>/dev/null || echo "unbekannt")"
|
||||
version_vorher="$(paket_version)"
|
||||
printf ' Aktuell: v%s (%s)\n' "$version_vorher" "$vorher"
|
||||
|
||||
# ── Neuen Stand holen ────────────────────────────────────────
|
||||
if [ "$pull" -eq 1 ]; then
|
||||
schritt "Neuen Stand holen"
|
||||
|
||||
schmutz="$(git status --porcelain)"
|
||||
if [ -n "$schmutz" ]; then
|
||||
# Nicht nur meckern, sondern zeigen, worum es geht – sonst muss man
|
||||
# raten, was man da eigentlich verwerfen soll.
|
||||
printf '\n%sGeaendert gegenueber dem Stand im Git:%s\n' "$fett" "$aus"
|
||||
printf '%s\n' "$schmutz" | sed 's/^/ /'
|
||||
printf '\n Verwerfen: git checkout -- .\n'
|
||||
printf ' Behalten: git stash\n'
|
||||
abbruch "Das Arbeitsverzeichnis ist nicht sauber."
|
||||
fi
|
||||
|
||||
git fetch --all --tags --quiet
|
||||
if [ -n "$ref" ]; then
|
||||
git checkout --quiet "$ref"
|
||||
ok "Auf $ref gewechselt"
|
||||
else
|
||||
zweig="$(git rev-parse --abbrev-ref HEAD)"
|
||||
git pull --ff-only --quiet origin "$zweig"
|
||||
ok "$zweig aktualisiert"
|
||||
fi
|
||||
|
||||
nachher="$(git rev-parse --short HEAD)"
|
||||
version_nachher="$(paket_version)"
|
||||
|
||||
if [ "$vorher" = "$nachher" ]; then
|
||||
warnung "Kein neuer Stand – es wird trotzdem neu gebaut."
|
||||
else
|
||||
printf ' Neu: v%s (%s)\n' "$version_nachher" "$nachher"
|
||||
printf '\n Was dazukam:\n'
|
||||
git --no-pager log --oneline --no-decorate "$vorher..$nachher" 2>/dev/null | sed 's/^/ /' || true
|
||||
fi
|
||||
else
|
||||
warnung "Ohne --pull: der vorhandene Stand wird neu gebaut."
|
||||
fi
|
||||
|
||||
# ── Rueckfrage ───────────────────────────────────────────────
|
||||
if [ "$zusage" -eq 0 ] && [ -t 0 ]; then
|
||||
printf '\n%sWeiter? Die Datenbank wird vorher gesichert. [j/N] %s' "$fett" "$aus"
|
||||
read -r antwort
|
||||
case "$antwort" in [jJyY]*) ;; *) abbruch "Abgebrochen." ;; esac
|
||||
fi
|
||||
|
||||
# ── Datenbank sichern ────────────────────────────────────────
|
||||
schritt "Datenbank sichern"
|
||||
|
||||
# Die Datenbank muss laufen, sonst gibt es nichts zu sichern.
|
||||
docker compose up -d db >/dev/null
|
||||
sicherung=""
|
||||
if [ -x "$root/scripts/backup.sh" ]; then
|
||||
ausgabe="$("$root/scripts/backup.sh" 2>&1)" || abbruch "Sicherung fehlgeschlagen:\n$ausgabe"
|
||||
# backup.sh setzt den Pfad in Anfuehrungszeichen – die gehoeren nicht in
|
||||
# den Namen, sonst laesst sich der Vorschlag am Ende nicht kopieren.
|
||||
sicherung="$(printf '%s' "$ausgabe" | grep -oE '[^ "]*backups/[^ "]*\.sql[^ "]*' | tail -n 1 || true)"
|
||||
ok "Gesichert${sicherung:+: $sicherung}"
|
||||
else
|
||||
warnung "scripts/backup.sh fehlt – es wird ohne Sicherung fortgefahren."
|
||||
fi
|
||||
|
||||
# ── Bauen ────────────────────────────────────────────────────
|
||||
schritt "Abbild bauen"
|
||||
# Erst bauen, dann umschalten: ein Fehlschlag laesst die alte Fassung laufen.
|
||||
docker compose --profile full build app || abbruch "Der Bau ist gescheitert. Die laufende Fassung ist unveraendert."
|
||||
ok "Abbild gebaut"
|
||||
|
||||
# ── Starten ──────────────────────────────────────────────────
|
||||
schritt "Starten"
|
||||
# Die Migrationen laufen im entrypoint.sh, bevor der Server hochkommt.
|
||||
docker compose --profile full up -d || abbruch "Der Start ist gescheitert."
|
||||
ok "Container gestartet"
|
||||
|
||||
# ── Gesundheitspruefung ──────────────────────────────────────
|
||||
schritt "Gesundheitspruefung"
|
||||
|
||||
# Gefragt wird der Container selbst, nicht der Host. Das Abbild bringt einen
|
||||
# HEALTHCHECK mit, und so ist es einerlei, ob APP_PORT nur eine Nummer ist
|
||||
# oder wie auf einem Server "127.0.0.1:3000" – und curl braucht es auch nicht.
|
||||
gesund=0
|
||||
for _ in $(seq 1 40); do
|
||||
zustand="$(docker inspect --format '{{.State.Health.Status}}' nebula-app 2>/dev/null || echo "weg")"
|
||||
case "$zustand" in
|
||||
healthy) gesund=1; break ;;
|
||||
unhealthy) break ;;
|
||||
esac
|
||||
sleep 3
|
||||
done
|
||||
|
||||
if [ "$gesund" -ne 1 ]; then
|
||||
printf '\n%sLetzte Zeilen aus dem Log:%s\n' "$fett" "$aus"
|
||||
docker compose --profile full logs --tail 40 app || true
|
||||
printf '\n%sZurueck zur vorigen Fassung:%s\n' "$fett" "$aus"
|
||||
printf ' git checkout %s && ./scripts/update.sh --no-pull --yes\n' "$vorher"
|
||||
[ -n "$sicherung" ] && printf ' Datenbank notfalls: ./scripts/restore.sh %s\n' "$sicherung"
|
||||
abbruch "Der Container meldet sich nach zwei Minuten nicht gesund (Zustand: ${zustand})."
|
||||
fi
|
||||
ok "Container meldet sich gesund"
|
||||
|
||||
# Die Anzeige der Adresse. Nicht die .env raten, sondern Docker fragen: mit
|
||||
# docker-compose.server.yml veroeffentlicht der Container gar keinen Port und
|
||||
# haengt nur im Netz des Reverse Proxy. Dann gibt "port" nichts zurueck.
|
||||
adresse="$(docker compose --profile full port app 3000 2>/dev/null | tail -n 1 || true)"
|
||||
|
||||
if [ -n "$adresse" ]; then
|
||||
port="${adresse##*:}"
|
||||
if command -v curl >/dev/null 2>&1; then
|
||||
antwort_json="$(curl -fsS "http://127.0.0.1:${port}/api/health" 2>/dev/null || true)"
|
||||
[ -n "$antwort_json" ] && ok "Antwort: $antwort_json"
|
||||
fi
|
||||
wo="$adresse"
|
||||
else
|
||||
wo="im Docker-Netz (kein Host-Port veroeffentlicht)"
|
||||
fi
|
||||
|
||||
# ── Fertig ───────────────────────────────────────────────────
|
||||
version_jetzt="$(paket_version)"
|
||||
printf '\n%s%s✓ Nebula v%s laeuft auf %s%s\n' "$gruen" "$fett" "$version_jetzt" "$wo" "$aus"
|
||||
[ -n "$sicherung" ] && printf ' Sicherung vor dem Update: %s\n' "$sicherung"
|
||||
printf ' Log mitlesen: docker compose --profile full logs -f app\n\n'
|
||||
@@ -4,7 +4,7 @@ import { z } from "zod";
|
||||
import { requireUserApi } from "@/lib/auth/guard";
|
||||
import { verifyPassword } from "@/lib/auth/password";
|
||||
import { countUnusedRecoveryCodes, issueRecoveryCodes } from "@/lib/auth/recovery";
|
||||
import { generateTotpSecret, groupSecret, otpauthUri, verifyTotp } from "@/lib/auth/totp";
|
||||
import { generateTotpSecret, groupSecret, matchTotp, otpauthUri } from "@/lib/auth/totp";
|
||||
import { APP_NAME } from "@/lib/config";
|
||||
import { encryptSecret, tryDecryptSecret } from "@/lib/crypto";
|
||||
import { prisma } from "@/lib/db";
|
||||
@@ -109,7 +109,8 @@ export async function PUT(request: Request) {
|
||||
return jsonError("Es liegt kein Schluessel vor. Bitte die Einrichtung neu starten.", 409);
|
||||
}
|
||||
|
||||
if (!verifyTotp(secret, parsed.data.code)) {
|
||||
const fenster = matchTotp(secret, parsed.data.code);
|
||||
if (fenster === null) {
|
||||
return jsonError(
|
||||
"Der Code stimmt nicht. Geht die Uhr des Geraets richtig?",
|
||||
401,
|
||||
@@ -118,7 +119,9 @@ export async function PUT(request: Request) {
|
||||
|
||||
await prisma.user.update({
|
||||
where: { id: auth.user.id },
|
||||
data: { totpEnabledAt: new Date() },
|
||||
// Das Fenster gleich mitverbrennen: der Code, der eben aktiviert hat,
|
||||
// soll nicht Sekunden spaeter noch zum Anmelden taugen.
|
||||
data: { totpEnabledAt: new Date(), totpLastCounter: fenster },
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
@@ -157,7 +160,7 @@ export async function DELETE(request: Request) {
|
||||
await prisma.$transaction([
|
||||
prisma.user.update({
|
||||
where: { id: auth.user.id },
|
||||
data: { totpSecretCipher: null, totpEnabledAt: null },
|
||||
data: { totpSecretCipher: null, totpEnabledAt: null, totpLastCounter: null },
|
||||
}),
|
||||
prisma.recoveryCode.deleteMany({ where: { userId: auth.user.id } }),
|
||||
prisma.pendingLogin.deleteMany({ where: { userId: auth.user.id } }),
|
||||
|
||||
@@ -8,8 +8,9 @@ import {
|
||||
} from "@/lib/auth/mfa";
|
||||
import { redeemRecoveryCode } from "@/lib/auth/recovery";
|
||||
import { createSession, setSessionCookie } from "@/lib/auth/session";
|
||||
import { verifyTotp } from "@/lib/auth/totp";
|
||||
import { matchTotp } from "@/lib/auth/totp";
|
||||
import { noteSuccessfulLogin } from "@/lib/auth/users";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { LIMITS, rateLimit } from "@/lib/security/rateLimit";
|
||||
import { clientIp, jsonError, readJsonBody, tooManyRequests } from "@/lib/security/request";
|
||||
|
||||
@@ -63,9 +64,19 @@ export async function POST(request: Request) {
|
||||
// Wiederherstellungscode. Beide Wege zu probieren waere unnoetig – die
|
||||
// Formate ueberschneiden sich nicht.
|
||||
const istZiffern = /^[\d\s]+$/.test(eingabe);
|
||||
const erfolg = istZiffern
|
||||
? Boolean(pending.user.totpSecret) && verifyTotp(pending.user.totpSecret!, eingabe)
|
||||
: await redeemRecoveryCode(pending.user.id, eingabe);
|
||||
|
||||
// Bei den Ziffern zaehlt zusaetzlich, dass das Zeitfenster neuer ist als
|
||||
// das zuletzt eingeloeste. Sonst liesse sich ein abgefangener Code die
|
||||
// restliche Gueltigkeitsdauer ueber wiederverwenden – RFC 6238, 5.2.
|
||||
const fenster =
|
||||
istZiffern && pending.user.totpSecret
|
||||
? matchTotp(pending.user.totpSecret, eingabe)
|
||||
: null;
|
||||
const frisch =
|
||||
fenster !== null &&
|
||||
(pending.user.totpLastCounter === null || fenster > pending.user.totpLastCounter);
|
||||
|
||||
const erfolg = istZiffern ? frisch : await redeemRecoveryCode(pending.user.id, eingabe);
|
||||
|
||||
if (!erfolg) {
|
||||
const weiterMoeglich = await noteMfaFailure(pending.id);
|
||||
@@ -83,6 +94,14 @@ export async function POST(request: Request) {
|
||||
await discardPendingLogin(pending.id);
|
||||
await noteSuccessfulLogin(pending.user.id);
|
||||
|
||||
// Das eingeloeste Fenster merken, damit derselbe Code verbrannt ist.
|
||||
if (fenster !== null) {
|
||||
await prisma.user.update({
|
||||
where: { id: pending.user.id },
|
||||
data: { totpLastCounter: fenster },
|
||||
});
|
||||
}
|
||||
|
||||
const session = await createSession(pending.user.id, {
|
||||
userAgent: request.headers.get("user-agent"),
|
||||
ip,
|
||||
|
||||
@@ -3,7 +3,8 @@ import type { Prisma, ProjectStatus } from "@prisma/client";
|
||||
import { describeStatus, recordActivities } from "@/lib/activity";
|
||||
import { requireUserApi } from "@/lib/auth/guard";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { readJsonBody } from "@/lib/security/request";
|
||||
import { LIMITS, rateLimit } from "@/lib/security/rateLimit";
|
||||
import { clientIp, readJsonBody, tooManyRequests } from "@/lib/security/request";
|
||||
import { formatZodError, projectReorderSchema } from "@/lib/validation";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -20,6 +21,13 @@ export async function PATCH(request: Request) {
|
||||
const auth = await requireUserApi();
|
||||
if (!auth.ok) return auth.response;
|
||||
|
||||
const limited = rateLimit(
|
||||
`mutate:${clientIp(request)}`,
|
||||
LIMITS.mutation.limit,
|
||||
LIMITS.mutation.windowMs,
|
||||
);
|
||||
if (!limited.ok) return tooManyRequests(limited.retryAfter);
|
||||
|
||||
const body = await readJsonBody(request);
|
||||
if (!body.ok) return body.response;
|
||||
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { randomBytes } from "node:crypto";
|
||||
import { NextResponse } from "next/server";
|
||||
import { requireUserApi } from "@/lib/auth/guard";
|
||||
import { APP_URL } from "@/lib/config";
|
||||
import { encryptSecret } from "@/lib/crypto";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { ownedRepository } from "@/lib/repositories";
|
||||
import { jsonError } from "@/lib/security/request";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Params = { params: Promise<{ id: string }> };
|
||||
|
||||
/**
|
||||
* Richtet den Webhook eines Repositories ein oder nimmt ihn zurueck.
|
||||
*
|
||||
* Das Geheimnis wird hier erzeugt und **genau einmal** im Klartext
|
||||
* zurueckgegeben – danach liegt es nur noch verschluesselt in der Datenbank,
|
||||
* wie die Zugangstoken. Wer es verliert, erzeugt ein neues; das alte gilt
|
||||
* dann nicht mehr.
|
||||
*
|
||||
* Eingetragen wird der Haken im Git-System von Hand. Ihn ueber die API
|
||||
* anzulegen waere machbar, verlangte aber Administrationsrechte am
|
||||
* Repository – deutlich mehr, als Nebula sonst braucht.
|
||||
*/
|
||||
export async function POST(_request: Request, { params }: Params) {
|
||||
const auth = await requireUserApi();
|
||||
if (!auth.ok) return auth.response;
|
||||
|
||||
const { id } = await params;
|
||||
const repository = await ownedRepository(id, auth.user.id);
|
||||
if (!repository) return jsonError("Repository nicht gefunden", 404);
|
||||
|
||||
// 32 Byte, hexadezimal. Lang genug, dass Raten aussichtslos ist, und
|
||||
// ohne Sonderzeichen, die in Formularfeldern Aerger machen.
|
||||
const secret = randomBytes(32).toString("hex");
|
||||
|
||||
await prisma.repository.update({
|
||||
where: { id: repository.id },
|
||||
data: { webhookSecret: encryptSecret(secret), webhookLastAt: null },
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
secret,
|
||||
url: `${APP_URL}/api/webhooks/${repository.id}`,
|
||||
});
|
||||
}
|
||||
|
||||
export async function DELETE(_request: Request, { params }: Params) {
|
||||
const auth = await requireUserApi();
|
||||
if (!auth.ok) return auth.response;
|
||||
|
||||
const { id } = await params;
|
||||
const repository = await ownedRepository(id, auth.user.id);
|
||||
if (!repository) return jsonError("Repository nicht gefunden", 404);
|
||||
|
||||
await prisma.repository.update({
|
||||
where: { id: repository.id },
|
||||
data: { webhookSecret: null, webhookLastAt: null },
|
||||
});
|
||||
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { z } from "zod";
|
||||
import { recordActivity, shorten } from "@/lib/activity";
|
||||
import { requireUserApi } from "@/lib/auth/guard";
|
||||
import { APP_URL } from "@/lib/config";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { GitApiError, clientForConnection } from "@/lib/git";
|
||||
import { jsonError, readJsonBody } from "@/lib/security/request";
|
||||
import { formatZodError } from "@/lib/validation";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Params = { params: Promise<{ id: string }> };
|
||||
|
||||
const schema = z.object({
|
||||
/** Aus welchem Repository. Leer heisst: dem fuehrenden. */
|
||||
repositoryId: z.string().optional(),
|
||||
});
|
||||
|
||||
/**
|
||||
* Legt zu einer Aufgabe ein Issue im verknuepften Repository an.
|
||||
*
|
||||
* Der einzige Weg, auf dem Nebula von sich aus etwas in ein fremdes System
|
||||
* schreibt – deshalb ausdruecklich angestossen und nie nebenbei. Umgekehrt
|
||||
* gibt es die Uebernahme von Issues als Aufgaben schon laenger
|
||||
* (tasks/from-issues); die Felder sourceIssue, sourceUrl und
|
||||
* sourceRepositoryId sind dieselben, und die Eindeutigkeit je Repository
|
||||
* verhindert, dass beide Wege dasselbe doppelt anlegen.
|
||||
*/
|
||||
export async function POST(request: Request, { params }: Params) {
|
||||
const auth = await requireUserApi();
|
||||
if (!auth.ok) return auth.response;
|
||||
|
||||
const { id } = await params;
|
||||
|
||||
// Besitz haengt am Projekt – die Aufgabe selbst kennt keinen Besitzer.
|
||||
const task = await prisma.task.findFirst({
|
||||
where: { id, project: { ownerId: auth.user.id } },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
description: true,
|
||||
projectId: true,
|
||||
sourceIssue: true,
|
||||
sourceUrl: true,
|
||||
project: { select: { name: true } },
|
||||
},
|
||||
});
|
||||
if (!task) return jsonError("Aufgabe nicht gefunden", 404);
|
||||
|
||||
// Schon verknuepft: nicht noch einmal anlegen. Ein zweites Issue zur
|
||||
// selben Aufgabe waere genau die Dublette, die from-issues vermeidet.
|
||||
if (task.sourceIssue !== null) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
error: "Diese Aufgabe haengt bereits an einem Issue.",
|
||||
issue: { number: task.sourceIssue, url: task.sourceUrl },
|
||||
},
|
||||
{ status: 409 },
|
||||
);
|
||||
}
|
||||
|
||||
const body = await readJsonBody(request);
|
||||
if (!body.ok) return body.response;
|
||||
|
||||
const parsed = schema.safeParse(body.data ?? {});
|
||||
if (!parsed.success) {
|
||||
return NextResponse.json(
|
||||
{ error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
|
||||
{ status: 422 },
|
||||
);
|
||||
}
|
||||
|
||||
// Die Besitzerbedingung laeuft ueber das Projekt, dessen Besitz eben
|
||||
// geprueft wurde – eine fremde Repository-ID trifft hier also nichts.
|
||||
const repository = await prisma.repository.findFirst({
|
||||
where: {
|
||||
projectId: task.projectId,
|
||||
...(parsed.data.repositoryId ? { id: parsed.data.repositoryId } : {}),
|
||||
},
|
||||
orderBy: [{ position: "asc" }, { createdAt: "asc" }],
|
||||
include: { connection: true },
|
||||
});
|
||||
|
||||
if (!repository) {
|
||||
return jsonError("Das Projekt hat kein verknuepftes Repository.", 422);
|
||||
}
|
||||
if (!repository.connection) {
|
||||
return jsonError(
|
||||
"Das Repository haengt an keiner Git-Verbindung – ohne Token laesst sich nichts anlegen.",
|
||||
422,
|
||||
);
|
||||
}
|
||||
if (!repository.repoOwner || !repository.repoName) {
|
||||
return jsonError("Am Repository fehlen Owner oder Name.", 422);
|
||||
}
|
||||
|
||||
const client = clientForConnection(repository.connection);
|
||||
|
||||
// Rueckverweis in den Rumpf: wer das Issue im Git-System liest, soll
|
||||
// wissen, wo es herkommt und wo der Rest der Notizen liegt.
|
||||
const rumpf = [
|
||||
task.description?.trim() || null,
|
||||
`_Angelegt aus [${task.project.name}](${APP_URL}/projects/${task.projectId}) in Nebula._`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join("\n\n");
|
||||
|
||||
try {
|
||||
const issue = await client.createIssue(
|
||||
{ owner: repository.repoOwner, name: repository.repoName },
|
||||
{ title: task.title, body: rumpf },
|
||||
);
|
||||
|
||||
const aktualisiert = await prisma.task.update({
|
||||
where: { id: task.id },
|
||||
data: {
|
||||
sourceIssue: issue.number,
|
||||
sourceUrl: issue.url,
|
||||
sourceRepositoryId: repository.id,
|
||||
},
|
||||
});
|
||||
|
||||
await recordActivity({
|
||||
projectId: task.projectId,
|
||||
userId: auth.user.id,
|
||||
kind: "TASK_ADDED",
|
||||
summary: `Issue #${issue.number} angelegt zu: ${shorten(task.title, 50)}`,
|
||||
meta: { taskId: task.id, issue: issue.number, url: issue.url },
|
||||
});
|
||||
|
||||
return NextResponse.json({ task: aktualisiert, issue }, { status: 201 });
|
||||
} catch (error) {
|
||||
// Der Aufruf ging nach draussen; die Meldung des Git-Systems ist
|
||||
// hilfreicher als ein pauschales "hat nicht geklappt".
|
||||
if (error instanceof GitApiError) {
|
||||
return jsonError(`Issue konnte nicht angelegt werden: ${error.message}`, 502);
|
||||
}
|
||||
return jsonError("Issue konnte nicht angelegt werden.", 502);
|
||||
}
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
refreshDerivedProgress,
|
||||
spawnRecurrence,
|
||||
} from "@/lib/tasks";
|
||||
import { issueShouldBeOpen, mirrorStatusToIssue } from "@/lib/tasks/issues";
|
||||
import { formatZodError, taskUpdateSchema } from "@/lib/validation";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -74,6 +75,23 @@ export async function PATCH(request: Request, { params }: Params) {
|
||||
|
||||
await refreshDerivedProgress(existing.projectId);
|
||||
|
||||
/**
|
||||
* Haengt die Aufgabe an einem Issue, wandert der Zustand mit: erledigt
|
||||
* schliesst es, ein Zurueckziehen oeffnet es wieder. Nur die Grenze um
|
||||
* ERLEDIGT geht nach draussen – mehr kennt ein Issue nicht.
|
||||
*
|
||||
* Fehlertolerant und ohne den Aufrufer warten zu lassen, was schiefgehen
|
||||
* kann: ein nicht erreichbares Git-System darf das Abhaken nicht
|
||||
* verhindern. Beim naechsten Wechsel wird es erneut versucht.
|
||||
*/
|
||||
if (update.status !== undefined) {
|
||||
const vorher = issueShouldBeOpen(existing.status);
|
||||
const nachher = issueShouldBeOpen(update.status as TaskStatus);
|
||||
if (vorher !== nachher) {
|
||||
await mirrorStatusToIssue(id, update.status as TaskStatus);
|
||||
}
|
||||
}
|
||||
|
||||
// Nur der Spaltenwechsel kommt in den Verlauf. Ein umbenannter Titel oder
|
||||
// ein neues Label sind zu kleinteilig, um die Geschichte des Projekts zu
|
||||
// erzaehlen – und beim Ziehen im Brett ist der Wechsel die eigentliche Tat.
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { requireUserApi } from "@/lib/auth/guard";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { jsonError, readJsonBody } from "@/lib/security/request";
|
||||
import { LIMITS, rateLimit } from "@/lib/security/rateLimit";
|
||||
import { clientIp, jsonError, readJsonBody, tooManyRequests } from "@/lib/security/request";
|
||||
import { formatZodError, templateFromProjectSchema } from "@/lib/validation";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -21,6 +22,13 @@ export async function POST(request: Request) {
|
||||
const auth = await requireUserApi();
|
||||
if (!auth.ok) return auth.response;
|
||||
|
||||
const limited = rateLimit(
|
||||
`mutate:${clientIp(request)}`,
|
||||
LIMITS.mutation.limit,
|
||||
LIMITS.mutation.windowMs,
|
||||
);
|
||||
if (!limited.ok) return tooManyRequests(limited.retryAfter);
|
||||
|
||||
const body = await readJsonBody(request);
|
||||
if (!body.ok) return body.response;
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { requireUserApi } from "@/lib/auth/guard";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { jsonError, readJsonBody } from "@/lib/security/request";
|
||||
import { LIMITS, rateLimit } from "@/lib/security/rateLimit";
|
||||
import { clientIp, jsonError, readJsonBody, tooManyRequests } from "@/lib/security/request";
|
||||
import { formatZodError, templateCreateSchema } from "@/lib/validation";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -25,6 +26,13 @@ export async function POST(request: Request) {
|
||||
const auth = await requireUserApi();
|
||||
if (!auth.ok) return auth.response;
|
||||
|
||||
const limited = rateLimit(
|
||||
`mutate:${clientIp(request)}`,
|
||||
LIMITS.mutation.limit,
|
||||
LIMITS.mutation.windowMs,
|
||||
);
|
||||
if (!limited.ok) return tooManyRequests(limited.retryAfter);
|
||||
|
||||
const body = await readJsonBody(request);
|
||||
if (!body.ok) return body.response;
|
||||
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { tryDecryptSecret } from "@/lib/crypto";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { rateLimit } from "@/lib/security/rateLimit";
|
||||
import { syncRepository } from "@/lib/sync";
|
||||
import { statusForIssueState } from "@/lib/tasks/issues";
|
||||
import { refreshDerivedProgress } from "@/lib/tasks";
|
||||
import { parseEvent, verifySignature } from "@/lib/webhooks/verify";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Params = { params: Promise<{ repositoryId: string }> };
|
||||
|
||||
/** Groesse des Rumpfes deckeln – ein Push-Ereignis ist nie ein Megabyte. */
|
||||
const MAX_BODY = 512 * 1024;
|
||||
|
||||
/**
|
||||
* Eingehende Webhooks von GitHub, GitLab und Gitea.
|
||||
*
|
||||
* Der einzige Endpunkt ohne Anmeldung, der etwas schreibt. Ausgewiesen wird
|
||||
* sich mit einer Signatur ueber den Rumpf, geprueft gegen das Geheimnis, das
|
||||
* beim Einrichten am Repository hinterlegt wurde.
|
||||
*
|
||||
* Absichtlich sparsam in dem, was er tut:
|
||||
*
|
||||
* push – stoesst denselben Abgleich an wie der Zeitgeber
|
||||
* issues – geschlossen oder wieder geoeffnet wandert an die Aufgabe
|
||||
*
|
||||
* Alles andere wird angenommen und liegen gelassen. Ein Webhook, der mit
|
||||
* einem Fehler antwortet, wird von den Systemen wiederholt und irgendwann
|
||||
* abgeschaltet – deshalb ist "verstanden, nichts zu tun" die richtige
|
||||
* Antwort auf ein unbekanntes Ereignis.
|
||||
*
|
||||
* Was hier NICHT passiert: der Rumpf wird nie als Quelle fuer Inhalte
|
||||
* benutzt. Titel, Beschreibung und Zustand einer Aufgabe kommen weiter aus
|
||||
* Nebula beziehungsweise beim naechsten Abgleich aus der API. Wer das
|
||||
* Geheimnis kennt, kann also hoechstens eine Aufgabe auf- oder zumachen und
|
||||
* einen Abgleich ausloesen – nicht beliebige Daten einschleusen.
|
||||
*/
|
||||
export async function POST(request: Request, { params }: Params) {
|
||||
const { repositoryId } = await params;
|
||||
|
||||
// Die ID steht in der URL und ist damit halboeffentlich. Ein Deckel
|
||||
// dagegen, sie als Orakel zu benutzen oder den Abgleich zu verheizen.
|
||||
const limit = rateLimit(`webhook:${repositoryId}`, 60, 60_000);
|
||||
if (!limit.ok) {
|
||||
return NextResponse.json(
|
||||
{ error: "Zu viele Aufrufe." },
|
||||
{ status: 429, headers: { "Retry-After": String(limit.retryAfter) } },
|
||||
);
|
||||
}
|
||||
|
||||
const repository = await prisma.repository.findUnique({
|
||||
where: { id: repositoryId },
|
||||
include: { connection: true },
|
||||
});
|
||||
|
||||
// Unbekanntes Repository und fehlendes Geheimnis sind dieselbe Antwort:
|
||||
// ob es die ID gibt, geht den Anrufer nichts an.
|
||||
const secret = repository?.webhookSecret
|
||||
? tryDecryptSecret(repository.webhookSecret)
|
||||
: null;
|
||||
if (!repository || !secret) {
|
||||
return NextResponse.json({ error: "Unbekannt." }, { status: 404 });
|
||||
}
|
||||
|
||||
const roh = await request.text();
|
||||
if (roh.length > MAX_BODY) {
|
||||
return NextResponse.json({ error: "Rumpf zu gross." }, { status: 413 });
|
||||
}
|
||||
|
||||
/**
|
||||
* Der **rohe** Rumpf geht in die Pruefung, nicht das geparste Objekt:
|
||||
* durch JSON.parse und JSON.stringify gedreht kaeme eine andere Zeichen-
|
||||
* folge heraus und die Signatur passte nie.
|
||||
*/
|
||||
const provider = repository.connection?.provider ?? "GITEA";
|
||||
const geprueft = verifySignature(provider, secret, roh, request.headers);
|
||||
if (!geprueft.ok) {
|
||||
return NextResponse.json({ error: "Signatur ungueltig." }, { status: 401 });
|
||||
}
|
||||
|
||||
let payload: unknown = null;
|
||||
try {
|
||||
payload = JSON.parse(roh);
|
||||
} catch {
|
||||
return NextResponse.json({ error: "Kein gueltiges JSON." }, { status: 400 });
|
||||
}
|
||||
|
||||
const eventName =
|
||||
request.headers.get("x-github-event") ??
|
||||
request.headers.get("x-gitea-event") ??
|
||||
request.headers.get("x-gitlab-event");
|
||||
|
||||
const ereignis = parseEvent(provider, eventName, payload);
|
||||
|
||||
// Ab hier gilt der Aufruf als echt – das ist die Rueckmeldung darueber,
|
||||
// ob der Haken im Git-System ueberhaupt funktioniert.
|
||||
await prisma.repository.update({
|
||||
where: { id: repository.id },
|
||||
data: { webhookLastAt: new Date() },
|
||||
});
|
||||
|
||||
if (ereignis.kind === "push") {
|
||||
// Derselbe Weg wie beim Zeitgeber – nur eben sofort statt beim
|
||||
// naechsten Durchlauf.
|
||||
await syncRepository(repository.id).catch(() => undefined);
|
||||
return NextResponse.json({ ok: true, handled: "push" });
|
||||
}
|
||||
|
||||
if (ereignis.kind === "issue") {
|
||||
const task = await prisma.task.findFirst({
|
||||
where: { sourceRepositoryId: repository.id, sourceIssue: ereignis.number },
|
||||
select: { id: true, status: true, projectId: true },
|
||||
});
|
||||
if (!task) {
|
||||
return NextResponse.json({ ok: true, handled: "issue", matched: false });
|
||||
}
|
||||
|
||||
const ziel = statusForIssueState(ereignis.open, task.status);
|
||||
if (ziel !== task.status) {
|
||||
await prisma.task.update({
|
||||
where: { id: task.id },
|
||||
data: {
|
||||
status: ziel,
|
||||
doneAt: ziel === "DONE" ? new Date() : null,
|
||||
},
|
||||
});
|
||||
await refreshDerivedProgress(task.projectId);
|
||||
}
|
||||
|
||||
return NextResponse.json({ ok: true, handled: "issue", matched: true, status: ziel });
|
||||
}
|
||||
|
||||
return NextResponse.json({ ok: true, handled: "ignored", event: ereignis.name });
|
||||
}
|
||||
@@ -277,6 +277,21 @@
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Auf Zeigergeraeten reichen die 36px, die sich aus Schriftgroesse und
|
||||
* Innenabstand ergeben. Ein Finger trifft das nicht zuverlaessig – dort
|
||||
* gilt die uebliche Untergrenze von 44px.
|
||||
*
|
||||
* Ueber "pointer: coarse" statt einer Breitenabfrage: entscheidend ist das
|
||||
* Eingabegeraet, nicht die Fenstergroesse. Ein Tablet im Querformat ist
|
||||
* breit und wird trotzdem mit dem Finger bedient.
|
||||
*/
|
||||
@media (pointer: coarse) {
|
||||
.btn {
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
@@ -335,6 +350,19 @@
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
/**
|
||||
* Unter 16px zoomt iOS Safari beim Hineintippen die ganze Seite heran und
|
||||
* kehrt danach nicht von selbst zurueck – aus einem Formular wird so eine
|
||||
* Schiebepartie. Deshalb auf Beruehrungsgeraeten volle 16px, unabhaengig
|
||||
* von der Fensterbreite.
|
||||
*/
|
||||
@media (pointer: coarse) {
|
||||
.field {
|
||||
font-size: 1rem;
|
||||
padding: 0.65rem 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.field::placeholder {
|
||||
color: rgba(148, 163, 184, 0.6);
|
||||
}
|
||||
@@ -416,4 +444,22 @@
|
||||
.range::-moz-range-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Ein 16px-Griff ist mit dem Finger kaum zu fassen. Die Spur bleibt
|
||||
schmal, damit der Regler nicht ploetzlich klobig wirkt. */
|
||||
@media (pointer: coarse) {
|
||||
.range {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.range::-webkit-slider-thumb {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.range::-moz-range-thumb {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,6 +38,13 @@
|
||||
Consolas, "DejaVu Sans Mono", monospace;
|
||||
|
||||
--radius-card: 1.25rem;
|
||||
|
||||
/* Eine Stufe unterhalb von Tailwinds "sm" (40rem). Zwischen 320px und
|
||||
640px liegt der gesamte Telefonbereich, und dort ist der Unterschied
|
||||
zwischen "Beschriftung passt noch" und "passt nicht mehr" oft nur ein
|
||||
Zentimeter breit. 22rem trennt die wirklich schmalen Geraete (iPhone SE
|
||||
der ersten Reihe, 320px) vom Rest, der bei 360px und mehr anfaengt. */
|
||||
--breakpoint-xs: 22rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -63,7 +70,14 @@
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
/* Ein Notnagel gegen seitliches Scrollen, kein Ersatz fuer richtiges
|
||||
Umbrechen: was hier abgeschnitten wird, ist auf dem Telefon einfach
|
||||
nicht mehr erreichbar. Die Ursachen gehoeren in die Komponenten. */
|
||||
overflow-x: hidden;
|
||||
/* Mit viewportFit: "cover" reicht die Seite bis in die Ecken; ohne diese
|
||||
Einrueckung stuende der Inhalt im Querformat unter der Kameraleiste. */
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
||||
@@ -42,6 +42,11 @@ export const viewport: Viewport = {
|
||||
themeColor: "#05060f",
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
// Die Seite reicht bis unter Statusleiste und Home-Anzeige; das ist noetig,
|
||||
// damit der Hintergrund im installierten Betrieb nicht an einem weissen
|
||||
// Balken endet. Was dadurch verdeckt wuerde, holen die env(safe-area-*)
|
||||
// in globals.css wieder heraus.
|
||||
viewportFit: "cover",
|
||||
};
|
||||
|
||||
export default async function RootLayout({
|
||||
|
||||
+5
-1
@@ -52,13 +52,17 @@ export default async function DashboardPage() {
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
||||
{/* Zwei Spalten schon auf dem Telefon: einspaltig fuellten die fuenf
|
||||
Kacheln dort den ganzen ersten Bildschirm, und die Projekte – der
|
||||
eigentliche Inhalt – begannen erst nach dem zweiten Wischen. */}
|
||||
<div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-5">
|
||||
<StatCard
|
||||
label="Projekte"
|
||||
value={active.length}
|
||||
hint={`Ø Fortschritt ${averageProgress}%`}
|
||||
icon={CircleDot}
|
||||
color="#a78bfa"
|
||||
className="col-span-2 lg:col-span-1"
|
||||
/>
|
||||
<StatCard
|
||||
label="Ideen"
|
||||
|
||||
@@ -11,7 +11,7 @@ import { TaskBoard } from "@/components/tasks/TaskBoard";
|
||||
import { requireUserPage } from "@/lib/auth/guard";
|
||||
import { getSessionUser } from "@/lib/auth/session";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { connectionSafeSelect, projectDetailInclude } from "@/lib/projects";
|
||||
import { connectionSafeSelect, projectDetailInclude, webhookRepositoryIds } from "@/lib/projects";
|
||||
import type { ConnectionSafe, ProjectDetail } from "@/types";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -55,6 +55,9 @@ export default async function ProjectPage({ params }: PageProps) {
|
||||
|
||||
const detail = project as unknown as ProjectDetail;
|
||||
|
||||
// Nur die Angabe "hier haengt ein Webhook", nicht das Geheimnis selbst.
|
||||
const webhookIds = await webhookRepositoryIds(detail.id);
|
||||
|
||||
const fuehrend = detail.repositories[0]?.snapshot;
|
||||
const readme = fuehrend?.readme
|
||||
? {
|
||||
@@ -116,6 +119,7 @@ export default async function ProjectPage({ params }: PageProps) {
|
||||
<GitPanel
|
||||
project={detail}
|
||||
connections={connections as unknown as ConnectionSafe[]}
|
||||
webhookRepoIds={webhookIds}
|
||||
/>
|
||||
<ActivityFeed projectId={detail.id} initial={detail.activities} />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import type { Metadata } from "next";
|
||||
import { TaskOverview } from "@/components/tasks/TaskOverview";
|
||||
import { requireUserPage } from "@/lib/auth/guard";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { dueBucket } from "@/lib/tasks";
|
||||
import type { TaskOverviewItem } from "@/types";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export const metadata: Metadata = { title: "Aufgaben" };
|
||||
|
||||
export default async function TasksPage() {
|
||||
const user = await requireUserPage();
|
||||
|
||||
/**
|
||||
* Die Aufgabe kennt keinen Besitzer – die Trennung laeuft ueber das
|
||||
* Projekt. Die Bedingung steht deshalb als einzige und erste in der
|
||||
* where-Klausel; eine fremde Aufgabe kann hier gar nicht auftauchen.
|
||||
*/
|
||||
const tasks = await prisma.task.findMany({
|
||||
where: { project: { ownerId: user.id } },
|
||||
include: {
|
||||
project: { select: { id: true, name: true, accent: true, status: true } },
|
||||
},
|
||||
// NULL-Termine sortiert Postgres bei ASC ans Ende – genau richtig,
|
||||
// Aufgaben ohne Termin gehoeren nicht nach oben.
|
||||
orderBy: [{ dueDate: "asc" }, { position: "asc" }],
|
||||
});
|
||||
|
||||
/**
|
||||
* Das Fach wird auf dem Server bestimmt, nicht im Browser. "Heute" haengt
|
||||
* an der Uhr, und zwei verschiedene Antworten zwischen Server-Render und
|
||||
* Hydration waeren genau der Fehler, den die feste Zeitzone in lib/utils
|
||||
* sonst vermeidet.
|
||||
*/
|
||||
const jetzt = new Date();
|
||||
const items: TaskOverviewItem[] = tasks.map((task) => ({
|
||||
id: task.id,
|
||||
title: task.title,
|
||||
description: task.description,
|
||||
status: task.status,
|
||||
dueDate: task.dueDate ? task.dueDate.toISOString() : null,
|
||||
labels: task.labels,
|
||||
recurrence: task.recurrence,
|
||||
sourceIssue: task.sourceIssue,
|
||||
sourceUrl: task.sourceUrl,
|
||||
bucket: dueBucket(task.dueDate, jetzt),
|
||||
project: task.project,
|
||||
}));
|
||||
|
||||
return <TaskOverview tasks={items} />;
|
||||
}
|
||||
@@ -66,8 +66,13 @@ export function BulkBar({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none fixed inset-x-0 bottom-4 z-[90] flex justify-center px-4">
|
||||
<div className="popover pointer-events-auto flex flex-wrap items-center gap-2 px-3 py-2 shadow-2xl">
|
||||
// Der Abstand nach unten beruecksichtigt die Home-Anzeige des iPhones;
|
||||
// ohne das liegt die Leiste im installierten Betrieb darunter.
|
||||
<div
|
||||
className="pointer-events-none fixed inset-x-0 bottom-4 z-[90] flex justify-center px-3"
|
||||
style={{ bottom: "calc(1rem + env(safe-area-inset-bottom))" }}
|
||||
>
|
||||
<div className="popover pointer-events-auto flex max-w-full flex-wrap items-center justify-center gap-2 px-3 py-2 shadow-2xl">
|
||||
<span className="px-1 text-sm tabular-nums text-slate-200">
|
||||
{ids.length} ausgewählt
|
||||
</span>
|
||||
@@ -122,8 +127,17 @@ export function BulkBar({
|
||||
<Tag className="h-3.5 w-3.5" />
|
||||
Tags
|
||||
</button>
|
||||
<Popover open={tagsOpen} anchorRef={tagsRef} onClose={() => setTagsOpen(false)} align="start">
|
||||
<div className="w-64 space-y-2 p-3">
|
||||
{/* Die Breite gehoert an den Popover, nicht an sein Kind: der Popover
|
||||
setzt overflow-hidden, ein breiteres Kind wird schlicht
|
||||
abgeschnitten – frueher um die Haelfte des Abbrechen-Knopfs. */}
|
||||
<Popover
|
||||
open={tagsOpen}
|
||||
anchorRef={tagsRef}
|
||||
onClose={() => setTagsOpen(false)}
|
||||
align="start"
|
||||
width={288}
|
||||
>
|
||||
<div className="space-y-2 p-3">
|
||||
<label className="field-label" htmlFor="bulk-tags">
|
||||
Tags (kommagetrennt)
|
||||
</label>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Bell,
|
||||
CheckSquare,
|
||||
CornerDownLeft,
|
||||
GitBranch,
|
||||
LayoutDashboard,
|
||||
@@ -55,6 +56,13 @@ interface Action {
|
||||
|
||||
const ACTIONS: Action[] = [
|
||||
{ id: "dashboard", label: "Dashboard", hint: "Alle Projekte", icon: LayoutDashboard, href: "/" },
|
||||
{
|
||||
id: "tasks",
|
||||
label: "Aufgaben",
|
||||
hint: "Über alle Projekte, nach Fälligkeit",
|
||||
icon: CheckSquare,
|
||||
href: "/tasks",
|
||||
},
|
||||
{
|
||||
id: "connections",
|
||||
label: "Git-Verbindungen",
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
Lock,
|
||||
Package,
|
||||
Plus,
|
||||
Radio,
|
||||
RefreshCw,
|
||||
ShieldCheck,
|
||||
Star,
|
||||
@@ -26,6 +27,7 @@ import {
|
||||
import { CiBadge } from "@/components/CiBadge";
|
||||
import { Heatmap } from "@/components/Heatmap";
|
||||
import { RepositoryDialog } from "@/components/RepositoryDialog";
|
||||
import { WebhookDialog } from "@/components/WebhookDialog";
|
||||
import { Sparkline } from "@/components/Sparkline";
|
||||
import { repoTitle } from "@/lib/git/meta";
|
||||
import { asArray, asCalendar, asRecord } from "@/types";
|
||||
@@ -55,9 +57,13 @@ type TabKey = (typeof TABS)[number]["key"];
|
||||
export function GitPanel({
|
||||
project,
|
||||
connections,
|
||||
webhookRepoIds = [],
|
||||
}: {
|
||||
project: ProjectDetail;
|
||||
connections: ConnectionSafe[];
|
||||
/** Repositories mit hinterlegtem Webhook. Das Geheimnis selbst bleibt
|
||||
auf dem Server – hier kommt nur an, ob eines existiert. */
|
||||
webhookRepoIds?: string[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [tab, setTab] = useState<TabKey>("pulls");
|
||||
@@ -65,6 +71,7 @@ export function GitPanel({
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const [webhookOpen, setWebhookOpen] = useState(false);
|
||||
|
||||
const repositories = project.repositories;
|
||||
const [selectedId, setSelectedId] = useState<string | null>(repositories[0]?.id ?? null);
|
||||
@@ -72,6 +79,7 @@ export function GitPanel({
|
||||
// Nach dem Entfernen zeigt die Auswahl ins Leere – dann auf das fuehrende
|
||||
// zurueckfallen, statt eine leere Ansicht zu zeigen.
|
||||
const repository = repositories.find((entry) => entry.id === selectedId) ?? repositories[0] ?? null;
|
||||
const webhookAktiv = repository ? webhookRepoIds.includes(repository.id) : false;
|
||||
|
||||
/** Offene Issues als Aufgaben anlegen – ohne erneuten Abruf beim Provider. */
|
||||
async function importIssues() {
|
||||
@@ -280,6 +288,24 @@ export function GitPanel({
|
||||
Repository
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setWebhookOpen(true)}
|
||||
className={cn(
|
||||
"rounded-lg p-2 transition-colors",
|
||||
webhookAktiv
|
||||
? "text-emerald-300 hover:bg-emerald-500/10"
|
||||
: "text-slate-500 hover:bg-white/8 hover:text-violet-300",
|
||||
)}
|
||||
aria-label="Webhook einrichten"
|
||||
title={
|
||||
webhookAktiv
|
||||
? "Webhook ist eingerichtet – meldet Aenderungen sofort"
|
||||
: "Webhook einrichten – Aenderungen sofort statt beim naechsten Abgleich"
|
||||
}
|
||||
>
|
||||
<Radio className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeRepository(repository)}
|
||||
@@ -312,6 +338,16 @@ export function GitPanel({
|
||||
connections={connections}
|
||||
/>
|
||||
|
||||
<WebhookDialog
|
||||
open={webhookOpen}
|
||||
onClose={() => setWebhookOpen(false)}
|
||||
repositoryId={repository.id}
|
||||
repositoryTitle={repoTitle(repository)}
|
||||
provider={repository.connection?.provider ?? null}
|
||||
eingerichtet={webhookAktiv}
|
||||
zuletzt={repository.webhookLastAt}
|
||||
/>
|
||||
|
||||
{message ? (
|
||||
<p
|
||||
className={cn(
|
||||
|
||||
@@ -114,12 +114,18 @@ export function Heatmap({ calendar }: { calendar: CommitCalendar }) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<div className="-mx-1 overflow-x-auto px-1">
|
||||
{/*
|
||||
Kein max-w-full: zusammen mit der festen Hoehe staucht das die
|
||||
Wochen auf schmalen Anzeigen zu einem unlesbaren Streifen, statt
|
||||
den Elter seitlich scrollen zu lassen. Die Kalenderfelder haben
|
||||
eine feste Groesse – die Karte gehoert geschoben, nicht gequetscht.
|
||||
*/}
|
||||
<svg
|
||||
viewBox={`0 0 ${breite + 22} ${hoehe}`}
|
||||
width={breite + 22}
|
||||
height={hoehe}
|
||||
className="max-w-full"
|
||||
className="block shrink-0"
|
||||
role="img"
|
||||
aria-label={`Commits je Tag seit ${formatDate(calendar.from)}: ${gesamt} an ${tageMitCommits} Tagen`}
|
||||
>
|
||||
|
||||
@@ -253,7 +253,11 @@ function Column({
|
||||
// Eindeutiger Anker fuer Tests und Automatisierung.
|
||||
data-column={status}
|
||||
className={cn(
|
||||
"flex w-[17rem] shrink-0 flex-col rounded-2xl border border-white/6 bg-white/2 transition-colors",
|
||||
// Schmaler auf dem Telefon: bei 17rem stand die zweite Spalte fast
|
||||
// vollstaendig ausserhalb des Bildschirms, und ohne einen sichtbaren
|
||||
// Rest der naechsten Spalte sieht man dem Brett nicht an, dass es
|
||||
// seitlich weitergeht.
|
||||
"flex w-[14rem] shrink-0 flex-col rounded-2xl border border-white/6 bg-white/2 transition-colors sm:w-[17rem]",
|
||||
isOver && "border-violet-400/40 bg-violet-500/6",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { Markdown } from "./Markdown";
|
||||
|
||||
/**
|
||||
* Markdown kommt aus zwei Quellen, denen nicht zu trauen ist: eigenen
|
||||
* Notizen (die zwar der Benutzer schreibt, aber ohne Bereinigung ein
|
||||
* XSS-Loch waeren) und dem README eines fremden Repositories.
|
||||
*
|
||||
* Diese Tests halten die Bereinigung fest. Sie rendern serverseitig, was
|
||||
* fuer die Frage genuegt – es geht um das erzeugte HTML, nicht um
|
||||
* Verhalten im Browser.
|
||||
*/
|
||||
|
||||
const html = (text: string, baseUrl?: string) =>
|
||||
renderToStaticMarkup(<Markdown baseUrl={baseUrl}>{text}</Markdown>);
|
||||
|
||||
describe("Bereinigung", () => {
|
||||
it("laesst kein script durch", () => {
|
||||
const ausgabe = html("<script>alert(1)</script>\n\nText danach.");
|
||||
expect(ausgabe).not.toContain("<script");
|
||||
expect(ausgabe).not.toContain("alert(1)");
|
||||
expect(ausgabe).toContain("Text danach.");
|
||||
});
|
||||
|
||||
it("entfernt Ereignis-Attribute aus rohem HTML", () => {
|
||||
const ausgabe = html('<img src="x" onerror="alert(1)">');
|
||||
expect(ausgabe).not.toContain("onerror");
|
||||
expect(ausgabe).not.toContain("alert");
|
||||
});
|
||||
|
||||
it("laesst kein javascript: als Link durch", () => {
|
||||
const ausgabe = html("[klick](javascript:alert(1))");
|
||||
expect(ausgabe).not.toContain("javascript:");
|
||||
});
|
||||
|
||||
it("laesst kein javascript: ueber ein Bild durch", () => {
|
||||
// Das Bild wird zu einem Link umgebaut – die Quelle darf dabei nicht
|
||||
// unbesehen zum href werden.
|
||||
const ausgabe = html(")");
|
||||
expect(ausgabe).not.toContain("javascript:");
|
||||
});
|
||||
|
||||
it("laesst kein data: mit HTML durch", () => {
|
||||
const ausgabe = html("[klick](data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==)");
|
||||
expect(ausgabe).not.toContain("data:text/html");
|
||||
});
|
||||
|
||||
it("haengt an jeden Link noopener und noreferrer", () => {
|
||||
const ausgabe = html("[Ziel](https://example.com)");
|
||||
expect(ausgabe).toContain('target="_blank"');
|
||||
expect(ausgabe).toContain("noopener");
|
||||
expect(ausgabe).toContain("noreferrer");
|
||||
});
|
||||
|
||||
it("laedt keine Bilder, sondern zeigt eine Marke", () => {
|
||||
// Die Content-Security-Policy erlaubt img-src nur von der eigenen
|
||||
// Instanz; ein fremdes README duerfte sonst Zaehlpixel nachladen.
|
||||
const ausgabe = html("");
|
||||
expect(ausgabe).not.toContain("<img");
|
||||
expect(ausgabe).toContain("md-image");
|
||||
expect(ausgabe).toContain("Abzeichen");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Relative Verweise", () => {
|
||||
const BASIS = "https://git.example.com/o/r/blob/main/";
|
||||
|
||||
it("loest relative Links gegen die Basis auf", () => {
|
||||
expect(html("[Doku](docs/x.md)", BASIS)).toContain(`${BASIS}docs/x.md`);
|
||||
});
|
||||
|
||||
it("laesst absolute Links und Anker in Ruhe", () => {
|
||||
expect(html("[Extern](https://example.com/a)", BASIS)).toContain("https://example.com/a");
|
||||
expect(html("[Anker](#titel)", BASIS)).toContain('href="#titel"');
|
||||
});
|
||||
|
||||
it("laesst ohne Basis alles unveraendert", () => {
|
||||
expect(html("[Doku](docs/x.md)")).toContain('href="docs/x.md"');
|
||||
});
|
||||
|
||||
it("erzeugt aus einem Bild im Link keinen Link im Link", () => {
|
||||
// "[](ziel)" ist in READMEs die Regel. Ein a im a ist
|
||||
// ungueltiges HTML; der Browser zieht es auseinander, was zu einem
|
||||
// Hydrationsfehler fuehrt – genau daran ist der erste Versuch gescheitert.
|
||||
const ausgabe = html("[](https://example.com/ziel)", BASIS);
|
||||
expect(ausgabe).toContain("<span");
|
||||
expect(ausgabe.match(/<a /g) ?? []).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
Database,
|
||||
Download,
|
||||
LayoutGrid,
|
||||
List,
|
||||
ListFilter,
|
||||
NotebookPen,
|
||||
Plus,
|
||||
@@ -21,6 +22,7 @@ import { ImportDialog } from "@/components/ImportDialog";
|
||||
import { KanbanBoard } from "@/components/KanbanBoard";
|
||||
import { ProjectCard } from "@/components/ProjectCard";
|
||||
import { ProjectDialog } from "@/components/ProjectDialog";
|
||||
import { ProjectList } from "@/components/ProjectList";
|
||||
import { Popover } from "@/components/ui/Popover";
|
||||
import { STATUS_META, STATUS_ORDER } from "@/lib/status";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -53,9 +55,17 @@ function highlight(snippet: string): React.ReactNode[] {
|
||||
}
|
||||
|
||||
type SortKey = "updated" | "created" | "name" | "progress" | "priority";
|
||||
type ViewMode = "grid" | "grouped" | "kanban";
|
||||
type ViewMode = "grid" | "list" | "grouped" | "kanban";
|
||||
|
||||
const VIEWS: ViewMode[] = ["grid", "grouped", "kanban"];
|
||||
const VIEWS: ViewMode[] = ["grid", "list", "grouped", "kanban"];
|
||||
|
||||
/** Reihenfolge der Umschalter – zugleich die Beschriftung der Knoepfe. */
|
||||
const VIEW_META: Record<ViewMode, { label: string; title: string; icon: typeof LayoutGrid }> = {
|
||||
grid: { label: "Raster", title: "Rasteransicht", icon: LayoutGrid },
|
||||
list: { label: "Liste", title: "Kompakte Liste", icon: List },
|
||||
grouped: { label: "Gruppiert", title: "Nach Status gruppiert", icon: Rows3 },
|
||||
kanban: { label: "Brett", title: "Kanban – Status per Ziehen aendern", icon: Columns3 },
|
||||
};
|
||||
|
||||
/** Wo Ansicht, Sortierung und Archivschalter im Browser liegen. */
|
||||
const ANSICHT_SCHLUESSEL = "nebula.board";
|
||||
@@ -255,10 +265,14 @@ export function ProjectBoard({
|
||||
|
||||
return (
|
||||
<section className="space-y-5">
|
||||
{/* Steuerleiste */}
|
||||
<div className="glass flex flex-col gap-4 p-4">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="relative min-w-[220px] flex-1">
|
||||
{/* Steuerleiste.
|
||||
Auf dem Telefon steht die Suche allein in der ersten Zeile und die
|
||||
Werkzeuge darunter. Frueher lagen beide in einer Zeile, die nicht
|
||||
umbrechen konnte – der Knopf "Neues Projekt" wurde dabei aus dem
|
||||
Bild geschoben und die ganze Seite seitlich scrollbar. */}
|
||||
<div className="glass flex flex-col gap-3 p-3 sm:gap-4 sm:p-4">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
<div className="relative min-w-0 sm:min-w-[220px] sm:flex-1">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
|
||||
<input
|
||||
className="field pl-9"
|
||||
@@ -282,9 +296,12 @@ export function ProjectBoard({
|
||||
<label className="sr-only" htmlFor="sort">
|
||||
Sortierung
|
||||
</label>
|
||||
{/* min-w-0 ist hier entscheidend: ohne das weigert sich ein
|
||||
Flex-Kind, unter seine Inhaltsbreite zu schrumpfen, und
|
||||
drueckt stattdessen die Nachbarn hinaus. */}
|
||||
<select
|
||||
id="sort"
|
||||
className="field w-auto min-w-[11rem]"
|
||||
className="field w-auto min-w-0 flex-1 truncate sm:flex-none sm:min-w-[11rem]"
|
||||
value={sort}
|
||||
onChange={(event) => setSort(event.target.value as SortKey)}
|
||||
// Im Brett zaehlt die Anordnung von Hand. Die Sortierung hier
|
||||
@@ -303,50 +320,11 @@ export function ProjectBoard({
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="flex overflow-hidden rounded-xl border border-white/9">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("grid")}
|
||||
className={cn(
|
||||
"p-2 transition-colors",
|
||||
view === "grid" ? "bg-white/10 text-white" : "text-slate-500 hover:text-white",
|
||||
)}
|
||||
aria-label="Rasteransicht"
|
||||
title="Rasteransicht"
|
||||
>
|
||||
<LayoutGrid className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("grouped")}
|
||||
className={cn(
|
||||
"p-2 transition-colors",
|
||||
view === "grouped" ? "bg-white/10 text-white" : "text-slate-500 hover:text-white",
|
||||
)}
|
||||
aria-label="Nach Status gruppiert"
|
||||
title="Nach Status gruppiert"
|
||||
>
|
||||
<Rows3 className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("kanban")}
|
||||
className={cn(
|
||||
"p-2 transition-colors",
|
||||
view === "kanban" ? "bg-white/10 text-white" : "text-slate-500 hover:text-white",
|
||||
)}
|
||||
aria-label="Kanban-Spalten"
|
||||
title="Kanban – Status per Ziehen aendern"
|
||||
>
|
||||
<Columns3 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
ref={dataButtonRef}
|
||||
type="button"
|
||||
onClick={() => setDataMenuOpen((value) => !value)}
|
||||
className="rounded-xl border border-white/9 p-2 text-slate-500 transition-colors hover:text-white"
|
||||
className="shrink-0 rounded-xl border border-white/9 p-2.5 text-slate-500 transition-colors hover:text-white"
|
||||
aria-label="Daten exportieren oder importieren"
|
||||
title="Export und Import"
|
||||
aria-haspopup="menu"
|
||||
@@ -355,13 +333,51 @@ export function ProjectBoard({
|
||||
<Database className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button type="button" className="btn btn-primary" onClick={() => setDialogOpen(true)}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary shrink-0"
|
||||
onClick={() => setDialogOpen(true)}
|
||||
// Unterhalb von sm bleibt nur das Pluszeichen stehen. Ohne
|
||||
// eigene Beschriftung liest ein Screenreader dann gar nichts vor.
|
||||
aria-label="Neues Projekt"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Neues Projekt</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ansichtsumschalter: auf schmalen Anzeigen ueber die volle Breite,
|
||||
damit die vier Knoepfe gross genug zum Treffen bleiben. */}
|
||||
<div
|
||||
className="flex overflow-hidden rounded-xl border border-white/9 sm:w-auto sm:self-start"
|
||||
role="group"
|
||||
aria-label="Ansicht"
|
||||
>
|
||||
{VIEWS.map((mode) => {
|
||||
const { label, title, icon: Icon } = VIEW_META[mode];
|
||||
const active = view === mode;
|
||||
return (
|
||||
<button
|
||||
key={mode}
|
||||
type="button"
|
||||
onClick={() => setView(mode)}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-center gap-1.5 px-3 py-2 text-xs transition-colors sm:flex-none",
|
||||
active ? "bg-white/10 text-white" : "text-slate-500 hover:text-white",
|
||||
)}
|
||||
aria-pressed={active}
|
||||
title={title}
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0" />
|
||||
{/* Nur auf den schmalsten Anzeigen bleiben die Symbole allein –
|
||||
dort waeren vier Beschriftungen enger als die Fingerkuppe. */}
|
||||
<span className="hidden xs:inline">{label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="mr-1 inline-flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-slate-500">
|
||||
<ListFilter className="h-3.5 w-3.5" />
|
||||
@@ -471,6 +487,8 @@ export function ProjectBoard({
|
||||
selection={selection}
|
||||
onToggleSelect={toggleSelect}
|
||||
/>
|
||||
) : view === "list" ? (
|
||||
<ProjectList projects={visible} selection={selection} onToggleSelect={toggleSelect} />
|
||||
) : view === "grid" ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
|
||||
{visible.map((project, index) => (
|
||||
|
||||
@@ -74,7 +74,7 @@ export function ProjectHeader({
|
||||
|
||||
return (
|
||||
<header
|
||||
className="glass relative overflow-hidden p-6"
|
||||
className="glass relative overflow-hidden p-4 sm:p-6"
|
||||
style={
|
||||
{
|
||||
"--accent-from": accent.from,
|
||||
@@ -168,9 +168,13 @@ export function ProjectHeader({
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-3">
|
||||
{/* Auf dem Telefon steht dieser Block unter dem Titel und faengt
|
||||
links an; erst ab sm rueckt er nach rechts neben ihn. Vorher
|
||||
standen vier Knoepfe in einer Zeile, die nicht umbrechen durfte –
|
||||
"Loeschen" lag damit ausserhalb des Bildschirms. */}
|
||||
<div className="flex flex-wrap items-center gap-2 sm:flex-col sm:items-end sm:gap-3">
|
||||
<StatusSelect projectId={project.id} status={project.status} />
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
ref={exportButtonRef}
|
||||
type="button"
|
||||
@@ -179,6 +183,7 @@ export function ProjectHeader({
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={exportOpen}
|
||||
title="Exportieren"
|
||||
aria-label="Exportieren"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
@@ -187,6 +192,7 @@ export function ProjectHeader({
|
||||
className="btn btn-ghost px-2.5 py-1.5 text-xs"
|
||||
onClick={() => setTemplateOpen(true)}
|
||||
title="Als Vorlage sichern"
|
||||
aria-label="Als Vorlage sichern"
|
||||
>
|
||||
<BookmarkPlus className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
AlertTriangle,
|
||||
CheckSquare,
|
||||
GitBranch,
|
||||
GitCommitHorizontal,
|
||||
NotebookPen,
|
||||
Star,
|
||||
} from "lucide-react";
|
||||
import { StatusSelect } from "@/components/StatusSelect";
|
||||
import { PRIORITY_META, accentOf, statusOf } from "@/lib/status";
|
||||
import { cn, formatRelative } from "@/lib/utils";
|
||||
import type { ProjectListItem } from "@/types";
|
||||
|
||||
/**
|
||||
* Listenansicht des Boards.
|
||||
*
|
||||
* Warum zusaetzlich zum Raster: eine Karte braucht rund 260px Hoehe, auf dem
|
||||
* Telefon steht sie zwangslaeufig allein in der Zeile. Fuenf Projekte fuellen
|
||||
* damit zwei Bildschirme, bevor man ueberhaupt etwas vergleichen kann. Eine
|
||||
* Zeile kommt mit einem Viertel davon aus, und weil alle Zeilen gleich
|
||||
* aufgebaut sind, liegen Name, Fortschritt und Status untereinander – genau
|
||||
* das, was das Raster auf schmalen Anzeigen verliert.
|
||||
*/
|
||||
export function ProjectList({
|
||||
projects,
|
||||
selection,
|
||||
onToggleSelect,
|
||||
}: {
|
||||
projects: ProjectListItem[];
|
||||
selection: Set<string>;
|
||||
onToggleSelect?: (id: string, selected: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<ul className="glass fade-up divide-y divide-white/6 overflow-hidden">
|
||||
{projects.map((project) => (
|
||||
<ProjectRow
|
||||
key={project.id}
|
||||
project={project}
|
||||
selected={selection.has(project.id)}
|
||||
onToggleSelect={onToggleSelect}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectRow({
|
||||
project,
|
||||
selected,
|
||||
onToggleSelect,
|
||||
}: {
|
||||
project: ProjectListItem;
|
||||
selected: boolean;
|
||||
onToggleSelect?: (id: string, selected: boolean) => void;
|
||||
}) {
|
||||
const accent = accentOf(project.accent);
|
||||
const meta = statusOf(project.status);
|
||||
const priority = PRIORITY_META[project.priority] ?? PRIORITY_META[2];
|
||||
const snapshot = project.repositories[0]?.snapshot ?? null;
|
||||
const syncError = project.repositories.find((repo) => repo.syncError)?.syncError ?? null;
|
||||
const [favorite, setFavorite] = useState(project.favorite);
|
||||
|
||||
async function toggleFavorite() {
|
||||
const next = !favorite;
|
||||
setFavorite(next);
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${project.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ favorite: next }),
|
||||
});
|
||||
if (!response.ok) throw new Error("failed");
|
||||
} catch {
|
||||
setFavorite(!next);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<li
|
||||
className={cn("group relative transition-colors", selected && "bg-violet-500/8")}
|
||||
style={
|
||||
{
|
||||
"--accent-from": accent.from,
|
||||
"--accent-to": accent.to,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{/* Die ganze Zeile ist der Link; was darueber bedienbar sein soll,
|
||||
bekommt weiter unten die Zeigerereignisse zurueck. */}
|
||||
<Link
|
||||
href={`/projects/${project.id}`}
|
||||
className="absolute inset-0 z-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-400/60"
|
||||
aria-label={`Projekt ${project.name} oeffnen`}
|
||||
/>
|
||||
|
||||
<div className="pointer-events-none relative z-10 flex items-center gap-2.5 px-3 py-2.5 transition-colors group-hover:bg-white/4 sm:gap-3 sm:px-4 sm:py-3">
|
||||
{onToggleSelect ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected}
|
||||
onChange={(event) => onToggleSelect(project.id, event.target.checked)}
|
||||
aria-label={`${project.name} auswaehlen`}
|
||||
className={cn(
|
||||
"pointer-events-auto h-4 w-4 shrink-0 accent-violet-500 transition-opacity",
|
||||
!selected && "opacity-35 group-hover:opacity-100 focus-visible:opacity-100",
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{/* Statusfarbe als Streifen: auf einen Blick erkennbar, ohne Platz
|
||||
fuer eine Beschriftung zu verbrauchen. */}
|
||||
<span
|
||||
className="h-8 w-1 shrink-0 rounded-full"
|
||||
style={{ backgroundColor: meta.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<h3 className="truncate text-sm font-medium text-white group-hover:text-violet-200">
|
||||
{project.name}
|
||||
</h3>
|
||||
{favorite ? (
|
||||
<Star className="h-3 w-3 shrink-0 fill-amber-300 text-amber-300" />
|
||||
) : null}
|
||||
{syncError ? (
|
||||
<AlertTriangle className="h-3 w-3 shrink-0 text-rose-300/80" aria-label="Sync-Fehler" />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-1.5 flex items-center gap-2 text-[11px] text-slate-500">
|
||||
<span className="h-1 w-16 shrink-0 overflow-hidden rounded-full bg-white/8 sm:w-24">
|
||||
<span
|
||||
className="accent-bar block h-full rounded-full"
|
||||
style={{ width: `${Math.max(2, project.progress)}%` }}
|
||||
/>
|
||||
</span>
|
||||
<span className="shrink-0 tabular-nums">{project.progress}%</span>
|
||||
|
||||
{/* Was nicht mehr in die Zeile passt, faellt der Reihe nach weg,
|
||||
statt sie zu sprengen. */}
|
||||
{project._count.tasks > 0 ? (
|
||||
<span className="hidden shrink-0 items-center gap-1 xs:inline-flex">
|
||||
<CheckSquare className="h-3 w-3" />
|
||||
{project.tasks.length}/{project._count.tasks}
|
||||
</span>
|
||||
) : null}
|
||||
{project._count.notes > 0 ? (
|
||||
<span className="hidden shrink-0 items-center gap-1 sm:inline-flex">
|
||||
<NotebookPen className="h-3 w-3" />
|
||||
{project._count.notes}
|
||||
</span>
|
||||
) : null}
|
||||
{snapshot?.defaultBranch ? (
|
||||
<span className="hidden shrink-0 items-center gap-1 font-mono md:inline-flex">
|
||||
<GitBranch className="h-3 w-3" />
|
||||
{snapshot.defaultBranch}
|
||||
</span>
|
||||
) : null}
|
||||
{snapshot?.lastCommitAt ? (
|
||||
<span
|
||||
className="hidden shrink-0 items-center gap-1 lg:inline-flex"
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<GitCommitHorizontal className="h-3 w-3" />
|
||||
{formatRelative(snapshot.lastCommitAt)}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
<span
|
||||
className="ml-auto hidden shrink-0 uppercase tracking-wider md:inline"
|
||||
style={{ color: priority.color }}
|
||||
title={`Prioritaet: ${priority.label}`}
|
||||
>
|
||||
{priority.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleFavorite}
|
||||
aria-label={favorite ? "Favorit entfernen" : "Als Favorit markieren"}
|
||||
className={cn(
|
||||
"pointer-events-auto hidden shrink-0 rounded-lg p-2 transition-colors sm:block",
|
||||
favorite
|
||||
? "text-amber-300 hover:bg-amber-400/10"
|
||||
: "text-slate-600 hover:bg-white/8 hover:text-amber-300",
|
||||
)}
|
||||
>
|
||||
<Star className={cn("h-4 w-4", favorite && "fill-current")} />
|
||||
</button>
|
||||
|
||||
<div className="pointer-events-auto shrink-0">
|
||||
<StatusSelect projectId={project.id} status={project.status} variant="compact" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,282 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { CheckSquare, Lightbulb, Loader2, Zap } from "lucide-react";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Schnellerfassung: ein Feld, Enter, fertig.
|
||||
*
|
||||
* „Ideen festhalten" ist der erste Satz auf dem Dashboard – der Weg dorthin
|
||||
* fuehrte aber ueber einen Dialog mit sieben Feldern. Unterwegs auf dem
|
||||
* Telefon ist das der Unterschied zwischen „schreib ich schnell auf" und
|
||||
* „mach ich spaeter", und spaeter heisst gar nicht.
|
||||
*
|
||||
* Deshalb bleibt hier alles weg, was sich nachziehen laesst: Projekte
|
||||
* entstehen als Idee, Aufgaben als offen. Beschreibung, Status, Termin und
|
||||
* der ganze Rest kommen am Rechner dazu, wenn ueberhaupt.
|
||||
*
|
||||
* Der Dialog bleibt nach dem Anlegen offen und leert nur das Feld. Wer eine
|
||||
* Idee notiert, hat meistens gleich die naechste – ihn jedes Mal neu zu
|
||||
* oeffnen waere genau die Huerde, die hier wegsoll.
|
||||
*/
|
||||
|
||||
interface ProjektHit {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
/** Zuletzt gewaehltes Projekt, damit die Aufgabenerfassung nicht jedes Mal fragt. */
|
||||
const PROJEKT_SCHLUESSEL = "nebula.quickcapture.projekt";
|
||||
|
||||
type Modus = "idee" | "aufgabe";
|
||||
|
||||
interface Angelegt {
|
||||
art: Modus;
|
||||
titel: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export function QuickCapture({
|
||||
open,
|
||||
onClose,
|
||||
initialMode = "idee",
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
/** Aus der Aufgabenuebersicht heraus faengt der Dialog bei "aufgabe" an. */
|
||||
initialMode?: Modus;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const eingabeRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const [modus, setModus] = useState<Modus>(initialMode);
|
||||
const [titel, setTitel] = useState("");
|
||||
const [projekte, setProjekte] = useState<ProjektHit[]>([]);
|
||||
const [projektId, setProjektId] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [fehler, setFehler] = useState<string | null>(null);
|
||||
const [angelegt, setAngelegt] = useState<Angelegt[]>([]);
|
||||
|
||||
// Beim Oeffnen zuruecksetzen – ein Dialog, der noch die Eingabe von
|
||||
// vorgestern zeigt, ist schlimmer als einer, der leer ist.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setTitel("");
|
||||
setFehler(null);
|
||||
setAngelegt([]);
|
||||
setModus(initialMode);
|
||||
}, [open, initialMode]);
|
||||
|
||||
/**
|
||||
* Die Projektliste wird erst gebraucht, wenn jemand eine Aufgabe erfasst.
|
||||
* Sie beim Oeffnen zu holen waere eine Abfrage fuer den haeufigeren Fall,
|
||||
* in dem sie niemand ansieht.
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (!open || modus !== "aufgabe" || projekte.length > 0) return;
|
||||
|
||||
let abgebrochen = false;
|
||||
(async () => {
|
||||
try {
|
||||
const antwort = await fetch("/api/projects");
|
||||
if (!antwort.ok) return;
|
||||
const daten = (await antwort.json()) as { projects?: ProjektHit[] };
|
||||
if (abgebrochen) return;
|
||||
|
||||
const liste = (daten.projects ?? []).map(({ id, name }) => ({ id, name }));
|
||||
setProjekte(liste);
|
||||
|
||||
const gemerkt = window.localStorage.getItem(PROJEKT_SCHLUESSEL);
|
||||
const gueltig = gemerkt && liste.some((eintrag) => eintrag.id === gemerkt);
|
||||
setProjektId(gueltig ? gemerkt : (liste[0]?.id ?? ""));
|
||||
} catch {
|
||||
// Ohne Liste bleibt der Waehler leer; der Hinweis darunter erklaert es.
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
abgebrochen = true;
|
||||
};
|
||||
}, [open, modus, projekte.length]);
|
||||
|
||||
async function absenden(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
const wert = titel.trim();
|
||||
if (!wert || busy) return;
|
||||
|
||||
setBusy(true);
|
||||
setFehler(null);
|
||||
|
||||
try {
|
||||
if (modus === "idee") {
|
||||
const antwort = await fetch("/api/projects", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
// Nur der Name. Alles andere setzt das Schema: Status IDEA,
|
||||
// Prioritaet normal, Fortschritt 0.
|
||||
body: JSON.stringify({ name: wert }),
|
||||
});
|
||||
const nutzlast = await antwort.json().catch(() => ({}));
|
||||
if (!antwort.ok) throw new Error(nutzlast.error ?? "Anlegen fehlgeschlagen.");
|
||||
|
||||
setAngelegt((bisher) => [
|
||||
{ art: "idee", titel: wert, href: `/projects/${nutzlast.project.id}` },
|
||||
...bisher,
|
||||
]);
|
||||
} else {
|
||||
if (!projektId) throw new Error("Kein Projekt gewaehlt.");
|
||||
const antwort = await fetch(`/api/projects/${projektId}/tasks`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ title: wert }),
|
||||
});
|
||||
const nutzlast = await antwort.json().catch(() => ({}));
|
||||
if (!antwort.ok) throw new Error(nutzlast.error ?? "Anlegen fehlgeschlagen.");
|
||||
|
||||
window.localStorage.setItem(PROJEKT_SCHLUESSEL, projektId);
|
||||
setAngelegt((bisher) => [
|
||||
{ art: "aufgabe", titel: wert, href: `/projects/${projektId}` },
|
||||
...bisher,
|
||||
]);
|
||||
}
|
||||
|
||||
setTitel("");
|
||||
eingabeRef.current?.focus();
|
||||
router.refresh();
|
||||
} catch (gefangen) {
|
||||
setFehler(gefangen instanceof Error ? gefangen.message : String(gefangen));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
width="md"
|
||||
title="Schnell erfassen"
|
||||
description="Ein Feld genuegt. Beschreibung, Status und Termin lassen sich spaeter nachziehen."
|
||||
>
|
||||
<form onSubmit={absenden} className="space-y-4">
|
||||
<div className="flex overflow-hidden rounded-xl border border-white/9" role="group">
|
||||
{(
|
||||
[
|
||||
{ wert: "idee", label: "Idee", hinweis: "Neues Projekt", icon: Lightbulb },
|
||||
{ wert: "aufgabe", label: "Aufgabe", hinweis: "In einem Projekt", icon: CheckSquare },
|
||||
] as const
|
||||
).map(({ wert, label, hinweis, icon: Icon }) => (
|
||||
<button
|
||||
key={wert}
|
||||
type="button"
|
||||
onClick={() => setModus(wert)}
|
||||
aria-pressed={modus === wert}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-center gap-2 px-3 py-2.5 text-sm transition-colors",
|
||||
modus === wert ? "bg-white/10 text-white" : "text-slate-400 hover:text-white",
|
||||
)}
|
||||
title={hinweis}
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0" />
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="field-label" htmlFor="quick-title">
|
||||
{modus === "idee" ? "Wie heisst die Idee?" : "Was ist zu tun?"}
|
||||
</label>
|
||||
<input
|
||||
id="quick-title"
|
||||
ref={eingabeRef}
|
||||
className="field"
|
||||
value={titel}
|
||||
onChange={(event) => setTitel(event.target.value)}
|
||||
placeholder={modus === "idee" ? "z. B. Pixelgarten" : "z. B. Favicon austauschen"}
|
||||
maxLength={modus === "idee" ? 120 : 200}
|
||||
required
|
||||
autoFocus
|
||||
// enterKeyHint stellt auf dem Telefon die Absendetaste um – sonst
|
||||
// steht dort „Weiter", obwohl es nichts weiter gibt.
|
||||
enterKeyHint="done"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{modus === "aufgabe" ? (
|
||||
<div>
|
||||
<label className="field-label" htmlFor="quick-project">
|
||||
Projekt
|
||||
</label>
|
||||
{projekte.length > 0 ? (
|
||||
<select
|
||||
id="quick-project"
|
||||
className="field"
|
||||
value={projektId}
|
||||
onChange={(event) => setProjektId(event.target.value)}
|
||||
>
|
||||
{projekte.map((projekt) => (
|
||||
<option key={projekt.id} value={projekt.id}>
|
||||
{projekt.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<p className="text-sm text-slate-500">
|
||||
Noch kein Projekt vorhanden – leg zuerst eine Idee an.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{fehler ? (
|
||||
<p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
|
||||
{fehler}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{angelegt.length > 0 ? (
|
||||
<div className="rounded-lg border border-emerald-500/25 bg-emerald-500/8 px-3 py-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-wider text-emerald-300/80">
|
||||
Angelegt
|
||||
</p>
|
||||
<ul className="mt-1 space-y-0.5">
|
||||
{angelegt.slice(0, 5).map((eintrag, index) => (
|
||||
<li key={`${eintrag.href}-${index}`} className="truncate text-sm">
|
||||
<Link
|
||||
href={eintrag.href}
|
||||
onClick={onClose}
|
||||
className="text-emerald-100 underline-offset-2 hover:underline"
|
||||
>
|
||||
{eintrag.titel}
|
||||
</Link>
|
||||
<span className="ml-1.5 text-[11px] text-emerald-300/60">
|
||||
{eintrag.art === "idee" ? "Projekt" : "Aufgabe"}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose} disabled={busy}>
|
||||
{angelegt.length > 0 ? "Fertig" : "Abbrechen"}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
disabled={busy || !titel.trim() || (modus === "aufgabe" && !projektId)}
|
||||
>
|
||||
{busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Zap className="h-4 w-4" />}
|
||||
Anlegen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface StatCardProps {
|
||||
label: string;
|
||||
@@ -6,26 +7,33 @@ interface StatCardProps {
|
||||
hint?: string;
|
||||
icon: LucideIcon;
|
||||
color: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function StatCard({ label, value, hint, icon: Icon, color }: StatCardProps) {
|
||||
export function StatCard({ label, value, hint, icon: Icon, color, className }: StatCardProps) {
|
||||
return (
|
||||
<div className="glass relative overflow-hidden p-4">
|
||||
<div className={cn("glass relative overflow-hidden p-3 sm:p-4", className)}>
|
||||
<div
|
||||
className="pointer-events-none absolute -right-6 -top-8 h-24 w-24 rounded-full opacity-25 blur-2xl"
|
||||
style={{ backgroundColor: color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-start justify-between gap-2 sm:gap-3">
|
||||
<div className="min-w-0">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
|
||||
{/* Umbrechen statt abschneiden: in der zweispaltigen Anordnung auf
|
||||
dem Telefon endeten "In Entwicklung" und "Repos verknuepft"
|
||||
sonst beide als "In Entwickl…" – zwei Kacheln, die sich nicht
|
||||
mehr unterscheiden liessen. */}
|
||||
<p className="text-[11px] font-semibold uppercase leading-tight tracking-[0.14em] text-slate-500">
|
||||
{label}
|
||||
</p>
|
||||
<p className="mt-2 text-3xl font-semibold tabular-nums text-white">{value}</p>
|
||||
{hint ? <p className="mt-1 truncate text-xs text-slate-500">{hint}</p> : null}
|
||||
<p className="mt-1.5 text-2xl font-semibold tabular-nums text-white sm:mt-2 sm:text-3xl">
|
||||
{value}
|
||||
</p>
|
||||
{hint ? <p className="mt-1 text-xs leading-tight text-slate-500">{hint}</p> : null}
|
||||
</div>
|
||||
<span
|
||||
className="grid h-9 w-9 shrink-0 place-items-center rounded-xl"
|
||||
className="grid h-8 w-8 shrink-0 place-items-center rounded-xl sm:h-9 sm:w-9"
|
||||
style={{ backgroundColor: `${color}1f`, color }}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import {
|
||||
CheckSquare,
|
||||
GitBranch,
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
@@ -11,13 +12,16 @@ import {
|
||||
ShieldCheck,
|
||||
Sparkles,
|
||||
UserRound,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { QuickCapture } from "@/components/QuickCapture";
|
||||
import { Popover } from "@/components/ui/Popover";
|
||||
import type { SessionUser } from "@/lib/auth/session";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const LINKS = [
|
||||
{ href: "/", label: "Dashboard", icon: LayoutDashboard },
|
||||
{ href: "/tasks", label: "Aufgaben", icon: CheckSquare },
|
||||
{ href: "/connections", label: "Git-Verbindungen", icon: GitBranch },
|
||||
];
|
||||
|
||||
@@ -34,16 +38,20 @@ export function TopNav({
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b border-white/5 bg-[#05060f]/70 backdrop-blur-xl">
|
||||
<div className="mx-auto flex w-full max-w-[1400px] items-center gap-6 px-4 py-3 sm:px-6 lg:px-8">
|
||||
<Link href="/" className="group flex items-center gap-3">
|
||||
<div className="mx-auto flex w-full max-w-[1400px] items-center gap-3 px-4 py-3 sm:gap-6 sm:px-6 lg:px-8">
|
||||
<Link href="/" className="group flex min-w-0 items-center gap-2 sm:gap-3">
|
||||
<span className="relative grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-violet-500 via-fuchsia-500 to-cyan-400 shadow-[0_8px_28px_-10px_rgba(168,85,247,0.9)] transition-transform group-hover:scale-105">
|
||||
<Sparkles className="h-4 w-4 text-white" strokeWidth={2.4} />
|
||||
</span>
|
||||
<span className="flex flex-col leading-none">
|
||||
<span className="text-gradient text-lg font-semibold tracking-tight">
|
||||
<span className="flex min-w-0 flex-col leading-none">
|
||||
<span className="text-gradient truncate text-lg font-semibold tracking-tight">
|
||||
{appName}
|
||||
</span>
|
||||
<span className="mt-0.5 text-[10px] uppercase tracking-[0.2em] text-slate-500">
|
||||
{/* Der weite Zeichenabstand kostet mehr Platz, als die Zeile wert
|
||||
ist. Seit die Aufgaben als dritter Punkt danebenstehen, brach
|
||||
sie auf 375px mitten im Wort ab – unterhalb von sm bleibt
|
||||
deshalb nur der Name. */}
|
||||
<span className="mt-0.5 hidden truncate text-[10px] uppercase tracking-[0.2em] text-slate-500 sm:block">
|
||||
{tagline}
|
||||
</span>
|
||||
</span>
|
||||
@@ -51,13 +59,20 @@ export function TopNav({
|
||||
|
||||
{user ? (
|
||||
<>
|
||||
<nav className="flex items-center gap-1">
|
||||
<nav className="flex shrink-0 items-center gap-1">
|
||||
{LINKS.map(({ href, label, icon: Icon }) => {
|
||||
const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
|
||||
return (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
// Unterhalb von sm bleibt nur das Symbol stehen. Ohne
|
||||
// eigene Beschriftung ist der Verweis dann fuer einen
|
||||
// Screenreader namenlos – axe-core meldet das als
|
||||
// "link-name", und zwar zu Recht: vorgelesen wird nichts.
|
||||
aria-label={label}
|
||||
title={label}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
|
||||
active
|
||||
@@ -72,7 +87,8 @@ export function TopNav({
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="ml-auto">
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<QuickCaptureButton />
|
||||
<UserMenu user={user} />
|
||||
</div>
|
||||
</>
|
||||
@@ -82,6 +98,35 @@ export function TopNav({
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Der Einstieg in die Schnellerfassung sitzt in der Kopfleiste, nicht als
|
||||
* schwebender Knopf unten rechts: dort waere er auf schmalen Anzeigen mit
|
||||
* der Auswahlleiste kollidiert, die beim Markieren von Projekten einfaehrt.
|
||||
* In der Kopfleiste ist er auf jeder Seite erreichbar.
|
||||
*/
|
||||
function QuickCaptureButton() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="btn btn-ghost px-2.5 py-1.5 sm:px-3"
|
||||
// Unterhalb von sm bleibt nur das Symbol – ohne Beschriftung waere
|
||||
// der Knopf fuer einen Screenreader namenlos.
|
||||
aria-label="Schnell erfassen"
|
||||
title="Schnell erfassen – Idee oder Aufgabe"
|
||||
>
|
||||
<Zap className="h-4 w-4" />
|
||||
<span className="hidden lg:inline">Erfassen</span>
|
||||
</button>
|
||||
|
||||
<QuickCapture open={open} onClose={() => setOpen(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function UserMenu({ user }: { user: SessionUser }) {
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
@@ -0,0 +1,244 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Check, Copy, Loader2, Radio, Trash2 } from "lucide-react";
|
||||
import type { GitProvider } from "@prisma/client";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
import { formatRelative } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Einrichtung des Webhooks fuer ein Repository.
|
||||
*
|
||||
* Der Haken wird im Git-System von Hand eingetragen. Ihn ueber die API
|
||||
* anzulegen waere machbar, verlangte aber Administrationsrechte am
|
||||
* Repository – deutlich mehr, als Nebula sonst braucht, und es waere ein
|
||||
* Recht, das die meisten Token gar nicht haben.
|
||||
*
|
||||
* Das Geheimnis ist genau einmal zu sehen: danach liegt nur noch die
|
||||
* verschluesselte Fassung in der Datenbank, wie bei den Zugangstoken.
|
||||
*/
|
||||
|
||||
/** Wo der Haken im jeweiligen System einzutragen ist. */
|
||||
const ANLEITUNG: Record<GitProvider, { pfad: string; ereignisse: string }> = {
|
||||
GITHUB: {
|
||||
pfad: "Settings → Webhooks → Add webhook",
|
||||
ereignisse: "Content type „application/json“, Events: Pushes und Issues",
|
||||
},
|
||||
GITEA: {
|
||||
pfad: "Einstellungen → Webhooks → Gitea",
|
||||
ereignisse: "Auslöser: Push und Issues",
|
||||
},
|
||||
GITLAB: {
|
||||
pfad: "Settings → Webhooks",
|
||||
ereignisse: "Trigger: Push events und Issues events",
|
||||
},
|
||||
};
|
||||
|
||||
export function WebhookDialog({
|
||||
open,
|
||||
onClose,
|
||||
repositoryId,
|
||||
repositoryTitle,
|
||||
provider,
|
||||
eingerichtet,
|
||||
zuletzt,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
repositoryId: string;
|
||||
repositoryTitle: string;
|
||||
provider: GitProvider | null;
|
||||
eingerichtet: boolean;
|
||||
zuletzt: Date | string | null;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [fehler, setFehler] = useState<string | null>(null);
|
||||
const [geheimnis, setGeheimnis] = useState<string | null>(null);
|
||||
const [url, setUrl] = useState<string | null>(null);
|
||||
const [kopiert, setKopiert] = useState<string | null>(null);
|
||||
|
||||
// Ohne Verbindung ist das System unbekannt. Dann lieber allgemein bleiben,
|
||||
// als eine Anleitung fuer das falsche zu zeigen.
|
||||
const anleitung = provider ? ANLEITUNG[provider] : null;
|
||||
|
||||
async function erzeugen() {
|
||||
setBusy(true);
|
||||
setFehler(null);
|
||||
try {
|
||||
const antwort = await fetch(`/api/repositories/${repositoryId}/webhook`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
const nutzlast = await antwort.json().catch(() => ({}));
|
||||
if (!antwort.ok) throw new Error(nutzlast.error ?? "Fehlgeschlagen.");
|
||||
setGeheimnis(nutzlast.secret);
|
||||
setUrl(nutzlast.url);
|
||||
router.refresh();
|
||||
} catch (gefangen) {
|
||||
setFehler(gefangen instanceof Error ? gefangen.message : String(gefangen));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function zuruecknehmen() {
|
||||
if (!window.confirm("Webhook zuruecknehmen? Eingehende Aufrufe werden dann abgewiesen.")) {
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
try {
|
||||
await fetch(`/api/repositories/${repositoryId}/webhook`, { method: "DELETE" });
|
||||
setGeheimnis(null);
|
||||
setUrl(null);
|
||||
router.refresh();
|
||||
onClose();
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function kopieren(wert: string, was: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(wert);
|
||||
setKopiert(was);
|
||||
setTimeout(() => setKopiert(null), 2000);
|
||||
} catch {
|
||||
// Ohne Zwischenablage bleibt der Text zum Markieren stehen.
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
width="md"
|
||||
title="Webhook einrichten"
|
||||
description={`Damit meldet ${repositoryTitle} Aenderungen sofort, statt auf den naechsten Abgleich zu warten.`}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{eingerichtet && !geheimnis ? (
|
||||
<div className="rounded-lg border border-emerald-500/25 bg-emerald-500/8 px-3 py-2.5">
|
||||
<p className="flex items-center gap-2 text-sm text-emerald-100">
|
||||
<Radio className="h-4 w-4 shrink-0" />
|
||||
Webhook ist eingerichtet.
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-emerald-300/70" suppressHydrationWarning>
|
||||
{zuletzt
|
||||
? `Zuletzt empfangen ${formatRelative(zuletzt)}.`
|
||||
: "Bisher ist noch kein Aufruf angekommen — der Haken im Git-System fehlt vermutlich noch."}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{geheimnis && url ? (
|
||||
<div className="space-y-3">
|
||||
<Feld label="URL" wert={url} kopiert={kopiert === "url"} onCopy={() => kopieren(url, "url")} />
|
||||
<Feld
|
||||
label="Geheimnis (Secret)"
|
||||
wert={geheimnis}
|
||||
kopiert={kopiert === "secret"}
|
||||
onCopy={() => kopieren(geheimnis, "secret")}
|
||||
/>
|
||||
<p className="rounded-lg border border-amber-500/25 bg-amber-500/8 px-3 py-2 text-xs text-amber-200">
|
||||
Das Geheimnis ist <strong>jetzt zum einzigen Mal</strong> zu sehen. Danach liegt es
|
||||
nur noch verschluesselt in der Datenbank. Verloren? Dann hier ein neues erzeugen —
|
||||
das alte gilt dann nicht mehr.
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="rounded-lg border border-white/8 bg-white/2 px-3 py-2.5 text-xs text-slate-400">
|
||||
<p className="font-semibold text-slate-300">Im Git-System eintragen</p>
|
||||
{anleitung ? (
|
||||
<>
|
||||
<p className="mt-1">{anleitung.pfad}</p>
|
||||
<p className="mt-0.5">{anleitung.ereignisse}</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="mt-1">
|
||||
In den Einstellungen des Repositories unter „Webhooks“, mit den Ausloesern
|
||||
Push und Issues. Ist eine Git-Verbindung hinterlegt, steht hier der genaue
|
||||
Pfad fuer das jeweilige System.
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-2 text-slate-500">
|
||||
Nebula wertet nur Push und Issues aus. Alles andere wird angenommen und liegen
|
||||
gelassen — ein Fehler wuerde das Git-System sonst zum Wiederholen bringen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{fehler ? (
|
||||
<p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
|
||||
{fehler}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 pt-1">
|
||||
{eingerichtet ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger px-3 py-1.5 text-xs"
|
||||
onClick={zuruecknehmen}
|
||||
disabled={busy}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
Zuruecknehmen
|
||||
</button>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose} disabled={busy}>
|
||||
{geheimnis ? "Fertig" : "Schliessen"}
|
||||
</button>
|
||||
<button type="button" className="btn btn-primary" onClick={erzeugen} disabled={busy}>
|
||||
{busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Radio className="h-4 w-4" />}
|
||||
{eingerichtet ? "Neues Geheimnis" : "Einrichten"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function Feld({
|
||||
label,
|
||||
wert,
|
||||
kopiert,
|
||||
onCopy,
|
||||
}: {
|
||||
label: string;
|
||||
wert: string;
|
||||
kopiert: boolean;
|
||||
onCopy: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<span className="field-label">{label}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* tabIndex: der Kasten scrollt seitlich und muss deshalb auch mit
|
||||
der Tastatur erreichbar sein – sonst kommt man an das Ende einer
|
||||
langen URL nur mit der Maus. */}
|
||||
<code
|
||||
tabIndex={0}
|
||||
className="min-w-0 flex-1 overflow-x-auto rounded-lg border border-white/9 bg-[rgba(8,10,24,0.6)] px-3 py-2 font-mono text-xs text-slate-200"
|
||||
>
|
||||
{wert}
|
||||
</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCopy}
|
||||
className="btn btn-ghost shrink-0 px-2.5 py-2"
|
||||
aria-label={`${label} kopieren`}
|
||||
>
|
||||
{kopiert ? <Check className="h-4 w-4 text-emerald-300" /> : <Copy className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,12 +2,33 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Loader2, Trash2 } from "lucide-react";
|
||||
import type { Recurrence, Task, TaskStatus } from "@prisma/client";
|
||||
import { ExternalLink, GitPullRequestArrow, Loader2, Trash2 } from "lucide-react";
|
||||
import type { Recurrence, TaskStatus } from "@prisma/client";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
import { RECURRENCE_META, TASK_STATUS_META, TASK_STATUS_ORDER } from "@/lib/tasks";
|
||||
import { cn, parseTags } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Was der Dialog von einer Aufgabe tatsaechlich liest.
|
||||
*
|
||||
* Bewusst nicht der vollstaendige Prisma-Datensatz: die Aufgabenuebersicht
|
||||
* ueber alle Projekte reicht eine schlankere Fassung durch, in der das Datum
|
||||
* als Zeichenkette ankommt – ein Date ueberlebt den Weg vom Server zum
|
||||
* Browser nicht. Ein echtes Task erfuellt diese Form ebenfalls.
|
||||
*/
|
||||
export interface EditableTask {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
status: TaskStatus;
|
||||
dueDate: Date | string | null;
|
||||
labels: string[];
|
||||
recurrence: Recurrence | null;
|
||||
/** Gesetzt, sobald die Aufgabe an einem Git-Issue haengt. */
|
||||
sourceIssue?: number | null;
|
||||
sourceUrl?: string | null;
|
||||
}
|
||||
|
||||
/** Datum fuer <input type="date"> – ortszeitbezogen, nicht UTC. */
|
||||
function toDateInput(value: Date | string | null): string {
|
||||
if (!value) return "";
|
||||
@@ -26,7 +47,7 @@ export function TaskDialog({
|
||||
}: {
|
||||
open: boolean;
|
||||
projectId: string;
|
||||
task: Task | null;
|
||||
task: EditableTask | null;
|
||||
initialStatus: TaskStatus;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
@@ -38,10 +59,38 @@ export function TaskDialog({
|
||||
const [labels, setLabels] = useState("");
|
||||
const [recurrence, setRecurrence] = useState<string>("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [issueBusy, setIssueBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const isEdit = Boolean(task);
|
||||
|
||||
/**
|
||||
* Legt zur Aufgabe ein Issue im verknuepften Repository an.
|
||||
*
|
||||
* Ausdruecklich per Knopf und nicht beim Speichern: was in ein fremdes
|
||||
* System geschrieben wird, soll jemand gewollt haben.
|
||||
*/
|
||||
async function createIssue() {
|
||||
if (!task) return;
|
||||
setIssueBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch(`/api/tasks/${task.id}/issue`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
const payload = await response.json().catch(() => ({}));
|
||||
if (!response.ok) throw new Error(payload.error ?? "Issue konnte nicht angelegt werden.");
|
||||
onClose();
|
||||
router.refresh();
|
||||
} catch (caught) {
|
||||
setError(caught instanceof Error ? caught.message : String(caught));
|
||||
} finally {
|
||||
setIssueBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setTitle(task?.title ?? "");
|
||||
@@ -231,6 +280,54 @@ export function TaskDialog({
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{/* Verknuepfung mit einem Git-Issue. Nur beim Bearbeiten – zu einer
|
||||
Aufgabe, die es noch nicht gibt, laesst sich keins anlegen. */}
|
||||
{isEdit ? (
|
||||
<div className="rounded-lg border border-white/8 bg-white/2 px-3 py-2.5">
|
||||
{task?.sourceUrl || task?.sourceIssue ? (
|
||||
<p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-400">
|
||||
<GitPullRequestArrow className="h-3.5 w-3.5 shrink-0 text-violet-300" />
|
||||
Verknuepft mit
|
||||
{task.sourceUrl ? (
|
||||
<a
|
||||
href={task.sourceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-violet-300 underline-offset-2 hover:underline"
|
||||
>
|
||||
Issue #{task.sourceIssue}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-slate-300">Issue #{task.sourceIssue}</span>
|
||||
)}
|
||||
<span className="w-full text-[11px] text-slate-500">
|
||||
Erledigt schliesst das Issue, ein Zurueckziehen oeffnet es wieder.
|
||||
</span>
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<span className="text-xs text-slate-500">
|
||||
Noch nicht mit einem Issue verknuepft.
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost px-2.5 py-1.5 text-xs"
|
||||
onClick={createIssue}
|
||||
disabled={busy || issueBusy}
|
||||
>
|
||||
{issueBusy ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<GitPullRequestArrow className="h-3.5 w-3.5" />
|
||||
)}
|
||||
Als Issue anlegen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center justify-between gap-2 pt-1">
|
||||
{isEdit ? (
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,395 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
CalendarClock,
|
||||
CheckSquare,
|
||||
ExternalLink,
|
||||
Loader2,
|
||||
Plus,
|
||||
Repeat,
|
||||
Square,
|
||||
} from "lucide-react";
|
||||
import type { TaskStatus } from "@prisma/client";
|
||||
import { QuickCapture } from "@/components/QuickCapture";
|
||||
import { TaskDialog } from "@/components/tasks/TaskDialog";
|
||||
import {
|
||||
DUE_BUCKET_META,
|
||||
DUE_BUCKET_ORDER,
|
||||
RECURRENCE_META,
|
||||
TASK_STATUS_META,
|
||||
TASK_STATUS_ORDER,
|
||||
} from "@/lib/tasks";
|
||||
import { cn, formatDate } from "@/lib/utils";
|
||||
import type { TaskOverviewItem } from "@/types";
|
||||
|
||||
/** Wo Filter und Schalter im Browser liegen. */
|
||||
const ANSICHT_SCHLUESSEL = "nebula.tasks";
|
||||
|
||||
/**
|
||||
* Aufgaben ueber alle Projekte hinweg.
|
||||
*
|
||||
* Geordnet wird nach Faelligkeit, nicht nach Spalte: projektuebergreifend
|
||||
* lautet die Frage "was ist ueberfaellig", nicht "was steht wo im Brett".
|
||||
* Aus demselben Grund laesst sich hier bewusst **nichts ziehen** – die
|
||||
* Position einer Aufgabe gilt innerhalb ihrer Spalte in ihrem Projekt und
|
||||
* waere hier ohne Bedeutung. Eine Reihenfolge anzubieten, die nirgends
|
||||
* ankommt, waere ein Versprechen, das die Seite nicht halten kann.
|
||||
*/
|
||||
export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
|
||||
const router = useRouter();
|
||||
const [statusFilter, setStatusFilter] = useState<TaskStatus[]>([]);
|
||||
const [projektFilter, setProjektFilter] = useState("");
|
||||
const [zeigeErledigte, setZeigeErledigte] = useState(false);
|
||||
const [erfassenOffen, setErfassenOffen] = useState(false);
|
||||
const [laufend, setLaufend] = useState<Set<string>>(new Set());
|
||||
/** Welche Aufgabe gerade im Dialog liegt. null heisst: keiner offen. */
|
||||
const [bearbeiten, setBearbeiten] = useState<TaskOverviewItem | null>(null);
|
||||
|
||||
const projekte = useMemo(() => {
|
||||
const map = new Map<string, string>();
|
||||
for (const task of tasks) map.set(task.project.id, task.project.name);
|
||||
return [...map.entries()]
|
||||
.map(([id, name]) => ({ id, name }))
|
||||
.sort((a, b) => a.name.localeCompare(b.name, "de"));
|
||||
}, [tasks]);
|
||||
|
||||
const zaehler = useMemo(() => {
|
||||
const map = new Map<TaskStatus, number>();
|
||||
for (const task of tasks) map.set(task.status, (map.get(task.status) ?? 0) + 1);
|
||||
return map;
|
||||
}, [tasks]);
|
||||
|
||||
const sichtbar = useMemo(() => {
|
||||
return tasks.filter((task) => {
|
||||
// Erledigtes fuellt die Liste sonst mit dem, was gerade nicht ansteht.
|
||||
if (!zeigeErledigte && task.status === "DONE" && !statusFilter.includes("DONE")) {
|
||||
return false;
|
||||
}
|
||||
if (statusFilter.length > 0 && !statusFilter.includes(task.status)) return false;
|
||||
if (projektFilter && task.project.id !== projektFilter) return false;
|
||||
return true;
|
||||
});
|
||||
}, [tasks, statusFilter, projektFilter, zeigeErledigte]);
|
||||
|
||||
const faecher = useMemo(() => {
|
||||
return DUE_BUCKET_ORDER.map((bucket) => ({
|
||||
bucket,
|
||||
items: sichtbar.filter((task) => task.bucket === bucket),
|
||||
})).filter((fach) => fach.items.length > 0);
|
||||
}, [sichtbar]);
|
||||
|
||||
const offen = sichtbar.filter((task) => task.status !== "DONE").length;
|
||||
const ueberfaellig = sichtbar.filter(
|
||||
(task) => task.bucket === "overdue" && task.status !== "DONE",
|
||||
).length;
|
||||
|
||||
function toggleStatus(status: TaskStatus) {
|
||||
setStatusFilter((current) =>
|
||||
current.includes(status)
|
||||
? current.filter((entry) => entry !== status)
|
||||
: [...current, status],
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Abhaken direkt aus der Uebersicht. Der Endpunkt erledigt dabei den Rest:
|
||||
* doneAt, abgeleiteter Fortschritt und – bei wiederkehrenden Aufgaben –
|
||||
* die naechste Fassung.
|
||||
*/
|
||||
async function abhaken(task: TaskOverviewItem) {
|
||||
const ziel: TaskStatus = task.status === "DONE" ? "TODO" : "DONE";
|
||||
setLaufend((current) => new Set(current).add(task.id));
|
||||
try {
|
||||
const antwort = await fetch(`/api/tasks/${task.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: ziel }),
|
||||
});
|
||||
if (!antwort.ok) throw new Error("fehlgeschlagen");
|
||||
router.refresh();
|
||||
} catch {
|
||||
// Beim naechsten Laden steht wieder der echte Stand da.
|
||||
} finally {
|
||||
setLaufend((current) => {
|
||||
const next = new Set(current);
|
||||
next.delete(task.id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<header className="fade-up flex flex-wrap items-end justify-between gap-3 pt-4">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.3em] text-violet-300/70">
|
||||
Über alle Projekte
|
||||
</p>
|
||||
<h1 className="mt-2 text-2xl font-semibold tracking-tight text-white sm:text-3xl">
|
||||
Aufgaben
|
||||
</h1>
|
||||
<p className="mt-1.5 text-sm text-slate-400">
|
||||
{offen} offen
|
||||
{ueberfaellig > 0 ? (
|
||||
<>
|
||||
{" · "}
|
||||
<span className="text-rose-300">{ueberfaellig} überfällig</span>
|
||||
</>
|
||||
) : null}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => setErfassenOffen(true)}
|
||||
aria-label="Neue Aufgabe"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Neue Aufgabe</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Steuerleiste */}
|
||||
<div className="glass flex flex-col gap-3 p-3 sm:p-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{TASK_STATUS_ORDER.map((status) => {
|
||||
const meta = TASK_STATUS_META[status];
|
||||
const aktiv = statusFilter.includes(status);
|
||||
return (
|
||||
<button
|
||||
key={status}
|
||||
type="button"
|
||||
onClick={() => toggleStatus(status)}
|
||||
aria-pressed={aktiv}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs ring-1 ring-inset transition-all",
|
||||
aktiv
|
||||
? meta.className
|
||||
: "text-slate-400 ring-white/10 hover:bg-white/5 hover:text-slate-200",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 rounded-full"
|
||||
style={{ backgroundColor: meta.color, opacity: aktiv ? 1 : 0.55 }}
|
||||
/>
|
||||
{meta.label}
|
||||
<span className="tabular-nums text-slate-500">{zaehler.get(status) ?? 0}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
||||
<label className="sr-only" htmlFor="task-project-filter">
|
||||
Projekt
|
||||
</label>
|
||||
<select
|
||||
id="task-project-filter"
|
||||
className="field w-auto min-w-0 sm:min-w-[14rem] sm:flex-none"
|
||||
value={projektFilter}
|
||||
onChange={(event) => setProjektFilter(event.target.value)}
|
||||
>
|
||||
<option value="">Alle Projekte</option>
|
||||
{projekte.map((projekt) => (
|
||||
<option key={projekt.id} value={projekt.id}>
|
||||
{projekt.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<label className="flex cursor-pointer items-center gap-2 text-xs text-slate-500 sm:ml-auto">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={zeigeErledigte}
|
||||
onChange={(event) => setZeigeErledigte(event.target.checked)}
|
||||
className="h-4 w-4 accent-violet-500"
|
||||
/>
|
||||
Erledigte einblenden
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{faecher.length === 0 ? (
|
||||
<div className="glass fade-up flex flex-col items-center justify-center gap-4 px-6 py-16 text-center">
|
||||
<span className="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-violet-500/25 to-cyan-400/20 text-violet-200">
|
||||
<CheckSquare className="h-6 w-6" />
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">
|
||||
{tasks.length === 0 ? "Noch keine Aufgaben" : "Nichts offen"}
|
||||
</h2>
|
||||
<p className="mt-1 max-w-md text-sm text-slate-400">
|
||||
{tasks.length === 0
|
||||
? "Aufgaben entstehen im Projekt oder hier über „Neue Aufgabe“."
|
||||
: "Alles abgehakt, was zu den Filtern passt."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{faecher.map((fach) => {
|
||||
const meta = DUE_BUCKET_META[fach.bucket];
|
||||
return (
|
||||
<section key={fach.bucket}>
|
||||
<div className="mb-2.5 flex items-center gap-2.5">
|
||||
<span
|
||||
className="accent-dot h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: meta.color, color: meta.color }}
|
||||
/>
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-300">
|
||||
{meta.label}
|
||||
</h2>
|
||||
<span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
|
||||
{fach.items.length}
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-gradient-to-r from-white/10 to-transparent" />
|
||||
</div>
|
||||
|
||||
<ul className="glass divide-y divide-white/6 overflow-hidden">
|
||||
{fach.items.map((task) => (
|
||||
<TaskRow
|
||||
key={task.id}
|
||||
task={task}
|
||||
busy={laufend.has(task.id)}
|
||||
onToggle={() => abhaken(task)}
|
||||
onEdit={() => setBearbeiten(task)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<QuickCapture
|
||||
open={erfassenOffen}
|
||||
onClose={() => setErfassenOffen(false)}
|
||||
initialMode="aufgabe"
|
||||
/>
|
||||
|
||||
{/* Derselbe Dialog wie im Projektbrett – er kennt seine Aufgabe ueber
|
||||
die ID und braucht das Projekt nur zum Anlegen. */}
|
||||
{bearbeiten ? (
|
||||
<TaskDialog
|
||||
open
|
||||
projectId={bearbeiten.project.id}
|
||||
task={bearbeiten}
|
||||
initialStatus={bearbeiten.status}
|
||||
onClose={() => setBearbeiten(null)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskRow({
|
||||
task,
|
||||
busy,
|
||||
onToggle,
|
||||
onEdit,
|
||||
}: {
|
||||
task: TaskOverviewItem;
|
||||
busy: boolean;
|
||||
onToggle: () => void;
|
||||
onEdit: () => void;
|
||||
}) {
|
||||
const meta = TASK_STATUS_META[task.status];
|
||||
const erledigt = task.status === "DONE";
|
||||
|
||||
return (
|
||||
<li className="flex items-center gap-2.5 px-3 py-2.5 transition-colors hover:bg-white/4 sm:gap-3 sm:px-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
disabled={busy}
|
||||
aria-label={erledigt ? `„${task.title}“ wieder öffnen` : `„${task.title}“ abhaken`}
|
||||
className="shrink-0 rounded-lg p-1.5 text-slate-500 transition-colors hover:text-emerald-300 disabled:opacity-50"
|
||||
>
|
||||
{busy ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : erledigt ? (
|
||||
<CheckSquare className="h-4 w-4 text-emerald-300" />
|
||||
) : (
|
||||
<Square className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* Der Titel oeffnet den Bearbeiten-Dialog. Frueher fuehrte von
|
||||
hier nur der Weg ins Projekt – wer eine Faelligkeit aendern
|
||||
wollte, musste erst dorthin springen und die Aufgabe im Brett
|
||||
wiederfinden. */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onEdit}
|
||||
className={cn(
|
||||
"truncate text-left text-sm transition-colors hover:text-violet-200",
|
||||
erledigt ? "text-slate-500 line-through" : "text-slate-100",
|
||||
)}
|
||||
title="Aufgabe bearbeiten"
|
||||
>
|
||||
{task.title}
|
||||
</button>
|
||||
{task.recurrence ? (
|
||||
<Repeat
|
||||
className="h-3 w-3 shrink-0 text-slate-500"
|
||||
aria-label={RECURRENCE_META[task.recurrence].label}
|
||||
/>
|
||||
) : null}
|
||||
{task.sourceUrl ? (
|
||||
<a
|
||||
href={task.sourceUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="shrink-0 text-slate-500 transition-colors hover:text-violet-300"
|
||||
aria-label="Zugehöriges Issue öffnen"
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-slate-500">
|
||||
{/* Das Projekt gehoert in jede Zeile – ohne es ist eine
|
||||
projektuebergreifende Liste nicht zu lesen. */}
|
||||
<Link
|
||||
href={`/projects/${task.project.id}`}
|
||||
className="max-w-[10rem] truncate text-slate-400 underline-offset-2 hover:text-violet-300 hover:underline"
|
||||
>
|
||||
{task.project.name}
|
||||
</Link>
|
||||
|
||||
<span
|
||||
className={cn("inline-flex items-center gap-1 rounded-full px-1.5 ring-1 ring-inset", meta.className)}
|
||||
>
|
||||
{meta.label}
|
||||
</span>
|
||||
|
||||
{task.dueDate ? (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex shrink-0 items-center gap-1",
|
||||
task.bucket === "overdue" && !erledigt && "text-rose-300",
|
||||
)}
|
||||
>
|
||||
<CalendarClock className="h-3 w-3" />
|
||||
{formatDate(task.dueDate)}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
{task.labels.slice(0, 2).map((label) => (
|
||||
<span key={label} className="hidden rounded bg-white/5 px-1.5 text-slate-400 xs:inline">
|
||||
#{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -33,9 +33,45 @@ export function Modal({
|
||||
width = "lg",
|
||||
}: ModalProps) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [sichtfenster, setSichtfenster] = useState<{ height: number; top: number } | null>(null);
|
||||
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
/**
|
||||
* Der Dialog richtet sich nach dem *sichtbaren* Fenster, nicht nach dem
|
||||
* Layoutfenster.
|
||||
*
|
||||
* Auf dem Telefon schiebt sich die Tastatur ueber die untere Haelfte,
|
||||
* ohne dass sich daran etwas fuer die Seite aendert: "position: fixed"
|
||||
* und "100vh" beziehen sich weiter auf das volle Fenster. Ein zentrierter
|
||||
* Dialog liegt damit zur Haelfte unter der Tastatur – genau dort, wo das
|
||||
* Eingabefeld ist.
|
||||
*
|
||||
* Die VisualViewport-API meldet, was wirklich zu sehen ist. Hoehe und
|
||||
* oberer Rand daraus zu setzen rueckt den Dialog in den freien Bereich,
|
||||
* und weil der Behaelter scrollbar ist, holt der Browser das fokussierte
|
||||
* Feld von selbst ins Bild.
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const fenster = window.visualViewport;
|
||||
if (!fenster) return;
|
||||
|
||||
const nachfuehren = () => {
|
||||
setSichtfenster({ height: fenster.height, top: fenster.offsetTop });
|
||||
};
|
||||
nachfuehren();
|
||||
|
||||
fenster.addEventListener("resize", nachfuehren);
|
||||
// Beim Scrollen mit offener Tastatur wandert der sichtbare Ausschnitt.
|
||||
fenster.addEventListener("scroll", nachfuehren);
|
||||
return () => {
|
||||
fenster.removeEventListener("resize", nachfuehren);
|
||||
fenster.removeEventListener("scroll", nachfuehren);
|
||||
setSichtfenster(null);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (event: KeyboardEvent) => {
|
||||
@@ -53,7 +89,14 @@ export function Modal({
|
||||
if (!mounted || !open) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[120] flex items-start justify-center overflow-y-auto p-4 sm:p-8">
|
||||
<div
|
||||
className="fixed inset-x-0 z-[120] flex items-start justify-center overflow-y-auto p-3 sm:p-8"
|
||||
style={
|
||||
sichtfenster
|
||||
? { top: sichtfenster.top, height: sichtfenster.height }
|
||||
: { top: 0, bottom: 0 }
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Dialog schliessen"
|
||||
@@ -65,7 +108,7 @@ export function Modal({
|
||||
aria-modal="true"
|
||||
aria-label={title}
|
||||
className={cn(
|
||||
"popover fade-up relative z-10 my-auto w-full rounded-2xl p-6",
|
||||
"popover fade-up relative z-10 my-auto w-full rounded-2xl p-4 sm:p-6",
|
||||
width === "md" && "max-w-lg",
|
||||
width === "lg" && "max-w-2xl",
|
||||
width === "xl" && "max-w-4xl",
|
||||
|
||||
@@ -44,7 +44,11 @@ export function Popover({
|
||||
}) {
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
|
||||
const [position, setPosition] = useState<{
|
||||
top: number;
|
||||
left: number;
|
||||
width: number;
|
||||
} | null>(null);
|
||||
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
@@ -56,14 +60,19 @@ export function Popover({
|
||||
const margin = 8;
|
||||
const gap = 6;
|
||||
|
||||
// Passt die Wunschbreite nicht ins Fenster, gilt das Fenster. Sonst
|
||||
// liefert die Klemmung unten eine negative linke Kante und das Menue
|
||||
// stuende zur Haelfte ausserhalb des Bildschirms.
|
||||
const effektiv = Math.min(width, window.innerWidth - 2 * margin);
|
||||
|
||||
// Bevorzugte Ausrichtung, bei Ueberlauf auf die andere Seite wechseln.
|
||||
// Nur Festklemmen am Fensterrand waere schlecht: bei einem Ausloeser weit
|
||||
// links stuende das Menue sonst quer ueber der Seite statt an seinem
|
||||
// Ausloeser.
|
||||
let left = align === "end" ? rect.right - width : rect.left;
|
||||
let left = align === "end" ? rect.right - effektiv : rect.left;
|
||||
if (left < margin) left = rect.left;
|
||||
if (left + width > window.innerWidth - margin) left = rect.right - width;
|
||||
left = Math.min(Math.max(margin, left), window.innerWidth - width - margin);
|
||||
if (left + effektiv > window.innerWidth - margin) left = rect.right - effektiv;
|
||||
left = Math.min(Math.max(margin, left), window.innerWidth - effektiv - margin);
|
||||
|
||||
const panelHeight = panelRef.current?.offsetHeight ?? 0;
|
||||
let top = rect.bottom + gap;
|
||||
@@ -73,7 +82,7 @@ export function Popover({
|
||||
const fitsAbove = rect.top - gap - panelHeight >= margin;
|
||||
if (!fitsBelow && fitsAbove) top = rect.top - gap - panelHeight;
|
||||
|
||||
setPosition({ top, left });
|
||||
setPosition({ top, left, width: effektiv });
|
||||
}, [anchorRef, align, width]);
|
||||
|
||||
// Bewusst useEffect statt useLayoutEffect: Letzteres warnt beim
|
||||
@@ -127,7 +136,7 @@ export function Popover({
|
||||
position: "fixed",
|
||||
top: position?.top ?? -9999,
|
||||
left: position?.left ?? -9999,
|
||||
width,
|
||||
width: position?.width ?? width,
|
||||
// Bis die Position steht, unsichtbar halten – sonst blitzt das
|
||||
// Menue kurz an der falschen Stelle auf.
|
||||
visibility: position ? "visible" : "hidden",
|
||||
|
||||
@@ -75,6 +75,8 @@ export interface PendingLoginState {
|
||||
isActive: boolean;
|
||||
/** Entschluesselter TOTP-Schluessel; null, wenn er nicht lesbar ist. */
|
||||
totpSecret: string | null;
|
||||
/** Zuletzt eingeloestes Zeitfenster – gegen die Wiederverwendung. */
|
||||
totpLastCounter: number | null;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -104,6 +106,7 @@ export async function readPendingLogin(): Promise<PendingLoginState | null> {
|
||||
role: pending.user.role,
|
||||
isActive: pending.user.isActive,
|
||||
totpSecret: tryDecryptSecret(pending.user.totpSecretCipher),
|
||||
totpLastCounter: pending.user.totpLastCounter,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
counterFor,
|
||||
generateTotpSecret,
|
||||
groupSecret,
|
||||
matchTotp,
|
||||
otpauthUri,
|
||||
totpCode,
|
||||
verifyTotp,
|
||||
@@ -124,3 +125,33 @@ describe("Einrichtung", () => {
|
||||
expect(groupSecret("ABCDEFGH")).toBe("ABCD EFGH");
|
||||
});
|
||||
});
|
||||
|
||||
describe("matchTotp", () => {
|
||||
const SECRET = base32Encode(Buffer.from("12345678901234567890", "utf8"));
|
||||
const JETZT = new Date(1111111109_000);
|
||||
|
||||
/**
|
||||
* Der Zaehler ist noetig, um einen verbrauchten Code zu entwerten. RFC 6238
|
||||
* verlangt das in Abschnitt 5.2 ausdruecklich – sonst laesst sich ein
|
||||
* abgefangener Code die restliche Gueltigkeitsdauer ueber wiederverwenden.
|
||||
*/
|
||||
it("gibt das Zeitfenster zurueck, das gepasst hat", () => {
|
||||
expect(matchTotp(SECRET, "081804", JETZT)).toBe(37037036);
|
||||
});
|
||||
|
||||
it("nennt bei den Nachbarfenstern deren eigene Nummer", () => {
|
||||
// Genau daran haengt die Entwertung: der Code aus dem vorigen Fenster
|
||||
// darf den Merker nicht auf einen hoeheren Stand setzen.
|
||||
const naechstes = new Date(JETZT.getTime() + TOTP_PERIOD * 1000);
|
||||
expect(matchTotp(SECRET, "081804", naechstes)).toBe(37037036);
|
||||
});
|
||||
|
||||
it("liefert null bei falschem Code", () => {
|
||||
expect(matchTotp(SECRET, "000000", JETZT)).toBeNull();
|
||||
});
|
||||
|
||||
it("stimmt mit verifyTotp ueberein", () => {
|
||||
expect(matchTotp(SECRET, "081804", JETZT) !== null).toBe(verifyTotp(SECRET, "081804", JETZT));
|
||||
expect(matchTotp(SECRET, "000000", JETZT) !== null).toBe(verifyTotp(SECRET, "000000", JETZT));
|
||||
});
|
||||
});
|
||||
|
||||
+31
-13
@@ -102,26 +102,44 @@ export function counterFor(at: Date = new Date()): number {
|
||||
}
|
||||
|
||||
/**
|
||||
* Prueft einen eingegebenen Code. Vergleicht in konstanter Zeit und probiert
|
||||
* die Nachbarfenster mit, damit eine leicht abweichende Uhr nicht stoert.
|
||||
* Prueft einen eingegebenen Code und gibt das Zeitfenster zurueck, das
|
||||
* gepasst hat – oder null.
|
||||
*
|
||||
* Das Fenster wird gebraucht, um einen verbrauchten Code zu entwerten:
|
||||
* RFC 6238 verlangt in Abschnitt 5.2 ausdruecklich, dass derselbe Code kein
|
||||
* zweites Mal angenommen wird. Ohne diese Zahl liesse sich ein abgefangener
|
||||
* Code die restliche Gueltigkeitsdauer ueber wiederverwenden.
|
||||
*
|
||||
* Verglichen wird in konstanter Zeit, und die Nachbarfenster werden
|
||||
* mitprobiert, damit eine leicht abweichende Uhr nicht stoert.
|
||||
*/
|
||||
export function matchTotp(
|
||||
secret: string,
|
||||
code: string,
|
||||
at: Date = new Date(),
|
||||
window: number = TOTP_WINDOW,
|
||||
): number | null {
|
||||
const eingabe = code.replace(/\s/g, "");
|
||||
if (!/^\d+$/.test(eingabe) || eingabe.length !== TOTP_DIGITS) return null;
|
||||
|
||||
const jetzt = counterFor(at);
|
||||
let treffer: number | null = null;
|
||||
for (let schritt = -window; schritt <= window; schritt += 1) {
|
||||
// Nicht fruehzeitig abbrechen: sonst haengt die Laufzeit davon ab,
|
||||
// welches Fenster gepasst hat.
|
||||
if (constantEquals(totpCode(secret, jetzt + schritt), eingabe)) treffer = jetzt + schritt;
|
||||
}
|
||||
return treffer;
|
||||
}
|
||||
|
||||
/** Wie matchTotp, wenn nur interessiert *ob* der Code stimmt. */
|
||||
export function verifyTotp(
|
||||
secret: string,
|
||||
code: string,
|
||||
at: Date = new Date(),
|
||||
window: number = TOTP_WINDOW,
|
||||
): boolean {
|
||||
const eingabe = code.replace(/\s/g, "");
|
||||
if (!/^\d+$/.test(eingabe) || eingabe.length !== TOTP_DIGITS) return false;
|
||||
|
||||
const jetzt = counterFor(at);
|
||||
let treffer = false;
|
||||
for (let schritt = -window; schritt <= window; schritt += 1) {
|
||||
// Nicht fruehzeitig abbrechen: sonst haengt die Laufzeit davon ab,
|
||||
// welches Fenster gepasst hat.
|
||||
if (constantEquals(totpCode(secret, jetzt + schritt), eingabe)) treffer = true;
|
||||
}
|
||||
return treffer;
|
||||
return matchTotp(secret, code, at, window) !== null;
|
||||
}
|
||||
|
||||
function constantEquals(a: string, b: string): boolean {
|
||||
|
||||
@@ -41,6 +41,141 @@ export const KIND_META: Record<ChangeKind, { label: string; className: string }>
|
||||
};
|
||||
|
||||
export const CHANGELOG: Release[] = [
|
||||
{
|
||||
version: "1.7.0",
|
||||
date: "2026-08-15",
|
||||
headline: "Aufgaben und Git-Issues finden zusammen.",
|
||||
changes: [
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"Eine Aufgabe lässt sich als Issue im verknüpften Repository anlegen — per Knopf, " +
|
||||
"nie nebenbei. Danach wandert der Zustand mit: erledigt schließt das Issue, ein " +
|
||||
"Zurückziehen öffnet es wieder.",
|
||||
},
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"Webhooks. Ein Push aktualisiert den Stand sofort, statt bis zum nächsten " +
|
||||
"Abgleich zu warten; ein geschlossenes Issue hakt seine Aufgabe ab. Einzurichten " +
|
||||
"am Repository — URL und Geheimnis stehen dort bereit.",
|
||||
},
|
||||
{
|
||||
kind: "behoben",
|
||||
text:
|
||||
"Auf dem Telefon verdeckte die Bildschirmtastatur den halben Dialog, weil er mit " +
|
||||
"der vollen Fensterhöhe rechnete. Dialoge richten sich jetzt nach dem sichtbaren " +
|
||||
"Bereich und rücken über die Tastatur.",
|
||||
},
|
||||
{
|
||||
kind: "besser",
|
||||
text:
|
||||
"Aufgaben lassen sich in der Übersicht direkt bearbeiten. Bisher führte von dort " +
|
||||
"nur der Weg ins Projekt.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "1.6.0",
|
||||
date: "2026-08-14",
|
||||
headline: "Unterwegs erfassen — und eine Oberfläche, die aufs Telefon passt.",
|
||||
changes: [
|
||||
{
|
||||
kind: "behoben",
|
||||
text:
|
||||
"Auf dem Telefon war das Dashboard breiter als der Bildschirm: die Steuerleiste " +
|
||||
"konnte nicht umbrechen und schob den Knopf „Neues Projekt“ aus dem Bild. " +
|
||||
"Dasselbe im Projektkopf, wo „Löschen“ außerhalb lag. Beide Zeilen brechen " +
|
||||
"jetzt um.",
|
||||
},
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"Schnellerfassung: ein Blitzsymbol in der Kopfleiste, auf jeder Seite " +
|
||||
"erreichbar. Ein Feld, Enter, fertig — als Idee entsteht ein Projekt, als " +
|
||||
"Aufgabe eine Aufgabe im gewählten Projekt. Der Dialog bleibt danach offen, " +
|
||||
"weil auf eine Idee meist gleich die nächste folgt.",
|
||||
},
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"Eine Aufgabenseite über alle Projekte hinweg, geordnet nach Fälligkeit: " +
|
||||
"überfällig, heute, diese Woche, später, ohne Termin. Abhaken geht direkt " +
|
||||
"aus der Liste.",
|
||||
},
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"Vierte Ansicht im Dashboard: eine kompakte Liste. Auf dem Telefon passen " +
|
||||
"damit fünf Projekte auf einen Bildschirm statt auf vier.",
|
||||
},
|
||||
{
|
||||
kind: "besser",
|
||||
text:
|
||||
"Eingabefelder sind auf Berührungsgeräten 16 Pixel groß — darunter zoomt " +
|
||||
"iOS Safari beim Hineintippen die Seite heran und kehrt nicht von selbst " +
|
||||
"zurück. Knöpfe und der Fortschrittsregler sind mit dem Finger zu treffen.",
|
||||
},
|
||||
{
|
||||
kind: "behoben",
|
||||
text:
|
||||
"Die Verweise in der Kopfleiste und „Neues Projekt“ sind auf schmalen " +
|
||||
"Anzeigen reine Symbole und hießen für einen Screenreader gar nichts. " +
|
||||
"Jetzt tragen sie eine Beschriftung.",
|
||||
},
|
||||
{
|
||||
kind: "behoben",
|
||||
text:
|
||||
"Das Tag-Formular der Auswahlleiste war breiter als sein Menü und wurde " +
|
||||
"beschnitten — auf jeder Bildschirmbreite.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "1.5.0",
|
||||
date: "2026-07-27",
|
||||
headline: "Sicherheitsdurchsicht und eine Anleitung für den Server.",
|
||||
changes: [
|
||||
{
|
||||
kind: "behoben",
|
||||
text:
|
||||
"Ein Einmalkennwort ließ sich innerhalb seiner Gültigkeit mehrfach verwenden. " +
|
||||
"Das eingelöste Zeitfenster wird jetzt gemerkt — RFC 6238 verlangt das " +
|
||||
"ausdrücklich.",
|
||||
},
|
||||
{
|
||||
kind: "behoben",
|
||||
text:
|
||||
"Der Bildoptimierer von Next war ohne Anmeldung erreichbar und reichte Bilder " +
|
||||
"durch libvips, für das es offene Schwachstellen gibt. Nebula benutzt ihn " +
|
||||
"nirgends — jetzt ist er abgeschaltet.",
|
||||
},
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"DEPLOYMENT.md: Schritt für Schritt vom leeren Server bis zur Instanz hinter " +
|
||||
"TLS, mit Firewall, Sicherungen und Betrieb.",
|
||||
},
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"scripts/update.sh rollt ein Update aus: prüfen, holen, sichern, bauen, " +
|
||||
"starten, Gesundheit prüfen — und nennt bei einem Fehlschlag den Weg zurück.",
|
||||
},
|
||||
{
|
||||
kind: "besser",
|
||||
text:
|
||||
"Umsortieren im Brett und das Anlegen von Vorlagen sind jetzt ebenfalls " +
|
||||
"ratenbegrenzt.",
|
||||
},
|
||||
{
|
||||
kind: "besser",
|
||||
text:
|
||||
"Die Bereinigung des Markdowns ist mit elf Tests festgehalten: Skripte, " +
|
||||
"Ereignis-Attribute, javascript: und data: kommen nicht durch.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "1.4.0",
|
||||
date: "2026-07-26",
|
||||
|
||||
+28
-1
@@ -1,4 +1,4 @@
|
||||
import { getJson, getJsonSafe, normalizeBaseUrl, shortSha, toIso } from "./http";
|
||||
import { getJson, getJsonSafe, normalizeBaseUrl, sendJson, shortSha, toIso } from "./http";
|
||||
import {
|
||||
CALENDAR_PAGE_SIZE,
|
||||
calendarByPaging,
|
||||
@@ -12,6 +12,7 @@ import type {
|
||||
CiState,
|
||||
CommitInfo,
|
||||
ConnectionCheck,
|
||||
CreatedIssue,
|
||||
GitClient,
|
||||
ProviderConfig,
|
||||
ReleaseInfo,
|
||||
@@ -44,6 +45,32 @@ export class GiteaClient implements GitClient {
|
||||
return headers;
|
||||
}
|
||||
|
||||
private repoBase(ref: RepoRef): string {
|
||||
return `${this.apiBase}/repos/${encodeURIComponent(ref.owner)}/${encodeURIComponent(ref.name)}`;
|
||||
}
|
||||
|
||||
async createIssue(
|
||||
ref: RepoRef,
|
||||
issue: { title: string; body?: string | null },
|
||||
): Promise<CreatedIssue> {
|
||||
const angelegt = await sendJson<{ number: number; html_url?: string }>(
|
||||
`${this.repoBase(ref)}/issues`,
|
||||
"POST",
|
||||
{ title: issue.title, body: issue.body ?? "" },
|
||||
{ headers: this.headers() },
|
||||
);
|
||||
return { number: angelegt.number, url: angelegt.html_url ?? null };
|
||||
}
|
||||
|
||||
async setIssueState(ref: RepoRef, number: number, open: boolean): Promise<void> {
|
||||
await sendJson(
|
||||
`${this.repoBase(ref)}/issues/${number}`,
|
||||
"PATCH",
|
||||
{ state: open ? "open" : "closed" },
|
||||
{ headers: this.headers() },
|
||||
);
|
||||
}
|
||||
|
||||
async check(): Promise<ConnectionCheck> {
|
||||
try {
|
||||
const version = await getJsonSafe<{ version?: string }>(
|
||||
|
||||
+28
-1
@@ -1,4 +1,4 @@
|
||||
import { getJson, getJsonSafe, normalizeBaseUrl, shortSha, toIso } from "./http";
|
||||
import { getJson, getJsonSafe, normalizeBaseUrl, sendJson, shortSha, toIso } from "./http";
|
||||
import type {
|
||||
BranchInfo,
|
||||
CiInfo,
|
||||
@@ -6,6 +6,7 @@ import type {
|
||||
CommitCalendar,
|
||||
CommitInfo,
|
||||
ConnectionCheck,
|
||||
CreatedIssue,
|
||||
GitClient,
|
||||
ProviderConfig,
|
||||
ReleaseInfo,
|
||||
@@ -43,6 +44,32 @@ export class GitHubClient implements GitClient {
|
||||
return headers;
|
||||
}
|
||||
|
||||
private repoBase(ref: RepoRef): string {
|
||||
return `${this.apiBase}/repos/${encodeURIComponent(ref.owner)}/${encodeURIComponent(ref.name)}`;
|
||||
}
|
||||
|
||||
async createIssue(
|
||||
ref: RepoRef,
|
||||
issue: { title: string; body?: string | null },
|
||||
): Promise<CreatedIssue> {
|
||||
const angelegt = await sendJson<{ number: number; html_url?: string }>(
|
||||
`${this.repoBase(ref)}/issues`,
|
||||
"POST",
|
||||
{ title: issue.title, body: issue.body ?? "" },
|
||||
{ headers: this.headers() },
|
||||
);
|
||||
return { number: angelegt.number, url: angelegt.html_url ?? null };
|
||||
}
|
||||
|
||||
async setIssueState(ref: RepoRef, number: number, open: boolean): Promise<void> {
|
||||
await sendJson(
|
||||
`${this.repoBase(ref)}/issues/${number}`,
|
||||
"PATCH",
|
||||
{ state: open ? "open" : "closed" },
|
||||
{ headers: this.headers() },
|
||||
);
|
||||
}
|
||||
|
||||
async check(): Promise<ConnectionCheck> {
|
||||
try {
|
||||
if (!this.token) {
|
||||
|
||||
+26
-1
@@ -1,4 +1,4 @@
|
||||
import { getJson, getJsonSafe, normalizeBaseUrl, shortSha, toIso } from "./http";
|
||||
import { getJson, getJsonSafe, normalizeBaseUrl, sendJson, shortSha, toIso } from "./http";
|
||||
import {
|
||||
CALENDAR_PAGE_SIZE,
|
||||
calendarByPaging,
|
||||
@@ -12,6 +12,7 @@ import type {
|
||||
CiState,
|
||||
CommitInfo,
|
||||
ConnectionCheck,
|
||||
CreatedIssue,
|
||||
GitClient,
|
||||
ProviderConfig,
|
||||
ReleaseInfo,
|
||||
@@ -45,6 +46,30 @@ export class GitLabClient implements GitClient {
|
||||
return headers;
|
||||
}
|
||||
|
||||
async createIssue(
|
||||
ref: RepoRef,
|
||||
issue: { title: string; body?: string | null },
|
||||
): Promise<CreatedIssue> {
|
||||
// GitLab nennt es "iid" – die projektinterne Nummer, die auch in der
|
||||
// Oberflaeche steht. "id" waere die instanzweite und damit die falsche.
|
||||
const angelegt = await sendJson<{ iid: number; web_url?: string }>(
|
||||
`${this.apiBase}/projects/${this.projectPath(ref)}/issues`,
|
||||
"POST",
|
||||
{ title: issue.title, description: issue.body ?? "" },
|
||||
{ headers: this.headers() },
|
||||
);
|
||||
return { number: angelegt.iid, url: angelegt.web_url ?? null };
|
||||
}
|
||||
|
||||
async setIssueState(ref: RepoRef, number: number, open: boolean): Promise<void> {
|
||||
await sendJson(
|
||||
`${this.apiBase}/projects/${this.projectPath(ref)}/issues/${number}`,
|
||||
"PUT",
|
||||
{ state_event: open ? "reopen" : "close" },
|
||||
{ headers: this.headers() },
|
||||
);
|
||||
}
|
||||
|
||||
async check(): Promise<ConnectionCheck> {
|
||||
try {
|
||||
if (!this.token) {
|
||||
|
||||
@@ -98,6 +98,83 @@ export async function getJson<T>(
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Schreibender Aufruf – POST, PATCH oder PUT.
|
||||
*
|
||||
* Bewusst dieselbe Schleuse wie getJson: die Basis-URL stammt aus einem
|
||||
* Formular, und ohne die Pruefung waere ein schreibender Aufruf der weitaus
|
||||
* unangenehmere Weg nach innen. Redirects werden hier **nicht** verfolgt.
|
||||
* Ein 307 auf eine interne Adresse wuerde den Rumpf mitnehmen, und der
|
||||
* enthaelt bei uns immer den Token im Header – lieber ein Fehler als eine
|
||||
* Anfrage, die woanders landet.
|
||||
*/
|
||||
export async function sendJson<T>(
|
||||
url: string,
|
||||
method: "POST" | "PATCH" | "PUT",
|
||||
body: unknown,
|
||||
options: FetchOptions = {},
|
||||
): Promise<T> {
|
||||
const controller = new AbortController();
|
||||
const timeout = setTimeout(
|
||||
() => controller.abort(),
|
||||
options.timeoutMs ?? DEFAULT_TIMEOUT,
|
||||
);
|
||||
|
||||
try {
|
||||
await assertAllowedUrl(url);
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
"User-Agent": "Nebula-Dashboard",
|
||||
...options.headers,
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
signal: controller.signal,
|
||||
cache: "no-store",
|
||||
redirect: "manual",
|
||||
});
|
||||
|
||||
// Bei redirect: "manual" kommt der Umleitungsstatus durch, statt dass
|
||||
// fetch ihm folgt. Das ist hier gewollt und ein Fehlerfall.
|
||||
if (response.status >= 300 && response.status < 400) {
|
||||
throw new GitApiError(
|
||||
"Das Git-System hat umgeleitet. Schreibende Aufrufe folgen dem nicht – " +
|
||||
"bitte die Basis-URL der Verbindung auf die endgueltige Adresse setzen.",
|
||||
response.status,
|
||||
url,
|
||||
);
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const text = await response.text().catch(() => "");
|
||||
throw new GitApiError(friendlyMessage(response.status, url, text), response.status, url);
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
if (!text) return null as T;
|
||||
return JSON.parse(text) as T;
|
||||
} catch (error) {
|
||||
if (error instanceof GitApiError) throw error;
|
||||
if (error instanceof BlockedHostError) {
|
||||
throw new GitApiError(error.message, 403, url);
|
||||
}
|
||||
if (error instanceof Error && error.name === "AbortError") {
|
||||
throw new GitApiError(
|
||||
`Zeitueberschreitung nach ${options.timeoutMs ?? DEFAULT_TIMEOUT} ms`,
|
||||
408,
|
||||
url,
|
||||
);
|
||||
}
|
||||
const reason = error instanceof Error ? error.message : String(error);
|
||||
throw new GitApiError(`Verbindung fehlgeschlagen: ${reason}`, 0, url);
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
}
|
||||
|
||||
/** Wie getJson, gibt aber bei jedem Fehler den Fallback zurueck. */
|
||||
export async function getJsonSafe<T>(
|
||||
url: string,
|
||||
|
||||
@@ -167,10 +167,29 @@ export interface ProviderConfig {
|
||||
token: string | null;
|
||||
}
|
||||
|
||||
/** Ein neu angelegtes Issue, so weit wir es zurueckschreiben. */
|
||||
export interface CreatedIssue {
|
||||
number: number;
|
||||
url: string | null;
|
||||
}
|
||||
|
||||
export interface GitClient {
|
||||
readonly provider: ProviderKind;
|
||||
/** Prueft Erreichbarkeit und Token-Gueltigkeit. */
|
||||
check(): Promise<ConnectionCheck>;
|
||||
/**
|
||||
* Legt ein Issue an und liefert Nummer und Adresse zurueck.
|
||||
*
|
||||
* Der einzige schreibende Aufruf in dieser Schnittstelle. Er wird nie
|
||||
* nebenbei ausgeloest, sondern immer von Hand angestossen – was nach
|
||||
* aussen geht, soll jemand gewollt haben.
|
||||
*/
|
||||
createIssue(ref: RepoRef, issue: { title: string; body?: string | null }): Promise<CreatedIssue>;
|
||||
/**
|
||||
* Schliesst ein Issue. Beim Zurueckziehen einer Aufgabe wird es wieder
|
||||
* geoeffnet – daher der Schalter statt zweier Methoden.
|
||||
*/
|
||||
setIssueState(ref: RepoRef, number: number, open: boolean): Promise<void>;
|
||||
/** Repos, auf die der Token Zugriff hat (fuer die Auswahl beim Verknuepfen). */
|
||||
listRepos(query?: string): Promise<RepoListItem[]>;
|
||||
/** Vollstaendiger Stand eines Repositories. */
|
||||
|
||||
+50
-1
@@ -65,17 +65,66 @@ export const connectionSafeSelect = Prisma.validator<Prisma.GitConnectionSelect>
|
||||
updatedAt: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* Felder eines Repositories, die nach aussen duerfen.
|
||||
*
|
||||
* Ausdruecklich als Liste und nicht als "include": ein include liefert jedes
|
||||
* Skalarfeld mit, auch neu hinzugekommene. Das Webhook-Geheimnis waere so
|
||||
* still in jede Projektantwort und in jede Seite gewandert – verschluesselt
|
||||
* zwar, aber nach aussen gehoert es trotzdem nicht. Dieselbe Ueberlegung wie
|
||||
* bei connectionSafeSelect.
|
||||
*
|
||||
* Ob ein Webhook eingerichtet ist, sagt webhookLastAt nicht zuverlaessig
|
||||
* (frisch eingerichtet ist es null). Diese Angabe holt die Projektseite
|
||||
* deshalb getrennt – siehe webhookRepositoryIds.
|
||||
*/
|
||||
export const repositorySafeSelect = Prisma.validator<Prisma.RepositorySelect>()({
|
||||
id: true,
|
||||
projectId: true,
|
||||
label: true,
|
||||
repoUrl: true,
|
||||
repoOwner: true,
|
||||
repoName: true,
|
||||
defaultBranch: true,
|
||||
connectionId: true,
|
||||
position: true,
|
||||
lastSyncedAt: true,
|
||||
syncError: true,
|
||||
autoSync: true,
|
||||
syncFailureCount: true,
|
||||
notifiedSyncError: true,
|
||||
notifiedCiState: true,
|
||||
notifiedRelease: true,
|
||||
webhookLastAt: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
connection: { select: connectionSafeSelect },
|
||||
snapshot: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* Ein Repository mitsamt Verbindung und Stand. Die Reihenfolge ist ueberall
|
||||
* dieselbe: das fuehrende zuerst, denn auf der Karte ist nur fuer eines Platz.
|
||||
*/
|
||||
export const repositoryInclude = Prisma.validator<Prisma.ProjectInclude>()({
|
||||
repositories: {
|
||||
include: { connection: { select: connectionSafeSelect }, snapshot: true },
|
||||
select: repositorySafeSelect,
|
||||
orderBy: [{ position: "asc" }, { createdAt: "asc" }],
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* IDs der Repositories eines Projekts, fuer die ein Webhook hinterlegt ist.
|
||||
* Getrennt geholt, damit das Geheimnis selbst nirgends mitgereicht wird.
|
||||
*/
|
||||
export async function webhookRepositoryIds(projectId: string): Promise<string[]> {
|
||||
const treffer = await prisma.repository.findMany({
|
||||
where: { projectId, webhookSecret: { not: null } },
|
||||
select: { id: true },
|
||||
});
|
||||
return treffer.map((eintrag) => eintrag.id);
|
||||
}
|
||||
|
||||
export const projectListInclude = Prisma.validator<Prisma.ProjectInclude>()({
|
||||
...repositoryInclude,
|
||||
_count: { select: { notes: true, tasks: true } },
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
DUE_BUCKET_META,
|
||||
DUE_BUCKET_ORDER,
|
||||
TASK_STATUS_META,
|
||||
TASK_STATUS_ORDER,
|
||||
dueBucket,
|
||||
nextDueDate,
|
||||
progressFromTasks,
|
||||
} from "./tasks";
|
||||
@@ -88,3 +91,48 @@ describe("nextDueDate", () => {
|
||||
expect(Number.isNaN(next.getTime())).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("dueBucket", () => {
|
||||
/** 14.08.2026, 17:30 Berliner Zeit – bewusst spaeter Nachmittag. */
|
||||
const JETZT = new Date("2026-08-14T15:30:00Z");
|
||||
|
||||
it("ordnet eine Aufgabe ohne Termin nach hinten", () => {
|
||||
expect(dueBucket(null, JETZT)).toBe("someday");
|
||||
});
|
||||
|
||||
it("zaehlt den heutigen Tag als heute, auch wenn die Uhrzeit vorbei ist", () => {
|
||||
// Der Punkt der Funktion: gerechnet wird auf Kalendertage. Um 9 Uhr
|
||||
// faellig und jetzt ist es halb sechs – die Aufgabe steht trotzdem
|
||||
// unter "Heute" und nicht unter "Ueberfaellig".
|
||||
expect(dueBucket(new Date("2026-08-14T07:00:00Z"), JETZT)).toBe("today");
|
||||
});
|
||||
|
||||
it("erkennt den Vortag als ueberfaellig", () => {
|
||||
expect(dueBucket(new Date("2026-08-13T21:00:00Z"), JETZT)).toBe("overdue");
|
||||
});
|
||||
|
||||
it("fasst die kommenden sieben Tage als diese Woche", () => {
|
||||
expect(dueBucket(new Date("2026-08-15T06:00:00Z"), JETZT)).toBe("week");
|
||||
expect(dueBucket(new Date("2026-08-21T06:00:00Z"), JETZT)).toBe("week");
|
||||
});
|
||||
|
||||
it("schiebt alles danach nach spaeter", () => {
|
||||
expect(dueBucket(new Date("2026-08-22T06:00:00Z"), JETZT)).toBe("later");
|
||||
});
|
||||
|
||||
it("richtet sich nach Berliner Kalendertagen, nicht nach UTC", () => {
|
||||
// 21:30 UTC ist in Berlin schon 23:30 desselben Tages – im Container
|
||||
// laeuft die Anwendung aber nach UTC. Ohne feste Zeitzone kippte die
|
||||
// Einteilung hier um einen Tag.
|
||||
const spaetAbends = new Date("2026-08-15T21:30:00Z");
|
||||
expect(dueBucket(new Date("2026-08-15T10:00:00Z"), spaetAbends)).toBe("today");
|
||||
expect(dueBucket(new Date("2026-08-16T10:00:00Z"), spaetAbends)).toBe("week");
|
||||
});
|
||||
|
||||
it("hat zu jedem Fach eine Beschriftung und eine Farbe", () => {
|
||||
for (const bucket of DUE_BUCKET_ORDER) {
|
||||
expect(DUE_BUCKET_META[bucket].label).toBeTruthy();
|
||||
expect(DUE_BUCKET_META[bucket].color).toMatch(/^#[0-9a-f]{6}$/i);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -161,6 +161,68 @@ export async function spawnRecurrence(taskId: string) {
|
||||
});
|
||||
}
|
||||
|
||||
// ── Faelligkeit in der Gesamtuebersicht ──────────────────────
|
||||
|
||||
/**
|
||||
* Faecher der Aufgabenuebersicht. Anders als im Projektbrett ordnet dort
|
||||
* nicht die Spalte, sondern der Termin: projektuebergreifend ist "was ist
|
||||
* ueberfaellig" die Frage, nicht "was steht in welcher Spalte".
|
||||
*/
|
||||
export const DUE_BUCKET_ORDER = ["overdue", "today", "week", "later", "someday"] as const;
|
||||
|
||||
export type DueBucket = (typeof DUE_BUCKET_ORDER)[number];
|
||||
|
||||
export const DUE_BUCKET_META: Record<DueBucket, { label: string; color: string }> = {
|
||||
overdue: { label: "Überfällig", color: "#fb7185" },
|
||||
today: { label: "Heute", color: "#fbbf24" },
|
||||
week: { label: "Diese Woche", color: "#a78bfa" },
|
||||
later: { label: "Später", color: "#38bdf8" },
|
||||
someday: { label: "Ohne Termin", color: "#8a98b0" },
|
||||
};
|
||||
|
||||
/**
|
||||
* Kalendertag in fester Zeitzone, als fortlaufende Tagesnummer.
|
||||
*
|
||||
* Die Serverzeit taugt dafuer nicht: im Container laeuft die Anwendung nach
|
||||
* UTC. Um 23:30 Berliner Zeit ist dort noch der Vortag, und eine heute
|
||||
* faellige Aufgabe stuende unter "Ueberfaellig". Dieselbe Zeitzone benutzt
|
||||
* auch die Datumsausgabe in lib/utils.
|
||||
*/
|
||||
const TAG_FORMAT = new Intl.DateTimeFormat("en-CA", {
|
||||
timeZone: "Europe/Berlin",
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
});
|
||||
|
||||
function tagesnummer(wert: Date): number {
|
||||
// en-CA liefert "2026-08-14" – und damit etwas, das sich ohne weiteres
|
||||
// Zerlegen sortieren und rechnen laesst.
|
||||
const [jahr, monat, tag] = TAG_FORMAT.format(wert).split("-").map(Number);
|
||||
return Date.UTC(jahr, monat - 1, tag) / 86_400_000;
|
||||
}
|
||||
|
||||
/**
|
||||
* In welches Fach eine Aufgabe faellt.
|
||||
*
|
||||
* Gerechnet wird auf Kalendertage, nicht auf Stunden: eine Aufgabe, die
|
||||
* heute um 9 Uhr faellig war, ist um 17 Uhr nicht "ueberfaellig", sondern
|
||||
* immer noch "heute". Sonst wanderte die halbe Liste im Lauf des Tages
|
||||
* nach oben.
|
||||
*
|
||||
* Bewusst als reine Funktion mit uebergebenem "jetzt" – das macht sie
|
||||
* pruefbar.
|
||||
*/
|
||||
export function dueBucket(dueDate: Date | null, now: Date = new Date()): DueBucket {
|
||||
if (!dueDate) return "someday";
|
||||
|
||||
const abstand = tagesnummer(dueDate) - tagesnummer(now);
|
||||
if (abstand < 0) return "overdue";
|
||||
if (abstand === 0) return "today";
|
||||
if (abstand <= 7) return "week";
|
||||
return "later";
|
||||
}
|
||||
|
||||
/** Naechste freie Position am Ende einer Spalte. */
|
||||
export async function nextPosition(
|
||||
projectId: string,
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { issueShouldBeOpen, statusForIssueState } from "./issues";
|
||||
|
||||
describe("issueShouldBeOpen", () => {
|
||||
it("haelt das Issue offen, solange die Aufgabe nicht erledigt ist", () => {
|
||||
expect(issueShouldBeOpen("TODO")).toBe(true);
|
||||
expect(issueShouldBeOpen("DOING")).toBe(true);
|
||||
expect(issueShouldBeOpen("BLOCKED")).toBe(true);
|
||||
});
|
||||
|
||||
it("schliesst es erst bei ERLEDIGT", () => {
|
||||
expect(issueShouldBeOpen("DONE")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("statusForIssueState", () => {
|
||||
it("macht aus einem geschlossenen Issue eine erledigte Aufgabe", () => {
|
||||
expect(statusForIssueState(false, "TODO")).toBe("DONE");
|
||||
expect(statusForIssueState(false, "DOING")).toBe("DONE");
|
||||
});
|
||||
|
||||
it("holt eine erledigte Aufgabe zurueck nach OFFEN", () => {
|
||||
expect(statusForIssueState(true, "DONE")).toBe("TODO");
|
||||
});
|
||||
|
||||
it("laesst den feineren Zustand stehen, wenn das Issue ohnehin offen ist", () => {
|
||||
// Ein "opened"-Ereignis zu einer Aufgabe, die schon in Arbeit ist, darf
|
||||
// sie nicht auf OFFEN zuruecksetzen – IN ARBEIT ist mehr Information.
|
||||
expect(statusForIssueState(true, "DOING")).toBe("DOING");
|
||||
expect(statusForIssueState(true, "BLOCKED")).toBe("BLOCKED");
|
||||
expect(statusForIssueState(true, "TODO")).toBe("TODO");
|
||||
});
|
||||
|
||||
it("bildet den Rundlauf ab, so verlustbehaftet wie er ist", () => {
|
||||
// IN ARBEIT geht nach draussen als "offen". Kommt es zurueck, bleibt es
|
||||
// IN ARBEIT – der Zustand ueberlebt also, solange niemand das Issue
|
||||
// schliesst. Nach dem Schliessen und Wiederoeffnen ist er weg, und das
|
||||
// ist die bewusst hingenommene Grenze.
|
||||
const hin = issueShouldBeOpen("DOING");
|
||||
expect(statusForIssueState(hin, "DOING")).toBe("DOING");
|
||||
expect(statusForIssueState(true, statusForIssueState(false, "DOING"))).toBe("TODO");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,70 @@
|
||||
import type { TaskStatus } from "@prisma/client";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { clientForConnection } from "@/lib/git";
|
||||
|
||||
/**
|
||||
* Die Bruecke zwischen Nebula-Aufgabe und Git-Issue.
|
||||
*
|
||||
* Die Zustaende passen nicht aufeinander und das bleibt so: Nebula kennt
|
||||
* OFFEN, IN ARBEIT, BLOCKIERT und ERLEDIGT, ein Issue nur offen oder
|
||||
* geschlossen. Nach aussen geht deshalb nur die Grenze zwischen "erledigt"
|
||||
* und "nicht erledigt"; ein Rundlauf verliert IN ARBEIT und BLOCKIERT.
|
||||
*
|
||||
* Die Alternative waeren Labels wie "nebula:doing" – die wuerden den
|
||||
* Issue-Tracker aber mit Zustaenden fuellen, die dort niemand pflegt. Die
|
||||
* feine Abstufung bleibt in Nebula.
|
||||
*/
|
||||
|
||||
/** Ist der Aufgabenzustand einer, bei dem das Issue offen sein soll? */
|
||||
export function issueShouldBeOpen(status: TaskStatus): boolean {
|
||||
return status !== "DONE";
|
||||
}
|
||||
|
||||
/** Der Aufgabenzustand, der zu einem Issue-Zustand passt. */
|
||||
export function statusForIssueState(open: boolean, current: TaskStatus): TaskStatus {
|
||||
if (open) {
|
||||
// Ein wieder geoeffnetes Issue macht aus ERLEDIGT wieder OFFEN. Stand
|
||||
// die Aufgabe ohnehin nicht auf ERLEDIGT, bleibt ihr feinerer Zustand
|
||||
// stehen – IN ARBEIT ist mehr Information als OFFEN.
|
||||
return current === "DONE" ? "TODO" : current;
|
||||
}
|
||||
return "DONE";
|
||||
}
|
||||
|
||||
/**
|
||||
* Traegt den Zustand einer Aufgabe an ihrem Issue nach.
|
||||
*
|
||||
* Bewusst fehlertolerant: schlaegt der Aufruf fehl, ist die Aufgabe in
|
||||
* Nebula trotzdem umgezogen. Ein nicht erreichbares Git-System darf das
|
||||
* Abhaken nicht verhindern – der naechste Wechsel versucht es erneut.
|
||||
*
|
||||
* Gibt zurueck, ob es geklappt hat; null heisst "nichts zu tun".
|
||||
*/
|
||||
export async function mirrorStatusToIssue(
|
||||
taskId: string,
|
||||
status: TaskStatus,
|
||||
): Promise<boolean | null> {
|
||||
const task = await prisma.task.findUnique({
|
||||
where: { id: taskId },
|
||||
select: { sourceIssue: true, sourceRepositoryId: true },
|
||||
});
|
||||
if (!task?.sourceIssue || !task.sourceRepositoryId) return null;
|
||||
|
||||
const repository = await prisma.repository.findUnique({
|
||||
where: { id: task.sourceRepositoryId },
|
||||
include: { connection: true },
|
||||
});
|
||||
if (!repository?.connection || !repository.repoOwner || !repository.repoName) return null;
|
||||
|
||||
try {
|
||||
const client = clientForConnection(repository.connection);
|
||||
await client.setIssueState(
|
||||
{ owner: repository.repoOwner, name: repository.repoName },
|
||||
task.sourceIssue,
|
||||
issueShouldBeOpen(status),
|
||||
);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import { createHmac } from "node:crypto";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { parseEvent, verifySignature } from "./verify";
|
||||
|
||||
const GEHEIM = "ein-geheimnis-das-lang-genug-ist";
|
||||
const RUMPF = JSON.stringify({ action: "closed", issue: { number: 12 } });
|
||||
|
||||
function signiere(secret: string, body: string): string {
|
||||
return createHmac("sha256", secret).update(body, "utf8").digest("hex");
|
||||
}
|
||||
|
||||
function kopf(eintraege: Record<string, string>): Headers {
|
||||
return new Headers(eintraege);
|
||||
}
|
||||
|
||||
describe("verifySignature – GitHub", () => {
|
||||
it("nimmt die richtige Signatur an", () => {
|
||||
const headers = kopf({ "x-hub-signature-256": `sha256=${signiere(GEHEIM, RUMPF)}` });
|
||||
expect(verifySignature("GITHUB", GEHEIM, RUMPF, headers)).toEqual({ ok: true });
|
||||
});
|
||||
|
||||
it("weist eine fremde Signatur ab", () => {
|
||||
const headers = kopf({ "x-hub-signature-256": `sha256=${signiere("anderes", RUMPF)}` });
|
||||
expect(verifySignature("GITHUB", GEHEIM, RUMPF, headers)).toEqual({
|
||||
ok: false,
|
||||
reason: "mismatch",
|
||||
});
|
||||
});
|
||||
|
||||
it("weist ab, wenn der Rumpf veraendert wurde", () => {
|
||||
// Das ist der eigentliche Zweck: die Signatur haengt am Inhalt.
|
||||
const headers = kopf({ "x-hub-signature-256": `sha256=${signiere(GEHEIM, RUMPF)}` });
|
||||
const veraendert = JSON.stringify({ action: "closed", issue: { number: 99 } });
|
||||
expect(verifySignature("GITHUB", GEHEIM, veraendert, headers).ok).toBe(false);
|
||||
});
|
||||
|
||||
it("weist ab, wenn gar keine Signatur mitkommt", () => {
|
||||
expect(verifySignature("GITHUB", GEHEIM, RUMPF, kopf({}))).toEqual({
|
||||
ok: false,
|
||||
reason: "missing",
|
||||
});
|
||||
});
|
||||
|
||||
it("laesst sich nicht mit dem blossen Praefix taeuschen", () => {
|
||||
expect(verifySignature("GITHUB", GEHEIM, RUMPF, kopf({ "x-hub-signature-256": "sha256=" })).ok).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("verifySignature – Gitea", () => {
|
||||
it("nimmt die Signatur ohne Praefix an", () => {
|
||||
const headers = kopf({ "x-gitea-signature": signiere(GEHEIM, RUMPF) });
|
||||
expect(verifySignature("GITEA", GEHEIM, RUMPF, headers)).toEqual({ ok: true });
|
||||
});
|
||||
|
||||
it("nimmt ersatzweise das GitHub-Format an", () => {
|
||||
// Aeltere Gitea-Fassungen senden nur X-Hub-Signature-256.
|
||||
const headers = kopf({ "x-hub-signature-256": `sha256=${signiere(GEHEIM, RUMPF)}` });
|
||||
expect(verifySignature("GITEA", GEHEIM, RUMPF, headers)).toEqual({ ok: true });
|
||||
});
|
||||
|
||||
it("weist eine falsche Signatur ab", () => {
|
||||
const headers = kopf({ "x-gitea-signature": signiere("anderes", RUMPF) });
|
||||
expect(verifySignature("GITEA", GEHEIM, RUMPF, headers).ok).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("verifySignature – GitLab", () => {
|
||||
it("vergleicht den Token im Klartext", () => {
|
||||
expect(verifySignature("GITLAB", GEHEIM, RUMPF, kopf({ "x-gitlab-token": GEHEIM }))).toEqual({
|
||||
ok: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("weist einen falschen Token ab", () => {
|
||||
expect(
|
||||
verifySignature("GITLAB", GEHEIM, RUMPF, kopf({ "x-gitlab-token": "falsch" })).ok,
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it("weist ab, wenn der Token fehlt", () => {
|
||||
expect(verifySignature("GITLAB", GEHEIM, RUMPF, kopf({}))).toEqual({
|
||||
ok: false,
|
||||
reason: "missing",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("parseEvent", () => {
|
||||
it("erkennt einen Push", () => {
|
||||
expect(parseEvent("GITHUB", "push", {})).toEqual({ kind: "push" });
|
||||
});
|
||||
|
||||
it("erkennt ein geschlossenes Issue bei GitHub und Gitea", () => {
|
||||
const nutzlast = { action: "closed", issue: { number: 12 } };
|
||||
expect(parseEvent("GITHUB", "issues", nutzlast)).toEqual({
|
||||
kind: "issue",
|
||||
number: 12,
|
||||
open: false,
|
||||
});
|
||||
expect(parseEvent("GITEA", "issues", nutzlast)).toEqual({
|
||||
kind: "issue",
|
||||
number: 12,
|
||||
open: false,
|
||||
});
|
||||
});
|
||||
|
||||
it("erkennt ein wieder geoeffnetes Issue", () => {
|
||||
expect(parseEvent("GITHUB", "issues", { action: "reopened", issue: { number: 7 } })).toEqual({
|
||||
kind: "issue",
|
||||
number: 7,
|
||||
open: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("nimmt bei GitLab die projektinterne Nummer", () => {
|
||||
// "iid" ist die Nummer aus der Oberflaeche; "id" waere instanzweit.
|
||||
const ereignis = parseEvent("GITLAB", "Issue Hook", {
|
||||
object_kind: "issue",
|
||||
object_attributes: { iid: 5, state: "closed" },
|
||||
});
|
||||
expect(ereignis).toEqual({ kind: "issue", number: 5, open: false });
|
||||
});
|
||||
|
||||
it("laesst Unbekanntes liegen, statt zu scheitern", () => {
|
||||
expect(parseEvent("GITHUB", "issue_comment", {}).kind).toBe("ignored");
|
||||
expect(parseEvent("GITHUB", "issues", { action: "labeled", issue: { number: 1 } }).kind).toBe(
|
||||
"ignored",
|
||||
);
|
||||
expect(parseEvent("GITHUB", null, null).kind).toBe("ignored");
|
||||
});
|
||||
|
||||
it("laesst ein Issue ohne Nummer liegen", () => {
|
||||
expect(parseEvent("GITHUB", "issues", { action: "closed", issue: {} }).kind).toBe("ignored");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,139 @@
|
||||
import { createHmac, timingSafeEqual } from "node:crypto";
|
||||
import type { GitProvider } from "@prisma/client";
|
||||
|
||||
/**
|
||||
* Pruefung eingehender Webhooks.
|
||||
*
|
||||
* Der Endpunkt ist die einzige Stelle der Anwendung, die ohne Anmeldung
|
||||
* schreibend wirkt – deshalb steht die Pruefung hier fuer sich, ohne
|
||||
* Datenbank und ohne Netz, und ist damit vollstaendig testbar.
|
||||
*
|
||||
* Die drei Systeme machen es unterschiedlich:
|
||||
*
|
||||
* GitHub X-Hub-Signature-256: "sha256=<hex>", HMAC-SHA256 ueber den Rumpf
|
||||
* Gitea X-Gitea-Signature: "<hex>" ohne Praefix, sonst gleich
|
||||
* GitLab X-Gitlab-Token: das Geheimnis im Klartext, keine Signatur
|
||||
*
|
||||
* GitLabs Verfahren ist schwaecher – es beweist nur, dass der Absender das
|
||||
* Geheimnis kennt, nicht dass der Rumpf unveraendert ist. Mehr gibt die
|
||||
* Plattform nicht her; verglichen wird trotzdem zeitkonstant.
|
||||
*/
|
||||
|
||||
export type VerifyResult =
|
||||
| { ok: true }
|
||||
| { ok: false; reason: "missing" | "mismatch" | "unsupported" };
|
||||
|
||||
/** Vergleich ohne Laufzeitunterschied – ein Zeichenvergleich waere angreifbar. */
|
||||
function equals(a: string, b: string): boolean {
|
||||
const links = Buffer.from(a, "utf8");
|
||||
const rechts = Buffer.from(b, "utf8");
|
||||
// timingSafeEqual verlangt gleiche Laenge und wirft sonst. Die Laenge
|
||||
// selbst ist kein Geheimnis, der fruehe Ausstieg also unbedenklich.
|
||||
if (links.length !== rechts.length) return false;
|
||||
return timingSafeEqual(links, rechts);
|
||||
}
|
||||
|
||||
function hmacHex(secret: string, body: string): string {
|
||||
return createHmac("sha256", secret).update(body, "utf8").digest("hex");
|
||||
}
|
||||
|
||||
/**
|
||||
* Prueft die Signatur eines eingehenden Aufrufs.
|
||||
*
|
||||
* `body` muss der **rohe** Rumpf sein, genau wie er ankam. Ein durch
|
||||
* JSON.parse und JSON.stringify gedrehter Rumpf hat eine andere Signatur –
|
||||
* andere Reihenfolge, anderes Escaping, kein Leerraum.
|
||||
*/
|
||||
export function verifySignature(
|
||||
provider: GitProvider,
|
||||
secret: string,
|
||||
body: string,
|
||||
headers: Headers,
|
||||
): VerifyResult {
|
||||
switch (provider) {
|
||||
case "GITHUB": {
|
||||
const gesendet = headers.get("x-hub-signature-256");
|
||||
if (!gesendet) return { ok: false, reason: "missing" };
|
||||
const erwartet = `sha256=${hmacHex(secret, body)}`;
|
||||
return equals(gesendet, erwartet) ? { ok: true } : { ok: false, reason: "mismatch" };
|
||||
}
|
||||
|
||||
case "GITEA": {
|
||||
// Gitea schickt die Signatur ohne Praefix. Aeltere Fassungen senden
|
||||
// zusaetzlich X-Hub-Signature-256 im GitHub-Format – beides gilt.
|
||||
const gitea = headers.get("x-gitea-signature");
|
||||
if (gitea) {
|
||||
return equals(gitea, hmacHex(secret, body))
|
||||
? { ok: true }
|
||||
: { ok: false, reason: "mismatch" };
|
||||
}
|
||||
const hub = headers.get("x-hub-signature-256");
|
||||
if (hub) {
|
||||
return equals(hub, `sha256=${hmacHex(secret, body)}`)
|
||||
? { ok: true }
|
||||
: { ok: false, reason: "mismatch" };
|
||||
}
|
||||
return { ok: false, reason: "missing" };
|
||||
}
|
||||
|
||||
case "GITLAB": {
|
||||
const token = headers.get("x-gitlab-token");
|
||||
if (!token) return { ok: false, reason: "missing" };
|
||||
return equals(token, secret) ? { ok: true } : { ok: false, reason: "mismatch" };
|
||||
}
|
||||
|
||||
default:
|
||||
return { ok: false, reason: "unsupported" };
|
||||
}
|
||||
}
|
||||
|
||||
/** Welches Ereignis kam an – auf einen gemeinsamen Nenner gebracht. */
|
||||
export type WebhookEvent =
|
||||
| { kind: "push" }
|
||||
| { kind: "issue"; number: number; open: boolean }
|
||||
| { kind: "ignored"; name: string };
|
||||
|
||||
interface IssuePayload {
|
||||
action?: string;
|
||||
issue?: { number?: number; iid?: number; state?: string };
|
||||
object_attributes?: { iid?: number; action?: string; state?: string };
|
||||
object_kind?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Uebersetzt den Rumpf in ein Ereignis, das die Anwendung kennt.
|
||||
*
|
||||
* Bewusst grob: Nebula interessiert nur, ob ein Push kam (dann lohnt ein
|
||||
* Abgleich) und ob ein Issue geschlossen oder wieder geoeffnet wurde (dann
|
||||
* wandert die Aufgabe mit). Alles andere wird benannt und liegen gelassen.
|
||||
*/
|
||||
export function parseEvent(
|
||||
provider: GitProvider,
|
||||
eventName: string | null,
|
||||
payload: unknown,
|
||||
): WebhookEvent {
|
||||
const daten = (payload ?? {}) as IssuePayload;
|
||||
const name = (eventName ?? daten.object_kind ?? "").toLowerCase();
|
||||
|
||||
if (name === "push" || name === "push hook") return { kind: "push" };
|
||||
|
||||
if (provider === "GITLAB") {
|
||||
if (name !== "issue" && name !== "issue hook") return { kind: "ignored", name };
|
||||
const attrs = daten.object_attributes;
|
||||
const nummer = attrs?.iid;
|
||||
if (typeof nummer !== "number") return { kind: "ignored", name };
|
||||
// GitLab meldet den Zustand als "opened" oder "closed".
|
||||
const offen = attrs?.state !== "closed";
|
||||
return { kind: "issue", number: nummer, open: offen };
|
||||
}
|
||||
|
||||
// GitHub und Gitea nennen das Ereignis "issues" und legen die Tat in
|
||||
// "action" ab. Umbenennungen und Kommentare interessieren hier nicht.
|
||||
if (name !== "issues") return { kind: "ignored", name };
|
||||
const nummer = daten.issue?.number;
|
||||
if (typeof nummer !== "number") return { kind: "ignored", name };
|
||||
if (daten.action !== "closed" && daten.action !== "reopened" && daten.action !== "opened") {
|
||||
return { kind: "ignored", name: `issues.${daten.action ?? "?"}` };
|
||||
}
|
||||
return { kind: "issue", number: nummer, open: daten.action !== "closed" };
|
||||
}
|
||||
+17
-3
@@ -19,7 +19,13 @@ const SESSION_COOKIE = "nebula_session";
|
||||
|
||||
/** Ohne Anmeldung erreichbar. */
|
||||
const PUBLIC_PATHS = ["/login", "/setup", "/register"];
|
||||
const PUBLIC_API_PREFIXES = ["/api/auth/"];
|
||||
/**
|
||||
* Eingehende Webhooks bringen kein Cookie mit – sie kommen von GitHub,
|
||||
* GitLab oder Gitea. Ausgewiesen wird sich dort mit einer Signatur ueber den
|
||||
* Rumpf, geprueft im Endpunkt selbst (lib/webhooks/verify). Ohne gueltiges
|
||||
* Geheimnis passiert nichts.
|
||||
*/
|
||||
const PUBLIC_API_PREFIXES = ["/api/auth/", "/api/webhooks/"];
|
||||
/**
|
||||
* Der Docker-Healthcheck hat kein Cookie. Manifest und Symbole braucht der
|
||||
* Browser, bevor sich jemand angemeldet hat – wuerden sie zur Anmeldeseite
|
||||
@@ -91,7 +97,12 @@ export function middleware(request: NextRequest) {
|
||||
const isDev = process.env.NODE_ENV === "development";
|
||||
|
||||
// ── 1. CSRF ────────────────────────────────────────────────
|
||||
if (!SAFE_METHODS.has(request.method) && !isSameOrigin(request)) {
|
||||
// Webhooks kommen von einem fremden Server und koennen keinen passenden
|
||||
// Origin mitbringen. Die Herkunftspruefung schuetzt gegen den Browser
|
||||
// eines angemeldeten Nutzers – hier gibt es keinen, und ausgewiesen wird
|
||||
// sich stattdessen mit der Signatur ueber den Rumpf.
|
||||
const istWebhook = pathname.startsWith("/api/webhooks/");
|
||||
if (!istWebhook && !SAFE_METHODS.has(request.method) && !isSameOrigin(request)) {
|
||||
return NextResponse.json(
|
||||
{ error: "Anfrage von fremdem Ursprung abgelehnt." },
|
||||
{ status: 403 },
|
||||
@@ -147,7 +158,10 @@ export const config = {
|
||||
* weder CSRF-Pruefung noch Nonce und wuerden nur Rechenzeit kosten.
|
||||
*/
|
||||
{
|
||||
source: "/((?!_next/static|_next/image|favicon.ico|icon.svg).*)",
|
||||
// _next/image ist bewusst *nicht* ausgenommen: der Bildoptimierer ist
|
||||
// abgeschaltet (siehe next.config.ts), und was von ihm uebrig bleibt,
|
||||
// soll nicht ohne Sitzung erreichbar sein.
|
||||
source: "/((?!_next/static|favicon.ico|icon.svg).*)",
|
||||
missing: [
|
||||
{ type: "header", key: "next-router-prefetch" },
|
||||
{ type: "header", key: "purpose", value: "prefetch" },
|
||||
|
||||
+32
-2
@@ -4,12 +4,14 @@ import type {
|
||||
Note,
|
||||
Project,
|
||||
ProjectStatus,
|
||||
Recurrence,
|
||||
RepoSnapshot,
|
||||
Repository,
|
||||
Task,
|
||||
TaskStatus,
|
||||
} from "@prisma/client";
|
||||
import type { CommitCalendar } from "@/lib/git/calendar";
|
||||
import type { DueBucket } from "@/lib/tasks";
|
||||
import type {
|
||||
BranchInfo,
|
||||
CiInfo,
|
||||
@@ -38,8 +40,14 @@ export interface ConnectionWithCount extends ConnectionSafe {
|
||||
_count?: { repositories: number };
|
||||
}
|
||||
|
||||
/** Ein Repository samt Verbindung und zuletzt geholtem Stand. */
|
||||
export interface RepositoryWithSnapshot extends Repository {
|
||||
/**
|
||||
* Ein Repository samt Verbindung und zuletzt geholtem Stand.
|
||||
*
|
||||
* Ohne webhookSecret: das Geheimnis verlaesst den Server nicht – siehe
|
||||
* repositorySafeSelect. Ob einer eingerichtet ist, reicht die Projektseite
|
||||
* getrennt durch.
|
||||
*/
|
||||
export interface RepositoryWithSnapshot extends Omit<Repository, "webhookSecret"> {
|
||||
connection: ConnectionSafe | null;
|
||||
snapshot: RepoSnapshot | null;
|
||||
}
|
||||
@@ -70,6 +78,28 @@ export interface ProjectDetail extends Project {
|
||||
_count: { notes: number; tasks: number };
|
||||
}
|
||||
|
||||
/**
|
||||
* Eine Aufgabe in der projektuebergreifenden Uebersicht.
|
||||
*
|
||||
* Bewusst kein `extends Task`: die Seite braucht das Projekt dazu, das Fach
|
||||
* fuer die Faelligkeit kommt vom Server, und Datumsangaben gehen als
|
||||
* Zeichenkette an den Browser – ein Date ueberlebt die Serialisierung nicht.
|
||||
*/
|
||||
export interface TaskOverviewItem {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
status: TaskStatus;
|
||||
dueDate: string | null;
|
||||
labels: string[];
|
||||
recurrence: Recurrence | null;
|
||||
/** Gesetzt, wenn die Aufgabe an einem Git-Issue haengt. */
|
||||
sourceIssue: number | null;
|
||||
sourceUrl: string | null;
|
||||
bucket: DueBucket;
|
||||
project: { id: string; name: string; accent: string; status: ProjectStatus };
|
||||
}
|
||||
|
||||
export interface RepoListEntry {
|
||||
fullPath: string;
|
||||
owner: string;
|
||||
|
||||
+9
-1
@@ -5,9 +5,17 @@ export default defineConfig({
|
||||
test: {
|
||||
// Reine Logik, kein DOM und keine Datenbank – die Tests laufen in
|
||||
// Millisekunden und brauchen weder Server noch Container.
|
||||
//
|
||||
// .tsx ist dabei, weil die Bereinigung des Markdowns nur am erzeugten
|
||||
// HTML zu pruefen ist. Dafuer genuegt renderToStaticMarkup; ein DOM
|
||||
// braucht es dazu nicht.
|
||||
environment: "node",
|
||||
include: ["src/**/*.test.ts"],
|
||||
include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
|
||||
},
|
||||
// Die tsconfig setzt jsx auf "preserve", weil Next das selbst uebersetzt.
|
||||
// Hier gibt es kein Next, also muss der Transformer es tun. Vite nimmt
|
||||
// inzwischen oxc statt esbuild – die esbuild-Option wuerde ignoriert.
|
||||
oxc: { jsx: { runtime: "automatic" } },
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
|
||||
Reference in New Issue
Block a user