|
| 1 | +import { ajax } from "discourse/lib/ajax"; |
| 2 | +import { withPluginApi } from "discourse/lib/plugin-api"; |
| 3 | + |
| 4 | +export default { |
| 5 | + name: "onlyoffice-demo-mode", |
| 6 | + |
| 7 | + initialize(container) { |
| 8 | + const siteSettings = container.lookup("service:site-settings"); |
| 9 | + |
| 10 | + if (!siteSettings.onlyoffice_connector_enabled) { |
| 11 | + return; |
| 12 | + } |
| 13 | + |
| 14 | + withPluginApi("0.8", (api) => { |
| 15 | + let demoInfoCache = null; |
| 16 | + |
| 17 | + const applyDemoModeStyles = async () => { |
| 18 | + try { |
| 19 | + if (!demoInfoCache) { |
| 20 | + const response = await ajax("/onlyoffice/demo-info"); |
| 21 | + demoInfoCache = response; |
| 22 | + } |
| 23 | + |
| 24 | + const demoEnabled = demoInfoCache.enabled; |
| 25 | + const demoAvailable = demoInfoCache.available; |
| 26 | + const daysRemaining = demoInfoCache.days_remaining; |
| 27 | + const expirationDate = demoInfoCache.expiration_date; |
| 28 | + |
| 29 | + // Disable settings fields when demo is enabled |
| 30 | + const settingsToDisable = [ |
| 31 | + "ONLYOFFICE_Docs_address", |
| 32 | + "ONLYOFFICE_Docs_secret_key", |
| 33 | + "JWT_header", |
| 34 | + ]; |
| 35 | + |
| 36 | + settingsToDisable.forEach((settingName) => { |
| 37 | + const settingRow = document.querySelector( |
| 38 | + `[data-setting="${settingName}"]` |
| 39 | + ); |
| 40 | + |
| 41 | + if (settingRow) { |
| 42 | + const input = settingRow.querySelector("input"); |
| 43 | + |
| 44 | + // Lock fields if demo is enabled |
| 45 | + if (input && demoEnabled) { |
| 46 | + // Make field readonly instead of disabled |
| 47 | + input.readOnly = true; |
| 48 | + input.style.opacity = "0.6"; |
| 49 | + input.style.cursor = "not-allowed"; |
| 50 | + input.style.backgroundColor = "#f5f5f5"; |
| 51 | + input.style.pointerEvents = "none"; |
| 52 | + |
| 53 | + // Hide secret |
| 54 | + if (settingName === "ONLYOFFICE_Docs_secret_key") { |
| 55 | + if (!input.dataset.originalValue) { |
| 56 | + input.dataset.originalValue = input.value; |
| 57 | + } |
| 58 | + input.type = "password"; |
| 59 | + input.value = input.dataset.originalValue || input.value; |
| 60 | + } |
| 61 | + } else if (input) { |
| 62 | + input.readOnly = false; |
| 63 | + input.style.opacity = "1"; |
| 64 | + input.style.cursor = "text"; |
| 65 | + input.style.backgroundColor = ""; |
| 66 | + input.style.pointerEvents = ""; |
| 67 | + |
| 68 | + // Restore secret |
| 69 | + if (settingName === "ONLYOFFICE_Docs_secret_key") { |
| 70 | + input.type = "text"; |
| 71 | + if (input.dataset.originalValue) { |
| 72 | + input.value = input.dataset.originalValue; |
| 73 | + delete input.dataset.originalValue; |
| 74 | + } |
| 75 | + } |
| 76 | + } |
| 77 | + } |
| 78 | + }); |
| 79 | + |
| 80 | + // Handle demo checkbox |
| 81 | + const demoCheckboxRow = document.querySelector( |
| 82 | + '[data-setting="Connect_to_demo_ONLYOFFICE_Docs_server"]' |
| 83 | + ); |
| 84 | + if (demoCheckboxRow) { |
| 85 | + const checkbox = demoCheckboxRow.querySelector( |
| 86 | + 'input[type="checkbox"]' |
| 87 | + ); |
| 88 | + |
| 89 | + const label = demoCheckboxRow.querySelector(".setting-label") || |
| 90 | + demoCheckboxRow.querySelector("label"); |
| 91 | + |
| 92 | + // Remove old messages |
| 93 | + if (label) { |
| 94 | + const oldMessage = label.querySelector(".demo-message"); |
| 95 | + if (oldMessage) { |
| 96 | + oldMessage.remove(); |
| 97 | + } |
| 98 | + } |
| 99 | + |
| 100 | + // Logic for expired demo mode |
| 101 | + if (!demoAvailable) { |
| 102 | + // Disable checkbox if expired and not enabled |
| 103 | + if (!demoEnabled && checkbox) { |
| 104 | + checkbox.disabled = true; |
| 105 | + } |
| 106 | + // Allow to disable it if expired and enabled |
| 107 | + else if (demoEnabled && checkbox) { |
| 108 | + checkbox.disabled = false; |
| 109 | + } |
| 110 | + |
| 111 | + // Show expired message |
| 112 | + if (label) { |
| 113 | + const message = document.createElement("div"); |
| 114 | + message.className = "demo-message"; |
| 115 | + message.style.color = "#e74c3c"; |
| 116 | + message.style.marginTop = "8px"; |
| 117 | + message.style.fontSize = "13px"; |
| 118 | + message.textContent = "The 30-day test period is over. You are no longer able to connect to the demo server."; |
| 119 | + label.appendChild(message); |
| 120 | + } |
| 121 | + } |
| 122 | + // Demo mode is active and enabled |
| 123 | + else if (demoEnabled && expirationDate) { |
| 124 | + const formattedDate = new Date(expirationDate).toLocaleDateString(); |
| 125 | + |
| 126 | + if (label) { |
| 127 | + const message = document.createElement("div"); |
| 128 | + message.className = "demo-message"; |
| 129 | + message.style.color = "#3498db"; |
| 130 | + message.style.marginTop = "8px"; |
| 131 | + message.style.fontSize = "13px"; |
| 132 | + message.textContent = `You are successfully connected to the demo server. It will be available until ${formattedDate}. To disable it, uncheck the box.`; |
| 133 | + label.appendChild(message); |
| 134 | + } |
| 135 | + } |
| 136 | + |
| 137 | + // Watch for demo mode changes (save and reload) |
| 138 | + if (checkbox && !checkbox.dataset.demoListenerAdded) { |
| 139 | + checkbox.dataset.demoListenerAdded = "true"; |
| 140 | + |
| 141 | + // Mark checkbox as changed when user toggles it |
| 142 | + checkbox.addEventListener("change", async () => { |
| 143 | + checkbox.dataset.wasChanged = "true"; |
| 144 | + demoInfoCache = null; // Clear cache |
| 145 | + |
| 146 | + // Find the OK button and emulated click to save |
| 147 | + const okButton = demoCheckboxRow.querySelector(".setting-controls__ok"); |
| 148 | + if (okButton) { |
| 149 | + okButton.click(); |
| 150 | + |
| 151 | + // Wait for save |
| 152 | + setTimeout(() => { |
| 153 | + window.location.reload(); |
| 154 | + }, 1500); |
| 155 | + } else { |
| 156 | + // Reload after delay |
| 157 | + setTimeout(() => { |
| 158 | + window.location.reload(); |
| 159 | + }, 2000); |
| 160 | + } |
| 161 | + }); |
| 162 | + } |
| 163 | + } |
| 164 | + } catch (error) { |
| 165 | + // eslint-disable-next-line no-console |
| 166 | + console.error("Failed to load demo info:", error); |
| 167 | + } |
| 168 | + }; |
| 169 | + |
| 170 | + const checkAndApply = () => { |
| 171 | + if (window.location.pathname.includes("/admin/site_settings") || |
| 172 | + window.location.pathname.includes("/admin")) { |
| 173 | + setTimeout(() => applyDemoModeStyles(), 100); |
| 174 | + setTimeout(() => applyDemoModeStyles(), 500); |
| 175 | + setTimeout(() => applyDemoModeStyles(), 1000); |
| 176 | + setTimeout(() => applyDemoModeStyles(), 2000); |
| 177 | + } |
| 178 | + }; |
| 179 | + |
| 180 | + // Apply on page change |
| 181 | + api.onPageChange(checkAndApply); |
| 182 | + |
| 183 | + // Apply if already on settings page |
| 184 | + checkAndApply(); |
| 185 | + |
| 186 | + setTimeout(() => { |
| 187 | + if (window.location.pathname.includes("/admin/site_settings")) { |
| 188 | + const observer = new MutationObserver(() => { |
| 189 | + applyDemoModeStyles(); |
| 190 | + }); |
| 191 | + |
| 192 | + const settingsContainer = document.querySelector(".admin-contents"); |
| 193 | + if (settingsContainer) { |
| 194 | + observer.observe(settingsContainer, { |
| 195 | + childList: true, |
| 196 | + subtree: true, |
| 197 | + }); |
| 198 | + } |
| 199 | + } |
| 200 | + }, 500); |
| 201 | + }); |
| 202 | + }, |
| 203 | +}; |
0 commit comments