nopaque/app/templates/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>
  <div class="row">
    <div class="col s12 l4">
      <h4>Profile Settings</h4>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
      sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea tak</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>Profile Privacy Settings</span>
            <i class="material-icons caret">keyboard_arrow_right</i>
          </div>
          <div class="collapsible-body">
            <div class="row">
              <div class="col s12 l3">
                <div class="switch">
                  <label>
                    private
                    <input {% if user.is_public %}checked{% endif %} id="profile-is-public-switch" type="checkbox">
                    <span class="lever"></span>
                    public
                  </label>
                </div>
              </div>
              <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>Profile information</span>
            <i class="material-icons caret">keyboard_arrow_right</i>
          </div>
          <div class="collapsible-body">
            <form method="POST" enctype="multipart/form-data">
              {{ edit_profile_form.hidden_tag() }}
              {{ wtf.render_field(edit_profile_form.full_name, material_icon='badge') }}
              {{ wtf.render_field(edit_profile_form.about_me, material_icon='description', id='about-me-textfield') }}
              {{ wtf.render_field(edit_profile_form.website, material_icon='laptop') }}
              {{ wtf.render_field(edit_profile_form.organization, material_icon='business') }}
              {{ wtf.render_field(edit_profile_form.location, material_icon='location_on') }}
              <p></p>
              <div class="row">
                <div class="col s12 m2">
                  <img src="{{ url_for('users.user_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img" id="avatar">
                </div>
                <div class="col s12 m6">
                  {{ wtf.render_field(edit_profile_form.avatar, accept='image/jpeg, image/png, image/gif', placeholder='Choose an image file', id='avatar-upload') }}
                </div>
                <div class="col s12 m1">
                  <a class="btn-floating red waves-effect waves-light modal-trigger" style="margin-top:15px;" href="#delete-avatar-modal"><i class="material-icons">delete</i></a>
                </div>
              </div>
              <br>
              <p></p>
              <div class="right-align">
                {{ wtf.render_field(edit_profile_form.submit, material_icon='send') }}
              </div>              
            </form>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col s12 l4">
      <h4>General Settings</h4>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
      sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
      Stet clita kasd gubergren, no sea tak</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" enctype="multipart/form-data">
              {{ edit_account_form.hidden_tag() }}
              {{ wtf.render_field(edit_account_form.username, material_icon='person') }}
              {{ wtf.render_field(edit_account_form.email, material_icon='email') }}
              <div class="right-align">
                {{ wtf.render_field(edit_account_form.submit, material_icon='send') }}
              </div>
            </form>
            <br>
            <div class="divider"></div>
            <p>Deleting an account has the following effects:</p>
            <ul>
              <li>All data associated with your corpora and jobs will be permanently deleted.</li>
              <li>All settings will be permanently deleted.</li>
            </ul>
            <div class="right-align">
              <a class="btn red waves-effect waves-light modal-trigger" href="#delete-user"><i class="material-icons left">delete</i>Delete</a>
            </div>
          </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">
              {{ edit_notifications_form.hidden_tag() }}
              {{ wtf.render_field(edit_notifications_form.job_status_mail_notification_level, material_icon='notifications') }}
              <div class="right-align">
                {{ wtf.render_field(edit_notifications_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">
              {{ change_password_form.hidden_tag() }}
              {{ wtf.render_field(change_password_form.password, material_icon='vpn_key') }}
              {{ wtf.render_field(change_password_form.new_password, material_icon='vpn_key') }}
              {{ wtf.render_field(change_password_form.new_password_2, material_icon='vpn_key') }}
              <div class="right-align">
                {{ wtf.render_field(change_password_form.submit, material_icon='send') }}
              </div>
            </form>
          </div>
        </li>
      </ul>
    </div>
  </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">
  <div class="modal-content">
    <h4>Confirm User deletion</h4>
    <p>Do you really want to delete the User <b>{{ user.username }}</b>? All files will be permanently deleted!</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-user-button">Delete</a>
  </div>
</div>
{% endblock modals %}

{% block scripts %}
{{ super() }}
<script>
let deleteButtonElement = document.querySelector('#delete-avatar');
let avatarElement = document.querySelector('#avatar');
let avatarUploadElement = document.querySelector('#avatar-upload');

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

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

document.querySelector('#delete-user-button').addEventListener('click', (event) => {
  Requests.settings.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 newIsPublic = profileIsPublicSwitchElement.checked;
  Requests.settings.entity.isPublic.update({{ user.hashid|tojson }}, newIsPublic)
    .then(
      (response) => {
        for (let profilePrivacySettingCheckboxElement of document.querySelectorAll('.profile-privacy-setting-checkbox')) {
          profilePrivacySettingCheckboxElement.disabled = !newIsPublic;
        }
      },
      (response) => {
        profileIsPublicSwitchElement.checked = !newIsPublic;
      }
    );
});
for (let profilePrivacySettingCheckboxElement of profilePrivacySettingCheckboxElements) {
  profilePrivacySettingCheckboxElement.addEventListener('change', (event) => {
    let newEnabled = profilePrivacySettingCheckboxElement.checked;
    let valueName = profilePrivacySettingCheckboxElement.dataset.profilePrivacySettingName;
    Requests.settings.entity.profilePrivacySettings.update({{ user.hashid|tojson }}, valueName, newEnabled)
      .catch((response) => {
        profilePrivacySettingCheckboxElement.checked = !newEnabled;
      });
  });
}
// #endregion Profile Privacy settings
</script>
{% endblock scripts %}