Skip to content
Snippets Groups Projects
Commit 0f8c1b1c authored by Inga Kirschnick's avatar Inga Kirschnick
Browse files

New profile page

parent bd86a712
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/templates/users/edit_profile_testing.html.j2 0 → 100644
+ 236
− 0
View file @ 0f8c1b1c
{% extends "base.html.j2" %}
{% import "materialize/wtf.html.j2" as wtf %}
{% block page_content %}
<div class="container">
<div class="row">
<div class="col s12">
<h1 id="title">{{ title }}</h1>
</div>
</div>
<div class="row">
<div class="col s12 m9 l10">
<div id="user-settings" class="card section scrollspy">
<form method="POST" enctype="multipart/form-data">
<div class="card-content">
<span class="card-title">User Settings</span>
<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>
<div class="card-action">
<div class="right-align">
{{ wtf.render_field(edit_profile_settings_form.submit, material_icon='send') }}
</div>
</div>
</form>
</div>
<form method="POST">
{{ edit_privacy_settings_form.hidden_tag() }}
<div id="privacy-settings" class="card section scrollspy">
<div class="card-content">
<span class="card-title">Privacy settings</span>
<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>
<div class="card-action">
<div class="right-align">
{{ wtf.render_field(edit_privacy_settings_form.submit, material_icon='send') }}
</div>
</div>
</div>
</form>
<div id="public-profile-settings" class="card section scrollspy">
<form method="POST" enctype="multipart/form-data">
<div class="card-content">
{{ edit_public_profile_information_form.hidden_tag() }}
<div class="row">
<div class="col s12">
<span class="card-title">Public Profile</span>
</div>
</div>
<div class="row">
<div class="col s5">
<div class="row">
<div class="col s2"></div>
<div class="col s8">
<img src="{{ url_for('.profile_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img" id="avatar">
</div>
<div class="col s2"></div>
</div>
<div class="row">
<div class="col s2">
<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 s10">
{{ 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>
</div>
<div class="col s7">
<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') }}
{{ 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>
</div>
</div>
<div class="card-action">
<div class="right-align">
{{ wtf.render_field(edit_public_profile_information_form.submit, material_icon='send') }}
</div>
</div>
</form>
</div>
<form method="POST">
{{ edit_notification_settings_form.hidden_tag() }}
<div id="notification-settings" class="card section scrollspy">
<div class="card-content">
<span class="card-title">Notification settings</span>
{{ wtf.render_field(edit_notification_settings_form.job_status_mail_notification_level, material_icon='notifications') }}
</div>
<div class="card-action">
<div class="right-align">
{{ wtf.render_field(edit_notification_settings_form.submit, material_icon='send') }}
</div>
</div>
</div>
</form>
<form method="POST">
{{ change_password_form.hidden_tag() }}
<div id="change-password" class="card section scrollspy">
<div class="card-content">
<span class="card-title">Change Password</span>
{{ 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>
<div class="card-action">
<div class="right-align">
{{ wtf.render_field(change_password_form.submit, material_icon='send') }}
</div>
</div>
</div>
</form>
<div id="delete-account" class="card section scrollspy">
<div class="card-content">
<span class="card-title">Delete account</span>
<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>
<div class="card-action 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>
</div>
<div class="col hide-on-small-only m3 l2">
<ul class="section table-of-contents" style="position: fixed !important;">
<li><a href="#user-settings">User Settings</a></li>
<li><a href="#privacy-settings">Privacy Settings</a></li>
<li><a href="#public-profile-settings">Public Profile Settings</a></li>
<li><a href="#notification-settings">Notification Settings</a></li>
<li><a href="#change-password">Change Password</a></li>
<li><a href="#delete-account">Delete Account</a></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 %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment