From 464ae8ecc35d4bd4ea55c802b74058c06e10a2d5 Mon Sep 17 00:00:00 2001
From: Inga Kirschnick <inga.kirschnick@uni-bielefeld.de>
Date: Wed, 15 Mar 2023 09:18:11 +0100
Subject: [PATCH] New user Settings page
---
app/templates/users/edit_profile.html.j2 | 269 +++++++++++------------
app/users/forms.py | 4 +-
app/users/routes.py | 2 +-
3 files changed, 137 insertions(+), 138 deletions(-)
diff --git a/app/templates/users/edit_profile.html.j2 b/app/templates/users/edit_profile.html.j2
index 88eb8fb5..3636da42 100644
--- a/app/templates/users/edit_profile.html.j2
+++ b/app/templates/users/edit_profile.html.j2
@@ -2,163 +2,160 @@
{% import "materialize/wtf.html.j2" as wtf %}
{% block page_content %}
-<div class="container">
+<div class="section 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 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">
+ <span>User Settings</span>
+ <i class="caret material-icons right">keyboard_arrow_right</i>
</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 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>
- <div class="card-action">
- <div class="right-align">
- {{ wtf.render_field(edit_privacy_settings_form.submit, material_icon='send') }}
- </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>
- </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>
+ </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>
- <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 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 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 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>
- <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') }}
+ <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>
- </div>
- </div>
- <div class="card-action">
- <div class="right-align">
- {{ wtf.render_field(edit_public_profile_information_form.submit, material_icon='send') }}
- </div>
+ </form>
</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') }}
+ </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="card-action">
- <div class="right-align">
- {{ wtf.render_field(edit_notification_settings_form.submit, material_icon='send') }}
- </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>
- </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') }}
+ </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>
- <div class="card-action">
+ </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">
- {{ wtf.render_field(change_password_form.submit, material_icon='send') }}
+ <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>
- </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>
+ </li>
</ul>
</div>
</div>
diff --git a/app/users/forms.py b/app/users/forms.py
index af0e1984..73d72c8d 100644
--- a/app/users/forms.py
+++ b/app/users/forms.py
@@ -64,11 +64,13 @@ class EditPublicProfileInformationForm(FlaskForm):
'Full name',
validators=[Length(max=128)]
)
+ style={'style': 'overflow: auto;'}
about_me = TextAreaField(
'About me',
validators=[
Length(max=254)
- ]
+ ],
+ render_kw=style
)
website = StringField(
'Website',
diff --git a/app/users/routes.py b/app/users/routes.py
index 21e2ff02..bc2e90fb 100644
--- a/app/users/routes.py
+++ b/app/users/routes.py
@@ -172,5 +172,5 @@ def edit_profile(user_id):
change_password_form=change_password_form,
edit_notification_settings_form=edit_notification_settings_form,
user=user,
- title='Edit Profile'
+ title='User Settings'
)
--
GitLab