Merge pull request #5576 from nextcloud/ernolf/submit-button-fix

feat: toggle submit button based on unsaved changes
This commit is contained in:
Simon L. 2024-11-12 15:14:39 +01:00 коммит произвёл GitHub
Родитель 057924f17f 16e4f41ca7
Коммит c9c55be87b
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
3 изменённых файлов: 232 добавлений и 157 удалений

Просмотреть файл

@ -1,73 +1,60 @@
function makeOptionsFormSubmitVisible() { document.addEventListener("DOMContentLoaded", function () {
let optionsFormSubmit = document.getElementById("options-form-submit"); // Hide submit button initially
optionsFormSubmit.style.display = 'block'; const optionsFormSubmit = document.getElementById("options-form-submit");
}
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");
optionsFormSubmit.style.display = 'none'; optionsFormSubmit.style.display = 'none';
// Clamav // Store initial states for all checkboxes
let clamav = document.getElementById("clamav"); const initialState = {};
clamav.addEventListener('change', makeOptionsFormSubmitVisible); const checkboxes = document.querySelectorAll("#options-form input[type='checkbox']");
// OnlyOffice checkboxes.forEach(checkbox => {
let onlyoffice = document.getElementById("onlyoffice"); initialState[checkbox.id] = checkbox.checked; // Use checked property to capture actual initial state
if (onlyoffice) { });
onlyoffice.addEventListener('change', makeOptionsFormSubmitVisible);
// 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 // Event listener to trigger visibility check on each change
let collabora = document.getElementById("collabora"); checkboxes.forEach(checkbox => {
collabora.addEventListener('change', makeOptionsFormSubmitVisible); checkbox.addEventListener("change", checkForChanges);
});
// Talk // Custom behaviors for specific options
let talk = document.getElementById("talk"); function handleTalkVisibility() {
talk.addEventListener('change', makeOptionsFormSubmitVisible); const talkRecording = document.getElementById("talk-recording");
talk.addEventListener('change', handleTalkVisibility); if (document.getElementById("talk").checked) {
talkRecording.disabled = false;
// Talk-recording } else {
let talkRecording = document.getElementById("talk-recording"); talkRecording.checked = false;
talkRecording.addEventListener('change', makeOptionsFormSubmitVisible); talkRecording.disabled = true;
if (!talk.checked) { }
talkRecording.disabled = true checkForChanges(); // Check changes after toggling Talk Recording
} }
// Imaginary function handleDockerSocketProxyWarning() {
let imaginary = document.getElementById("imaginary"); if (document.getElementById("docker-socket-proxy").checked) {
imaginary.addEventListener('change', makeOptionsFormSubmitVisible); 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);
// Docker socket proxy
let dockerSocketProxy = document.getElementById("docker-socket-proxy");
if (dockerSocketProxy) {
dockerSocketProxy.addEventListener('change', makeOptionsFormSubmitVisible);
// dockerSocketProxy.addEventListener('change', handleDockerSocketProxyWarning);
} }
// Whiteboard // Initialize event listeners for specific behaviors
let whiteboard = document.getElementById("whiteboard"); document.getElementById("talk").addEventListener('change', handleTalkVisibility);
whiteboard.addEventListener('change', makeOptionsFormSubmitVisible); document.getElementById("docker-socket-proxy").addEventListener('change', handleDockerSocketProxyWarning);
// Initialize talk-recording visibility on page load
handleTalkVisibility(); // Ensure talk-recording is correctly initialized
// Initial call to check for changes
checkForChanges();
}); });

Просмотреть файл

@ -592,102 +592,8 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if is_backup_container_running == false %} {% 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 %} {{ include('includes/optional-containers.twig') }}
<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 %}
<h2>Timezone change</h2> <h2>Timezone change</h2>
{% if isAnyRunning == true %} {% if isAnyRunning == true %}

Просмотреть файл

@ -0,0 +1,182 @@
<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">
<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, only supported on x64, 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"
id="fulltextsearch"
name="fulltextsearch"
{% if is_fulltextsearch_enabled == true %}
checked="checked"
data-initial-state="true"
{% else %}
data-initial-state="false"
{% endif %}
>
<label for="fulltextsearch">
Fulltextsearch (needs ~1GB additional RAM)
{% if is_fulltextsearch_enabled == false %}
. <strong>Please note:</strong> the initial indexing can take a long time during which Nextcloud will be unavailable
{% endif %}
</label>
</p>
<p>
<input
type="checkbox"
id="imaginary"
name="imaginary"
{% if is_imaginary_enabled == true %}
checked="checked"
data-initial-state="true"
{% else %}
data-initial-state="false"
{% endif %}
>
<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>
<p>
<input
type="checkbox"
id="talk"
name="talk"
{% if is_talk_enabled == true %}
checked="checked"
data-initial-state="true"
{% else %}
data-initial-state="false"
{% endif %}
>
<label for="talk">Nextcloud Talk (needs ports {{ talk_port }}/TCP and {{ talk_port }}/UDP open/forwarded in your firewall/router)</label>
</p>
<p>
<input
type="checkbox"
id="talk-recording"
name="talk-recording"
{% if is_talk_recording_enabled == true %}
checked="checked"
data-initial-state="true"
{% else %}
data-initial-state="false"
{% endif %}
>
<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"
id="docker-socket-proxy"
name="docker-socket-proxy"
{% if is_docker_socket_proxy_enabled == true %}
checked="checked"
data-initial-state="true"
{% else %}
data-initial-state="false"
{% endif %}
>
<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>
<p>
<input
type="checkbox"
id="whiteboard"
name="whiteboard"
{% if is_whiteboard_enabled == true %}
checked="checked"
data-initial-state="true"
{% else %}
data-initial-state="false"
{% endif %}
>
<label for="whiteboard">Whiteboard</label>
</p>
<input id="options-form-submit" type="submit" value="Save changes" />
<script type="text/javascript" src="options-form-submit.js?v3"></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 %}