enviPy-bayer/templates/modals/objects/set_license_modal.html

<dialog
  id="set_license_modal"
  class="modal"
  x-data="{
    isSubmitting: false,
    licenseType: '',
    ccRemix: false,
    ccNoCom: false,
    ccAlike: false,

    reset() {
      this.isSubmitting = false;
      this.licenseType = '';
      this.ccRemix = false;
      this.ccNoCom = false;
      this.ccAlike = false;
    },

    get licenseString() {
      if (this.licenseType !== 'cc') return 'no-license';

      let str = 'by';
      if (this.ccNoCom) str += '-nc';
      if (!this.ccRemix) {
        str += '-nd';
      } else if (this.ccAlike) {
        str += '-sa';
      }
      return str;
    },

    get licenseUrl() {
      if (this.licenseType !== 'cc') return '';
      return 'https://creativecommons.org/licenses/' + this.licenseString + '/4.0/';
    },

    get licenseImageUrl() {
      if (this.licenseType !== 'cc') return '';
      return 'https://licensebuttons.net/l/' + this.licenseString + '/4.0/88x31.png';
    },

    submit(formId) {
      const form = document.getElementById(formId);
      document.getElementById('license').value = this.licenseString;
      if (form && form.checkValidity()) {
        this.isSubmitting = true;
        form.submit();
      } else if (form) {
        form.reportValidity();
      }
    }
  }"
  @close="reset()"
>
  <div class="modal-box">
    <!-- Header -->
    <h3 class="text-lg font-bold">Set License</h3>

    <!-- Close button (X) -->
    <form method="dialog">
      <button
        class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
        :disabled="isSubmitting"
      >
        ✕
      </button>
    </form>

    <!-- Body -->
    <div class="py-4">
      <div class="flex gap-4 mb-4">
        <div class="flex-1">
          <p>
            Set the license for all data in this package:
            <br /><br />
            (For more information please visit our
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/License"
              class="link link-primary"
              >wiki</a
            >.)
          </p>
        </div>
        <div class="flex-none" x-show="licenseType === 'cc'" x-cloak>
          <a :href="licenseUrl" target="_blank">
            <img :src="licenseImageUrl" alt="CC License" />
          </a>
        </div>
      </div>

      <form
        id="set_license_form"
        accept-charset="UTF-8"
        action=""
        method="post"
      >
        {% csrf_token %}

        <div class="form-control">
          <label class="label cursor-pointer justify-start gap-3">
            <input
              type="radio"
              name="optlicense"
              class="radio"
              value="cc"
              x-model="licenseType"
            />
            <span class="label-text">Creative commons license</span>
          </label>
        </div>

        <div class="ml-8 space-y-2" x-show="licenseType === 'cc'" x-cloak>
          <div class="form-control">
            <label class="label cursor-pointer justify-start gap-3">
              <input type="checkbox" class="checkbox" x-model="ccRemix" />
              <span class="label-text"
                >Allow adaptations of your work to be shared</span
              >
            </label>
          </div>

          <div class="form-control">
            <label class="label cursor-pointer justify-start gap-3">
              <input type="checkbox" class="checkbox" x-model="ccNoCom" />
              <span class="label-text">Prohibit commercial use</span>
            </label>
          </div>

          <div class="form-control">
            <label class="label cursor-pointer justify-start gap-3">
              <input
                type="checkbox"
                class="checkbox"
                x-model="ccAlike"
                :disabled="!ccRemix"
              />
              <span class="label-text">Share only if others share alike</span>
            </label>
          </div>
        </div>

        <div class="form-control mt-2">
          <label class="label cursor-pointer justify-start gap-3">
            <input
              type="radio"
              name="optlicense"
              class="radio"
              value="nocc"
              x-model="licenseType"
            />
            <span class="label-text"
              >No creative commons license, contact package owner for license
              information</span
            >
          </label>
        </div>

        <input type="hidden" id="license" name="license" />
      </form>
    </div>

    <!-- Footer -->
    <div class="modal-action">
      <button
        type="button"
        class="btn"
        onclick="this.closest('dialog').close()"
        :disabled="isSubmitting"
      >
        Cancel
      </button>
      <button
        type="button"
        class="btn btn-primary"
        @click="submit('set_license_form')"
        :disabled="isSubmitting || !licenseType"
      >
        <span x-show="!isSubmitting">Submit</span>
        <span
          x-show="isSubmitting"
          class="loading loading-spinner loading-sm"
        ></span>
        <span x-show="isSubmitting">Submitting...</span>
      </button>
    </div>
  </div>

  <!-- Backdrop -->
  <form method="dialog" class="modal-backdrop">
    <button :disabled="isSubmitting">close</button>
  </form>
</dialog>