parcel/templates/uploads/edit.html

<parcel-modal class="hidden" with-htmx>
  <form
    class="form"
    hx-post="/uploads/{{ upload.id }}/edit"
    {% if hx_target %}
      hx-target="{{ hx_target }}"
      hx-select="{{ hx_target }}"
    {% else %}
      hx-target="#upload-list-container"
      hx-select="#upload-list-container"
    {% endif %}
    hx-on::before-request="event.target.closest('parcel-modal').closeModal();"
    hx-swap="outerHTML">
    <input type="hidden" name="token" value="{{ token }}" />
    {% if ult_dest %}
      <input type="hidden" name="ult_dest" value="{{ ult_dest }}" />
    {% endif %}
    <label for="filename">Filename</label>
    <input
      class="field"
      type="text"
      id="filename"
      name="filename"
      value="{{ upload.filename }}"
      required />
    <div class="checkbox">
      <input
        type="checkbox"
        name="public"
        id="public"
        {% if upload.public %}checked{% endif %} />
      <label for="public">Download is publicly accessible (no need to sign in to download)</label>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
      <div>
        <div class="checkbox">
          <input
            type="checkbox"
            name="limit_check"
            id="limit_check"
            {% if upload.limit is number %}checked{% endif %} />
          <label for="limit_check">Limit downloads</label>
        </div>
        <input
          class="field"
          type="number"
          min="0"
          id="limit"
          name="limit"
          value="{% if upload.limit is number %}{{ upload.limit }}{% else %}0{% endif %}"
          {% if upload.limit is not number %}disabled{% endif %} />
      </div>
      <div>
        <div class="checkbox">
          <input
            type="checkbox"
            name="expiry_check"
            id="expiry_check"
            {% if upload.expiry_date %}checked{% endif %} />
          <label for="expiry_check">Expiry date</label>
        </div>
        <input
          class="field"
          type="date"
          id="expiry_date"
          name="expiry_date"
          {% if upload.expiry_date %}
            value="{{ upload.expiry_date | datetime(format="[year]-[month]-[day]") }}"
          {% else %}
            value="{{ now | datetime(format="[year]-[month]-[day]") }}"
          {% endif %}
          {% if not upload.expiry_date %}disabled{% endif %} />
      </div>
      <div>
        <div class="checkbox">
          <input
            type="checkbox"
            name="has_password"
            id="has_password"
            {% if has_password %}checked{% endif %} />
          <label for="has_password">Password protect download</label>
        </div>
        {% if has_password %}
          <div class="checkbox">
            <input
              type="checkbox"
              id="change_password" />
            <label for="change_password">Change password</label>
          </div>
        {% endif %}
        <input
          class="grow field"
          type="password"
          id="password"
          name="password"
          placeholder="••••••"
          disabled />
      </div>
    </div>
    <div class="buttons reverse end mt-2">
      <button
        type="submit"
        class="button">
        Save changes
      </button>
      <button
        class="button hollow"
        onclick="event.preventDefault(); event.target.closest('parcel-modal').closeModal();">
        Cancel
      </button>
    </div>
    <script type="text/javascript">
      (function() {
        const has_password = {{ has_password | tojson | safe }};

        function limitCheckChange(event) {
          document.getElementById("limit").disabled = !event.target.checked;
        }

        function expiryCheckChange(event) {
          document.getElementById("expiry_date").disabled = !event.target.checked;
        }

        function hasPasswordChange(event) {
          const password = document.getElementById("password");

          if (!has_password) {
            if (event.target.checked) {
              password.disabled = false;
              password.required = true;
            } else {
              password.disabled = true;
              password.required = false;
            }
          } else {
            const change_password = document.getElementById("change_password");
            change_password.disabled = !event.target.checked;
          }
        }

        function changePasswordChange(event) {
          console.log("change_password", event.target.checked);
          document.getElementById("password").disabled = !event.target.checked;
        }

        document.getElementById("limit_check").addEventListener("change", limitCheckChange);
        document.getElementById("expiry_check").addEventListener("change", expiryCheckChange);
        document.getElementById("has_password").addEventListener("change", hasPasswordChange);
        if (has_password) {
          document.getElementById("change_password").addEventListener("change", changePasswordChange);
        }
      })();
    </script>
  </form>
</parcel-modal>