From bbe31dec71229a9350aa2e0f50a21ff151e472fc Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 19 Feb 2020 09:49:35 +0100
Subject: [PATCH 1/3] Use anchor link to scroll to login form

---
 app/templates/main/index.html.j2 | 43 ++++++++++++++++++--------------
 app/templates/nopaque.html.j2    |  2 +-
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/templates/main/index.html.j2 b/app/templates/main/index.html.j2
index 908dc53e..04d84855 100644
--- a/app/templates/main/index.html.j2
+++ b/app/templates/main/index.html.j2
@@ -17,25 +17,30 @@
           <h2>nopaque</h2>
           <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 takimata sanctus est Lorem ipsum dolor sit amet. 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.</p>
         </div>
-        <div class="col s4 center-align">
-          <i class="large material-icons" style="color: #ee6e73;">flash_on</i>
-          <p>Speeds up your work</p>
-          <p class="light">All tools provided by nopaque are carefully selected to provide a complete tool suite without delaying compatibility issues.</p>
-        </div>
-        <div class="col s4 center-align">
-          <i class="large material-icons" style="color: #ee6e73;">cloud</i>
-          <p>Cloud infrastructure</p>
-          <p class="light">All computational work is processed within nopaques cloud infrastructure. You don't need to install any software, great right?</p>
-        </div>
-        <div class="col s4 center-align">
-          <i class="large material-icons" style="color: #ee6e73;">group</i>
-          <p>User Experience Focused</p>
-          <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.</p>
-        </div>
-        <div class="col s4 center-align">
-          <i class="large material-icons" style="color: #ee6e73;">settings</i>
-          <p>Easy to work with</p>
-          <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started.</p>
+        <div class="col s12 m8">
+          <br class="hide-on-small-only">
+          <div class="row">
+            <div class="col s6 center-align">
+              <i class="large material-icons" style="color: #ee6e73;">flash_on</i>
+              <p>Speeds up your work</p>
+              <p class="light">All tools provided by nopaque are carefully selected to provide a complete tool suite without delaying compatibility issues.</p>
+            </div>
+            <div class="col s6 center-align">
+              <i class="large material-icons" style="color: #ee6e73;">cloud</i>
+              <p>Cloud infrastructure</p>
+              <p class="light">All computational work is processed within nopaques cloud infrastructure. You don't need to install any software, great right?</p>
+            </div>
+            <div class="col s6 center-align">
+              <i class="large material-icons" style="color: #ee6e73;">group</i>
+              <p>User Experience Focused</p>
+              <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.</p>
+            </div>
+            <div class="col s6 center-align">
+              <i class="large material-icons" style="color: #ee6e73;">settings</i>
+              <p>Easy to work with</p>
+              <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started.</p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/templates/nopaque.html.j2 b/app/templates/nopaque.html.j2
index 88edbe47..88ffc124 100644
--- a/app/templates/nopaque.html.j2
+++ b/app/templates/nopaque.html.j2
@@ -51,7 +51,7 @@
         <li><a href="{{ url_for('profile.index') }}"><i class="material-icons">settings</i>Settings</a></li>
         <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
         {% else %}
-        <li><a href="{{ url_for('main.index') }}"><i class="material-icons">person</i>Log in</a></li>
+        <li><a href="{{ url_for('main.index', _anchor='registration-and-log-in') }}"><i class="material-icons">person</i>Log in</a></li>
         <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</a></li>
         {% endif %}
       </ul>

From 5e4666d3c8bc5914893d74164f86aa2c86b458a2 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 19 Feb 2020 10:17:27 +0100
Subject: [PATCH 2/3] Fix sidenav open trigger

---
 app/templates/nopaque.html.j2 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/templates/nopaque.html.j2 b/app/templates/nopaque.html.j2
index 88ffc124..6cf6f9b7 100644
--- a/app/templates/nopaque.html.j2
+++ b/app/templates/nopaque.html.j2
@@ -25,7 +25,7 @@
         <nav>
           <div class="nav-wrapper">
             <a href="{{ url_for('main.index') }}" class="brand-logo center"><i class="material-icons">opacity</i>nopaque</a>
-            <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+            <a href="#" data-target="sidenav-main" class="sidenav-trigger"><i class="material-icons">menu</i></a>
             <ul class="right hide-on-med-and-down">
               <li><a id="nav-notifications" class="dropdown-trigger no-autoinit" href="#!" data-target="nav-notifications-dropdown"><i class="material-icons">notifications</i></a></li>
               <li>

