aio-interface: improve headers (#7690)

Signed-off-by: Zoey <zoey@z0ey.de>
Signed-off-by: Simon L. <szaimen@e.mail.de>
Signed-off-by: Pablo Zmdl <pablo@nextcloud.com>
Co-authored-by: Simon L. <szaimen@e.mail.de>
Co-authored-by: Pablo Zmdl <pablo@nextcloud.com>

php/public/click-handlers.js

@@ -0,0 +1,27 @@
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll('input[data-confirm]').forEach((element) => {
+        element.addEventListener('click', (event) => {
+            if (!confirm(element.dataset.confirm)) {
+                event.preventDefault();
+            }
+        });
+    });
+
+
+    document.querySelectorAll('input[data-input-show-password]').forEach((element) => {
+        element.addEventListener('input', (element) => {
+            let passwordField = element
+            if (passwordField.type === "password" && passwordField.value !== "") {
+                passwordField.type = "text";
+            } else if (passwordField.type === "text" && passwordField.value === "") {
+                passwordField.type = "password";
+            }
+        });
+    });
+
+    document.querySelectorAll('[data-stop-event-propagation="true"]').forEach((element) => {
+        element.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+    });
+});

php/public/forms.js

@@ -1,14 +1,5 @@
 "use strict";
 
-function showPassword(id) {
-  let passwordField = document.getElementById(id);
-  if (passwordField.type === "password" && passwordField.value !== "") {
-    passwordField.type = "text";
-  } else if (passwordField.type === "text" && passwordField.value === "") {
-    passwordField.type = "password";
-  }
-}
-
 (function (){
   let lastError;
 

php/public/img/collabora.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-left: 4px;">
+    <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

php/public/img/office-none.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-right: 6px;">
+    <path d="M2 2L14 14M2 14L14 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>

php/public/img/onlyoffice.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-left: 4px;">
+    <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

php/public/logs.css

@@ -0,0 +1,49 @@
+html, body {
+    height: 100%;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+}
+pre {
+    height: 100%;
+    overflow: auto;
+    margin: 0;
+    padding: 1rem;
+    box-sizing: border-box;
+}
+#floating-box {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    max-width: calc(100vw - 2rem);
+    z-index: 10;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+#autoloading-box {
+    display: grid;
+    gap: 0.5rem;
+    font-size: large;
+    border: solid thin gray;
+    background-color: #f9f9f9;
+    width: 10rem;
+    padding: 0.5rem 1rem;
+    margin: 0 0 0 1rem;
+}
+.loader {
+    opacity: 1;
+    width: 40px;
+    height: 40px;
+    align-self: inherit;
+}
+@starting-style {
+    .loader {
+    opacity: 0;
+    }
+}
+.loader.hidden {
+    display: none;
+    opacity: 0;
+    transition: opacity 1s, display 1s allow-discrete;
+}

php/public/scroll-into-view.js

@@ -0,0 +1,9 @@
+const observer = new MutationObserver((records) => {
+    const node = records[0]?.addedNodes[0];
+    // Text nodes also appear here but can't be scrolled to, so we have to check for the
+    // function being present.
+    if (node && typeof(node.scrollIntoView) === 'function') {
+        node.scrollIntoView();
+    }
+});
+observer.observe(document, {childList: true, subtree: true});

php/public/toggle-dark-mode.js

@@ -32,4 +32,7 @@ function setThemeIcon(theme) {
 setThemeToDOM(getSavedTheme());
 
 // Apply theme when the page loads
-document.addEventListener('DOMContentLoaded', () => setThemeIcon(getSavedTheme()));
+document.addEventListener('DOMContentLoaded', () => {
+    setThemeIcon(getSavedTheme())
+    document.querySelector('button#theme-toggle')?.addEventListener('click', () => toggleTheme());
+});