better CSRF handling; restyle account page

4 files changed, 43 insertions, 5 deletions

diff --git a/python/fatcat_web/routes.py b/python/fatcat_web/routes.py
index c4152188..ba86fc6a 100644
--- a/python/fatcat_web/routes.py
+++ b/python/fatcat_web/routes.py
@@ -4,6 +4,7 @@ import json
 from flask import Flask, render_template, send_from_directory, request, \
     url_for, abort, g, redirect, jsonify, session, flash, Response
 from flask_login import login_required
+from flask_wtf.csrf import CSRFError
 
 from fatcat_client import Editgroup
 from fatcat_client.rest import ApiException
@@ -490,6 +491,7 @@ def token_login():
 @app.route('/auth/change_username', methods=['POST'])
 @login_required
 def change_username():
+    app.csrf.protect()
     # show the user a list of login options
     if not 'username' in request.form:
         abort(400)
@@ -529,6 +531,10 @@ def page_not_found(e):
 def page_not_authorized(e):
     return render_template('403.html'), 403
 
+@app.errorhandler(405)
+def page_method_not_allowed(e):
+    return render_template('405.html'), 405
+
 @app.errorhandler(400)
 def page_bad_request(e):
     return render_template('400.html'), 400
@@ -547,6 +553,10 @@ def page_server_error(e):
 def page_server_down(e):
     return render_template('503.html'), 503
 
+@app.errorhandler(CSRFError)
+def page_csrf_error(e):
+    return render_template('csrf_error.html', reason=e.description), 400
+
 @app.route('/', methods=['GET'])
 def page_home():
     return render_template('home.html')
diff --git a/python/fatcat_web/templates/405.html b/python/fatcat_web/templates/405.html
new file mode 100644
index 00000000..97d21d73
--- /dev/null
+++ b/python/fatcat_web/templates/405.html
@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block body %}
+
+<center>
+<div style="font-size: 8em;">405</div>
+<div style="font-size: 3em;">Method Not Allowed</div>
+
+<p>Either we have a bug, or you tried something weird (like making up a URL).
+
+</center>
+
+{% endblock %}
diff --git a/python/fatcat_web/templates/auth_account.html b/python/fatcat_web/templates/auth_account.html
index 57155722..0311c538 100644
--- a/python/fatcat_web/templates/auth_account.html
+++ b/python/fatcat_web/templates/auth_account.html
@@ -1,23 +1,29 @@
 {% extends "base.html" %}
 {% block body %}
 
-<h1>Your Account</h1>
+<h1 class="ui header">
+  <i class="user icon"></i>
+  Account Settings
+</h1>
 
 <p><b>Username:</b> <code>{{ current_user.username }}</code>
 <p><b>Editor Id:</b> <code><a href="/editor/{{ current_user.editor_id }}">{{ current_user.editor_id }}</a></code>
 
-<div>
-<p>Change username:
+<br>
+<div class="ui segment">
+<h3 class="ui header">Change Username</h3>
 <form class="" role="change_username" action="/auth/change_username" method="post">
+  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
   <div class="ui form">
-      <div class="ui action input medium fluid">
+    <div class="ui action input medium">
       <input type="text" name="username" value="{{ current_user.username }}" aria-label="account username">
-      <button class="ui button">Update</button>
+      <button class="ui red button">Update</button>
     </div>
   </div>
 </form>
 </div>
 
+<br>
 <p>In the future, you might be able to...
 <ul>
   <li>Create a bot user
diff --git a/python/fatcat_web/templates/csrf_error.html b/python/fatcat_web/templates/csrf_error.html
new file mode 100644
index 00000000..357f9047
--- /dev/null
+++ b/python/fatcat_web/templates/csrf_error.html
@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+{% block body %}
+
+<center>
+<div style="font-size: 8em;">400</div>
+<div style="font-size: 3em;">Cross-Site Scripting Error</div>
+{{ reason }}
+</center>
+
+{% endblock %}