mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-04 04:12:45 +00:00 
			
		
		
		
	Update settings page
This commit is contained in:
		@@ -9,81 +9,62 @@
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="col s4">
 | 
			
		||||
    <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 s8">
 | 
			
		||||
    <div class="col s12 l8">
 | 
			
		||||
      <br>
 | 
			
		||||
      <ul class="collapsible no-autoinit settings-collapsible">
 | 
			
		||||
        <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-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() }}
 | 
			
		||||
              <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>
 | 
			
		||||
              <p></p>
 | 
			
		||||
              <br>
 | 
			
		||||
              <div class="divider"></div>
 | 
			
		||||
              <p>Show:</p>
 | 
			
		||||
              <div class="row">
 | 
			
		||||
                <div class="col s3">
 | 
			
		||||
                  <label>
 | 
			
		||||
                    <input {% if user.has_profile_privacy_setting('SHOW_EMAIL') %}checked{% endif %} id="profile-show-email-checkbox" type="checkbox">
 | 
			
		||||
                    <span>Email</span>
 | 
			
		||||
                  </label>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="col s3">
 | 
			
		||||
                  <label>
 | 
			
		||||
                    <input {% if user.has_profile_privacy_setting('SHOW_LAST_SEEN') %}checked{% endif %} id="profile-show-last-seen-checkbox" type="checkbox">
 | 
			
		||||
                    <span>Last seen</span>
 | 
			
		||||
                  </label>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="col s3">
 | 
			
		||||
                  <label>
 | 
			
		||||
                    <input {% if user.has_profile_privacy_setting('SHOW_MEMBER_SINCE') %}checked{% endif %} id="profile-show-member-since-checkbox" type="checkbox">
 | 
			
		||||
                    <span>Member since</span>
 | 
			
		||||
                  </label>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              {# <div class="row">
 | 
			
		||||
                <div class="col s3">
 | 
			
		||||
                  <p>
 | 
			
		||||
                    <label>
 | 
			
		||||
                      {{ edit_profile_form.show_email() }}
 | 
			
		||||
                      <span>{{ edit_profile_form.show_email.label.text }}</span>
 | 
			
		||||
                    </label>
 | 
			
		||||
                  </p>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="col s3">
 | 
			
		||||
                  <p>
 | 
			
		||||
                    <label>
 | 
			
		||||
                      {{ edit_profile_form.show_last_seen() }}
 | 
			
		||||
                      <span>{{ edit_profile_form.show_last_seen.label.text }}</span>
 | 
			
		||||
                    </label>
 | 
			
		||||
                  </p>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="col s4">
 | 
			
		||||
                  <p>
 | 
			
		||||
                    <label>
 | 
			
		||||
                      {{ edit_profile_form.show_member_since() }}
 | 
			
		||||
                      <span>{{ edit_profile_form.show_member_since.label.text }}</span>
 | 
			
		||||
                    </label>
 | 
			
		||||
                  </p>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div> #}
 | 
			
		||||
              <p></p>
 | 
			
		||||
              <br>
 | 
			
		||||
              {{ 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') }}
 | 
			
		||||
@@ -113,20 +94,20 @@
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="col s4">
 | 
			
		||||
    <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 s8">
 | 
			
		||||
    <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 right">keyboard_arrow_right</i>
 | 
			
		||||
            <i class="caret material-icons">keyboard_arrow_right</i>
 | 
			
		||||
          </div>
 | 
			
		||||
          <div class="collapsible-body">
 | 
			
		||||
            <form method="POST" enctype="multipart/form-data">
 | 
			
		||||
@@ -167,7 +148,7 @@
 | 
			
		||||
        <li>
 | 
			
		||||
          <div class="collapsible-header" style="justify-content: space-between;">
 | 
			
		||||
            <span>Change Password</span>
 | 
			
		||||
            <i class="caret material-icons right">keyboard_arrow_right</i>
 | 
			
		||||
            <i class="caret material-icons">keyboard_arrow_right</i>
 | 
			
		||||
          </div>          
 | 
			
		||||
          <div class="collapsible-body">
 | 
			
		||||
            <form method="POST">
 | 
			
		||||
@@ -199,6 +180,7 @@
 | 
			
		||||
    <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>
 | 
			
		||||
@@ -224,7 +206,7 @@ avatarUploadElement.addEventListener('change', () => {
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
deleteButtonElement.addEventListener('click', () => {
 | 
			
		||||
  Requests.settings.entity.deleteAvatar(currentUserId)
 | 
			
		||||
  Requests.settings.entity.deleteAvatar({{ user.hashid|tojson }})
 | 
			
		||||
    .then(
 | 
			
		||||
      (response) => {
 | 
			
		||||
        avatarElement.src = {{ url_for('static', filename='images/user_avatar.png')|tojson }};
 | 
			
		||||
@@ -233,7 +215,7 @@ deleteButtonElement.addEventListener('click', () => {
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
document.querySelector('#delete-user-button').addEventListener('click', (event) => {
 | 
			
		||||
  Requests.settings.entity.delete(currentUserId)
 | 
			
		||||
  Requests.settings.entity.delete({{ user.hashid|tojson }})
 | 
			
		||||
    .then((response) => {window.location.href = '/';});
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
@@ -253,15 +235,33 @@ for (let collapsibleElement of document.querySelectorAll('.collapsible.no-autoin
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// #region Public Switch
 | 
			
		||||
// #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(currentUserId, newIsPublic)
 | 
			
		||||
    .catch((response) => {
 | 
			
		||||
      profileIsPublicSwitchElement.checked = !newIsPublic;
 | 
			
		||||
    });
 | 
			
		||||
  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;
 | 
			
		||||
      }
 | 
			
		||||
    );
 | 
			
		||||
});
 | 
			
		||||
// #endregion Public Switch
 | 
			
		||||
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 %}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user