improve UX and UI

php/public/automatic_reload.js

@@ -1,17 +1,19 @@
-if (document.hasFocus()) {
-    // hide reload button if the site reloads automatically
-    let list = document.getElementsByClassName("reload button");
-    for (let i = 0; i < list.length; i++) {
-        // list[i] is a node with the desired class name
-        list[i].style.display = 'none';
-    }
+document.addEventListener("DOMContentLoaded", function(event) {
+    if (document.hasFocus()) {
+        // hide reload button if the site reloads automatically
+        let list = document.getElementsByClassName("reload button");
+        for (let i = 0; i < list.length; i++) {
+            // list[i] is a node with the desired class name
+            list[i].style.display = 'none';
+        }
 
-    // set timeout for reload
-    setTimeout(function(){
-    window.location.reload(1);
-    }, 5000);
-} else {
-    window.addEventListener("beforeunload", function() {
-        document.getElementById('overlay').classList.add('loading')
-    });
-}
+        // set timeout for reload
+        setTimeout(function(){
+        window.location.reload(1);
+        }, 5000);
+    } else {
+        window.addEventListener("beforeunload", function() {
+            document.getElementById('overlay').classList.add('loading')
+        });
+    }
+});

php/public/domain-prefill.js

@@ -0,0 +1,7 @@
+document.addEventListener("DOMContentLoaded", function(event) {
+    // domain
+    let domain = document.getElementById("domain_input");
+    if (domain) {
+        domain.value = window.location.host
+    }
+});

php/public/style.css

