labelbase/django/templates/_modal_exportLabelbaseModal.html

{% load i18n %}
{% load labelbase_tags %}
{% load sekizai_tags %}
{% load bootstrap %}

{% if labelbase %}
<div class="modal" tabindex="-1" id="exportLabelbaseModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="export-label-form" action="{% url 'labelbase_dynamic_export' labelbase.id %}" method="post">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">Export BIP-329 Labels</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="export-label-modal-body">
          {% labelbaseform_export as export_form %}
          {{ export_form|bootstrap  }}
          <div id="export_enc_warning" class="alert alert-light" role="alert" style="margin-top:1.2rem;">
              <small>Labels are encrypted using our <a href="https://github.com/Labelbase/python-bip329">Python library for BIP-329</a>. <br>
                Always keep your passphrase secret and secure! </small>

          </div>
        </div>
        <div id="successMessage" class="alert alert-success d-none" role="alert" style="margin-top:1.2rem;">
            <strong>Success!</strong> Your export has been completed.
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" id="exportButton">Export</button>
      </div>
      </form>
    </div>
  </div>
</div>
{% else %}
<!-- modal exportLabelbaseModal not loaded -->
{% endif %}


{% addtoblock "js" %}



    $("#export-label-form").submit(function(e) {
        // Remove the buttons and hide form fields
        $('#exportButton').prop('disabled', true);
        $('#export-label-modal-body').hide();

        // Display the success message
        $('#successMessage').removeClass('d-none');
    });

  // Enable/disable passphrase input based on the "Encrypt" checkbox
  const encryptCheckbox = $("#id_encrypt_checkbox");
  const passphraseInput = $("#id_passphrase");
  const exportButton = $("#exportButton");

  const formGroup = encryptCheckbox.closest(".form-group");
  const obj_hr = $("<hr>");
  const obj_br2 = $("<br>");

  formGroup.before(obj_hr); // Add <hr> before the parent form-group of the encryptCheckbox
  const passphraseLabel = $('label[for="id_passphrase"].control-label');
  passphraseLabel.before(obj_br2);

  // Create an array of all the checkboxes that should enable the Export button
  const checkboxesToMonitor = [
    $("#id_tx_checkbox"),
    $("#id_addr_checkbox"),
    $("#id_pubkey_checkbox"),
    $("#id_input_checkbox"),
    $("#id_output_checkbox"),
    $("#id_xpub_checkbox"),
  ];

  // Add change event handlers for all checkboxes
  checkboxesToMonitor.forEach(function(checkbox) {
    checkbox.change(toggleExportButton);
  });

  encryptCheckbox.change(function() {
    togglePassphraseInput();
    toggleExportButton();
  });

  passphraseInput.on("input", toggleExportButton);

  // Function to toggle the passphrase input state
  function togglePassphraseInput() {
    const isEncryptChecked = encryptCheckbox.prop("checked");
    passphraseInput.prop("disabled", !isEncryptChecked);
    if (!isEncryptChecked) {
      passphraseInput.val(""); // Empty passphrase input if encryption is not checked
    }
  }

  // Function to toggle the Export button state
  function toggleExportButton() {
    const isEncryptChecked = encryptCheckbox.prop("checked");
    var passphraseValue = "";
    if (passphraseInput.length) {
        passphraseValue = passphraseInput.val().trim();
    } else {
        console.log('passphraseInput element not found.');
    }

    const anyCheckboxChecked = checkboxesToMonitor.some(function(checkbox) {
      return checkbox.prop("checked");
    });

    // Disable the export button if encryption is checked and the passphrase is empty,
    // or if nothing is checked
    exportButton.prop("disabled", (isEncryptChecked && passphraseValue === "") || !anyCheckboxChecked);

    if (isEncryptChecked) {
      // If encryption is checked, add 'alert-warning' and remove 'alert-light'
      $('#export_enc_warning').addClass('alert-warning').removeClass('alert-light');
    } else {
      // If encryption is unchecked, add 'alert-light' and remove 'alert-warning'
      $('#export_enc_warning').addClass('alert-light').removeClass('alert-warning');
    }
  }

  $(document).ready(function() {

    // Initialize the button and input states
    togglePassphraseInput();
    toggleExportButton();
  });


{% endaddtoblock %}