From c90cd4d8a34d828e7a3726d0f1bede1996ffc79c Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 19 Feb 2020 14:49:52 +0100
Subject: [PATCH 3/3] Rework settings page.

---
 app/auth/forms.py                      |   2 +-
 app/main/views.py                      |   9 +-
 app/profile/forms.py                   |  60 +++++-----
 app/profile/views.py                   | 129 ++++++++-------------
 app/templates/nopaque.html.j2          |   4 +-
 app/templates/profile/index.html.j2    | 130 ---------------------
 app/templates/profile/settings.html.j2 | 149 +++++++++++++++++++++++++
 7 files changed, 226 insertions(+), 257 deletions(-)
 delete mode 100644 app/templates/profile/index.html.j2
 create mode 100644 app/templates/profile/settings.html.j2

diff --git a/app/auth/forms.py b/app/auth/forms.py
index 7f8d1141..bd7f20b1 100644
--- a/app/auth/forms.py
+++ b/app/auth/forms.py
@@ -6,7 +6,7 @@ from wtforms.validators import DataRequired, Email, EqualTo, Length, Regexp
 
 
 class LoginForm(FlaskForm):
-    user = StringField('Email address or username', validators=[DataRequired(), Length(1, 64)])
+    user = StringField('Username', validators=[DataRequired(), Length(1, 64)])
     password = PasswordField('Password', validators=[DataRequired()])
     remember_me = BooleanField('Keep me logged in')
     submit = SubmitField('Log In')
diff --git a/app/main/views.py b/app/main/views.py
index c64d1b01..d2be274a 100644
--- a/app/main/views.py
+++ b/app/main/views.py
@@ -9,9 +9,7 @@ from . import main
 def index():
     login_form = LoginForm(prefix='login-form')
     if login_form.validate_on_submit():
-        user = User.query.filter_by(email=login_form.user.data).first()
-        if user is None:
-            user = User.query.filter_by(username=login_form.user.data).first()
+        user = User.query.filter_by(username=login_form.user.data).first()
         if user is not None and user.verify_password(login_form.password.data):
             login_user(user, login_form.remember_me.data)
             next = request.args.get('next')
@@ -32,8 +30,3 @@ def dashboard():
 @main.route('/poster')
 def poster():
     return render_template('main/poster.html.j2', title='Dienste und Prozesse')
-
-
-@main.route('/poster2')
-def poster2():
-    return render_template('main/poster2.html.j2', title='Dienste und Prozesse')
diff --git a/app/profile/forms.py b/app/profile/forms.py
index 840e30cf..756875a2 100644
--- a/app/profile/forms.py
+++ b/app/profile/forms.py
@@ -1,44 +1,38 @@
-from app.models import User
 from flask_wtf import FlaskForm
