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());
+});

php/src/Controller/DockerController.php

@@ -381,17 +381,7 @@ readonly class DockerController {
         <html lang="en" class="overlay-iframe">
             <head>
                 <link rel="stylesheet" href="../../style.css?v8" media="all" />
-                <script>
-                    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});
-                </script>
+                <script type="text/javascript" src="../../scroll-into-view.js"></script>
             </head>
             <body>
             

php/templates/containers.twig

@@ -153,7 +153,7 @@
                                                 <form method="POST" action="api/docker/backup-check-repair" target="overlay-log">
                                                     <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                                     <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                                    <input type="submit" value="Check and repair backup integrity" onclick="return confirm('Check and repair backup integrity? Are you sure that you want to check and repair the backup integrity? This should only be done after reading the mentioned documentation.')"/>
+                                                    <input type="submit" value="Check and repair backup integrity" data-confirm='Check and repair backup integrity? Are you sure that you want to check and repair the backup integrity? This should only be done after reading the mentioned documentation.'/>
                                                 </form>
                                             </details>
                                         {% endif %}
@@ -178,7 +178,7 @@
                                                 {% endfor %}
                                             </select><br>
                                             <input type="checkbox" id="restore-exclude-previews" name="restore-exclude-previews"><label for="restore-exclude-previews">Exclude previews from restore which will speed up the restore process but will trigger a scan of the preview folder as soon as the Nextcloud container starts the next time</label><br>
-                                            <input type="submit" value="Restore selected backup" onclick="return confirm('⚠️ Important: If the backup that you want to restore contained any community container, you need to restore the same backup a second time after this attempt so that the community container data is also correctly restored.')"/>
+                                            <input type="submit" value="Restore selected backup" data-confirm='⚠️ Important: If the backup that you want to restore contained any community container, you need to restore the same backup a second time after this attempt so that the community container data is also correctly restored.'/>
                                         </form>
                                     {% endif %}
                                 {% elseif borg_backup_mode == 'restore' %}
@@ -366,7 +366,7 @@
                                         {% if bypass_container_update == true %}
                                             <input type="hidden" name="bypass_container_update" value="true">
                                         {% endif %}
-                                        <input class="button " type="submit" value="Start and update containers" onclick="return confirm('Start and update containers? You should consider creating a backup first.')" />
+                                        <input class="button " type="submit" value="Start and update containers" data-confirm='Start and update containers? You should consider creating a backup first.' />
                                     </form>
                                 {% endif %}
                             {% endif %}
@@ -413,7 +413,7 @@
                                                 <form method="POST" action="api/docker/backup-check-repair" target="overlay-log">
                                                     <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                                     <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                                    <input type="submit" value="Check and repair backup integrity" onclick="return confirm('Check and repair backup integrity? Are you sure that you want to check and repair the backup integrity? This should only be done after reading the mentioned documentation.')"/>
+                                                    <input type="submit" value="Check and repair backup integrity" data-confirm='Check and repair backup integrity? Are you sure that you want to check and repair the backup integrity? This should only be done after reading the mentioned documentation.'/>
                                                 </form>
                                             </details>
                                         {% endif %}
@@ -478,7 +478,7 @@
                                         <form method="POST" action="api/docker/backup" target="overlay-log">
                                             <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                             <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                            <input type="submit" value="Create backup" onclick="return confirm('Create backup? Are you sure that you want to create a backup? This will stop all running containers and create the backup.')" />
+                                            <input type="submit" value="Create backup" data-confirm='Create backup? Are you sure that you want to create a backup? This will stop all running containers and create the backup.' />
                                         </form>
 
                                         {% if has_backup_run_once == true %}
@@ -490,7 +490,7 @@
                                             <form method="POST" action="api/docker/backup-check" target="overlay-log">
                                                 <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                                 <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                                <input type="submit" value="Check backup integrity" onclick="return confirm('Check backup integrity? Are you sure that you want to check the backup? This can take a long time depending on the size of your backup.')" />
+                                                <input type="submit" value="Check backup integrity" data-confirm='Check backup integrity? Are you sure that you want to check the backup? This can take a long time depending on the size of your backup.' />
                                             </form>
 
                                             <h3>Backup restore</h3>
@@ -503,7 +503,7 @@
                                                         <option value="{{ restore_time }}">{{ restore_time }} UTC</option>
                                                     {% endfor %}
                                                 </select>
-                                                <input type="submit" value="Restore selected backup" onclick="return confirm('Restore the selected backup? Are you sure that you want to restore the selected backup? This will stop all running containers and restore the selected backup. It is recommended to create a backup first. You might also want to check the backup integrity.')" />
+                                                <input type="submit" value="Restore selected backup" data-confirm='Restore the selected backup? Are you sure that you want to restore the selected backup? This will stop all running containers and restore the selected backup. It is recommended to create a backup first. You might also want to check the backup integrity.' />
                                             </form>
 
                                             <h3>Update backup list</h3>
@@ -570,7 +570,7 @@
                                             <input type="hidden" name="delete_borg_backup_location_vars" value="yes"/>
                                             <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                             <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                            <input type="submit" value="Reset backup location" onclick="return confirm('Are you sure that you want to reset the backup location?')" />
+                                            <input type="submit" value="Reset backup location" data-confirm='Are you sure that you want to reset the backup location?' />
                                         </form>
                                     {% endif %}
                                     {% if has_backup_run_once == true %}
@@ -587,8 +587,8 @@
                                     <summary>Click here to change your AIO passphrase</summary>
                                     <p>You can change your AIO passphrase below:</p>
                                     <form method="POST" action="api/configuration" class="xhr">
