feat: Add office switcher with feature comparison

Signed-off-by: Julius Knorr <jus@bitgrid.net>

php/public/containers-form-submit.js

@@ -12,6 +12,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 +28,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,6 +49,28 @@ 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';
     }
@@ -82,6 +123,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/style.css

@@ -549,3 +549,155 @@ 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: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'])) {
+                $officeSuiteChoice = $request->getParsedBody()['office_suite_choice'] ?? '';
-                    throw new InvalidSettingConfigurationException("Collabora and Onlyoffice are not allowed to be enabled at the same time!");
+                
+                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/includes/optional-containers.twig

@@ -23,20 +23,96 @@
         >
         <label for="clamav">ClamAV (Antivirus backend for Nextcloud, needs ~1GB additional RAM)</label>
     </p>
-    <p>
+    <h3>Office Suite</h3>
+    <p>Choose your preferred office suite. Only one can be enabled at a time.</p>
+    <div class="office-suite-cards">
         <input
-            type="checkbox"
+            type="radio"
-            id="collabora"
+            id="office-collabora"
-            name="collabora"
+            name="office_suite_choice"
+            value="collabora"
+            class="office-radio"
             {% if is_collabora_enabled == true %}
                 checked="checked"
-                data-initial-state="true"
-            {% else %}
-                data-initial-state="false"
             {% endif %}
         >
-        <label for="collabora">Collabora (Nextcloud Office)</label>
+        <label class="office-card" for="office-collabora">
-    </p>
+            <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>
+            <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>
+        </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" 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>
+            <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>
+        </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">
+        <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>
+    <h3>Additional Optional Containers</h3>
     <p>
         <input
             type="checkbox"
@@ -98,20 +174,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"

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>