Replaced Bootstrap alert with Material Design snackbar

package.json

@@ -111,6 +111,7 @@
     "otp": "^0.1.3",
     "popper.js": "^1.12.9",
     "scryptsy": "^2.0.0",
+    "snackbarjs": "^1.1.0",
     "sortablejs": "^1.7.0",
     "split.js": "^1.3.5",
     "ssdeep.js": "0.0.2",

src/web/App.mjs

@@ -105,7 +105,7 @@ class App {
     handleError(err, logToConsole) {
         if (logToConsole) log.error(err);
         const msg = err.displayStr || err.toString();
-        this.alert(msg, "danger", this.options.errorTimeout, !this.options.showErrors);
+        this.alert(msg, this.options.errorTimeout, !this.options.showErrors);
     }
 
 
@@ -319,8 +319,8 @@ class App {
             if (this.operations.hasOwnProperty(favourites[i])) {
                 validFavs.push(favourites[i]);
             } else {
-                this.alert("The operation \"" + Utils.escapeHtml(favourites[i]) +
+                this.alert(`The operation "${Utils.escapeHtml(favourites[i])}" is no longer available. ` +
-                    "\" is no longer available. It has been removed from your favourites.", "info");
+                    "It has been removed from your favourites.");
             }
         }
         return validFavs;
@@ -336,7 +336,6 @@ class App {
         if (!this.isLocalStorageAvailable()) {
             this.alert(
                 "Your security settings do not allow access to local storage so your favourites cannot be saved.",
-                "danger",
                 5000
             );
             return false;
@@ -367,7 +366,7 @@ class App {
         const favourites = JSON.parse(localStorage.favourites);
 
         if (favourites.indexOf(name) >= 0) {
-            this.alert("'" + name + "' is already in your favourites", "info", 2000);
+            this.alert(`'${name}' is already in your favourites`, 3000);
             return;
         }
 
@@ -556,63 +555,35 @@ class App {
      * Pops up a message to the user and writes it to the console log.
      *
      * @param {string} str - The message to display (HTML supported)
-     * @param {string} style - The colour of the popup
+     * @param {number} timeout - The number of milliseconds before the alert closes automatically
-     *     "danger"  = red
-     *     "warning" = amber
-     *     "info"    = blue
-     *     "success" = green
-     * @param {number} timeout - The number of milliseconds before the popup closes automatically
      *     0 for never (until the user closes it)
      * @param {boolean} [silent=false] - Don't show the message in the popup, only print it to the
      *     console
      *
      * @example
-     * // Pops up a red box with the message "[current time] Error: Something has gone wrong!"
+     * // Pops up a box with the message "Error: Something has gone wrong!" that will need to be
-     * // that will need to be dismissed by the user.
+     * // dismissed by the user.
-     * this.alert("Error: Something has gone wrong!", "danger", 0);
+     * this.alert("Error: Something has gone wrong!", 0);
      *
-     * // Pops up a blue information box with the message "[current time] Happy Christmas!"
+     * // Pops up a box with the message "Happy Christmas!" that will disappear after 5 seconds.
-     * // that will disappear after 5 seconds.
+     * this.alert("Happy Christmas!", 5000);
-     * this.alert("Happy Christmas!", "info", 5000);
      */
-    alert(str, style, timeout, silent) {
+    alert(str, timeout, silent) {
         const time = new Date();
 
         log.info("[" + time.toLocaleString() + "] " + str);
         if (silent) return;
 
-        style = style || "danger";
         timeout = timeout || 0;
 
-        const alertEl = document.getElementById("alert"),
+        this.currentSnackbar = $.snackbar({
-            alertContent = document.getElementById("alert-content");
+            content: str,
-
+            timeout: timeout,
-        alertEl.classList.remove("alert-danger");
+            htmlAllowed: true,
-        alertEl.classList.remove("alert-warning");
+            onClose: () => {
-        alertEl.classList.remove("alert-info");
+                this.currentSnackbar.remove();
-        alertEl.classList.remove("alert-success");
-        alertEl.classList.add("alert-" + style);
-
-        // If the box hasn't been closed, append to it rather than replacing
-        if (alertEl.style.display === "block") {
-            alertContent.innerHTML +=
-                "<br><br>[" + time.toLocaleTimeString() + "] " + str;
-        } else {
-            alertContent.innerHTML =
-                "[" + time.toLocaleTimeString() + "] " + str;
-        }
-
-        // Stop the animation if it is in progress
-        $("#alert").stop();
-        alertEl.style.display = "block";
-        alertEl.style.opacity = 1;
-
-        if (timeout > 0) {
-            clearTimeout(this.alertTimeout);
-            this.alertTimeout = setTimeout(function(){
-                $("#alert").slideUp(100);
-            }, timeout);
             }
+        });
     }
 
 
@@ -653,15 +624,6 @@ class App {
     }
 
 
-    /**
-     * Handler for the alert close button click event.
-     * Closes the alert box.
-     */
-    alertCloseClick() {
-        document.getElementById("alert").style.display = "none";
-    }
-
-
     /**
      * Handler for CyerChef statechange events.
      * Fires whenever the input or recipe changes in any way.

src/web/ControlsWaiter.mjs

@@ -211,7 +211,6 @@ class ControlsWaiter {
         if (!this.app.isLocalStorageAvailable()) {
             this.app.alert(
                 "Your security settings do not allow access to local storage so your recipe cannot be saved.",
-                "danger",
                 5000
             );
             return false;
@@ -221,7 +220,7 @@ class ControlsWaiter {
         const recipeStr  = document.querySelector("#save-texts .tab-pane.active textarea").value;
 
         if (!recipeName) {
-            this.app.alert("Please enter a recipe name", "danger", 2000);
+            this.app.alert("Please enter a recipe name", 3000);
             return;
         }
 
@@ -238,7 +237,7 @@ class ControlsWaiter {
         localStorage.savedRecipes = JSON.stringify(savedRecipes);
         localStorage.recipeId = recipeId;
 
-        this.app.alert("Recipe saved as \"" + recipeName + "\".", "success", 2000);
+        this.app.alert(`Recipe saved as "${recipeName}".`, 3000);
     }
 
 
@@ -322,7 +321,7 @@ class ControlsWaiter {
 
             $("#rec-list [data-toggle=popover]").popover();
         } catch (e) {
-            this.app.alert("Invalid recipe", "danger", 2000);
+            this.app.alert("Invalid recipe", 2000);
         }
     }
 

src/web/InputWaiter.mjs

@@ -264,7 +264,7 @@ class InputWaiter {
         }
 
         if (r.hasOwnProperty("error")) {
-            this.app.alert(r.error, "danger", 10000);
+            this.app.alert(r.error, 10000);
         }
 
         if (r.hasOwnProperty("fileBuffer")) {

src/web/Manager.mjs

@@ -183,7 +183,6 @@ class Manager {
 
         // Misc
         window.addEventListener("keydown", this.bindings.parseInput.bind(this.bindings));
-        document.getElementById("alert-close").addEventListener("click", this.app.alertCloseClick.bind(this.app));
     }
 
 

src/web/OutputWaiter.mjs

@@ -267,9 +267,9 @@ class OutputWaiter {
         }
 
         if (success) {
-            this.app.alert("Copied raw output successfully.", "success", 2000);
+            this.app.alert("Copied raw output successfully.", 2000);
         } else {
-            this.app.alert("Sorry, the output could not be copied.", "danger", 2000);
+            this.app.alert("Sorry, the output could not be copied.", 3000);
         }
 
         // Clean up

src/web/RecipeWaiter.mjs

@@ -372,7 +372,7 @@ class RecipeWaiter {
         // Disable auto-bake if this is a manual op
         if (op.manualBake && this.app.autoBake_) {
             this.manager.controls.setAutoBake(false);
-            this.app.alert("Auto-Bake is disabled by default when using this operation.", "info", 5000);
+            this.app.alert("Auto-Bake is disabled by default when using this operation.", 5000);
         }
     }
 

src/web/html/index.html

@@ -146,10 +146,6 @@
         <button type="button" class="btn btn-warning bmd-btn-icon" id="edit-favourites" data-toggle="tooltip" title="Edit favourites">
             <i class="material-icons">star</i>
         </button>
-        <div id="alert" class="alert alert-danger">
-            <button type="button" class="close" id="alert-close">&times;</button>
-            <span id="alert-content"></span>
-        </div>
         <div id="content-wrapper">
             <div id="banner" class="row">
                 <div class="col" style="text-align: left; padding-left: 10px;">

src/web/index.js

@@ -10,6 +10,7 @@ import "./stylesheets/index.js";
 // Libs
 import "babel-polyfill";
 import "arrive";
+import "snackbarjs";
 import "bootstrap-material-design";
 import "bootstrap-colorpicker";
 import moment from "moment-timezone";

src/web/stylesheets/components/_alert.css

@@ -1,22 +0,0 @@
-/**
- * Alert styles
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-#alert {
-    position: fixed;
-    width: 30%;
-    margin: 30px auto;
-    top: 10px;
-    left: 0;
-    right: 0;
-    z-index: 2000;
-    display: none;
-}
-
-#alert a {
-    text-decoration: underline;
-}

src/web/stylesheets/index.css

@@ -19,7 +19,6 @@
 @import "./preloader.css";
 
 /* Components */
-@import "./components/_alert.css";
 @import "./components/_button.css";
 @import "./components/_list.css";
 @import "./components/_operation.css";

src/web/stylesheets/utils/_overrides.css

@@ -90,7 +90,6 @@ a:focus {
 .nav-tabs>li>a,
 .form-control,
 .popover,
-.alert,
 .panel,
 .modal-content,
 .tooltip-inner,