New user Settings page

This commit is contained in:
Inga Kirschnick 2023-03-15 09:18:11 +01:00
parent f1be57e509
commit 464ae8ecc3
3 changed files with 152 additions and 153 deletions

View File

@ -2,163 +2,160 @@
{% import "materialize/wtf.html.j2" as wtf %} {% import "materialize/wtf.html.j2" as wtf %}
{% block page_content %} {% block page_content %}
<div class="container"> <div class="section container">
<div class="row"> <div class="row">
<div class="col s12"> <div class="col s12">
<h1 id="title">{{ title }}</h1> <h1 id="title">{{ title }}</h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col s12 m9 l10"> <div class="col s4">
<h4>Profile Settings</h4>
<div id="user-settings" class="card section scrollspy"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
<form method="POST" enctype="multipart/form-data"> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
<div class="card-content"> sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<span class="card-title">User Settings</span> Stet clita kasd gubergren, no sea tak</p>
<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>
<div class="col hide-on-small-only m3 l2"> <div class="col s8" style="margin-top: 22.8px;">
<ul class="section table-of-contents" style="position: fixed !important;"> <ul class="collapsible">
<li><a href="#user-settings">User Settings</a></li> <li>
<li><a href="#privacy-settings">Privacy Settings</a></li> <div class="collapsible-header">
<li><a href="#public-profile-settings">Public Profile Settings</a></li> <span>User Settings</span>
<li><a href="#notification-settings">Notification Settings</a></li> <i class="caret material-icons right">keyboard_arrow_right</i>
<li><a href="#change-password">Change Password</a></li> </div>
<li><a href="#delete-account">Delete Account</a></li> <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"><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"><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> </ul>
</div> </div>
</div> </div>

View File

@ -64,11 +64,13 @@ class EditPublicProfileInformationForm(FlaskForm):
'Full name', 'Full name',
validators=[Length(max=128)] validators=[Length(max=128)]
) )
style={'style': 'overflow: auto;'}
about_me = TextAreaField( about_me = TextAreaField(
'About me', 'About me',
validators=[ validators=[
Length(max=254) Length(max=254)
] ],
render_kw=style
) )
website = StringField( website = StringField(
'Website', 'Website',

View File

@ -172,5 +172,5 @@ def edit_profile(user_id):
change_password_form=change_password_form, change_password_form=change_password_form,
edit_notification_settings_form=edit_notification_settings_form, edit_notification_settings_form=edit_notification_settings_form,
user=user, user=user,
title='Edit Profile' title='User Settings'
) )