nopaque/app/templates/users/edit_profile.js.j2

let publicProfile = document.querySelector('#public-profile');
let disableButtons = document.querySelectorAll('[data-action="disable"]');
let deleteButton = document.querySelector('#delete-avatar');
let avatar = document.querySelector('#avatar');
let avatarUpload = document.querySelector('#avatar-upload');

for (let disableButton of disableButtons) {
  disableButton.disabled = !publicProfile.checked;
}

publicProfile.addEventListener('change', () => {
  if (publicProfile.checked) {
    for (let disableButton of disableButtons) {
      disableButton.disabled = false;
    }
  } else {
    for (let disableButton of disableButtons) {
      disableButton.checked = false;
      disableButton.disabled = true;
    }
  }
});

avatarUpload.addEventListener('change', function() {
  let file = this.files[0];
  avatar.src = URL.createObjectURL(file);
});

deleteButton.addEventListener('click', () => {
  Requests.users.entity.deleteAvatar({{ user.hashid|tojson }})
    .then(
      (response) => {
        avatar.src = "{{ url_for('static', filename='images/user_avatar.png') }}";
      }
    );
});