-from wtforms import (PasswordField, StringField, SubmitField,
-                     ValidationError, BooleanField)
-from wtforms.validators import DataRequired, EqualTo, Email
+from wtforms import (BooleanField, PasswordField, StringField, SubmitField,
+                     ValidationError)
+from wtforms.validators import DataRequired, Email, EqualTo
 
 
-class ChangePasswordForm(FlaskForm):
-    """
-    Form to change information of currently logged in User. User can change
-    informations about him on his own.
-    """
-    old_password = PasswordField('Old password', validators=[DataRequired()])
-    new_password = PasswordField(
+class EditEmailForm(FlaskForm):
+    email = StringField('New email', validators=[Email(), DataRequired()])
+    save_email = SubmitField('Save Email')
+
+
+class EditGeneralSettingsForm(FlaskForm):
+    dark_mode = BooleanField('Dark mode')
+    save_settings = SubmitField('Save Settings')
+
+
+class EditPasswordForm(FlaskForm):
+    current_password = PasswordField('Current password',
+                                     validators=[DataRequired()])
+    password = PasswordField(
         'New password',
-        validators=[DataRequired(),
-                    EqualTo('new_password2', message='Passwords must match.')]
+        validators=[DataRequired(), EqualTo('password_confirmation',
+                                            message='Passwords must match.')]
     )
-    new_password2 = PasswordField(
-        'Confirm new password',
+    password_confirmation = PasswordField(
+        'Password confirmation',
         validators=[DataRequired(),
-                    EqualTo('new_password', message='Passwords must match.')]
+                    EqualTo('password', message='Passwords must match.')]
     )
-    submit = SubmitField('Update Password')
-
-
-class EditProfileForm(FlaskForm):
-    email = StringField('Change Email',
-                        validators=[Email(), DataRequired()])
-    submit = SubmitField('Change Email')
+    save_password = SubmitField('Save Password')
 
     def __init__(self, user, *args, **kwargs):
-        super(EditProfileForm, self).__init__(*args, **kwargs)
+        super(EditPasswordForm, self).__init__(*args, **kwargs)
         self.user = user
 
-    def validate_email(self, field):
-        if field.data != self.user.email and \
-                User.query.filter_by(email=field.data).first():
-            raise ValidationError('Email already registered!')
-
-
-class EditUserSettingsForm(FlaskForm):
-    is_dark = BooleanField('Dark Mode')
-    submit = SubmitField('Save Settings')
+    def validate_current_password(self, field):
+        if not self.user.verify_password(field.data):
+            raise ValidationError('Invalid password.')
diff --git a/app/profile/views.py b/app/profile/views.py
index fd83917b..3033020f 100644
--- a/app/profile/views.py
+++ b/app/profile/views.py
@@ -1,102 +1,65 @@
-from app import db, logger
-from flask import abort, current_app, flash, redirect, render_template, url_for
+from app import db
+from flask import current_app, flash, redirect, render_template, url_for
 from flask_login import current_user, login_required, logout_user
 from threading import Thread
 from . import profile
 from .background_functions import delete_user_
-from .forms import ChangePasswordForm, EditProfileForm, EditUserSettingsForm
+from .forms import EditEmailForm, EditGeneralSettingsForm, EditPasswordForm
 
 
-@profile.route('/', methods=['GET', 'POST'])
+@profile.route('/settings', methods=['GET', 'POST'])
 @login_required
-def index():
-    """
-    View where loged in User can change own User information like Password etc.
-    """
-    edit_user_info_form = EditProfileForm(user=current_user)
-    edit_user_info_form.email.data = current_user.email
-    return render_template('profile/index.html.j2',
-                           change_password_form=ChangePasswordForm(),
-                           edit_user_info_form=edit_user_info_form,
-                           edit_user_settings_form=EditUserSettingsForm(),
-                           title='Profile')
-
-
-@profile.route('/change_password', methods=['POST'])
-@login_required
-def profile_change_password():
-    edit_user_info_form = EditProfileForm(user=current_user)
-    change_password_form = ChangePasswordForm()
-    if change_password_form.validate_on_submit():
-        if current_user.verify_password(change_password_form.old_password.data):
-            current_user.password = change_password_form.new_password.data
-            db.session.add(current_user)
-            db.session.commit()
-            flash('Your password has been updated.')
-            return render_template('profile/index.html.j2',
-                                   change_password_form=change_password_form,
-                                   edit_user_info_form=edit_user_info_form,
-                                   edit_user_settings_form=EditUserSettingsForm(),
-                                   title='Profile')
-    else:
-        flash('Invalid password.')
-    return render_template('profile/index.html.j2',
-                           change_password_form=change_password_form,
-                           edit_user_info_form=edit_user_info_form,
-                           edit_user_settings_form=EditUserSettingsForm(),
-                           title='Profile')
-
-
-@profile.route('/edit_user_info', methods=['POST'])
-@login_required
-def profile_edit_user_info():
-    edit_user_info_form = EditProfileForm(user=current_user)
-    if edit_user_info_form.validate_on_submit():
-        current_user.email = edit_user_info_form.email.data
-        db.session.add(current_user._get_current_object())
+def settings():
+    edit_email_form = EditEmailForm(prefix='edit-email-form')
+    edit_general_settings_form = EditGeneralSettingsForm(
+        prefix='edit-settings-form'
+    )
+    edit_password_form = EditPasswordForm(prefix='edit-password-form',
+                                          user=current_user)
+    # Check if edit_email_form is submitted and valid
+    if (edit_email_form.save_email.data
+            and edit_email_form.validate_on_submit()):
+        db.session.add(current_user)
         db.session.commit()
-        flash('Your email has been updated.')
-    else:
-        logger.warning('Form: {}'.format(edit_user_info_form.errors))
-        return render_template('profile/index.html.j2',
-                               change_password_form=ChangePasswordForm(),
-                               edit_user_info_form=edit_user_info_form,
-                               edit_user_settings_form=EditUserSettingsForm(),
-                               title='Profile')
-    edit_user_info_form.email.data = current_user.email
-    return render_template('profile/index.html.j2',
-                           change_password_form=ChangePasswordForm(),
-                           edit_user_info_form=EditProfileForm(user=current_user),
-                           edit_user_settings_form=EditUserSettingsForm(),
-                           title='Profile')
+        flash('Your email address has been updated.')
+        return redirect(url_for('profile.settings'))
+    # Check if edit_settings_form is submitted and valid
+    if (edit_general_settings_form.save_settings.data
+            and edit_general_settings_form.validate_on_submit()):
+        current_user.is_dark = edit_general_settings_form.dark_mode.data
+        db.session.add(current_user)
+        db.session.commit()
+        flash('Your settings have been updated.')
+        return redirect(url_for('profile.settings'))
+    # Check if edit_password_form is submitted and valid
+    if (edit_password_form.save_password.data
+            and edit_password_form.validate_on_submit()):
+        current_user.password = edit_password_form.password.data
+        db.session.add(current_user)
+        db.session.commit()
+        flash('Your password has been updated.')
+        return redirect(url_for('profile.settings'))
+    # If no form is submitted or valid, fill out fields with current values
+    edit_email_form.email.data = current_user.email
+    edit_general_settings_form.dark_mode.data = current_user.is_dark
+    return render_template(
+        'profile/settings.html.j2',
+        edit_email_form=edit_email_form,
+        edit_password_form=edit_password_form,
+        edit_general_settings_form=edit_general_settings_form,
+        title='Settings'
+    )
 
 
-@profile.route('/edit_user_settings', methods=['POST'])
+@profile.route('/delete', methods=['GET', 'POST'])
 @login_required
-def profile_edit_user_settings():
-    edit_user_settings_form = EditUserSettingsForm()
-    if not edit_user_settings_form.validate_on_submit():
-        abort(400)
-    current_user.is_dark = edit_user_settings_form.is_dark.data
-    logger.warning('Form data: {}'.format(current_user.is_dark))
-    db.session.add(current_user)
-    db.session.commit()
-    if current_user.is_dark is True:
-        flash('Dark mode has been activated!')
-    else:
-        flash('Dark mode has been deactivated!')
-    return redirect(url_for('profile.index'))
-
-
-@profile.route('/delete_self', methods=['GET', 'POST'])
-@login_required
-def delete_self():
+def delete():
     """
     View to delete yourslef and all associated data.
     """
+    logout_user()
     thread = Thread(target=delete_user_,
                     args=(current_app._get_current_object(), current_user.id))
     thread.start()
-    logout_user()
     flash('Your account has been deleted!')
     return redirect(url_for('main.index'))
diff --git a/app/templates/nopaque.html.j2 b/app/templates/nopaque.html.j2
index 6cf6f9b7..dc7ad1a1 100644
--- a/app/templates/nopaque.html.j2
+++ b/app/templates/nopaque.html.j2
@@ -48,7 +48,7 @@
       </div>
       <ul id="nav-account-dropdown" class="dropdown-content">
         {% if current_user.is_authenticated %}
-        <li><a href="{{ url_for('profile.index') }}"><i class="material-icons">settings</i>Settings</a></li>
+        <li><a href="{{ url_for('profile.settings') }}"><i class="material-icons">settings</i>Settings</a></li>
         <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
         {% else %}
         <li><a href="{{ url_for('main.index', _anchor='registration-and-log-in') }}"><i class="material-icons">person</i>Log in</a></li>
@@ -74,7 +74,7 @@
         <li><div class="divider"></div></li>
         <li><a class="subheader">Account</a></li>
         {% if current_user.is_authenticated %}
-        <li><a href="{{ url_for('profile.index') }}"><i class="material-icons">settings</i>Settings</a></li>
+        <li><a href="{{ url_for('profile.settings') }}"><i class="material-icons">settings</i>Settings</a></li>
         <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
         {% else %}
         <li><a href="{{ url_for('main.index') }}"><i class="material-icons">person</i>Log in</a></li>
diff --git a/app/templates/profile/index.html.j2 b/app/templates/profile/index.html.j2
deleted file mode 100644
index da47e065..00000000
--- a/app/templates/profile/index.html.j2
+++ /dev/null
@@ -1,130 +0,0 @@
-{% extends "nopaque.html.j2" %}
-
-{% block page_content %}
-<div class="col s12 m4">
-  <h3>Dark Mode</h3>
-  <p>Activate Dark Mode to ease your eyes!</p>
-</div>
-<div class="col s12 m8">
-  <div class="card">
-    <div class="card-content">
-      <form action="{{ url_for('profile.profile_edit_user_settings') }}" method="POST">
-        {{ edit_user_settings_form.hidden_tag() }}
-        <div class="switch">
-          <i class="material-icons prefix">brightness_3</i>
-          Dark Mode:
-          <label class="active" for="{{edit_user_settings_form.is_dark.name}}">
-            Off
-            {% if current_user.is_dark == True %}
-              <input type="checkbox" id="{{edit_user_settings_form.is_dark.name}}" name="{{edit_user_settings_form.is_dark.name}}" checked="checked">
-            {% else %}
-              <input type="checkbox" id="{{edit_user_settings_form.is_dark.name}}" name="{{edit_user_settings_form.is_dark.name}}">
-            {% endif %}
-            <span class="lever"></span>
-            On
-          </label>
-        </div>
-      </div>
-      <div class="card-action right-align">
-        {{ edit_user_settings_form.submit(class='btn') }}
-      </div>
-    </form>
-  </div>
-</div>
-<div class="col s12"></div>
-<div class="col s12 m4">
-  <h3>Change password</h3>
-  <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,</p>
-</div>
-<div class="col s12 m8">
-  <div class="card">
-    <form action="{{ url_for('profile.profile_change_password') }}" method="POST">
-      <div class="card-content">
-        {{ change_password_form.hidden_tag() }}
-        <div class="input-field ">
-          <i class="material-icons prefix">vpn_key</i>
-          {{ change_password_form.old_password() }}
-          {{ change_password_form.old_password.label }}
-          {% for error in change_password_form.old_password.errors %}
-            <span class="helper-text red-text">{{ error }}</span>
-          {% endfor %}
-        </div>
-        <div class="input-field">
-          <i class="material-icons prefix">vpn_key</i>
-          {{ change_password_form.new_password() }}
-          {{ change_password_form.new_password.label }}
-          {% for error in change_password_form.new_password.errors %}
-            <span class="helper-text red-text">{{ error }}</span>
-          {% endfor %}
-        </div>
-        <div class="input-field">
-          <i class="material-icons prefix">vpn_key</i>
-          {{ change_password_form.new_password2() }}
-          {{ change_password_form.new_password2.label }}
-          {% for error in change_password_form.new_password2.errors %}
-            <span class="helper-text red-text">{{ error }}</span>
-          {% endfor %}
-        </div>
-      </div>
-      <div class="card-action right-align">
-        {{ change_password_form.submit(class='btn') }}
-      </div>
-    </form>
-  </div>
-</div>
-<div class="col s12"></div>
-<div class="col s12 m4">
-  <h3>Change email</h3>
-  <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,</p>
-</div>
-<div class="col s12 m8">
-  <div class="card">
-    <form action="{{ url_for('profile.profile_edit_user_info')}}" method="POST">
-      <div class="card-content">
-        {{ edit_user_info_form.hidden_tag() }}
-        <div class="input-field">
-          <i class="material-icons prefix">mail</i>
-          {{ edit_user_info_form.email() }}
-          {{ edit_user_info_form.email.label }}
-          {% for error in edit_user_info_form.email.errors %}
-            <span class="helper-text red-text">{{ error }}</span>
-          {% endfor %}
-        </div>
-      </div>
-      <div class="card-action right-align">
-        {{ edit_user_info_form.submit(class='btn') }}
-      </div>
-    </form>
-  </div>
-</div>
-<div class="col s12"></div>
-<div class="col s12 m4">
-  <h3>Delete Account</h3>
-  <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,</p>
-</div>
-<div class="col s12 m8">
-  <div class="card">
-    <div class="card-content">
-      <!-- Confirm deletion of selected user with modal dialogue
-    Modal Trigger-->
-  </div>
-    <div class="card-action right-align">
-      <a href="#modal-confirm-delete" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete User</a>
-    </div>
-      <!-- Modal Strucutre -->
-      <div id="modal-confirm-delete" class="modal">
-        <div class="modal-content">
-          <h4>Confirm deletion</h4>
-            <p>
-              Do you really want to delete your account and all associated data?
-              All associated jobs and job files will be permanently deleted!
-            </p>
-        </div>
-        <div class="modal-footer">
-          <a href="{{url_for('profile.delete_self', user_id=current_user.id)}}" class="modal-close waves-effect waves-green btn red"><i class="material-icons left">delete</i>Delete User</a>
-          <a href="#!" class="modal-close waves-effect waves-green btn cancel">Cancel</a>
-        </div>
-      </div>
-  </div>
-</div>
-{% endblock %}
diff --git a/app/templates/profile/settings.html.j2 b/app/templates/profile/settings.html.j2
new file mode 100644
index 00000000..13d5376b
--- /dev/null
+++ b/app/templates/profile/settings.html.j2
@@ -0,0 +1,149 @@
+{% extends "nopaque.html.j2" %}
+
+{% block page_content %}
+<div class="col s12 m4">
+  <h3>General settings</h3>
+</div>
+<div class="col s12 m8">
+  <br class="hide-on-small-only">
+  <div class="card">
+    <div class="card-content">
+      <form method="POST">
+        {{ edit_general_settings_form.hidden_tag() }}
+        <div class="row">
+          <div class="col s9">
+            <p><i class="material-icons left">brightness_3</i>{{ edit_general_settings_form.dark_mode.label.text }}</p>
+            <p class="light">Activate dark mode to ease your eyes.</p>
+          </div>
+          <div class="col s3 right-align">
+            <div class="switch">
+              <label>
+                {{ edit_general_settings_form.dark_mode() }}
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+          <!--
+          Seperate each setting with the following two elements
+          <div class="col s12 divider"></div>
+          <div class="col s12"><p>&nbsp;</p></div>
+          -->
+        </div>
+      </div>
+      <div class="card-action right-align">
+        {{ edit_general_settings_form.save_settings(class='btn') }}
+      </div>
+    </form>
+  </div>
+</div>
+
+
+<div class="col s12"></div>
+
+
+<div class="col s12 m4">
+  <h3>Change password</h3>
+</div>
+<div class="col s12 m8">
+  <br class="hide-on-small-only">
+  <div class="card">
+    <form method="POST">
+      <div class="card-content">
+        {{ edit_password_form.hidden_tag() }}
+        <div class="input-field ">
+          <i class="material-icons prefix">vpn_key</i>
+          {{ edit_password_form.current_password() }}
+          {{ edit_password_form.current_password.label }}
+          {% for error in edit_password_form.current_password.errors %}
+            <span class="helper-text red-text">{{ error }}</span>
+          {% endfor %}
+        </div>
+        <div class="input-field">
+          <i class="material-icons prefix">vpn_key</i>
+          {{ edit_password_form.password() }}
+          {{ edit_password_form.password.label }}
+          {% for error in edit_password_form.password.errors %}
+            <span class="helper-text red-text">{{ error }}</span>
+          {% endfor %}
+        </div>
+        <div class="input-field">
+          <i class="material-icons prefix">vpn_key</i>
+          {{ edit_password_form.password_confirmation() }}
+          {{ edit_password_form.password_confirmation.label }}
+          {% for error in edit_password_form.password_confirmation.errors %}
+            <span class="helper-text red-text">{{ error }}</span>
+          {% endfor %}
+        </div>
+      </div>
+      <div class="card-action right-align">
+        {{ edit_password_form.save_password(class='btn') }}
+      </div>
+    </form>
+  </div>
+</div>
+
+
+<div class="col s12"></div>
+
+
+<div class="col s12 m4">
+  <h3>Change email</h3>
+</div>
+<div class="col s12 m8">
+  <br class="hide-on-small-only">
+  <div class="card">
+    <form method="POST">
+      <div class="card-content">
+        {{ edit_email_form.hidden_tag() }}
+        <div class="input-field">
+          <i class="material-icons prefix">mail</i>
+          {{ edit_email_form.email() }}
+          {{ edit_email_form.email.label }}
+          {% for error in edit_email_form.email.errors %}
+            <span class="helper-text red-text">{{ error }}</span>
+          {% endfor %}
+        </div>
+      </div>
+      <div class="card-action right-align">
+        {{ edit_email_form.save_email(class='btn') }}
+      </div>
+    </form>
+  </div>
+</div>
+
+
+<div class="col s12"></div>
+
+
+<div class="col s12 m4">
+  <h3>Delete account</h3>
+</div>
+<div class="col s12 m8">
+  <br class="hide-on-small-only">
+  <div class="card">
+    <div class="card-content">
+      <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 href="#delete-account-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete</a>
+    </div>
+  </div>
+</div>
+
+
+<!-- Modals -->
+<div class="modal" id="delete-account-modal">
+  <div class="modal-content">
+    <h4>Confirm deletion</h4>
+    <p>Do you really want to delete your account and all associated data? All associated jobs and job files will be permanently deleted!</p>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-light btn">Cancel</a>
+    <a href="{{ url_for('profile.delete') }}" class="btn red waves-effect waves-light"><i class="material-icons left">delete</i>Delete User</a>
+  </div>
+</div>
+{% endblock %}