feat(auth): invite links for several people, invite by email, registration with approval or email domains

- Invites: link /?invite=CODE, copy link, send by email, max uses with counter
- Registration modes closed | approval | domain | domain+approval | open, waiting list with approve/reject
- REGISTRATION_MODE / REGISTRATION_DOMAINS lock the admin setting; ALLOW_REGISTRATION=true is honoured

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/auth/SetupAndAuthView.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Brain,
   Shield,
@@ -43,13 +43,37 @@ export const SetupAndAuthView: React.FC<SetupAndAuthViewProps> = ({
   const [createSampleData, setCreateSampleData] = useState(false);
 
   // --- Login / Invite / Register State ---
+  // An invite link (?invite=CODE) opens the invite form with the code filled in
+  const [linkInviteCode] = useState(() => new URLSearchParams(window.location.search).get('invite')?.trim().toUpperCase() || '');
   const [authTab, setAuthTab] = useState<'login' | 'invite' | 'register' | 'forgot' | 'reset'>(
-    resetToken ? 'reset' : 'login'
+    resetToken ? 'reset' : linkInviteCode ? 'invite' : 'login'
   );
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [displayName, setDisplayName] = useState('');
-  const [inviteCode, setInviteCode] = useState('');
+  const [inviteCode, setInviteCode] = useState(linkInviteCode);
+  // The code is in the form now; it should not stay in the address bar (history, screenshots)
+  useEffect(() => {
+    if (!linkInviteCode) return;
+    const url = new URL(window.location.href);
+    url.searchParams.delete('invite');
+    window.history.replaceState({}, '', url.pathname + url.search + url.hash);
+  }, [linkInviteCode]);
+  // Hint on the sign-up form: which addresses get in, and whether an admin approves first
+  const registrationHint = (() => {
+    const domains = (authStatus.registrationDomains || []).map((d) => '@' + d.replace(/^\*\./, '')).join(', ');
+    switch (authStatus.registrationMode) {
+      case 'approval':
+        return 'Nach der Registrierung gibt ein Administrator dein Konto frei.';
+      case 'domain':
+        return domains ? `Registrierung mit E-Mail-Adressen von ${domains}.` : '';
+      case 'domain+approval':
+        return domains
+          ? `Mit Adressen von ${domains} geht es sofort, andere Konten gibt ein Administrator frei.`
+          : 'Nach der Registrierung gibt ein Administrator dein Konto frei.';
+    }
+    return '';
+  })();
 
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -167,6 +191,13 @@ export const SetupAndAuthView: React.FC<SetupAndAuthViewProps> = ({
     try {
       const code = authTab === 'invite' ? inviteCode.trim() : '';
       const res = await api.register(email.trim(), password, displayName.trim(), code);
+      if (res.pending || !res.user) {
+        // Waiting for approval: back to the login form with the explanation
+        setNotice(res.message || 'Dein Konto wartet auf die Freigabe durch einen Administrator.');
+        setPassword('');
+        setAuthTab('login');
+        return;
+      }
       onAuthenticated(res.user);
     } catch (err: any) {
       setError(err.message || 'Registrierung fehlgeschlagen');
@@ -687,6 +718,9 @@ export const SetupAndAuthView: React.FC<SetupAndAuthViewProps> = ({
 
           {(authTab === 'invite' || authTab === 'register') && (
             <form onSubmit={handleRegisterOrInvite} className="space-y-3.5">
+              {authTab === 'register' && registrationHint && (
+                <p className="text-[11px] text-muted bg-canvas border border-border rounded-btn px-2.5 py-2">{registrationHint}</p>
+              )}
               {authTab === 'invite' && (
                 <div>
                   <label className="block text-muted mb-1">Einladungscode *</label>

frontend/src/features/settings/AdminSettingsView.tsx

@@ -15,9 +15,13 @@ import {
   UserPlus,
   Building2,
   Pencil,
+  Link2,
+  Clock,
+  X,
 } from 'lucide-react';
 import {
   Organization,
+  RegistrationMode,
   SharingMode,
   SystemSettings,
   User,
@@ -78,6 +82,12 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
   const [inviteEmail, setInviteEmail] = useState('');
   const [inviteRole, setInviteRole] = useState<UserRole>('member');
   const [inviteOrg, setInviteOrg] = useState('');
+  // A link for several people (1 = classic single-use code)
+  const [inviteMaxUses, setInviteMaxUses] = useState(1);
+  // "Per E-Mail einladen": which invite the address field is open for
+  const [mailInviteId, setMailInviteId] = useState<string | null>(null);
+  const [mailInviteTo, setMailInviteTo] = useState('');
+  const [mailInviteBusy, setMailInviteBusy] = useState(false);
 
   // --- Organizations State ---
   const [organizations, setOrganizations] = useState<Organization[]>([]);
@@ -128,6 +138,9 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
         setSettings({
           sharingMode: sys.sharingMode || 'organizations',
           allowRegistration: Boolean(sys.allowRegistration),
+          registrationMode: sys.registrationMode || (sys.allowRegistration ? 'open' : 'closed'),
+          registrationDomains: sys.registrationDomains || '',
+          registrationConfiguredViaEnv: Boolean(sys.registrationConfiguredViaEnv),
           instanceName: sys.instanceName || 'MindSift',
           smtpHost: sys.smtpHost || '',
           smtpPort: sys.smtpPort ? String(sys.smtpPort) : '587',
@@ -197,15 +210,19 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
     triggerHaptic(15);
     try {
       const inv = await api.adminCreateInvite({
-        email: inviteEmail.trim(),
+        email: inviteMaxUses > 1 ? '' : inviteEmail.trim(),
         role: inviteRole,
         organizationId: inviteOrg || undefined,
+        maxUses: inviteMaxUses,
       });
       setInvites((prev) => [inv, ...prev]);
       setInviteEmail('');
       setStatusMsg({
         type: 'ok',
-        text: `Einladungscode ${inv.code} erfolgreich erstellt.`,
+        text:
+          inv.maxUses > 1
+            ? `Einladungslink für ${inv.maxUses} Personen erstellt (${inv.code}).`
+            : `Einladungscode ${inv.code} erfolgreich erstellt.`,
       });
     } catch (err: any) {
       setStatusMsg({ type: 'err', text: err.message || 'Fehler beim Erstellen der Einladung' });
@@ -221,12 +238,45 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
     }
   };
 
-  const handleCopyInviteCode = (inv: UserInvite) => {
-    navigator.clipboard.writeText(inv.code);
+  // Copies the code or the link that opens the sign-up form with the code filled in
+  const inviteLink = (inv: UserInvite) => `${window.location.origin}/?invite=${encodeURIComponent(inv.code)}`;
+  const [copiedWhat, setCopiedWhat] = useState<'code' | 'link'>('code');
+  const handleCopyInvite = (inv: UserInvite, what: 'code' | 'link') => {
+    navigator.clipboard.writeText(what === 'link' ? inviteLink(inv) : inv.code);
+    setCopiedWhat(what);
     setCopiedInviteId(inv.id);
     setTimeout(() => setCopiedInviteId(null), 2000);
   };
 
+  const handleSendInvite = async (inv: UserInvite) => {
+    if (!mailInviteTo.trim()) return;
+    setMailInviteBusy(true);
+    setStatusMsg(null);
+    try {
+      const updated = await api.adminSendInvite(inv.id, mailInviteTo.trim());
+      setInvites((prev) => prev.map((i) => (i.id === inv.id ? { ...i, ...updated } : i)));
+      setStatusMsg({ type: 'ok', text: `Einladung an ${mailInviteTo.trim()} verschickt.` });
+      setMailInviteId(null);
+      setMailInviteTo('');
+    } catch (err: any) {
+      setStatusMsg({ type: 'err', text: err.message || 'Einladung konnte nicht verschickt werden' });
+    } finally {
+      setMailInviteBusy(false);
+    }
+  };
+
+  // Registrations waiting for approval (registration mode "Mit Freigabe")
+  const handleApproveUser = async (u: User) => {
+    setStatusMsg(null);
+    try {
+      const updated = await api.adminApproveUser(u.id);
+      setUsers((prev) => prev.map((item) => (item.id === u.id ? { ...updated, pendingApproval: false } : item)));
+      setStatusMsg({ type: 'ok', text: `${u.displayName} ist freigeschaltet.` });
+    } catch (err: any) {
+      setStatusMsg({ type: 'err', text: err.message });
+    }
+  };
+
   const handleChangeUserRole = async (u: User, role: UserRole) => {
     setStatusMsg(null);
     try {
@@ -273,7 +323,9 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
   const handleDeleteUser = async (u: User) => {
     if (
       !window.confirm(
-        `Benutzer "${u.displayName}" (${u.email}) wirklich unwiderruflich löschen?`
+        u.pendingApproval
+          ? `Registrierung von "${u.displayName}" (${u.email}) ablehnen? Das Konto wird gelöscht.`
+          : `Benutzer "${u.displayName}" (${u.email}) wirklich unwiderruflich löschen?`
       )
     )
       return;
@@ -642,21 +694,35 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
               <div className="p-4 bg-canvas border border-border rounded-card space-y-3">
                 <h3 className="font-bold text-main flex items-center gap-1.5">
                   <KeyRound className="w-3.5 h-3.5 text-accent" />
-                  <span>Einladungscode erzeugen (gültig für 7 Tage)</span>
+                  <span>Einladung erzeugen (gültig für 7 Tage)</span>
                 </h3>
 
                 <form onSubmit={handleCreateInvite} className="space-y-3">
-                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                  <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
+                    <div className="min-w-0">
+                      <label className="block text-muted mb-1">Wie oft verwendbar</label>
+                      <input
+                        type="number"
+                        min={1}
+                        max={1000}
+                        value={inviteMaxUses}
+                        onChange={(e) => setInviteMaxUses(Math.max(1, Math.min(1000, parseInt(e.target.value, 10) || 1)))}
+                        title="1 = ein Code für eine Person; mehr = ein Link für eine ganze Gruppe"
+                        className="w-full min-w-0 h-8 px-2.5 input-field"
+                      />
+                    </div>
+
                     <div className="min-w-0">
                       <label className="block text-muted mb-1">
                         Gebundene E-Mail (optional)
                       </label>
                       <input
                         type="email"
-                        value={inviteEmail}
+                        value={inviteMaxUses > 1 ? '' : inviteEmail}
                         onChange={(e) => setInviteEmail(e.target.value)}
-                        placeholder="Leer lassen für beliebige E-Mail"
-                        className="w-full min-w-0 h-8 px-2.5 input-field"
+                        disabled={inviteMaxUses > 1}
+                        placeholder={inviteMaxUses > 1 ? 'Nur bei einmaliger Einladung' : 'Leer lassen für beliebige E-Mail'}
+                        className="w-full min-w-0 h-8 px-2.5 input-field disabled:opacity-60"
                       />
                     </div>
 
@@ -697,7 +763,7 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
                       className="btn-action h-8 px-4 text-xs font-semibold flex items-center gap-1.5 border-accent text-main"
                     >
                       <KeyRound className="w-3.5 h-3.5 text-accent" />
-                      <span>Einladungscode generieren</span>
+                      <span>{inviteMaxUses > 1 ? `Einladungslink für ${inviteMaxUses} Personen erzeugen` : 'Einladungscode generieren'}</span>
                     </button>
                   </div>
                 </form>
@@ -709,63 +775,165 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
                       Aktive & bisherige Einladungscodes:
                     </p>
                     <div className="divide-y divide-border border border-border bg-panel rounded-card overflow-hidden">
-                      {invites.map((inv) => (
-                        <div
-                          key={inv.id}
-                          className="p-2 flex flex-wrap items-center justify-between gap-2"
-                        >
-                          <div className="flex items-center gap-2.5">
-                            <code className="px-2 py-0.5 bg-canvas border border-border font-mono font-bold text-accent rounded-card">
-                              {inv.code}
-                            </code>
-                            <span className="text-muted">
-                              Rolle: <strong className="text-main">{inv.role}</strong>
-                              {inv.email ? ` · Für: ${inv.email}` : ''}
-                              {inv.organizationName ? ` · ${inv.organizationName}` : ''}
-                            </span>
-                            {inv.usedBy ? (
-                              <span className="badge-neutral text-[10px]">
-                                Eingelöst
-                              </span>
-                            ) : (
-                              <span className="badge-ok text-[10px]">
-                                Offen
-                              </span>
-                            )}
-                          </div>
+                      {invites.map((inv) => {
+                        const maxUses = inv.maxUses || 1;
+                        const used = inv.useCount ?? (inv.usedBy ? 1 : 0);
+                        const open = used < maxUses && new Date(inv.expiresAt).getTime() > Date.now();
+                        const copied = copiedInviteId === inv.id;
+                        return (
+                          <div key={inv.id} className="p-2 space-y-2">
+                            <div className="flex flex-wrap items-center justify-between gap-2">
+                              <div className="flex flex-wrap items-center gap-2.5 min-w-0">
+                                <code className="px-2 py-0.5 bg-canvas border border-border font-mono font-bold text-accent rounded-card">
+                                  {inv.code}
+                                </code>
+                                <span className="text-muted">
+                                  Rolle: <strong className="text-main">{inv.role}</strong>
+                                  {inv.email ? ` · Für: ${inv.email}` : ''}
+                                  {inv.organizationName ? ` · ${inv.organizationName}` : ''}
+                                  {maxUses > 1 ? ` · ${used} von ${maxUses} verwendet` : ''}
+                                </span>
+                                {open ? (
+                                  <span className="badge-ok text-[10px]">Offen</span>
+                                ) : (
+                                  <span className="badge-neutral text-[10px]">{used >= maxUses ? 'Eingelöst' : 'Abgelaufen'}</span>
+                                )}
+                              </div>
 
-                          <div className="flex items-center gap-1.5">
-                            {!inv.usedBy && (
-                              <button
-                                onClick={() => handleCopyInviteCode(inv)}
-                                className="btn-action h-7 px-2 text-[11px] flex items-center gap-1"
+                              <div className="flex flex-wrap items-center gap-1.5">
+                                {open && (
+                                  <>
+                                    <button
+                                      type="button"
+                                      onClick={() => handleCopyInvite(inv, 'link')}
+                                      className="btn-action h-7 px-2 text-[11px] flex items-center gap-1"
+                                      title={inviteLink(inv)}
+                                    >
+                                      <Link2 className="w-3 h-3" />
+                                      <span>{copied && copiedWhat === 'link' ? 'Kopiert!' : 'Link kopieren'}</span>
+                                    </button>
+                                    <button
+                                      type="button"
+                                      onClick={() => handleCopyInvite(inv, 'code')}
+                                      className="btn-action h-7 px-2 text-[11px] flex items-center gap-1"
+                                    >
+                                      <Copy className="w-3 h-3" />
+                                      <span>{copied && copiedWhat === 'code' ? 'Kopiert!' : 'Code'}</span>
+                                    </button>
+                                    <button
+                                      type="button"
+                                      onClick={() => {
+                                        setMailInviteId(mailInviteId === inv.id ? null : inv.id);
+                                        setMailInviteTo(inv.email || '');
+                                      }}
+                                      className="btn-action h-7 px-2 text-[11px] flex items-center gap-1"
+                                      title="Einladung per E-Mail verschicken"
+                                    >
+                                      <Mail className="w-3 h-3" />
+                                      <span>Per E-Mail</span>
+                                    </button>
+                                  </>
+                                )}
+                                <button
+                                  onClick={() => handleDeleteInvite(inv.id)}
+                                  className="btn-icon btn-icon-danger"
+                                  title="Einladung löschen"
+                                >
+                                  <Trash2 className="w-3.5 h-3.5" />
+                                </button>
+                              </div>
+                            </div>
+                            {mailInviteId === inv.id && (
+                              <form
+                                onSubmit={(e) => {
+                                  e.preventDefault();
+                                  void handleSendInvite(inv);
+                                }}
+                                className="flex flex-wrap items-center gap-2"
                               >
-                                <Copy className="w-3 h-3" />
-                                <span>{copiedInviteId === inv.id ? 'Kopiert!' : 'Code kopieren'}</span>
-                              </button>
+                                <input
+                                  type="email"
+                                  value={mailInviteTo}
+                                  onChange={(e) => setMailInviteTo(e.target.value)}
+                                  readOnly={Boolean(inv.email)}
+                                  placeholder="name@beispiel.de"
+                                  required
+                                  autoFocus
+                                  className="flex-1 min-w-[12rem] h-8 px-2.5 input-field"
+                                />
+                                <button
+                                  type="submit"
+                                  disabled={mailInviteBusy}
+                                  className="btn-primary h-8 px-3 text-xs font-semibold flex items-center gap-1.5 disabled:opacity-50"
+                                >
+                                  <Send className="w-3.5 h-3.5" />
+                                  <span>{mailInviteBusy ? 'Sende…' : 'Einladung senden'}</span>
+                                </button>
+                                {maxUses === 1 && !inv.email && (
+                                  <span className="w-full text-[11px] text-faint">Die Einladung gilt danach nur noch für diese Adresse.</span>
+                                )}
+                              </form>
                             )}
-                            <button
-                              onClick={() => handleDeleteInvite(inv.id)}
-                              className="btn-icon btn-icon-danger"
-                              title="Einladung löschen"
-                            >
-                              <Trash2 className="w-3.5 h-3.5" />
-                            </button>
                           </div>
-                        </div>
-                      ))}
+                        );
+                      })}
                     </div>
                   </div>
                 )}
               </div>
 
+              {/* Registrations waiting for approval */}
+              {users.some((u) => u.pendingApproval) && (
+                <div className="space-y-2">
+                  <h3 className="font-bold text-main flex items-center gap-1.5">
+                    <Clock className="w-3.5 h-3.5 text-status-warn" />
+                    Wartet auf Freigabe ({users.filter((u) => u.pendingApproval).length})
+                  </h3>
+                  <div className="border border-status-warn/40 divide-y divide-border bg-canvas rounded-card overflow-hidden">
+                    {users
+                      .filter((u) => u.pendingApproval)
+                      .map((u) => (
+                        <div key={u.id} className="p-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+                          <div className="flex items-center gap-2.5 min-w-0">
+                            <UserAvatar user={u} size="sm" className="border border-border/80" />
+                            <div className="min-w-0">
+                              <p className="font-bold text-main truncate">{u.displayName}</p>
+                              <p className="text-muted text-[11px] truncate">
+                                {u.email} · registriert am {new Date(u.createdAt).toLocaleDateString('de-DE')}
+                              </p>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-2 shrink-0">
+                            <button
+                              type="button"
+                              onClick={() => void handleApproveUser(u)}
+                              className="btn-primary h-11 sm:h-8 px-3 text-xs font-semibold flex items-center gap-1.5"
+                            >
+                              <Check className="w-3.5 h-3.5" />
+                              Freigeben
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => void handleDeleteUser(u)}
+                              className="btn-action h-11 sm:h-8 px-3 text-xs flex items-center gap-1.5 hover:text-status-err"
+                            >
+                              <X className="w-3.5 h-3.5" />
+                              Ablehnen
+                            </button>
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              )}
+
               {/* Users List */}
               <div className="space-y-2">
                 <h3 className="font-bold text-main">
-                  Registrierte Benutzer ({users.length})
+                  Registrierte Benutzer ({users.filter((u) => !u.pendingApproval).length})
                 </h3>
                 <div className="border border-border divide-y divide-border bg-canvas rounded-card overflow-hidden">
-                  {users.map((u) => (
+                  {users.filter((u) => !u.pendingApproval).map((u) => (
                     <div key={u.id} className="p-3 space-y-2">
                       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                         <div className="flex items-center gap-2.5">
@@ -1136,27 +1304,55 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
                     />
                   </div>
 
-                  {/* Public Registration Toggle Switch */}
-                  <div className="p-4 bg-canvas border border-border rounded-card flex items-center justify-between gap-4">
-                    <div className="pr-4">
-                      <p className="font-bold text-main">Öffentliche Selbstregistrierung erlauben</p>
-                      <p className="text-[11px] text-muted mt-0.5">
-                        Wenn deaktiviert, können sich fremde Personen auf dem Login-Bildschirm nicht selbst registrieren.
-                        Neue Konten erfordern dann zwingend einen Einladungscode oder müssen von einem Admin angelegt werden.
-                      </p>
-                    </div>
-
-                    <div className="flex items-center gap-3 flex-shrink-0">
-                      <span className={`text-xs font-medium hidden sm:inline ${settings.allowRegistration ? 'text-accent' : 'text-muted'}`}>
-                        {settings.allowRegistration ? 'Aktiviert (Offen)' : 'Gesperrt (Nur Einladung)'}
-                      </span>
-                      <ToggleSwitch
-                        checked={settings.allowRegistration}
-                        onChange={(allowRegistration) => handleSaveSystemSettings({ allowRegistration })}
-                        title={settings.allowRegistration ? 'Selbstregistrierung deaktivieren' : 'Selbstregistrierung aktivieren'}
-                      />
-                    </div>
-                  </div>
+                  {/* Who may register without an invite */}
+                  {(() => {
+                    const mode = settings.registrationMode || 'closed';
+                    const locked = Boolean(settings.registrationConfiguredViaEnv);
+                    const needsDomains = mode === 'domain' || mode === 'domain+approval';
+                    return (
+                      <div className="p-4 bg-canvas border border-border rounded-card space-y-3">
+                        <div>
+                          <p className="font-bold text-main">Registrierung ohne Einladung</p>
+                          <p className="text-[11px] text-muted mt-0.5">
+                            Wer sich auf dem Login-Bildschirm selbst ein Konto anlegen darf. Einladungslinks und -codes funktionieren
+                            immer. Wartende Konten gibst du unter „Benutzer &amp; Einladungen“ frei.
+                          </p>
+                        </div>
+                        <select
+                          value={mode}
+                          disabled={locked}
+                          onChange={(e) => handleSaveSystemSettings({ registrationMode: e.target.value as RegistrationMode })}
+                          className="w-full h-11 sm:h-8 px-2.5 input-field text-base sm:text-xs disabled:opacity-60"
+                        >
+                          <option value="closed">Geschlossen – nur mit Einladung</option>
+                          <option value="approval">Mit Freigabe – jeder darf sich registrieren, ein Admin schaltet frei</option>
+                          <option value="domain">Nur bestimmte E-Mail-Endungen – sofort aktiv</option>
+                          <option value="domain+approval">Endungen sofort, alle anderen nach Freigabe</option>
+                          <option value="open">Offen – jeder, sofort aktiv</option>
+                        </select>
+                        {needsDomains && (
+                          <label className="block text-[11px] text-muted">
+                            Erlaubte E-Mail-Endungen (durch Komma getrennt, <code className="font-mono">*.firma.de</code> auch für Subdomains)
+                            <input
+                              type="text"
+                              disabled={locked}
+                              value={settings.registrationDomains || ''}
+                              onChange={(e) => setSettings((prev) => ({ ...prev, registrationDomains: e.target.value }))}
+                              onBlur={() => handleSaveSystemSettings()}
+                              placeholder="firma.de, familie-dach.de"
+                              className="block w-full mt-1 h-11 sm:h-8 px-2.5 input-field font-mono text-base sm:text-xs disabled:opacity-60"
+                            />
+                          </label>
+                        )}
+                        {locked && (
+                          <p className="text-[11px] text-status-warn">
+                            Über die Umgebung festgelegt (<code className="font-mono">REGISTRATION_MODE</code> /{' '}
+                            <code className="font-mono">REGISTRATION_DOMAINS</code>) und hier nicht änderbar.
+                          </p>
+                        )}
+                      </div>
+                    );
+                  })()}
                 </div>
               </div>
             </fieldset>