Skip to content

Commit

Permalink
Merge pull request #5576 from nextcloud/ernolf/submit-button-fix
Browse files Browse the repository at this point in the history
feat: toggle submit button based on unsaved changes
  • Loading branch information
szaimen authored Nov 12, 2024
2 parents 057924f + 16e4f41 commit c9c55be
Show file tree
Hide file tree
Showing 3 changed files with 233 additions and 158 deletions.
113 changes: 50 additions & 63 deletions php/public/options-form-submit.js
Original file line number Diff line number Diff line change
@@ -1,73 +1,60 @@
function makeOptionsFormSubmitVisible() {
let optionsFormSubmit = document.getElementById("options-form-submit");
optionsFormSubmit.style.display = 'block';
}

function handleTalkVisibility() {
let talk = document.getElementById("talk");
let talkRecording = document.getElementById("talk-recording")
if (talk.checked) {
talkRecording.disabled = false
} else {
talkRecording.checked = false
talkRecording.disabled = true
}
}

function handleDockerSocketProxyWarning() {
let dockerSocketProxy = document.getElementById("docker-socket-proxy");
if (dockerSocketProxy.checked) {
alert('⚠️ Warning! Enabling this container comes with possible Security problems since you are exposing the docker socket and all its privileges to the Nextcloud container. Enable this only if you are sure what you are doing!')
}
}