-                                        <input type="password" autocomplete="current-password" name="current-master-password" placeholder="Your current AIO passphrase" id="current-master-password" oninput="showPassword('current-master-password')">
-                                        <input type="password" autocomplete="new-password" name="new-master-password" placeholder="Your new AIO passphrase" id="new-master-password" oninput="showPassword('new-master-password')">
+                                        <input type="password" autocomplete="current-password" name="current-master-password" placeholder="Your current AIO passphrase" id="current-master-password" data-input-show-password="showPassword('current-master-password')">
+                                        <input type="password" autocomplete="new-password" name="new-master-password" placeholder="Your new AIO passphrase" id="new-master-password" data-input-show-password="showPassword('new-master-password')">
                                         <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                         <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
                                         <input type="submit" value="Submit passphrase change" />
@@ -616,7 +616,7 @@
                                     <input type="text" id="timezone" name="timezone" placeholder="Europe/Berlin" />
                                     <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                     <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                    <input type="submit" value="Submit timezone" onclick="return confirm('Are you sure that this is a valid timezone? Please double check by following the wikipedia article and checking the correct column. If the timezone is not valid, it will break the startup since the database will not be correctly initialized and you will end up in a startup loop.')" />
+                                    <input type="submit" value="Submit timezone" data-confirm='Are you sure that this is a valid timezone? Please double check by following the wikipedia article and checking the correct column. If the timezone is not valid, it will break the startup since the database will not be correctly initialized and you will end up in a startup loop.' />
                                 </form>
                                 <p>You need to make sure that the timezone that you enter is valid. An example is <strong>Europe/Berlin</strong>. You can get valid values by looking at the 'TZ identifier' column of this list: <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List"><strong>click here</strong></a>. The default is <strong>Etc/UTC</strong> if nothing is entered.</p>
                             {% else %}

php/templates/includes/community-containers.twig

@@ -37,6 +37,6 @@
             </p>
         {% endfor %}
 
-        <input id="community-form-submit" type="submit" value="Save changes" onclick="return confirm('Are you sure that you read the documentation of all community containers that you enabled? If no, please do not continue as this might break your instance!')" />
+        <input id="community-form-submit" type="submit" value="Save changes" data-confirm='Are you sure that you read the documentation of all community containers that you enabled? If no, please do not continue as this might break your instance!' />
     </form>
 </details>

php/templates/includes/optional-containers.twig

@@ -41,11 +41,9 @@
                 <li>Best support for legacy files</li>
             </ul>
             {% if isAnyRunning == false %}
-                <a href="https://www.collaboraoffice.com/code/" target="_blank" class="office-learn-more" onclick="event.stopPropagation();">
+                <a href="https://www.collaboraoffice.com/code/" target="_blank" class="office-learn-more" data-stop-event-propagation="true">
                     Learn more
-                    <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>
+                    <img src="img/collabora.svg" alt="Collabora Logo" />
                 </a>
             {% endif %}
         </label>
@@ -76,11 +74,9 @@
                 <li>Limited ODF compatibility</li>
             </ul>
             {% if isAnyRunning == false %}
-                <a href="https://www.onlyoffice.com/" target="_blank" class="office-learn-more" onclick="event.stopPropagation();">
+                <a href="https://www.onlyoffice.com/" target="_blank" class="office-learn-more" data-stop-event-propagation="true">
                     Learn more
-                    <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>
+                    <img src="img/onlyoffice.svg" alt="Onlyoffice Logo" />
                 </a>
             {% endif %}
         </label>
@@ -99,9 +95,7 @@
                 {% endif %}
             >
             <label class="office-none-label" for="office-none">
-                <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>
+                <img src="img/office-none.svg" alt="Disable Office icon" />
                 Disable office suite
             </label>
         </div>

php/templates/layout.twig

@@ -1,10 +1,12 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
     <head>
         <title>AIO</title>
         <link rel="stylesheet" href="style.css?v9" media="all" />
         <link rel="icon" href="img/favicon.png">
         <script type="text/javascript" src="forms.js?v2"></script>
         <script type="text/javascript" src="toggle-dark-mode.js?v1"></script>
+        <script type="text/javascript" src="click-handlers.js?v1"></script>
     </head>
 
     <body>
@@ -15,7 +17,7 @@
             <div class="loader"></div>
             <iframe name="overlay-log" id="overlay-log"></iframe>
         </div>
-        <button id="theme-toggle" onclick="toggleTheme()">
+        <button id="theme-toggle">
             <span id="theme-icon"></span>
         </button>
     </body>

php/templates/log.twig

@@ -2,57 +2,7 @@
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
         <link rel="stylesheet" href="style.css">
-        <style>
-            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;
-            }
-        </style>
+        <link rel="stylesheet" href="logs.css">
         <script src="log-view.js?v1"></script>
     </head>
     <body data-container-id="{{ id }}">

php/templates/login.twig

@@ -11,7 +11,7 @@
         {% if is_login_allowed == true %}
             <p>Log in using your Nextcloud AIO passphrase:</p>
             <form method="POST" action="api/auth/login" class="xhr">
-                <input type="password" autocomplete="current-password" name="password" placeholder="Password" id="master-password" oninput="showPassword('master-password')">
+                <input type="password" autocomplete="current-password" name="password" placeholder="Password" id="master-password" data-input-show-password="showPassword('master-password')">
                 <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                 <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
                 <input type="submit" class="button" value="Log in" />