fix some details

Signed-off-by: Simon L. <szaimen@e.mail.de>

php/public/containers-form-submit.js

@@ -1,7 +1,9 @@
 document.addEventListener("DOMContentLoaded", function () {
     // Hide submit button initially
-    const optionsFormSubmit = document.getElementById("options-form-submit");
+    const optionsFormSubmit = document.querySelectorAll(".options-form-submit");
-    optionsFormSubmit.style.display = 'none';
+    optionsFormSubmit.forEach(element => {
+        element.style.display = 'none';
+    });
 
     const communityFormSubmit = document.getElementById("community-form-submit");
     communityFormSubmit.style.display = 'none';
@@ -72,7 +74,9 @@ document.addEventListener("DOMContentLoaded", function () {
         }
 
         // Show or hide submit button based on changes
-        optionsFormSubmit.style.display = hasChanges ? 'block' : 'none';
+        optionsFormSubmit.forEach(element => {
+            element.style.display = hasChanges ? 'block' : 'none';
+        });
     }
 
     // Function to compare current states to initial states

php/public/disable-collabora.js

@@ -1,5 +1,5 @@
 document.addEventListener("DOMContentLoaded", function(event) {
     // Collabora
-    let collabora = document.getElementById("collabora");
+    const collabora = document.getElementById("office-collabora");
     collabora.disabled = true;
 });

php/public/disable-onlyoffice.js

@@ -1,7 +1,5 @@
 document.addEventListener("DOMContentLoaded", function(event) {
     // OnlyOffice
-    let onlyoffice = document.getElementById("onlyoffice");
+    const onlyoffice = document.getElementById("office-onlyoffice");
-    if (onlyoffice) {
+    onlyoffice.disabled = true;
-        onlyoffice.disabled = true;
-    }
 });

php/templates/containers.twig

@@ -27,7 +27,7 @@
             <script type="text/javascript" src="timezone.js"></script>
 
             {# js for optional containers and additional containers forms #}
-            <script type="text/javascript" src="containers-form-submit.js?v4"></script>
+            <script type="text/javascript" src="containers-form-submit.js?v5"></script>
 
             {% set hasBackupLocation = borg_backup_host_location or borg_remote_repo %}
             {% set isAnyRunning = false %}

php/templates/includes/optional-containers.twig

@@ -9,22 +9,10 @@
     <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
     <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
     <input type="hidden" name="options-form" value="options-form">
-    <p>
-        <input
-            type="checkbox"
-            id="clamav"
-            name="clamav"
-            {% if is_clamav_enabled == true %}
-                checked="checked"
-                data-initial-state="true"
-            {% else %}
-                data-initial-state="false"
-            {% endif %}
-        >
-        <label for="clamav">ClamAV (Antivirus backend for Nextcloud, needs ~1GB additional RAM)</label>
-    </p>
     <h3>Office Suite</h3>
-    <p>Choose your preferred office suite. Only one can be enabled at a time.</p>
+    {% if isAnyRunning == false %}
+        <p>Choose your preferred office suite. Only one can be enabled at a time.</p>
+    {% endif %}
     <div class="office-suite-cards">
         <input
             type="radio"
@@ -94,25 +82,42 @@
         </label>
         <input type="hidden" id="onlyoffice" name="onlyoffice" value="" data-initial-state="{% if is_onlyoffice_enabled == true %}true{% else %}false{% endif %}">
     </div>
-    <div class="office-none-card">
+    {% if isAnyRunning == false %}
+        <div class="office-none-card">
+            <input
+                type="radio"
+                id="office-none"
+                name="office_suite_choice"
+                value=""
+                class="office-radio"
+                {% if is_collabora_enabled == false and is_onlyoffice_enabled == false %}
+                    checked="checked"
+                {% 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>
+                Disable office suite
+            </label>
+        </div>
+    {% endif %}
+    <input class="options-form-submit" type="submit" value="Save changes" />
+    <h3>Additional Optional Containers</h3>
+    <p>
         <input
-            type="radio"
+            type="checkbox"
-            id="office-none"
+            id="clamav"
-            name="office_suite_choice"
+            name="clamav"
-            value=""
+            {% if is_clamav_enabled == true %}
-            class="office-radio"
-            {% if is_collabora_enabled == false and is_onlyoffice_enabled == false %}
                 checked="checked"
+                data-initial-state="true"
+            {% else %}
+                data-initial-state="false"
             {% endif %}
         >
-        <label class="office-none-label" for="office-none">
+        <label for="clamav">ClamAV (Antivirus backend for Nextcloud, needs ~1GB additional RAM)</label>
-            <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;">
+    </p>
-                <path d="M2 2L14 14M2 14L14 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-            Disable office suite
-        </label>
-    </div>
-    <h3>Additional Optional Containers</h3>
     <p>
         <input
             type="checkbox"
@@ -203,15 +208,15 @@
         >
         <label for="whiteboard">Whiteboard</label>
     </p>
-    <input id="options-form-submit" type="submit" value="Save changes" />
+    <input class="options-form-submit" type="submit" value="Save changes" />
 </form>
 <p><strong>Minimal system requirements:</strong> When any optional container is enabled, at least 2GB RAM, a dual-core CPU and 40GB system storage are required. When enabling ClamAV,  Nextcloud Talk Recording-server or Fulltextsearch, at least 3GB RAM are required. For Talk Recording-server additional 2 vCPUs are required. When enabling everything, at least 5GB RAM and a quad-core CPU are required. Recommended are at least 1GB more RAM than the minimal requirement. For further advice and recommendations see <strong><a target="_blank" href="https://github.com/nextcloud/all-in-one/discussions/1335">this documentation</a></strong></p>
 {% if isAnyRunning == true %}
     <script type="text/javascript" src="disable-clamav.js"></script>
     <script type="text/javascript" src="disable-docker-socket-proxy.js"></script>
     <script type="text/javascript" src="disable-talk.js"></script>
-    <script type="text/javascript" src="disable-collabora.js"></script>
+    <script type="text/javascript" src="disable-collabora.js?v2"></script>
-    <script type="text/javascript" src="disable-onlyoffice.js"></script>
+    <script type="text/javascript" src="disable-onlyoffice.js?v2"></script>
     <script type="text/javascript" src="disable-imaginary.js"></script>
     <script type="text/javascript" src="disable-fulltextsearch.js"></script>
     <script type="text/javascript" src="disable-talk-recording.js"></script>

php/tests/tests/initial-setup.spec.js

@@ -33,7 +33,7 @@ test('Initial setup', async ({ page: setupPage }) => {
   await containersPage.getByRole('checkbox', { name: 'Whiteboard' }).uncheck();
   await containersPage.getByRole('checkbox', { name: 'Imaginary' }).uncheck();
   await containersPage.getByText('Disable office suite').click();
-  await containersPage.getByRole('button', { name: 'Save changes' }).click();
+  await containersPage.getByRole('button', { name: 'Save changes' }).last().click();
   await expect(containersPage.locator('#talk')).not.toBeChecked()
   await expect(containersPage.getByRole('checkbox', { name: 'Whiteboard' })).not.toBeChecked()
   await expect(containersPage.getByRole('checkbox', { name: 'Imaginary' })).not.toBeChecked()