NC Connector: open assistant only on demand in modal dialog

template/nc_connector_admin.tpl

@@ -41,11 +41,25 @@
 
     <div class="bratonien-card" style="grid-column:1/-1">
       <h4>Neue Verbindung</h4>
-      <p class="bratonien-base-note"><strong>Assistent · Schritt {$NC_CONNECTOR.wizard.step|escape:html} von 4</strong></p>
+      <p class="bratonien-base-note">Wähle den geführten Assistenten oder öffne die technische Einrichtung bewusst manuell.</p>
+      <div class="bratonien-actions">
+        <button class="buttonLike" type="button" id="bratonien-nc-wizard-open">Mit Assistent anlegen</button>
+        <button class="buttonLike" type="button" id="bratonien-nc-technical-open">Ohne Assistent anlegen</button>
+      </div>
+
+      <dialog id="bratonien-nc-wizard-dialog" style="width:min(1100px,calc(100vw - 3rem));max-height:88vh;overflow:auto;background:#444;color:inherit;border:1px solid #777;border-radius:4px;padding:0;box-shadow:0 18px 60px rgba(0,0,0,.55)">
+        <div style="padding:1.25rem 1.5rem">
+          <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem">
+            <div>
+              <h4 style="margin:0">Neue Verbindung</h4>
+              <p class="bratonien-base-note" style="margin:.35rem 0 0"><strong>Assistent · Schritt {$NC_CONNECTOR.wizard.step|escape:html} von 4</strong></p>
+            </div>
+            <button class="buttonLike" type="button" id="bratonien-nc-wizard-close">Schließen</button>
+          </div>
 
           {if $NC_CONNECTOR.wizard.step == 1}
             <p class="bratonien-base-note">Wir beginnen nur mit der Adresse der Nextcloud und einem Benutzer, mit dem die Instanz auf den Scan antworten kann.</p>
-        <form method="post">
+            <form method="post" data-bratonien-wizard-form>
               <input type="hidden" name="pwg_token" value="{$PWG_TOKEN|escape:html}">
               <div class="bratonien-form-grid">
                 <label class="bratonien-label" for="nc_wizard_host">Nextcloud-Host</label>
@@ -73,7 +87,7 @@
               <hr>
               <h5>Für den Datenabgleich fehlt noch der Datenbankzugang</h5>
               <p class="bratonien-base-note">Der Assistent konnte diese Angaben nicht sicher aus Nextcloud ableiten. Deshalb werden nur die fehlenden Werte abgefragt.</p>
-          <form method="post">
+              <form method="post" data-bratonien-wizard-form>
                 <input type="hidden" name="pwg_token" value="{$PWG_TOKEN|escape:html}">
                 <div class="bratonien-form-grid">
                   <label class="bratonien-label">Verbindungsname</label><input name="nc_wizard_connection_name" type="text" value="{$NC_CONNECTOR.wizard.connection_name|escape:html}" required>
@@ -90,7 +104,7 @@
               <hr>
               <h5>Einige Storages konnten nicht automatisch zugeordnet werden</h5>
               <p class="bratonien-main-cache__warning">Mount-Pfade werden nur hier abgefragt, weil sie nicht sicher erkannt werden konnten. Bereits erkannte Zuordnungen sind gesperrt.</p>
-          <form method="post">
+              <form method="post" data-bratonien-wizard-form>
                 <input type="hidden" name="pwg_token" value="{$PWG_TOKEN|escape:html}">
                 <div class="bratonien-form-grid">
                   {foreach from=$NC_CONNECTOR.wizard.storage_candidates item=storage key=storage_index}
@@ -120,7 +134,7 @@
               <hr>
               <h5>Welcher Benutzer stellt die Bilder bereit?</h5>
               <p class="bratonien-base-note"><strong>Empfehlung:</strong> ein eigener Showcase-Benutzer. So bleibt die Connector-Quelle unabhängig von persönlichen Konten.</p>
-          <form method="post">
+              <form method="post" data-bratonien-wizard-form>
                 <input type="hidden" name="pwg_token" value="{$PWG_TOKEN|escape:html}">
                 <div class="bratonien-form-grid">
                   <label class="bratonien-label" for="nc_wizard_connection_name">Verbindungsname</label>
@@ -140,9 +154,9 @@
               </form>
             {/if}
 
-        <form method="post" style="margin-top:1rem">
+            <form method="post" style="margin-top:1rem" data-bratonien-wizard-form>
               <input type="hidden" name="pwg_token" value="{$PWG_TOKEN|escape:html}">
-          <button class="buttonLike" type="submit" name="bratonien_tool" value="nc_connector_wizard_reset">Neu beginnen</button>
+              <button class="buttonLike" type="submit" name="bratonien_tool" value="nc_connector_wizard_reset" data-bratonien-wizard-end>Neu beginnen</button>
             </form>
 
           {elseif $NC_CONNECTOR.wizard.step == 3}
