feat(260929-dzu): Einstellungen > Eigene Module fuer jeden Benutzer, Verwaltung nur gemeinsam

- gemeinsame Oberflaeche (CustomModuleManager, Formular, Loeschdialog) fuer Verwaltung und Einstellungen - Einstellungen: persoenliche Eintraege, Verwaltung sendet shared: true und zeigt nur gemeinsame - Navigation, Texte de/en, Komponententests Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-29 10:17:22 +02:00
parent bc4c0119de
commit ee97b4ed9f
11 changed files with 636 additions and 222 deletions
@@ -0,0 +1,174 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { MODULE_CATEGORIES } from '@tessera/shared';
+import {
+  type CustomModule,
+  checkCustomModuleUrl,
+  createCustomModule,
+  updateCustomModule,
+} from '@/lib/custom-modules-api';
+import { useCategoryLabel } from '@/lib/use-category-label';
+
+interface CustomModuleFormModalProps {
+  /** `null` = neues Modul anlegen, sonst bearbeiten. */
+  mod: CustomModule | null;
+  /**
+   * Beim Anlegen: `true` = gemeinsamer Eintrag fuer alle Benutzer (Verwaltung),
+   * sonst persoenlicher Eintrag (Einstellungen). Beim Bearbeiten ohne Wirkung —
+   * ob ein Eintrag gemeinsam ist, aendert sich nie.
+   */
+  shared?: boolean;
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+const NAME_MAX = 100;
+const URL_MAX = 2048;
+
+/**
+ * Formular „Eigenes Modul“ (quick-260929-9wc, Vorbild `GroupFormModal`;
+ * quick-260929-dzu: ein Formular, zwei Aufrufer — Verwaltung legt gemeinsame,
+ * Einstellungen persoenliche Eintraege an).
+ * Die Adresse wird VOR dem Senden geprueft (`checkCustomModuleUrl`, dieselbe
+ * Regel wie die API): nur https, keine Zugangsdaten. `noValidate`, damit die
+ * eigenen, uebersetzten Meldungen erscheinen statt der des Browsers.
+ */
+export function CustomModuleFormModal({
+  mod,
+  shared = false,
+  onClose,
+  onSaved,
+}: CustomModuleFormModalProps) {
+  const t = useTranslations('customModules.form');
+  const tCommon = useTranslations('common');
+  const categoryLabel = useCategoryLabel();
+
+  const [name, setName] = useState(mod?.name ?? '');
+  const [url, setUrl] = useState(mod?.url ?? '');
+  const [category, setCategory] = useState<string>(mod?.category ?? 'infrastructure');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    const trimmedName = name.trim();
+    if (trimmedName === '') {
+      setError(t('nameRequired'));
+      return;
+    }
+    const trimmedUrl = url.trim();
+    const check = checkCustomModuleUrl(trimmedUrl);
+    if (check === 'notHttps') {
+      setError(t('urlNotHttps'));
+      return;
+    }
+    if (check === 'credentials') {
+      setError(t('urlCredentials'));
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const input = { name: trimmedName, url: trimmedUrl, category };
+      if (mod) {
+        await updateCustomModule(mod.id, input);
+      } else {
+        await createCustomModule(shared ? { ...input, shared: true } : input);
+      }
+      onSaved();
+      onClose();
+    } catch {
+      setError(t('saveError'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="custom-module-form-title"
+        className="w-full max-w-md rounded-lg bg-card p-6 shadow-lg dark:border dark:border-border"
+      >
+        <h2 id="custom-module-form-title" className="mb-4 text-lg font-semibold text-foreground">
+          {mod ? t('edit') : t('create')}
+        </h2>
+        <form onSubmit={handleSubmit} noValidate className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="custom-module-name" className="text-sm font-medium text-foreground">
+              {t('name')}
+            </label>
+            <input
+              id="custom-module-name"
+              type="text"
+              required
+              maxLength={NAME_MAX}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label htmlFor="custom-module-url" className="text-sm font-medium text-foreground">
+              {t('url')}
+            </label>
+            <input
+              id="custom-module-url"
+              type="url"
+              required
+              maxLength={URL_MAX}
+              placeholder="https://…"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            />
+            <p className="text-xs text-muted-foreground">{t('urlHint')}</p>
+          </div>
+
+          <div className="space-y-2">
+            <label htmlFor="custom-module-category" className="text-sm font-medium text-foreground">
+              {t('category')}
+            </label>
+            <select
+              id="custom-module-category"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            >
+              {MODULE_CATEGORIES.map((c) => (
+                <option key={c} value={c}>
+                  {categoryLabel(c)}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {error && (
+            <div
+              role="alert"
+              className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
+            >
+              {error}
+            </div>
+          )}
+
+          <div className="flex justify-end gap-3 pt-2">
+            <button type="button" onClick={onClose} className="btn btn-secondary">
+              {tCommon('cancel')}
+            </button>
+            <button type="submit" disabled={saving} className="btn btn-primary">
+              {saving ? tCommon('loading') : tCommon('save')}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}