Flash alerts

routes.py

@@ -22,7 +22,7 @@ def dashboard():
 @glob.app.route("/login", methods = ["GET", "POST"])
 def login():
 	if flask_login.current_user.is_authenticated:
-		flash("Already logged in")
+		flash("Already logged in", "info")
 		return redirect(url_for("dashboard"))
 
 	form = LoginForm(request.form)
@@ -30,7 +30,7 @@ def login():
 		# TODO: get uuid from database
 		uuid = 0
 		if uuid < 0:
-			flash("Invalid login")
+			flash("Invalid login", "danger")
 			return render_template("login.html", form=form)
 
 		user = User(uuid)
@@ -38,7 +38,7 @@ def login():
 		flask_login.login_user(user)
 		logged_in_users.append(user)
 
-		flash("Logged in")
+		flash("Logged in", "success")
 		return redirect(url_for("dashboard"))
 	return render_template("login.html", form=form)
 
@@ -46,12 +46,12 @@ def login():
 @flask_login.login_required
 def logout():
 	flask_login.logout_user()
-	flash("Logged out")
+	flash("Logged out", "success")
 	return redirect(url_for("login"))
 
 @glob.app.errorhandler(401)
 def unauthorized_handler_err():
-	flash("Login is required")
+	flash("Login is required", "danger")
 	unauthorized_handler()
 
 @login_manager.user_loader

templates/layout/includes/top_nav.html

@@ -33,6 +33,18 @@
 
 <nav class="navbar topnav" style="margin-bottom: 10px;">
     <h3>{{ title }}</h3>
+	<div>
+{% with messages = get_flashed_messages(with_categories = true) %}
+	{% if messages %}
+		{% for category, message in messages %}
+		<div class="alert alert-{{ category }} fade in show" role="alert" style="margin-bottom:0px;padding:6px;">
+			<a href="#" class="close" data-dismiss="alert" aria-label="close" style="margin-left:10px;">&times;</a>
+			{{ message }}
+		</div>
+		{% endfor %}
+	{% endif %}
+{% endwith %}
+	</div>
     <div class="my-2 my-lg-0 d-flex icon-buttons">
         <div class="col">
             <div class="rndblock languk"></div>

templates/login.html

@@ -4,7 +4,6 @@
 
 {% block content %}
 <script src="{{ url_for('static', filename='js/alerts.js') }}"></script>
-
 <div class="container pt-3">
 	<div class="row alert-section">
 		<div class="col-md-8 mx-auto">
@@ -76,4 +75,14 @@
 		</div>
 	</div>
 </div>
+<script>
+{% with messages = get_flashed_messages() %}
+	{% if messages %}
+let alertArea = document.getElementsByClassName("alert-section")[0];
+		{% for message in messages %}
+alertAbove(alertArea, "info", "{{ message }}");
+		{% endfor %}
+	{% endif %}
+{% endwith %}
+</script>
 {% endblock %}