Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: toggle submit button based on unsaved changes #5576

Merged
merged 3 commits into from
Nov 12, 2024
Merged

feat: toggle submit button based on unsaved changes #5576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
816921e
refactor: extract 'optional containers' to separate twig include
ernolf Nov 11, 2024
41c29b9
feat: toggle submit button based on unsaved changes
ernolf Nov 11, 2024
16e4f41
increase to v3
szaimen Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 50 additions & 63 deletions php/public/options-form-submit.js
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,102 +591,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