@@ -152,7 +166,7 @@
             {if $NC_CONNECTOR.wizard.api_error}
               <p class="bratonien-main-cache__warning"><strong>Letzter API-Test:</strong> {$NC_CONNECTOR.wizard.api_error|escape:html}</p>
             {/if}
-        <form method="post">
+            <form method="post" data-bratonien-wizard-form>
               <input type="hidden" name="pwg_token" value="{$PWG_TOKEN|escape:html}">
               <div class="bratonien-form-grid">
                 <label class="bratonien-label" for="nc_wizard_api_key_id">API-Schlüssel-ID</label>
@@ -182,7 +196,7 @@
             {else}
               <p class="bratonien-main-cache__warning">Die API wurde übersprungen. Deshalb ist ein Fallback-Zugang erforderlich.</p>
             {/if}
-        <form method="post">
+            <form method="post" data-bratonien-wizard-form>
               <input type="hidden" name="pwg_token" value="{$PWG_TOKEN|escape:html}">
               <div class="bratonien-form-grid">
                 <label class="bratonien-label" for="nc_wizard_fallback_user">Piwigo-Benutzer</label>
@@ -191,14 +205,16 @@
                 <input id="nc_wizard_fallback_password" name="nc_wizard_fallback_password" type="password" autocomplete="current-password"{if $NC_CONNECTOR.wizard.api_status != 'ok'} required{/if}>
               </div>
               <div class="bratonien-actions">
-            <button class="buttonLike" type="submit" name="bratonien_tool" value="nc_connector_wizard_finish">Verbindung anlegen</button>
+                <button class="buttonLike" type="submit" name="bratonien_tool" value="nc_connector_wizard_finish" data-bratonien-wizard-end>Verbindung anlegen</button>
-            <button class="buttonLike" type="submit" name="bratonien_tool" value="nc_connector_wizard_reset" formnovalidate>Abbrechen</button>
+                <button class="buttonLike" type="submit" name="bratonien_tool" value="nc_connector_wizard_reset" formnovalidate data-bratonien-wizard-end>Abbrechen</button>
               </div>
             </form>
           {/if}
+        </div>
+      </dialog>
 
-      <details style="margin-top:1.5rem">
+      <details id="bratonien-nc-technical-create" style="margin-top:1.5rem">
-        <summary><strong>Ohne Assistent anlegen</strong></summary>
+        <summary style="display:none">Ohne Assistent anlegen</summary>
         <p class="bratonien-main-cache__warning">Technische Einrichtung. Falsche Storage- oder Galeriepfade können die Synchronisierung auf den falschen Datenbestand richten.</p>
         <form method="post">
           <input type="hidden" name="pwg_token" value="{$PWG_TOKEN|escape:html}">
@@ -352,4 +368,61 @@
       {else}<p class="bratonien-base-note">Noch keine Connector-Verbindung vorhanden.</p>{/if}
     </div>
   </div>
+
+  <script>
+  (function () {
+    var dialog = document.getElementById('bratonien-nc-wizard-dialog');
+    var openButton = document.getElementById('bratonien-nc-wizard-open');
+    var closeButton = document.getElementById('bratonien-nc-wizard-close');
+    var technicalButton = document.getElementById('bratonien-nc-technical-open');
+    var technical = document.getElementById('bratonien-nc-technical-create');
+    var storageKey = 'bratonienNcWizardOpen';
+
+    if (openButton && dialog) {
+      openButton.addEventListener('click', function () {
+        sessionStorage.setItem(storageKey, '1');
+        if (typeof dialog.showModal === 'function') dialog.showModal();
+        else dialog.setAttribute('open', 'open');
+      });
+    }
+
+    if (closeButton && dialog) {
+      closeButton.addEventListener('click', function () {
+        sessionStorage.removeItem(storageKey);
+        if (typeof dialog.close === 'function') dialog.close();
+        else dialog.removeAttribute('open');
+      });
+    }
+
+    if (dialog) {
+      dialog.addEventListener('cancel', function () {
+        sessionStorage.removeItem(storageKey);
+      });
+      dialog.addEventListener('click', function (event) {
+        if (event.target === dialog) {
+          sessionStorage.removeItem(storageKey);
+          if (typeof dialog.close === 'function') dialog.close();
+        }
+      });
+      dialog.querySelectorAll('form[data-bratonien-wizard-form]').forEach(function (form) {
+        form.addEventListener('submit', function (event) {
+          var submitter = event.submitter;
+          if (submitter && submitter.hasAttribute('data-bratonien-wizard-end')) sessionStorage.removeItem(storageKey);
+          else sessionStorage.setItem(storageKey, '1');
+        });
+      });
+      if (sessionStorage.getItem(storageKey) === '1') {
+        if (typeof dialog.showModal === 'function' && !dialog.open) dialog.showModal();
+        else dialog.setAttribute('open', 'open');
+      }
+    }
+
+    if (technicalButton && technical) {
+      technicalButton.addEventListener('click', function () {
+        technical.open = !technical.open;
+        if (technical.open) technical.scrollIntoView({behavior:'smooth', block:'start'});
+      });
+    }
+  }());
+  </script>
 </section>