@@ -6,6 +6,7 @@ html, body {
 
 a {
     text-decoration: none;
+    color: #0082c9;
 }
 
 .button {
@@ -197,7 +198,7 @@ header {
 .loader {
     border: 16px solid #f3f3f3;
     border-radius: 50%;
-    border-top: 16px solid #3498db;
+    border-top: 16px solid #0082c9;
     width: 120px;
     height: 120px;
     -webkit-animation: spin 2s linear infinite; /* Safari */

php/public/timezone.js

@@ -0,0 +1,7 @@
+document.addEventListener("DOMContentLoaded", function(event) {
+    // timezone
+    let timezone = document.getElementById("timezone");
+    if (timezone) {
+        timezone.value = Intl.DateTimeFormat().resolvedOptions().timeZone
+    }
+});

php/templates/containers.twig

@@ -20,6 +20,12 @@
 
         {# Add 2nd tab warning #}
         <script type="text/javascript" src="second-tab-warning.js"></script>
+
+        {# Add domain-prefill #}
+        <script type="text/javascript" src="domain-prefill.js"></script>
+
+        {# timezone-prefill #}
+        <script type="text/javascript" src="timezone.js"></script>
 
         {% set isAnyRunning = false %}
         {% set isAnyRestarting = false %}
@@ -100,7 +106,7 @@
                             <b>Please note:</b> The domain validation is disabled so any domain will be accepted here! So make sure that you do not make a typo here as you will not be able to change it afterwards!<br><br>
                         {% endif %}
                         <form method="POST" action="/api/configuration" class="xhr">
-                            <input type="text" name="domain" value="{{ domain }}" placeholder="nextcloud.yourdomain.com"/>
+                            <input type="text" id="domain_input" name="domain" value="{{ domain }}" placeholder="nextcloud.yourdomain.com"/>
                             <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                             <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
                             <input class="button" type="submit" value="Submit domain" />
@@ -130,7 +136,7 @@
                                 {% if backup_exit_code > 0 %}
                                     <span class="status error"></span> Last {{ borg_backup_mode }} failed! (<a href="/api/docker/logs?id=nextcloud-aio-borgbackup" target="_blank" rel="noopener">Logs</a>)<br /><br />
                                     {% if borg_backup_mode == 'test' %}
-                                        Please adjust the path and/or the password in order to make it work!<br><br>
+                                        Please adjust the path and/or the encryption password in order to make it work!<br><br>
                                     {% elseif borg_backup_mode == 'check' %}
                                         The backup archive seems to be corrupt. Please try to use a different intact backup archive or try to fix it by following <a href="https://borgbackup.readthedocs.io/en/stable/faq.html#i-get-an-integrityerror-or-similar-what-now"><b>this documentation</b></a><br><br>
                                         <details>
@@ -146,14 +152,14 @@
                                 {% elseif backup_exit_code == 0 %}
                                     <span class="status success"></span> Last {{ borg_backup_mode }} successful! (<a href="/api/docker/logs?id=nextcloud-aio-borgbackup" target="_blank" rel="noopener">Logs</a>)<br /><br />
                                     {% if borg_backup_mode == 'test' %}
-                                        Feel free to check the integrity of the backup archive below before starting the restore process in order to make double-sure that the restore will work. This can take a long time though depending on the size of the backup archive and is thus not required.<br><br>
+                                        Feel free to check the integrity of the backup archive below before starting the restore process in order to make ensure that the restore will work. This can take a long time though depending on the size of the backup archive and is thus not required.<br><br>
                                         <form method="POST" action="/api/docker/backup-check" class="xhr">
                                             <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                             <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
                                             <input class="button" type="submit" value="Check backup integrity"/><br/>
                                         </form>
                                     {% endif %}
-                                    Choose the backup that you want to restore and click on the button below to restore the selected backup. This will restore the whole AIO instance from backup. Please note that the current AIO password will be kept and the previous AIO password will not be restored from backup!<br><br>
+                                    Choose the backup that you want to restore and click on the button below to restore the selected backup. This will restore the whole AIO instance from backup. Please note that the current AIO passphrase will be kept and the previous AIO passphrase will not be restored from backup!<br><br>
                                     <form method="POST" action="/api/docker/restore" class="xhr" id="restore_selection">
                                         <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                         <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
@@ -168,29 +174,29 @@
                             {% elseif borg_backup_mode == 'restore' %}
                                 {% if backup_exit_code > 0 %}
                                     <span class="status error"></span> Last restore failed! (<a href="/api/docker/logs?id=nextcloud-aio-borgbackup" target="_blank" rel="noopener">Logs</a>)<br /><br />
-                                    Somehow the restore failed which is unexpected! Please adjust the path and password, test it and try to restore again!
+                                    Somehow the restore failed which is unexpected! Please adjust the path and encryption password, test it and try to restore again!
                                 {% endif %}
                             {% endif %}
                         {% endif %}
 
                         {% if borg_backup_host_location == '' or borg_restore_password == '' or borg_backup_mode not in ['test', 'check', ''] or backup_exit_code > 0 %}
-                            Please enter the location of the backup archive on your host and the password of the backup archive below:<br><br>
+                            Please enter the location of the backup archive on your host and the encryption password of the backup archive below:<br><br>
                             <form method="POST" action="/api/configuration" class="xhr">
                                 <input type="text" name="borg_restore_host_location" value="{{borg_backup_host_location}}" placeholder="/mnt/backup"/>
-                                <input type="text" name="borg_restore_password" value="{{borg_restore_password}}" placeholder="enter the borg password"/>
+                                <input type="text" name="borg_restore_password" value="{{borg_restore_password}}" placeholder="encryption password"/>
                                 <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                 <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                <input class="button" type="submit" value="Submit location and password" />
+                                <input class="button" type="submit" value="Submit location and encryption password" />
                             </form>
                             {{ include('includes/backup-dirs.twig') }}
                             ⚠️ Please note that the backup archive must be located in a subfolder of the folder that you enter here and the subfolder which contains the archive must be named 'borg'. Otherwise will the backup container not find the backup archive!<br><br>
                         {% endif %}
                     {% else %}
-                        <b>Everything set!</b> Click on the button below to test the path and password:<br/><br/>
+                        <b>Everything set!</b> Click on the button below to test the path and encryption password:<br/><br/>
                         <form method="POST" action="/api/docker/backup-test" class="xhr">
                             <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                             <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                            <input class="button" type="submit" value="Test path and password"/><br/>
+                            <input class="button" type="submit" value="Test path and encryption password"/><br/>
                         </form>
                     {% endif %}
                 {% endif %}
@@ -230,7 +236,7 @@
                         {% endif %}
                     {% else %}
                         {% if isAnyRestarting == false %}
-                            <span class="status running"></span> Containers are currently starting.<br /><br />
+                            <span class="status running"></span> Containers are currently starting. You might inspect the container logs by clicking on <br>Starting</br> next to each container for further details.<br /><br />
                             <a href="" class="button reload">Reload ↻</a><br/><br>
                         {% else %}
                             It seems like at least one container is currently restarting which means it is not able to start correctly.<br><br>
@@ -422,7 +428,7 @@
                                 <h3>Backup information</h3>
                                 This is your encryption password for backups: <b>{{ borgbackup_password }}</b><br /><br/>
                                 Please save it at a safe place since you won't be able to restore from backup if you lose this password! <br /><br/>
-                                Backed up will get all important data of your Nextcloud AIO instance like the database, your files and configuration files of the mastercontainer and else. <br /><br/>
+                                All important data of your Nextcloud AIO instance will get backed up like the database, your files and configuration files of the mastercontainer and else. <br /><br/>
                                 The backup itself uses a tool that is called <a href="https://github.com/borgbackup/borg#what-is-borgbackup"><b>BorgBackup</b></a> which is a well-known server backup tool that efficiently backs up your files and encrypts them on the fly. <br /><br/>
                                 By using this tool, backups are incremental, differential, compressed and encrypted – so only the first backup will take a while. Further backups should be fast as only changes are taken into account.<br /><br/>
                                 Backups get created in the following directory on the host: <b>{{ borg_backup_host_location }}/borg</b> <br /><br/>
@@ -525,18 +531,18 @@
 
                     {% if is_backup_container_running == false %}
                         {% if isApacheStarting == false %} 
-                            <h2>AIO password change</h2>
+                            <h2>AIO passphrase change</h2>
                             <details>
-                                <summary>Click here to change your AIO password</summary><br />
-                                You can change your AIO password below:<br><br />
+                                <summary>Click here to change your AIO passphrase</summary><br />
+                                You can change your AIO passphrase below:<br><br />
                                 <form method="POST" action="/api/configuration" class="xhr">
-                                    <input type="password" autocomplete="current-password" name="current-master-password" placeholder="Your current AIO password" id="current-master-password" oninput="showPassword('current-master-password')">
-                                    <input type="password" autocomplete="new-password" name="new-master-password" placeholder="Your new AIO password" 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" 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="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                     <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                    <input class="button" type="submit" value="Submit password change" />
+                                    <input class="button" type="submit" value="Submit passphrase change" />
                                 </form>
-                                The new password needs to be at least 24 characters long. Allowed characters are the <a href="https://en.wikipedia.org/wiki/Latin_alphabet#/media/File:Abecedarium.png"><b>latin characters</b></a> <b>a-z</b>, <b>A-Z</b>, <b>0-9</b> and <b>spaces</b>.<br>
+                                The new passphrase needs to be at least 24 characters long. Allowed characters are the <a href="https://en.wikipedia.org/wiki/Latin_alphabet#/media/File:Abecedarium.png"><b>latin characters</b></a> <b>a-z</b>, <b>A-Z</b>, <b>0-9</b> and <b>spaces</b>.<br>
                             </details>
                         {% endif %}
                     {% endif %}
@@ -644,7 +650,7 @@
                             In order to get the correct time values for certain Nextcloud features, it makes sense to set the timezone for Nextcloud to the one that your users mainly use. Please note that this setting does not apply to the mastercontainer and any backup option.<br><br>
                             You can configure the timezone for Nextcloud below:<br><br>
                             <form method="POST" action="/api/configuration" class="xhr">
-                                <input type="text" name="timezone" placeholder="Europe/Berlin" />
+                                <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 class="button" 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 since if not, it will break the startup since the database will not get correctly initialized and you will end in a startup loop.')" />

php/templates/login.twig

@@ -6,7 +6,7 @@
             <img src="/img/logo-blue.svg" style="margin-left: auto;margin-right: auto;display: block;">
             <h1>Nextcloud AIO Login</h1>
             {% if is_login_allowed == true %}
-                <p>Log in using your Nextcloud AIO password:</p>
+                <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')">
 

php/templates/setup.twig

@@ -4,10 +4,10 @@
     <div class="login-wrapper">
         <div class="login">
             <img src="/img/logo-blue.svg" style="margin-left: auto;margin-right: auto;display: block;">
-            <h1>Nextcloud AIO setup</h1>
+            <h1>All-in-One setup</h1>
             <p>The official Nextcloud installation method. Nextcloud All-in-One provides easy deployment and maintenance with most features included in this one Nextcloud instance.</p>
-            <p>Please note down the password to access the AIO interface and don't lose it!</p>
-            <strong>Password</strong><br/> <span class="monospace">{{ password }}</span><br>
+            <p>⚠️ <br>Please note down the passphrase to access the AIO interface and don't lose it!</br></p>
+            <strong>Passphrase</strong><br/> <span class="monospace">{{ password }}</span><br>
             <a href="/" class="button" target="_blank" rel="noopener">Open Nextcloud AIO login ↗</a>
         </div>
     </div>