move toasts to toasts.js and add error toast

src/main/resources/static/editor.html

@@ -38,5 +38,6 @@ <h1>Edit User</h1>
         <div class="" id="TOAST_MESSAGE"></div>
     </body>
 
+    <script src="toast.js"></script>
     <script src="editor.js"></script>
 </html>

src/main/resources/static/index.html

@@ -25,10 +25,12 @@
 
             <input class="name_field" id="CREATE_FIELD" placeholder="new user's name...">
             <button onclick="handle_create()">Create User</button>
+            <button onclick="display_list(refresh=true)">Refresh List</button>
         </div>
 
         <div id="TOAST_MESSAGE"></div>
     </body>
 
+    <script src="toast.js"></script>
     <script src="index.js"></script>
 </html>

src/main/resources/static/toast.js

@@ -0,0 +1,26 @@
+var toast_timeout;
+
+/* Show a regular grey toast */
+function show_toast(message) {
+    clearTimeout(toast_timeout);
+    var td = document.getElementById("TOAST_MESSAGE");
+    td.innerHTML = message;
+    td.className = "show";
+    toast_timeout = setTimeout(hide_toast, 3000);
+}
+
+/* Show a red toast for errors */
+function show_error(message) {
+    clearTimeout(toast_timeout);
+    var td = document.getElementById("TOAST_MESSAGE");
+    td.innerHTML = message;
+    td.className = "show error";
+    toast_timeout = setTimeout(hide_toast, 3000);
+}
+
+/* Used by show_toast, 
+    can also be invoked manually to hide the current toast */
+function hide_toast() {
+    var td = document.getElementById("TOAST_MESSAGE");
+    td.className = td.className.replace("show", "hide");
+}