Added flash message to explain why user was redirected when attempting to add a species already in db

main.py

@@ -31,6 +31,7 @@ def import_pages(route, app):
 
 
 app = Flask(__name__, static_folder='static', static_url_path='')
+app.secret_key = "59474221-13e4-43dd-bc07-46a8d051d456"
 
 init_database()
 import_pages("routes", app)

routes/species_portal/species_portal.py

@@ -1,4 +1,4 @@
-from flask import render_template, Blueprint, request, redirect, url_for
+from flask import render_template, Blueprint, request, redirect, url_for, flash
 from database.db_commands import add_species, delete_species, get_species_by_name, get_species_by_id
 import os
 import uuid
@@ -34,6 +34,7 @@ def add_species_to_database():
     except ValueError as error_information:
         species_to_edit = get_species_by_name(request.form["eng_name"].title())
         species_id = species_to_edit['species_id']
+        flash(f"{species_to_edit['species_english']} already exists. You have been redirected to the editor to update it.", "info")
         return redirect(url_for("species_editor.edit_species", species_id=species_id))
     except Exception as error_information:
         return render_template(

static/styles.css

@@ -823,4 +823,27 @@ input:focus {
 
 .species-layout .container{
   flex:1;
+}
+
+/* flash message css please review */
+.flash-container {
+    margin: 20px;
+}
+
+.flash {
+    padding: 12px 16px;
+    margin: 10px;
+    border-radius: 6px;
+    animation: fadeOut 3.5s forwards;
+}
+
+@keyframes fadeOut {
+    0%   { opacity: 1; }
+    80%  { opacity: 1; }
+    100% { opacity: 0; display: none; }
+}
+
+.flash-info {
+    background: var(--background);
+    border: 1px solid var(--primary);
 }

templates/base.jinja

@@ -15,6 +15,17 @@
 
 <body>
     {% include 'navbar.jinja' %}
+    {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+            <div class="flash-container">
+            {% for category, message in messages %}
+                <div class="flash flash-{{ category }}">
+                {{ message }}
+                </div>
+            {% endfor %}
+            </div>
+        {% endif %}
+    {% endwith %}
     <div class="content">
         {% block content %}
         {% endblock %}