Load container status into iframe as streamed response

Signed-off-by: Pablo Zmdl <pablo@nextcloud.com>

php/public/forms.js

@@ -79,6 +79,17 @@ function showPassword(id) {
     for (const form of forms) {
       initForm(form);
     }
+    const overlayLogForms = document.querySelectorAll('form[target="overlay-log"]')
+    for (const form of overlayLogForms) {
+        form.onsubmit = function() {
+            enableSpinner();
+            document.getElementById('overlay-log')?.classList.add('visible');
+            // Reload the page after the response was fully loaded into the iframe.
+            document.querySelector('iframe[name="overlay-log"]').addEventListener('load', () => {
+                location.reload();
+            });
+        };
+    }
   }
 
   if (document.readyState === 'loading') {

php/public/style.css

@@ -468,7 +468,29 @@ input[type="checkbox"]:disabled:not(:checked) + label {
 }
 
 #overlay.loading {
-    display: block;
+    display: grid;
+    justify-items: center;
+    row-gap: 2rem;
+}
+
+#overlay #overlay-log.visible {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 1s ease-in;
+}
+
+#overlay #overlay-log {
+    visibility: hidden;
+    opacity: 0;
+    align-self: start;
+    width: 20%;
+    height: 7rem;
+    border-radius: var(--border-radius-large);
+    border: solid thin rgb(192, 192, 192);
+}
+
+.overlay-iframe {
+    padding: 1rem;
 }
 
 .loader {
@@ -479,9 +501,7 @@ input[type="checkbox"]:disabled:not(:checked) + label {
     height: 120px;
     -webkit-animation: spin 2s linear infinite; /* Safari */
     animation: spin 2s linear infinite;
-    position: absolute;
-    top: calc(50% - 60px);
-    left: calc(50% - 60px);
+    align-self: end;
 }
 
 /* Safari */
@@ -705,4 +725,4 @@ input[type="checkbox"]:disabled:not(:checked) + label {
     .office-suite-cards {
         grid-template-columns: 1fr;
     }
-}
+}

php/public/toggle-dark-mode.js

@@ -2,7 +2,7 @@
 function toggleTheme() {
     const currentTheme = document.documentElement.getAttribute('data-theme');
     const newTheme = (currentTheme === 'dark') ? '' : 'dark'; // Toggle between no theme and dark theme
-    document.documentElement.setAttribute('data-theme', newTheme);
+    setThemeToDOM(newTheme);
     localStorage.setItem('theme', newTheme);
 
     // Change the icon based on the current theme
@@ -10,14 +10,16 @@ function toggleTheme() {
     themeIcon.textContent = newTheme === 'dark' ? '☀️' : '🌙'; // Switch between moon and sun icons
 }
 
+function setThemeToDOM(value) {
+    // Set the theme to the root document and all possible iframe documents (so they can adapt their styling, too).
+    const documents = [document, Array.from(document.querySelectorAll('iframe')).map((iframe) => iframe.contentDocument)].flat()
+    documents.forEach((doc) => doc.documentElement.setAttribute('data-theme', value));
+}
+
 // Function to immediately apply saved theme without icon update
 function applySavedThemeImmediately() {
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme === 'dark') {
-        document.documentElement.setAttribute('data-theme', 'dark');
-    } else {
-        document.documentElement.removeAttribute('data-theme'); // Default to light theme
-    }
+    // Default to light theme
+    setThemeToDOM(localStorage.getItem('theme') ?? '');
 }
 
 // Function to apply theme-icon update