feat: Add office switcher with feature comparison (#7421)

Signed-off-by: Julius Knorr <jus@bitgrid.net>
Signed-off-by: Simon L. <szaimen@e.mail.de>
Signed-off-by: Andrew Backhouse <andrew.backhouse@nextcloud.com>
Co-authored-by: Simon L. <szaimen@e.mail.de>
Co-authored-by: Andrew Backhouse <andrew.backhouse@nextcloud.com>

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");
-    optionsFormSubmit.style.display = 'none';
+    const optionsFormSubmit = document.querySelectorAll(".options-form-submit");
+    optionsFormSubmit.forEach(element => {
+        element.style.display = 'none';
+    });
 
     const communityFormSubmit = document.getElementById("community-form-submit");
     communityFormSubmit.style.display = 'none';
@@ -12,6 +14,14 @@ document.addEventListener("DOMContentLoaded", function () {
     const optionsContainersCheckboxes = document.querySelectorAll("#options-form input[type='checkbox']");
     const communityContainersCheckboxes = document.querySelectorAll("#community-form input[type='checkbox']");
 
+    // Office suite radio buttons
+    const collaboraRadio = document.getElementById('office-collabora');
+    const onlyofficeRadio = document.getElementById('office-onlyoffice');
+    const noneRadio = document.getElementById('office-none');
+    const collaboraHidden = document.getElementById('collabora');
+    const onlyofficeHidden = document.getElementById('onlyoffice');
+    let initialOfficeSelection = null;
+
     optionsContainersCheckboxes.forEach(checkbox => {
         initialStateOptionsContainers[checkbox.id] = checkbox.checked;  // Use checked property to capture actual initial state
     });
@@ -20,6 +30,17 @@ document.addEventListener("DOMContentLoaded", function () {
         initialStateCommunityContainers[checkbox.id] = checkbox.checked;  // Use checked property to capture actual initial state
     });
 
+    // Store initial office suite selection
+    if (collaboraRadio && onlyofficeRadio && noneRadio) {
+        if (collaboraRadio.checked) {
+            initialOfficeSelection = 'collabora';
+        } else if (onlyofficeRadio.checked) {
+            initialOfficeSelection = 'onlyoffice';
+        } else {
+            initialOfficeSelection = 'none';
+        }
+    }
+
     // Function to compare current states to initial states
     function checkForOptionContainerChanges() {
         let hasChanges = false;
@@ -30,8 +51,32 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         });
 
+        // Check office suite changes and sync to hidden inputs
+        if (collaboraRadio && onlyofficeRadio && noneRadio && collaboraHidden && onlyofficeHidden) {
+            let currentOfficeSelection = null;
+            if (collaboraRadio.checked) {
+                currentOfficeSelection = 'collabora';
+                collaboraHidden.value = 'on';
+                onlyofficeHidden.value = '';
+            } else if (onlyofficeRadio.checked) {
+                currentOfficeSelection = 'onlyoffice';
+                collaboraHidden.value = '';
+                onlyofficeHidden.value = 'on';
+            } else {
+                currentOfficeSelection = 'none';
+                collaboraHidden.value = '';
+                onlyofficeHidden.value = '';
+            }
+
+            if (currentOfficeSelection !== initialOfficeSelection) {
+                hasChanges = true;
+            }
+        }
+
         // 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
@@ -82,6 +127,13 @@ document.addEventListener("DOMContentLoaded", function () {
     // Initialize talk-recording visibility on page load
     handleTalkVisibility();  // Ensure talk-recording is correctly initialized
 
+    // Add event listeners for office suite radio buttons
+    if (collaboraRadio && onlyofficeRadio && noneRadio) {
+        collaboraRadio.addEventListener('change', checkForOptionContainerChanges);
+        onlyofficeRadio.addEventListener('change', checkForOptionContainerChanges);
+        noneRadio.addEventListener('change', checkForOptionContainerChanges);
+    }
+
     // Initial call to check for changes
     checkForOptionContainerChanges();
     checkForCommunityContainerChanges();

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");
-    if (onlyoffice) {
-        onlyoffice.disabled = true;
-    }
+    const onlyoffice = document.getElementById("office-onlyoffice");
+    onlyoffice.disabled = true;
 });

php/public/style.css

@@ -28,7 +28,7 @@
     --border-radius-large: 12px;
     --default-font-size: 13px;
     --checkbox-size: 16px;
-    --max-width: 500px;
+    --max-width: 580px;
     --container-top-margin: 20px;
     --container-bottom-margin: 20px;
     --container-padding: 2px;
@@ -37,9 +37,9 @@
     --main-padding: 50px;
 }
 
-/* Breakpoint calculation: 500px (max-width) + 100px (main-padding * 2) + 200px (additional space) = 800px
+/* Breakpoint calculation: 580px (max-width) + 100px (main-padding * 2) + 200px (additional space) = 880px
 Note: Unfortunately, it's not possible to calculate this dynamically using CSS variables in media queries */
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 880px) {
     :root {
         --container-top-margin: 50px;
         --container-bottom-margin: 0px;
@@ -549,3 +549,160 @@ input[type="checkbox"]:disabled:not(:checked) + label {
 #theme-toggle:not(:hover) #theme-icon {
     opacity: 0.6; /* Slightly transparent */
 }
+/* Office Suite Feature Cards */
+.office-suite-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 16px;
+    margin: 20px 0;
+    align-items: stretch;
+}
+
+.office-radio {
+    display: none;
+}
+
+.office-card {
+    position: relative;
+    border: 2px solid var(--color-border-maxcontrast);
+    border-radius: var(--border-radius-large);
+    padding: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background-color: var(--color-main-background);
+    display: flex;
+    flex-direction: column;
+}
+
+.office-card-disabled {
+    opacity: 50%;
+    pointer-events: none;
+}
+
+.office-card:hover {
+    border-color: var(--color-primary-element);
+    box-shadow: 0 4px 12px rgba(0, 130, 201, 0.15);
+    transform: translateY(-2px);
+}
+
+#office-collabora:checked + .office-card,
+#office-onlyoffice:checked + .office-card {
+    border-color: var(--color-nextcloud-blue);
+    background: linear-gradient(135deg, rgba(0, 130, 201, 0.08) 0%, rgba(0, 130, 201, 0.02) 100%);
+}
+
+[data-theme="dark"] #office-collabora:checked + .office-card,
+[data-theme="dark"] #office-onlyoffice:checked + .office-card {
+    background: linear-gradient(135deg, rgba(0, 145, 242, 0.15) 0%, rgba(0, 145, 242, 0.03) 100%);
+}
+
+.office-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.office-card h4 {
+    margin: 0;
+    height: 24px;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--color-main-text);
+}
+
+.office-checkmark {
+    flex-shrink: 0;
+    display: none;
+}
+
+#office-collabora:checked + .office-card .office-checkmark,
+#office-onlyoffice:checked + .office-card .office-checkmark {
+    display: block;
+}
+
+.office-features {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.office-features li {
+    position: relative;
+    padding-left: 20px;
+    margin-bottom: 4px;
+    font-size: var(--default-font-size);
+    line-height: 1.5;
+    color: var(--color-main-text);
+}
+
+.office-features li::before {
+    content: '•';
+    position: absolute;
+    left: 6px;
+    color: var(--color-nextcloud-blue);
+    font-weight: bold;
+}
+
+.office-checkbox {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.office-learn-more {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 12px;
+    color: var(--color-primary-element);
+    text-decoration: none;
+    font-size: var(--default-font-size);
+    font-weight: 500;
+    transition: color 0.2s ease;
+}
+
+.office-learn-more:hover {
+    color: var(--color-primary-element-hover);
+}
+
+.office-learn-more svg {
+    transition: transform 0.2s ease;
+}
+
+.office-learn-more:hover svg {
+    transform: translateX(3px);
+}
+
+.office-none-card {
+    text-align: center;
+    margin: 12px 0 20px 0;
+}
+
+.office-none-label {
+    display: inline-flex;
+    align-items: center;
+    font-size: 13px;
+    color: var(--color-primary-element);
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+    padding: 8px 12px;
+    border-radius: var(--border-radius);
+}
+
+.office-none-label:hover {
+    opacity: 1;
+    background-color: var(--color-primary-element-light);
+}
+
+#office-none:checked + .office-none-label {
+    opacity: 1;
+    font-weight: 600;
+}
+
+/* Responsive adjustments for mobile */
+@media only screen and (max-width: 800px) {
+    .office-suite-cards {
+        grid-template-columns: 1fr;
+    }
+}

php/src/Controller/ConfigurationController.php

@@ -76,24 +76,24 @@ readonly class ConfigurationController {
             }
 
             if (isset($request->getParsedBody()['options-form'])) {
-                if (isset($request->getParsedBody()['collabora']) && isset($request->getParsedBody()['onlyoffice'])) {
-                    throw new InvalidSettingConfigurationException("Collabora and Onlyoffice are not allowed to be enabled at the same time!");
+                $officeSuiteChoice = $request->getParsedBody()['office_suite_choice'] ?? '';
+                
+                if ($officeSuiteChoice === 'collabora') {
+                    $this->configurationManager->SetCollaboraEnabledState(1);
+                    $this->configurationManager->SetOnlyofficeEnabledState(0);
+                } elseif ($officeSuiteChoice === 'onlyoffice') {
+                    $this->configurationManager->SetCollaboraEnabledState(0);
+                    $this->configurationManager->SetOnlyofficeEnabledState(1);
+                } else {
+                    $this->configurationManager->SetCollaboraEnabledState(0);
+                    $this->configurationManager->SetOnlyofficeEnabledState(0);
                 }
+                
                 if (isset($request->getParsedBody()['clamav'])) {
                     $this->configurationManager->SetClamavEnabledState(1);
                 } else {
                     $this->configurationManager->SetClamavEnabledState(0);
                 }
-                if (isset($request->getParsedBody()['onlyoffice'])) {
-                    $this->configurationManager->SetOnlyofficeEnabledState(1);
-                } else {
-                    $this->configurationManager->SetOnlyofficeEnabledState(0);
-                }
-                if (isset($request->getParsedBody()['collabora'])) {
-                    $this->configurationManager->SetCollaboraEnabledState(1);
-                } else {
-                    $this->configurationManager->SetCollaboraEnabledState(0);
-                }
                 if (isset($request->getParsedBody()['talk'])) {
                     $this->configurationManager->SetTalkEnabledState(1);
                 } else {

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,6 +9,105 @@
     <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">
+    <h3>Office Suite</h3>
+    {% 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"
+            id="office-collabora"
+            name="office_suite_choice"
+            value="collabora"
+            class="office-radio"
+            {% if is_collabora_enabled == true %}
+                checked="checked"
+            {% endif %}
+        >
+        <label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}" for="office-collabora">
+            <div class="office-card-header">
+                <h4>Nextcloud Office</h4>
+                <svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="12" cy="12" r="10" fill="var(--color-nextcloud-blue)"/>
+                    <path d="M7 12L10.5 15.5L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+            <ul class="office-features">
+                <li>Best Nextcloud integration</li>
+                <li>Open source</li>
+                <li>Good performance</li>
+                <li>Best security: documents never leave your server</li>
+                <li>Best ODF compatibility</li>
+                <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();">
+                    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>
+                </a>
+            {% endif %}
+        </label>
+        <input type="hidden" id="collabora" name="collabora" value="" data-initial-state="{% if is_collabora_enabled == true %}true{% else %}false{% endif %}">
+        <input
+            type="radio"
+            id="office-onlyoffice"
+            name="office_suite_choice"
+            value="onlyoffice"
+            class="office-radio"
+            {% if is_onlyoffice_enabled == true %}
+                checked="checked"
+            {% endif %}
+        >
+        <label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}" for="office-onlyoffice">
+            <div class="office-card-header">
+                <h4>OnlyOffice</h4>
+                <svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="12" cy="12" r="10" fill="var(--color-nextcloud-blue)"/>
+                    <path d="M7 12L10.5 15.5L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+            <ul class="office-features">
+                <li>Good Nextcloud integration</li>
+                <li>Open core</li>
+                <li>Best performance</li>
+                <li>Limited ODF compatibility</li>
+                <li>Best Microsoft compatibility</li>
+            </ul>
+            {% if isAnyRunning == false %}
+                <a href="https://www.onlyoffice.com/" target="_blank" class="office-learn-more" onclick="event.stopPropagation();">
+                    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>
+                </a>
+            {% endif %}
+        </label>
+        <input type="hidden" id="onlyoffice" name="onlyoffice" value="" data-initial-state="{% if is_onlyoffice_enabled == true %}true{% else %}false{% endif %}">
+    </div>
+    {% 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="checkbox"
@@ -23,20 +122,6 @@
         >
         <label for="clamav">ClamAV (Antivirus backend for Nextcloud, needs ~1GB additional RAM)</label>
     </p>
-    <p>
-        <input
-            type="checkbox"
-            id="collabora"
-            name="collabora"
-            {% if is_collabora_enabled == true %}
-                checked="checked"
-                data-initial-state="true"
-            {% else %}
-                data-initial-state="false"
-            {% endif %}
-        >
-        <label for="collabora">Collabora (Nextcloud Office)</label>
-    </p>
     <p>
         <input
             type="checkbox"
@@ -98,20 +183,7 @@
         >
         <label for="talk-recording">Nextcloud Talk Recording-server (needs Nextcloud Talk being enabled and ~1GB additional RAM and ~2 additional vCPUs)</label>
     </p>
-    <p>
-        <input
-            type="checkbox"
-            id="onlyoffice"
-            name="onlyoffice"
-            {% if is_onlyoffice_enabled == true %}
-                checked="checked"
-                data-initial-state="true"
-            {% else %}
-                data-initial-state="false"
-            {% endif %}
-        >
-        <label for="onlyoffice">OnlyOffice</label>
-    </p>
+
     <p>
         <input
             type="checkbox"
@@ -140,15 +212,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-onlyoffice.js"></script>
+    <script type="text/javascript" src="disable-collabora.js?v2"></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/templates/layout.twig

@@ -1,7 +1,7 @@
 <html>
     <head>
         <title>AIO</title>
-        <link rel="stylesheet" href="style.css?v6" media="all" />
+        <link rel="stylesheet" href="style.css?v7" media="all" />
         <link rel="icon" href="img/favicon.png">
         <script type="text/javascript" src="forms.js"></script>
         <script type="text/javascript" src="toggle-dark-mode.js"></script>

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

@@ -32,12 +32,12 @@ test('Initial setup', async ({ page: setupPage }) => {
   await containersPage.locator('#talk').uncheck();
   await containersPage.getByRole('checkbox', { name: 'Whiteboard' }).uncheck();
   await containersPage.getByRole('checkbox', { name: 'Imaginary' }).uncheck();
-  await containersPage.getByRole('checkbox', { name: 'Collabora' }).uncheck();
-  await containersPage.getByRole('button', { name: 'Save changes' }).click();
+  await containersPage.getByText('Disable office suite').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()
-  await expect(containersPage.getByRole('checkbox', { name: 'Collabora' })).not.toBeChecked()
+  await expect(containersPage.locator('#office-none')).toBeChecked()
 
   // Reject invalid time zones
   await containersPage.locator('#timezone').click();