toast on duplicate account

templates/add_account.html

@@ -30,6 +30,17 @@
 
 {% block content %}
     <h1>Add Account</h1>
+    <div aria-live="polite" aria-atomic="true" class="position-fixed top-0 start-50 translate-middle-x w-75 p-3" style="z-index: 1050; margin-top: 20px;">
+        <div id="liveToast" class="toast hide bg-danger text-white" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header bg-danger text-white">
+                <strong class="me-auto">Account Error</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body">
+                {{ error }}
+            </div>
+        </div>
+    </div>
     <div>
     <form action="/accounts/add" method="POST" onsubmit="showLoading()">
         <div class="form-group">
@@ -123,4 +134,16 @@
                 });
         });
     </script>
+    {% if error %}
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            var toastEl = document.getElementById('liveToast');
+            var toast = new bootstrap.Toast(toastEl, {
+                autohide: true,
+                delay: 5000
+            });
+            toast.show();
+        });
+    </script>
+    {% endif %}
 {% endblock %}