document.addEventListener("DOMContentLoaded", function(event) {
// handle submit button for options form
let optionsFormSubmit = document.getElementById("options-form-submit");
document.addEventListener("DOMContentLoaded", function () {
// Hide submit button initially
const optionsFormSubmit = document.getElementById("options-form-submit");
optionsFormSubmit.style.display = 'none';

// Clamav
let clamav = document.getElementById("clamav");
clamav.addEventListener('change', makeOptionsFormSubmitVisible);

// OnlyOffice
let onlyoffice = document.getElementById("onlyoffice");
if (onlyoffice) {
onlyoffice.addEventListener('change', makeOptionsFormSubmitVisible);
// Store initial states for all checkboxes
const initialState = {};
const checkboxes = document.querySelectorAll("#options-form input[type='checkbox']");

checkboxes.forEach(checkbox => {
initialState[checkbox.id] = checkbox.checked; // Use checked property to capture actual initial state
});

// Function to compare current states to initial states
function checkForChanges() {
let hasChanges = false;

checkboxes.forEach(checkbox => {
if (checkbox.checked !== initialState[checkbox.id]) {
hasChanges = true;
}
});

// Show or hide submit button based on changes
optionsFormSubmit.style.display = hasChanges ? 'block' : 'none';
}

// Collabora
let collabora = document.getElementById("collabora");
collabora.addEventListener('change', makeOptionsFormSubmitVisible);

// Talk
let talk = document.getElementById("talk");
talk.addEventListener('change', makeOptionsFormSubmitVisible);
talk.addEventListener('change', handleTalkVisibility);

// Talk-recording
let talkRecording = document.getElementById("talk-recording");
talkRecording.addEventListener('change', makeOptionsFormSubmitVisible);
if (!talk.checked) {
talkRecording.disabled = true
// Event listener to trigger visibility check on each change
checkboxes.forEach(checkbox => {
checkbox.addEventListener("change", checkForChanges);
});

// Custom behaviors for specific options
function handleTalkVisibility() {
const talkRecording = document.getElementById("talk-recording");
if (document.getElementById("talk").checked) {
talkRecording.disabled = false;
} else {
talkRecording.checked = false;
talkRecording.disabled = true;
}
checkForChanges(); // Check changes after toggling Talk Recording
}

// Imaginary
let imaginary = document.getElementById("imaginary");
imaginary.addEventListener('change', makeOptionsFormSubmitVisible);
function handleDockerSocketProxyWarning() {
if (document.getElementById("docker-socket-proxy").checked) {
alert('⚠️ Warning! Enabling this container comes with possible Security problems since you are exposing the docker socket and all its privileges to the Nextcloud container. Enable this only if you are sure what you are doing!');
}
}

// Fulltextsearch
let fulltextsearch = document.getElementById("fulltextsearch");
fulltextsearch.addEventListener('change', makeOptionsFormSubmitVisible);
// Initialize event listeners for specific behaviors
document.getElementById("talk").addEventListener('change', handleTalkVisibility);
document.getElementById("docker-socket-proxy").addEventListener('change', handleDockerSocketProxyWarning);

// Docker socket proxy
let dockerSocketProxy = document.getElementById("docker-socket-proxy");
if (dockerSocketProxy) {
dockerSocketProxy.addEventListener('change', makeOptionsFormSubmitVisible);
// dockerSocketProxy.addEventListener('change', handleDockerSocketProxyWarning);
}
// Initialize talk-recording visibility on page load
handleTalkVisibility(); // Ensure talk-recording is correctly initialized

// Whiteboard
let whiteboard = document.getElementById("whiteboard");
whiteboard.addEventListener('change', makeOptionsFormSubmitVisible);
// Initial call to check for changes
checkForChanges();
});
96 changes: 1 addition & 95 deletions php/templates/containers.twig
Original file line number Diff line number Diff line change
Expand Up @@ -592,102 +592,8 @@
{% endif %}
{% endif %}
{% if is_backup_container_running == false %}
<h2>Optional containers</h2>
<p>In this section you can enable or disable optional containers. There are further community containers available that are not listed below. See <strong><a href="https://github.com/nextcloud/all-in-one/tree/main/community-containers#community-containers">this documentation</a></strong> how to add them.</p>
{% if isAnyRunning == true %}
<p><strong>Please note:</strong> You can enable or disable the options below only when your containers are stopped.</p>
{% else %}
<p><strong>Please note:</strong> Make sure to save your changes by clicking <strong>Save changes</strong> below the list of optional containers. The changes will not be auto-saved.</p>
{% endif %}
<form id="options-form" method="POST" action="/api/configuration" class="xhr">
<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">
{% if is_clamav_enabled == true %}
<p><input type="checkbox" id="clamav" name="clamav" checked="checked"><label for="clamav">ClamAV (Antivirus backend for Nextcloud, only supported on x64, needs ~1GB additional RAM)</label></p>
{% else %}
<p><input type="checkbox" id="clamav" name="clamav"><label for="clamav">ClamAV (Antivirus backend for Nextcloud, only supported on x64, needs ~1GB additional RAM)</label></p>
{% endif %}
{% if is_collabora_enabled == true %}
<p><input type="checkbox" id="collabora" name="collabora" checked="checked"><label for="collabora">Collabora (Nextcloud Office)</label></p>
{% else %}
<p><input type="checkbox" id="collabora" name="collabora"><label for="collabora">Collabora (Nextcloud Office)</label></p>
{% endif %}
{% if is_fulltextsearch_enabled == true %}
<p><input type="checkbox" id="fulltextsearch" name="fulltextsearch" checked="checked"><label for="fulltextsearch">Fulltextsearch (needs ~1GB additional RAM)</label></p>
{% else %}
<p><input type="checkbox" id="fulltextsearch" name="fulltextsearch"><label for="fulltextsearch">Fulltextsearch (needs ~1GB additional RAM. <strong>Please note:</strong> the initial indexing can take a long time during which Nextcloud will be unavailable)</label></p>
{% endif %}
{% if is_imaginary_enabled == true %}
<p><input type="checkbox" id="imaginary" name="imaginary" checked="checked"><label for="imaginary">Imaginary (for previews of heic, heif, illustrator, pdf, svg, tiff and webp. Imaginary is currently <a href="https://github.com/nextcloud/server/issues/34262">incompatible with server-side-encryption</a>)</label></p>
{% else %}
<p><input type="checkbox" id="imaginary" name="imaginary"><label for="imaginary">Imaginary (for previews of heic, heif, illustrator, pdf, svg, tiff and webp. Imaginary is currently <a href="https://github.com/nextcloud/server/issues/34262">incompatible with server-side-encryption</a>)</label></p>
{% endif %}
{% if is_talk_enabled == true %}
<p><input type="checkbox" id="talk" name="talk" checked="checked"><label for="talk">Nextcloud Talk (needs ports {{ talk_port }}/TCP and {{ talk_port }}/UDP open/forwarded in your firewall/router)</label></p>
{% else %}
<p><input type="checkbox" id="talk" name="talk"><label for="talk">Nextcloud Talk (needs ports {{ talk_port }}/TCP and {{ talk_port }}/UDP open/forwarded in your firewall/router)</label></p>
{% endif %}
{% if is_talk_recording_enabled == true %}
<p><input type="checkbox" id="talk-recording" name="talk-recording" checked="checked"><label for="talk-recording">Nextcloud Talk Recording-server (needs Nextcloud Talk being enabled and ~1GB additional RAM and ~2 additional vCPUs)</label></p>
{% else %}
<p><input type="checkbox" id="talk-recording" name="talk-recording"><label for="talk-recording">Nextcloud Talk Recording-server (needs Nextcloud Talk being enabled and ~1GB additional RAM ~2 additional vCPUs)</label></p>
{% endif %}
{% if is_onlyoffice_enabled == true %}
<p><input type="checkbox" id="onlyoffice" name="onlyoffice" checked="checked"><label for="onlyoffice">OnlyOffice</label></p>
{% else %}
{#<p><input type="checkbox" id="onlyoffice" name="onlyoffice"><label for="onlyoffice">OnlyOffice</label></p>#}
{% endif %}
{% if is_docker_socket_proxy_enabled == true %}
<p><input type="checkbox" id="docker-socket-proxy" name="docker-socket-proxy" checked="checked"><label for="docker-socket-proxy">Docker Socket Proxy (needed for <a href="https://github.com/cloud-py-api/app_api#nextcloud-appapi">Nextcloud App API</a>)</label></p>
{% else %}
<p><input type="checkbox" id="docker-socket-proxy" name="docker-socket-proxy"><label for="docker-socket-proxy">Docker Socket Proxy (needed for <a href="https://github.com/cloud-py-api/app_api#nextcloud-appapi">Nextcloud App API</a>)</label></p>
{% endif %}
{% if is_whiteboard_enabled == true %}
<p><input type="checkbox" id="whiteboard" name="whiteboard" checked="checked"><label for="whiteboard">Whiteboard</label></p>
{% else %}
<p><input type="checkbox" id="whiteboard" name="whiteboard"><label for="whiteboard">Whiteboard</label></p>
{% endif %}
<input id="options-form-submit" type="submit" value="Save changes" />
<script type="text/javascript" src="options-form-submit.js?v2"></script>
</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 advices and recommendations see <strong><a href="https://github.com/nextcloud/all-in-one/discussions/1335">this documentation</a></strong></p>
{% if isAnyRunning == true or is_x64_platform == false %}
<script type="text/javascript" src="disable-clamav.js"></script>
{% endif %}
{% if isAnyRunning == true %}
<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-imaginary.js"></script>
<script type="text/javascript" src="disable-fulltextsearch.js"></script>
<script type="text/javascript" src="disable-talk-recording.js"></script>
<script type="text/javascript" src="disable-whiteboard.js"></script>
{% endif %}

{% if is_collabora_enabled == true and isAnyRunning == false and was_start_button_clicked == true %}
<h3>Collabora dictionaries</h3>

{% if collabora_dictionaries == "" %}
<p>In order to get the correct dictionaries in Collabora, you may configure the dictionaries below:</p>
<form method="POST" action="/api/configuration" class="xhr">
<input type="text" name="collabora_dictionaries" placeholder="de_DE en_GB en_US es_ES fr_FR it nl pt_BR pt_PT ru" />
<input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
<input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
<input type="submit" value="Submit collabora dictionaries" />
</form>
<p>You need to make sure that the dictionaries that you enter are valid. An example is <strong>de_DE en_GB en_US es_ES fr_FR it nl pt_BR pt_PT ru</strong>.</p>
{% else %}
<p>The dictionaries for Collabora are currently set to <strong>{{ collabora_dictionaries }}</strong>. You can reset them again by clicking on the button below.</p>
<form method="POST" action="/api/configuration" class="xhr">
<input type="hidden" name="delete_collabora_dictionaries" value="yes"/>
<input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
<input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
<input type="submit" value="Reset collabora dictionaries" />
</form>
{% endif %}
{% endif %}
{{ include('includes/optional-containers.twig') }}

<h2>Timezone change</h2>
{% if isAnyRunning == true %}
Expand Down
Loading

0 comments on commit c9c55be

Please sign in to comment.