mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-11-04 12:22:47 +00:00
completly move settings logic to users package
This commit is contained in:
Patrick Jentsch
273
app/templates/users/settings/settings.html.j2
Normal file
273
app/templates/users/settings/settings.html.j2
Normal file
@@ -0,0 +1,273 @@
|
||||
{% 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>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</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">
|
||||
{{ 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 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">
|
||||
{{ 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"><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">
|
||||
<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 deleteAvatarButtonElement = document.querySelector('#delete-avatar');
|
||||
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);
|
||||
});
|
||||
|
||||
deleteAvatarButtonElement.addEventListener('click', () => {
|
||||
Requests.users.entity.settings.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 %}
|
||||
Reference in New Issue
Block a user