add color to flashes

3 files changed, 28 insertions, 6 deletions

diff --git a/app.py b/app.py
index 4a18226..0d56298 100644
--- a/app.py
+++ b/app.py
@@ -37,7 +37,7 @@ def index():
     form = LoginForm(request.form)
     if request.method == 'POST' and form.validate():
         if login_user(form.username.data, form.password.data):
-            flash(u'Erfolgreich eingeloggt (als %s)' % session['username'])
+            flash(u'Erfolgreich eingeloggt (als %s)' % session['username'], 'success')
             return redirect(url_for('settings'))
         else:
             flash(u'Ungültiger Benutzername und/oder Passwort', 'error')
@@ -124,7 +124,7 @@ def settings():
 
         if changed:
             g.ldap.update(g.user)
-            flash(u'%s geändert' % u' und '.join(changed))
+            flash(u'%s geändert' % u' und '.join(changed), 'success')
 
             return redirect(url_for('settings'))
 
diff --git a/static/layout.css b/static/layout.css
index 730d79f..2d7be98 100644
--- a/static/layout.css
+++ b/static/layout.css
@@ -2,6 +2,28 @@ form .errors {
     color: #D00;
 }
 
+ul.flashes {
+    padding-left: 0;
+}
+ul.flashes li {
+    list-style: none;
+    margin-left: 0;
+    display: block;
+    padding: .2em .4em;
+
+    border: 1px solid #ee3;
+    background-color: #ffd;
+}
+ul.flashes li.error {
+    border-color: #e33;
+    background-color: #fdd;
+}
+ul.flashes li.success {
+    border-color: #3e3;
+    background-color: #dfd;
+}
+
+
 body {
   margin: 0 auto;
   width: 640px;
diff --git a/templates/base.html b/templates/base.html
index 22c16f0..1873dd3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -25,11 +25,11 @@
     <p>Not logged in. <a href="{{ url_for('index') }}">Log in</a></p>
     {%- endif %}
 
-    {% with messages = get_flashed_messages() %}
+    {% with messages = get_flashed_messages(with_categories=true) %}
       {% if messages %}
-        <ul class=flashes>
-        {% for message in messages %}
-          <li>{{ message }}</li>
+        <ul class="flashes">
+        {% for category, message in messages %}
+        <li class="{{ category }}">{{ message }}</li>
         {% endfor %}
         </ul>
       {% endif %}