Added a better, prettier error page

Author: RamZallan

conditional/__init__.py

@@ -1,7 +1,6 @@
 import os
 import subprocess
-from flask import Flask
-from flask import redirect
+from flask import Flask, redirect, request
 from flask_sqlalchemy import SQLAlchemy
 from flask_migrate import Migrate
 from csh_ldap import CSHLDAP
@@ -52,6 +51,8 @@
 app.register_blueprint(slideshow_bp)
 app.register_blueprint(cache_bp)
 
+from conditional.util.flask import render_template
+from conditional.util.ldap import ldap_get_member
 
 @app.route('/<path:path>')
 def static_proxy(path):
@@ -63,6 +64,20 @@ def static_proxy(path):
 def default_route():
     return redirect('/dashboard')
 
+@app.errorhandler(404)
+@app.errorhandler(500)
+def route_errors(error):
+    username = request.headers.get('x-webauth-user')
+    member = ldap_get_member(username)
+    data = dict()
+    data['username'] = member.uid
+    data['name'] = member.cn
+    code = error.code
+    return render_template(request=request,
+                            template_name='404.html',
+                            error=str(error),
+                            error_code=code,
+                            **data), 404
 
 @app.cli.command()
 def zoo():

conditional/templates/404.html

@@ -0,0 +1,15 @@
+{% extends "nav.html" %}
+{% block title %}
+{{ error_code }}
+{% endblock %}
+{% block body %}
+<div class="container main error-page align-center">
+    <div class="col-xs-12">
+        <img src="/static/images/material_attention.svg" alt="Attention!">
+        <h1>Congratulations or I'm Sorry...</h1>
+        <h2>Something has gone terribly wrong!</h2>
+        <h3>The following error has been reported:</h3>
+        <p>{{ error }}</p>
+    </div>
+</div>
+{% endblock %}

frontend/images/material_attention.svg

@@ -25,4 +25,5 @@
 @import 'pages/management';
 @import 'pages/hm-attendance';
 @import 'pages/attendance-hist';
+@import 'pages/errors';
 @import 'components/reveal';

frontend/stylesheets/app.scss

@@ -0,0 +1,36 @@
+.error-page {
+  padding-top: 80px;
+
+  .glyphicon,
+  h1,
+  h2,
+  h3,
+  p {
+    color: #878787;
+  }
+
+  img {
+    margin-bottom: 40px;
+    width: 200px;
+  }
+
+  h1 {
+    font-size: 50px;
+    font-weight: bolder;
+  }
+
+  h2 {
+    margin-bottom: 80px;
+    font-size: 30px;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 25px;
+  }
+
+  p {
+    font-size: 20px;
+    font-weight: lighter;
+  }
+}