nopaque/app/templates/users/edit_profile.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 s4">
      <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 s8" style="margin-top: 22.8px;">
      <ul class="collapsible">
        <li>
          <div class="collapsible-header" style="justify-content: space-between;">
            <span>User Settings</span>
            <i class="caret material-icons right">keyboard_arrow_right</i>
          </div>
          <div class="collapsible-body">
            <form method="POST" enctype="multipart/form-data">
                <div class="row">
                  <div class="col s6">
                    {{ edit_profile_settings_form.hidden_tag() }}
                    {{ wtf.render_field(edit_profile_settings_form.username, material_icon='person') }}
                    {{ wtf.render_field(edit_profile_settings_form.email, material_icon='email') }}
                  </div>
                </div>
              <div class="right-align">
                {{ wtf.render_field(edit_profile_settings_form.submit, material_icon='send') }}
              </div>
            </form>
          </div>
        </li>
        <li>
          <div class="collapsible-header" style="justify-content: space-between;"><span>Privacy Settings</span><i class="material-icons caret right">keyboard_arrow_right</i></div>
          <div class="collapsible-body">
            <form method="POST">
              {{ edit_privacy_settings_form.hidden_tag() }}
              <br>
              {{ wtf.render_field(edit_privacy_settings_form.is_public, id='public-profile') }}
              <br>
              <hr>
              <br>
              {{ wtf.render_field(edit_privacy_settings_form.show_email, data_action='disable', disabled=true) }}
              <br>
              {{ wtf.render_field(edit_privacy_settings_form.show_last_seen, data_action='disable', disabled=true) }}
              <br>
              {{ wtf.render_field(edit_privacy_settings_form.show_member_since, data_action='disable', disabled=true) }}
              <br>
              <div class="right-align">
                {{ wtf.render_field(edit_privacy_settings_form.submit, material_icon='send') }}
              </div>
            </form>
          </div>
        </li>
        <li>
          <div class="collapsible-header" style="justify-content: space-between;"><span>Public Profile</span><i class="material-icons caret right">keyboard_arrow_right</i></div>
          <div class="collapsible-body">
            <form method="POST" enctype="multipart/form-data">
              {{ edit_public_profile_information_form.hidden_tag() }}
              <div  class="row">
                <div class="col s1 m3"></div>
                <div class="col s10 m6">
                  <img src="{{ url_for('.profile_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img" id="avatar">
                </div>
                <div class="col s1 m3"></div>
              </div>
              <div class="row">
                <div class="col s3 m2">
                  <div class="center-align">
                    <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>
                <div class="col s9 m8">
                  {{ wtf.render_field(edit_public_profile_information_form.avatar, accept='image/jpeg, image/png, image/gif', placeholder='Choose an image file', id='avatar-upload') }}
                </div>
              </div>
              <p></p>
              <br>
              {{ wtf.render_field(edit_public_profile_information_form.full_name, material_icon='badge') }}
              {{ wtf.render_field(edit_public_profile_information_form.about_me, material_icon='description', id='about-me-textfield') }}
              {{ wtf.render_field(edit_public_profile_information_form.website, material_icon='laptop') }}
              {{ wtf.render_field(edit_public_profile_information_form.organization, material_icon='business') }}
              {{ wtf.render_field(edit_public_profile_information_form.location, material_icon='location_on') }}
              <div class="right-align">
                {{ wtf.render_field(edit_public_profile_information_form.submit, material_icon='send') }}
              </div>
            </form>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col s4">
      <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 s8" style="margin-top: 22.8px;">
      <ul class="collapsible">
        <li>
          <div class="collapsible-header">
            <span>Notification Settings</span>
            <i class="caret material-icons">keyboard_arrow_right</i>
          </div>
          <div class="collapsible-body">
            <form method="POST">
              {{ edit_notification_settings_form.hidden_tag() }}
              {{ wtf.render_field(edit_notification_settings_form.job_status_mail_notification_level, material_icon='notifications') }}
              <div class="right-align">
                {{ wtf.render_field(edit_notification_settings_form.submit, material_icon='send') }}
              </div>
            </form>
          </div>
        </li>
        <li>
          <div class="collapsible-header">
            <span>Change Password</span>
            <i class="caret material-icons right">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>
        <li>
          <div class="collapsible-header">
            <span>Delete Account</span>
            <i class="caret material-icons right">keyboard_arrow_right</i>
          </div>              
          <div class="collapsible-body">
            <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>
      </ul>
    </div>
  </div>
</div>
{% endblock page_content %}

{% block modals %}
<div class="modal" id="delete-avatar-modal">
  <div class="modal-content">
    <h4>Confirm Avatar deletion</h4>
    <p>Do you really want to delete your 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>{{ current_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 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(currentUserId)
    .then(
      (response) => {
        avatar.src = "{{ url_for('static', filename='images/user_avatar.png') }}";
      }
    );
});

document.querySelector('#delete-user-button').addEventListener('click', (event) => {
  Requests.users.entity.delete(currentUserId)
    .then((response) => {window.location.href = '/';});
});
</script>
{% endblock scripts %}