nopaque/app/templates/users/settings/settings.html.j2

{% extends "base.html.j2" %}
{% import "materialize/wtf.html.j2" as wtf %}

{% block page_content %}
<div class="section container">
  <div class="row">
    <div class="col s12">
      <h1 id="title">{{ title }}</h1>
    </div>

    <div class="col s12 l4">
      <h4>Profile Settings</h4>
      <p>You can edit your public profile here and share it with other nopaque users. 
      Tell others about your (scientific) background so they can relate and network with you. 
      You can also set what should not be visible.</p>
    </div>
    <div class="col s12 l8">
      <br>
      <ul class="collapsible no-autoinit settings-collapsible">
        <li>
          <div class="collapsible-header" style="justify-content: space-between;">
            <span>Privacy</span>
            <i class="material-icons caret">keyboard_arrow_right</i>
          </div>
          <div class="collapsible-body">
            <div style="overflow: auto;">
              <p class="left"><i class="material-icons">public</i></p>
              <p class="left" style="margin-left: 10px;">
                Public status<br>
                <span class="light">Choose whether your profile is visible to other users.</span>
              </p>
              <br class="hide-on-med-and-down">
              <div class="switch right">
                <label>
                  <input {% if user.is_public %}checked{% endif %} id="profile-is-public-switch" type="checkbox">
                  <span class="lever"></span>
                </label>
              </div>
            </div>
            <div style="overflow: auto;">
              <p class="left"><i class="material-icons">badge</i></p>
              <p class="left" style="margin-left: 10px;">
                Public data<br>
                <span class="light">Choose which data is visible on your profile.</span>
              </p>
            </div>
            <div class="row" style="margin-left: 24px;">
              <div class="col s12 l3">
                <label>
                  <input {% if user.has_profile_privacy_setting('SHOW_EMAIL') %}checked{% endif %} class="profile-privacy-setting-checkbox" data-profile-privacy-setting-name="SHOW_EMAIL" {% if not user.is_public %}disabled{% endif %} type="checkbox">
                  <span>Email</span>
                </label>
              </div>
              <div class="col s12 l3">
                <label>
                  <input {% if user.has_profile_privacy_setting('SHOW_LAST_SEEN') %}checked{% endif %} class="profile-privacy-setting-checkbox" data-profile-privacy-setting-name="SHOW_LAST_SEEN" {% if not user.is_public %}disabled{% endif %} type="checkbox">
                  <span>Last seen</span>
                </label>
              </div>
              <div class="col s12 l3">
                <label>
                  <input {% if user.has_profile_privacy_setting('SHOW_MEMBER_SINCE') %}checked{% endif %} class="profile-privacy-setting-checkbox" data-profile-privacy-setting-name="SHOW_MEMBER_SINCE" {% if not user.is_public %}disabled{% endif %} type="checkbox">
                  <span>Member since</span>
                </label>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="collapsible-header" style="justify-content: space-between;">
            <span>Information</span>
            <i class="material-icons caret">keyboard_arrow_right</i>
          </div>
          <div class="collapsible-body">
            <form method="POST">
              {{ update_profile_information_form.hidden_tag() }}
              {{ wtf.render_field(update_profile_information_form.full_name, material_icon='badge') }}
              {{ wtf.render_field(update_profile_information_form.about_me, material_icon='description', id='about-me-textfield') }}
              {{ wtf.render_field(update_profile_information_form.website, material_icon='laptop') }}
              {{ wtf.render_field(update_profile_information_form.organization, material_icon='business') }}
              {{ wtf.render_field(update_profile_information_form.location, material_icon='location_on') }}
              <div class="right-align">
                {{ wtf.render_field(update_profile_information_form.submit, material_icon='send') }}
              </div>              
            </form>
          </div>
        </li>
        <li>
          <div class="collapsible-header" style="justify-content: space-between;">
            <span>Avatar</span>
            <i class="material-icons caret">keyboard_arrow_right</i>
          </div>
          <div class="collapsible-body">
            <form method="POST" enctype="multipart/form-data">
              {{ update_avatar_form.hidden_tag() }}
              <div class="row">
                <div class="col s12 l2">
                  <img src="{{ url_for('users.user_avatar', user_id=user.id) }}" alt="Avatar" class="circle responsive-img" id="update-avatar-form-avatar-preview">
                </div>
                <div class="col s12 l10">
                  <br class="hide-on-med-and-down">
                  {{ wtf.render_field(update_avatar_form.avatar, accept='image/jpeg, image/png, image/gif', placeholder='Choose a JPEG or PNG file') }}
                </div>
              </div>
              <div class="right-align">
                <a class="btn red waves-effect waves-light modal-trigger" href="#delete-avatar-modal"><i class="material-icons left">delete</i>Delete</a>
                {{ wtf.render_field(update_avatar_form.submit, material_icon='send') }}
              </div>              
            </form>
          </div>
        </li>
      </ul>
    </div>

    <div class="col s12"></div>

    <div class="col s12 l4">
      <h4>General Settings</h4>
      <p>Make general changes to your profile here. You can change your password, 
      username or email address, delete your profile and customize your notifications.</p>
    </div>
    <div class="col s12 l8">
      <br>
      <ul class="collapsible no-autoinit settings-collapsible">
        <li>
          <div class="collapsible-header" style="justify-content: space-between;">
            <span>Account</span>
            <i class="caret material-icons">keyboard_arrow_right</i>
          </div>
          <div class="collapsible-body">
            <form method="POST">
              {{ update_account_information_form.hidden_tag() }}
              {{ wtf.render_field(update_account_information_form.username, material_icon='person') }}
              {{ wtf.render_field(update_account_information_form.email, material_icon='email') }}
              <div class="right-align">
                <a class="btn red waves-effect waves-light modal-trigger" href="#delete-user-modal"><i class="material-icons left">delete</i>Delete</a>
                {{ wtf.render_field(update_account_information_form.submit, material_icon='send') }}
              </div>
            </form>
          </div>
        </li>
        <li>
          <div class="collapsible-header" style="justify-content: space-between;">
            <span>Change Password</span>
            <i class="caret material-icons">keyboard_arrow_right</i>
          </div>          
          <div class="collapsible-body">
            <form method="POST">
              {{ update_password_form.hidden_tag() }}
              {{ wtf.render_field(update_password_form.password, material_icon='vpn_key') }}
              {{ wtf.render_field(update_password_form.new_password, material_icon='vpn_key') }}
              {{ wtf.render_field(update_password_form.new_password_2, material_icon='vpn_key') }}
              <div class="right-align">
                {{ wtf.render_field(update_password_form.submit, material_icon='send') }}
              </div>
            </form>
          </div>
        </li>
        <li>
          <div class="collapsible-header" style="justify-content: space-between;">
            <span>Notifications</span>
            <i class="caret material-icons">keyboard_arrow_right</i>
          </div>
          <div class="collapsible-body">
            <form method="POST">
              {{ update_notifications_form.hidden_tag() }}
              {{ wtf.render_field(update_notifications_form.job_status_mail_notification_level, material_icon='notifications') }}
              <div class="right-align">
                {{ wtf.render_field(update_notifications_form.submit, material_icon='send') }}
              </div>
            </form>
          </div>
        </li>
      </ul>
    </div>

    {% block admin_settings %}{% endblock admin_settings %}
  </div>
