emailtemplate.it/partials/landingpage/accountsetup/bridge.php

<?php
$pageTitle  = 'Email Template System – Bridge Setup';
$pageId     = 'bridge-setup';
$navActive  = 'bridge';
require __DIR__ . '/accountsetup_config.php';
require dirname(__DIR__) . '/../structure/layout_start.php';
?>
  <main class="max-w-4xl mx-auto p-4 md:p-6 flex-1 w-full space-y-6">
    <section class="section-card">
      <h4>Bridge-Datei vorbereiten</h4>
      <p class="text-sm text-slate-600 mb-3">
        Diese Angaben werden nur verwendet, um die <strong>emailtemplate_bridge.php</strong> zu generieren. Das EmailTemplate-System selbst behält Zugriff auf alle Tabellen; die hier definierten Whitelists greifen ausschließlich in der Bridge-Datei.
      </p>
      <div class="text-sm text-slate-600 mb-4 space-y-2">
        <p><strong>Moegliche Wege zur DB-Anbindung:</strong></p>
        <ul class="list-disc ps-5">
          <li>Bridge-URL + Token laden Tabellen/Spalten (Standard, nur Schema).</li>
          <li>Bridge kann zusaetzlich DB-Settings mitsenden (Host, Port, User, Passwort).</li>
          <li>DB-Settings hier direkt eintragen (wird in die Bridge-Datei geschrieben).</li>
        </ul>
      </div>
      <form id="bridgeSetupForm" class="space-y-4">
        <div>
          <label class="block text-sm text-slate-600">Tabellen-Whitelist (optional)</label>
          <textarea name="tables" class="input mt-1" rows="3" placeholder="z.B. customers, orders"></textarea>
          <p class="text-xs text-slate-500 mt-1">Kommagetrennt oder je Zeile eine Tabelle. Leer lassen = keine Einschränkung.</p>
          <div id="selectedTables" class="flex flex-wrap gap-2 text-sm text-slate-600 mt-2">Noch keine Tabellen angegeben.</div>
        </div>

        <fieldset class="border border-slate-200 rounded-xl p-4">
          <legend class="px-2 text-sm font-semibold">Datenbankquelle</legend>
          <p class="text-xs text-slate-500 mb-3">Die Auswahl bestimmt, welche Werte in die Bridge-Datei geschrieben werden.</p>
          <div class="flex flex-wrap gap-4 text-sm text-slate-600 mb-3">
            <label class="inline-flex items-center gap-2">
              <input type="radio" name="db_mode" value="direct" checked> Direkte Angaben (Host, DB, Benutzer …)
            </label>
            <label class="inline-flex items-center gap-2">
              <input type="radio" name="db_mode" value="config"> Aus bestehender Konfigurationsdatei laden
            </label>
          </div>

          <div id="directFields" class="grid md:grid-cols-2 gap-3">
            <label class="block text-sm text-slate-600">Server / Host
              <input type="text" name="direct_host" class="input mt-1" placeholder="127.0.0.1">
            </label>
            <label class="block text-sm text-slate-600">Port
              <input type="number" name="direct_port" class="input mt-1" placeholder="3306">
            </label>
            <label class="block text-sm text-slate-600">Datenbankname
              <input type="text" name="direct_database" class="input mt-1" placeholder="kunden_db">
            </label>
            <label class="block text-sm text-slate-600">Zeichensatz
              <input type="text" name="direct_charset" class="input mt-1" value="utf8mb4">
            </label>
            <label class="block text-sm text-slate-600">Benutzername
              <input type="text" name="direct_user" class="input mt-1" placeholder="db_user">
            </label>
            <label class="block text-sm text-slate-600">Passwort
              <input type="text" name="direct_password" class="input mt-1" placeholder="••••">
            </label>
          </div>

          <div id="configFields" class="hidden space-y-3">
            <div>
              <label class="block text-sm text-slate-600">Pfad zur Konfigurationsdatei</label>
              <input type="text" name="config_file" class="input mt-1" placeholder="../config/database.php">
              <p class="text-xs text-slate-500 mt-1">Relativ zur Bridge-Datei oder absolut. Die Datei sollte ein Array oder Objekt mit den Zugangsdaten liefern.</p>
              <button type="button" id="btn-config-example" class="btn mt-2 text-xs" data-role="admin">Beispiel: Array-Mapping</button>
            </div>
            <div>
              <label class="block text-sm text-slate-600">Basis-Pfad im Array (optional)</label>
              <input type="text" name="config_base" class="input mt-1" placeholder="database.connections.mysql">
              <p class="text-xs text-slate-500 mt-1">Dot-Notation, um in verschachtelte Arrays zu springen.</p>
            </div>
            <div class="grid md:grid-cols-2 gap-3">
              <label class="block text-sm text-slate-600">Host-Key
                <input type="text" name="config_host_key" class="input mt-1" placeholder="host">
              </label>
              <label class="block text-sm text-slate-600">Port-Key
                <input type="text" name="config_port_key" class="input mt-1" placeholder="port">
              </label>
              <label class="block text-sm text-slate-600">DB-Name-Key
                <input type="text" name="config_database_key" class="input mt-1" placeholder="database">
              </label>
              <label class="block text-sm text-slate-600">Charset-Key
                <input type="text" name="config_charset_key" class="input mt-1" placeholder="charset">
              </label>
              <label class="block text-sm text-slate-600">User-Key
                <input type="text" name="config_user_key" class="input mt-1" placeholder="username">
              </label>
              <label class="block text-sm text-slate-600">Passwort-Key
                <input type="text" name="config_password_key" class="input mt-1" placeholder="password">
              </label>
            </div>
            <p class="text-xs text-slate-500">Alle Keys nutzen Dot-Notation relativ zum Basis-Pfad.</p>
          </div>
        </fieldset>

        <div class="flex flex-wrap gap-2">
          <button type="button" id="btn-load-remote" class="btn" data-role="admin">Tabellen vom Bridge-Endpunkt laden</button>
          <span class="text-xs text-slate-500 self-center">Nutzt Bridge-URL/Token aus den Einstellungen und uebernimmt optional DB-Settings aus der Bridge-Datei.</span>
          <button type="button" id="btn-import-bridge" class="btn" data-role="admin">Bridge-Datei importieren …</button>
          <input type="file" id="bridgeImportInput" accept="application/x-php,text/plain" class="hidden" />
          <button type="submit" class="btn">Bridge-Setup speichern</button>
        </div>
        <p class="text-xs text-slate-500">Der Import liest nur den automatisch generierten Kommentarblock aus einer Bridge-Datei.</p>
        <div id="setupStatus" class="text-xs text-slate-500">Noch nicht gespeichert.</div>
      </form>
    </section>
  </main>

  <div id="toast-root"></div>

  <dialog id="configExampleDialog" class="rounded-xl max-w-2xl w-[90vw]">
    <form method="dialog" class="space-y-3">
      <h3 class="text-lg font-semibold">Beispiel: Mapping einer Config-Datei</h3>
      <p class="text-sm text-slate-600">Angenommen, deine <code>../config/database.php</code> liefert folgendes Array:</p>
      <pre class="bg-slate-900 text-slate-100 text-xs p-3 rounded-lg overflow-auto"><?php echo htmlspecialchars(<<<'PHP'
<?php
return [
    'database' => [
        'connections' => [
            'default' => [
                'host' => '127.0.0.1',
                'port' => 3306,
                'database' => 'kunden_db',
                'username' => 'dbuser',
                'password' => 'secret',
                'charset' => 'utf8mb4',
            ],
        ],
    ],
];
PHP, ENT_QUOTES); ?></pre>
      <p class="text-sm text-slate-600">Dann trägst du ein:</p>
      <ul class="text-sm text-slate-700 list-disc ps-5">
        <li><strong>Pfad zur Konfigurationsdatei:</strong> <code>../config/database.php</code></li>
        <li><strong>Basis-Pfad:</strong> <code>database.connections.default</code></li>
        <li><strong>Host-/Port-/DB-/User-/Pass-/Charset-Key:</strong> jeweils <code>host</code>, <code>port</code>, <code>database</code>, <code>username</code>, <code>password</code>, <code>charset</code></li>
      </ul>
      <p class="text-sm text-slate-600">Die Bridge liest dann automatisch die Werte aus diesem Array und baut daraus den DSN.</p>
      <div class="text-right">
        <button type="submit" class="btn">Verstanden</button>
      </div>
    </form>
  </dialog>
<?php
tpl_add_script(app_asset_url('/assets/js/toast.js'));
tpl_add_script(app_asset_url('/assets/js/bridge-setup.js'), 'footer', false, false, '', null, true);
require dirname(__DIR__) . '/../structure/layout_end.php';