eightball/all-in-one
1
0
Fork 0
mirror of https://github.com/nextcloud/all-in-one.git synced 2025-12-20 06:26:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

feat: toggle submit button based on unsaved changes

Browse source 
Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>
This commit is contained in:
ernolf 2024-11-11 22:28:57 +01:00
parent 816921e2e2
commit 41c29b90a2
No known key found for this signature in database
GPG key ID: 0B145139A170715C
2 changed files with 180 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

105
php/public/options-form-submit.js
View file

@ -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");
optionsFormSubmit.style.display = 'none';
// 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';
} }
// Event listener to trigger visibility check on each change
checkboxes.forEach(checkbox => {
checkbox.addEventListener("change", checkForChanges);
});
// Custom behaviors for specific options
function handleTalkVisibility() { function handleTalkVisibility() {
let talk = document.getElementById("talk"); const talkRecording = document.getElementById("talk-recording");
let talkRecording = document.getElementById("talk-recording") if (document.getElementById("talk").checked) {
if (talk.checked) { talkRecording.disabled = false;
talkRecording.disabled = false
} else { } else {
talkRecording.checked = false talkRecording.checked = false;
talkRecording.disabled = true talkRecording.disabled = true;
} }
checkForChanges(); // Check changes after toggling Talk Recording
} }
function handleDockerSocketProxyWarning() { function handleDockerSocketProxyWarning() {
let dockerSocketProxy = document.getElementById("docker-socket-proxy"); if (document.getElementById("docker-socket-proxy").checked) {
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!');
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) { // Initialize event listeners for specific behaviors
// handle submit button for options form document.getElementById("talk").addEventListener('change', handleTalkVisibility);
let optionsFormSubmit = document.getElementById("options-form-submit"); document.getElementById("docker-socket-proxy").addEventListener('change', handleDockerSocketProxyWarning);
optionsFormSubmit.style.display = 'none';
// Clamav // Initialize talk-recording visibility on page load
let clamav = document.getElementById("clamav"); handleTalkVisibility(); // Ensure talk-recording is correctly initialized
clamav.addEventListener('change', makeOptionsFormSubmitVisible);
// OnlyOffice // Initial call to check for changes
let onlyoffice = document.getElementById("onlyoffice"); checkForChanges();
if (onlyoffice) {
onlyoffice.addEventListener('change', makeOptionsFormSubmitVisible);
}
// 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
}
// Imaginary
let imaginary = document.getElementById("imaginary");
imaginary.addEventListener('change', makeOptionsFormSubmitVisible);
// 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
let whiteboard = document.getElementById("whiteboard");
whiteboard.addEventListener('change', makeOptionsFormSubmitVisible);
}); });

122
php/templates/includes/optional-containers.twig
View file

@ -9,51 +9,137 @@
<input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}"> <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
<input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}"> <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
<input type="hidden" name="options-form" value="options-form"> <input type="hidden" name="options-form" value="options-form">
<p>
<input
type="checkbox"
id="clamav"
name="clamav"
{% if is_clamav_enabled == true %} {% 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> checked="checked"
data-initial-state="true"
{% else %} {% 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> data-initial-state="false"
{% endif %} {% 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 %} {% if is_collabora_enabled == true %}
<p><input type="checkbox" id="collabora" name="collabora" checked="checked"><label for="collabora">Collabora (Nextcloud Office)</label></p> checked="checked"
data-initial-state="true"
{% else %} {% else %}
<p><input type="checkbox" id="collabora" name="collabora"><label for="collabora">Collabora (Nextcloud Office)</label></p> data-initial-state="false"
{% endif %} {% endif %}
>
<label for="collabora">Collabora (Nextcloud Office)</label>
</p>
<p>
<input
type="checkbox"
id="fulltextsearch"
name="fulltextsearch"
{% if is_fulltextsearch_enabled == true %} {% 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> checked="checked"
data-initial-state="true"
{% else %} {% 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> data-initial-state="false"
{% endif %} {% 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 %} {% 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> checked="checked"
data-initial-state="true"
{% else %} {% 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> data-initial-state="false"
{% endif %} {% 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 %} {% 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> checked="checked"
data-initial-state="true"
{% else %} {% 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> data-initial-state="false"
{% endif %} {% 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 %} {% 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> checked="checked"
data-initial-state="true"
{% else %} {% 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> data-initial-state="false"
{% endif %} {% 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 %} {% if is_onlyoffice_enabled == true %}
<p><input type="checkbox" id="onlyoffice" name="onlyoffice" checked="checked"><label for="onlyoffice">OnlyOffice</label></p> checked="checked"
data-initial-state="true"
{% else %} {% else %}
{#<p><input type="checkbox" id="onlyoffice" name="onlyoffice"><label for="onlyoffice">OnlyOffice</label></p>#} data-initial-state="false"
{% endif %} {% 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 %} {% 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> checked="checked"
data-initial-state="true"
{% else %} {% 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> data-initial-state="false"
{% endif %} {% 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 %} {% if is_whiteboard_enabled == true %}
<p><input type="checkbox" id="whiteboard" name="whiteboard" checked="checked"><label for="whiteboard">Whiteboard</label></p> checked="checked"
data-initial-state="true"
{% else %} {% else %}
<p><input type="checkbox" id="whiteboard" name="whiteboard"><label for="whiteboard">Whiteboard</label></p> data-initial-state="false"
{% endif %} {% endif %}
>
<label for="whiteboard">Whiteboard</label>
</p>
<input id="options-form-submit" type="submit" value="Save changes" /> <input id="options-form-submit" type="submit" value="Save changes" />
<script type="text/javascript" src="options-form-submit.js?v2"></script> <script type="text/javascript" src="options-form-submit.js?v2"></script>
</form> </form>