</div>
{% endblock page_content %}

{% block modals %}
{{ super() }}
<div class="modal" id="delete-avatar-modal">
  <div class="modal-content">
    <h4>Confirm Avatar deletion</h4>
    <p>Do you really want to delete <b>{{ user.username }}</b>’s avatar?</p>
  </div>
  <div class="modal-footer">
    <a class="btn modal-close waves-effect waves-light">Cancel</a>
    <a class="btn modal-close red waves-effect waves-light" id="delete-avatar">Delete</a>
  </div>
</div>

<div class="modal" id="delete-user-modal">
  <div class="modal-content">
    <h4>Confirm User deletion</h4>
    <p>Do you really want to delete the User <b>{{ user.username }}</b>?</p>
    <p>Deleting an account has the following effects:</p>
    <ul>
      <li>All data (Jobs, Corpora, ...) associated with the account will be permanently deleted.</li>
      <li>All settings will be permanently deleted.</li>
    </ul>
  </div>
  <div class="modal-footer">
    <a class="btn modal-close waves-effect waves-light">Cancel</a>
    <a class="btn modal-close red waves-effect waves-light" id="delete-user">Delete</a>
  </div>
</div>
{% endblock modals %}

{% block scripts %}
{{ super() }}
<script>
let avatarPreviewElement = document.querySelector('#update-avatar-form-avatar-preview');
let avatarUploadElement = document.querySelector('#update-avatar-form-avatar');

avatarUploadElement.addEventListener('change', () => {
  let file = avatarUploadElement.files[0];
  avatarPreviewElement.src = URL.createObjectURL(file);
});

document.querySelector('#delete-avatar').addEventListener('click', () => {
  Requests.users.entity.avatar.delete({{ user.hashid|tojson }})
    .then(
      (response) => {
        avatarPreviewElement.src = {{ url_for('static', filename='images/user_avatar.png')|tojson }};
      }
    );
});

document.querySelector('#delete-user').addEventListener('click', (event) => {
  Requests.users.entity.delete({{ user.hashid|tojson }})
    .then((response) => {window.location.href = '/';});
});

for (let collapsibleElement of document.querySelectorAll('.collapsible.no-autoinit.settings-collapsible')) {
  M.Collapsible.init(
    collapsibleElement,
    {
      onOpenStart: (collapsibleItemElement) => {
        let caret = collapsibleItemElement.querySelector('.caret');
        caret.innerHTML = 'keyboard_arrow_down';
      },
      onCloseStart: (collapsibleItemElement) => {
        let caret = collapsibleItemElement.querySelector('.caret');
        caret.innerHTML = 'keyboard_arrow_right';
      }
    }
  );
}

// #region Profile Privacy settings
let profileIsPublicSwitchElement = document.querySelector('#profile-is-public-switch');
let profilePrivacySettingCheckboxElements = document.querySelectorAll('.profile-privacy-setting-checkbox');
profileIsPublicSwitchElement.addEventListener('change', (event) => {
  let newEnabled = profileIsPublicSwitchElement.checked;
  Requests.users.entity.settings.profilePrivacy.update({{ user.hashid|tojson }}, 'is-public', newEnabled)
    .then(
      (response) => {
        for (let profilePrivacySettingCheckboxElement of document.querySelectorAll('.profile-privacy-setting-checkbox')) {
          profilePrivacySettingCheckboxElement.disabled = !newEnabled;
        }
      },
      (response) => {
        profileIsPublicSwitchElement.checked = !newEnabled;
      }
    );
});
for (let profilePrivacySettingCheckboxElement of profilePrivacySettingCheckboxElements) {
  profilePrivacySettingCheckboxElement.addEventListener('change', (event) => {
    let newEnabled = profilePrivacySettingCheckboxElement.checked;
    let valueName = profilePrivacySettingCheckboxElement.dataset.profilePrivacySettingName;
    Requests.users.entity.settings.profilePrivacy.update({{ user.hashid|tojson }}, valueName, newEnabled)
      .catch((response) => {
        profilePrivacySettingCheckboxElement.checked = !newEnabled;
      });
  });
}
// #endregion Profile Privacy settings
</script>
{% endblock scripts %}