Add toast notifications

- Add toast notification
- Add toast notification usage in case of AJAX issues and success

web/css/controls.css

@@ -349,4 +349,48 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+}
+
+.toast {
+    position: absolute;
+    top: 0;
+    left:0;
+    right:0;
+    padding: var(--base-text-padding);
+    text-align: center;
+}
+
+.toast.visible {
+    opacity: 1;
+    visibility: visible;
+    transition: visibility 0s, opacity 0.5s linear;
+    -webkit-transition: visibility 0s, opacity 0.5s linear;
+    -moz-transition: visibility 0s, opacity 0.5s linear;
+    -o-transition: visibility 0s, opacity 0.5s linear;
+    -ms-transition: visibility 0s, opacity 0.5s linear;
+}
+
+.toast.hidden {
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0.5s, opacity 0.5s linear;
+    -webkit-transition: visibility 0.5s, opacity 0.5s linear;
+    -moz-transition: visibility 0.5s, opacity 0.5s linear;
+    -o-transition: visibility 0.5s, opacity 0.5s linear;
+    -ms-transition: visibility 0.5s, opacity 0.5s linear;
+}
+
+.toast.normal {
+    background-color: var(--primary-color);
+    color: var(--secondary-text-color);
+}
+
+.toast.warning {
+    background-color: var(--invalid-color);
+    color: var(--primary-text-color);
+}
+
+.toast.critical {
+    background-color: var(--bad-color);
+    color: var(--secondary-text-color);
 }

web/css/styles.css

@@ -130,4 +130,11 @@ body {
     border: none;
     margin: 8px 0;
     font-size: var(--normal-text-size);
+}
+
+.toast {
+    background-color: var(--bg-color);
+    box-shadow: var(--level2-shadow);
+    border-bottom-left-radius: var(--default-radius);
+    border-bottom-right-radius: var(--default-radius);
 }

web/js/index.js

@@ -210,6 +210,7 @@ function requestMail(mailId) {
             error: function(jqXHR, textStatus, errorThrown) {
                 $("#mailDetails").html(textStatus)
                 setDetailsVisible(true)
+                showToast(Severity.Critical, "Unable to open mail: " + errorThrown + " " + textStatus)
             }
         })
     }
@@ -232,7 +233,7 @@ function loadFolders() {
             $("#folders").html(folderList.html)
         },
         error: function(jqXHR, textStatus, errorThrown) {
-            //TODO: some toast message here once implemented
+            showToast(Severity.Critical, "Unable to update folder list: " + errorThrown + " " + textStatus)
         }
     })
 }
@@ -254,7 +255,7 @@ function folderStat(folder) {
             }
         },
         error: function(jqXHR, textStatus, errorThrown) {
-            //TODO: some toast message here once implemented
+            showToast(Severity.Critical, "Unable to update folder list: " + errorThrown + " " + textStatus)
         }
     })
 }
@@ -274,7 +275,7 @@ function loadStatusLine() {
             $("#statusLine").html(result)
         },
         error: function(jqXHR, textStatus, errorThrown) {
-            //TODO: some toast message here once implemented
+            showToast(Severity.Critical, "Unable to load status line: " + errorThrown + " " + textStatus)
         }
     })
 }
@@ -485,9 +486,10 @@ function sendNewMail(force) {
             $("#newMailSubject").val("")
             $("#newMailTo").val("")
             closeMailNew()
+            showToast(Severity.Normal, "Email succesfully send")
         },
         error: function(jqXHR, textStatus, errorThrown) {
-            //TODO: some toast message here once implemented
+            showToast(Severity.Critical, "Unable to send email: " + errorThrown + " " + textStatus)
         }
     })
 }
@@ -510,16 +512,12 @@ function connectNotifier() {
         protocol = "ws://"
     }
     notifierSocket = new WebSocket(protocol + window.location.host + mailbox + "/notifierSubscribe")
-    notifierSocket.onopen = function() {
-    };
     notifierSocket.onmessage = function (e) {
         for (var i = 0; i < folders.length; i++) {
             folderStat(folders[i])
         }
         updateMailList(currentFolder, currentPage)
     }
-    notifierSocket.onclose = function () {
-    }
 }
 
 window.onbeforeunload = function() {

web/js/notifications.js

@@ -0,0 +1,40 @@
+const Severity = {
+    Normal: 1,
+    Warning: 2,
+    Critical: 3,
+}
+
+function showToast(severity, text) {
+    var toast = $('#toast')
+    if (!toast.length) {
+        $('body').append('<div id="toast" class="toast hidden"></div>')
+        toast = $('#toast')
+    }
+
+    toast.text(text)
+
+    toast.removeClass("normal")
+    toast.removeClass("warning")
+    toast.removeClass("critical")
+
+    switch(severity) {
+        case Severity.Warning:
+            toast.addClass("warning")
+            break
+        case Severity.Critical:
+            toast.addClass("critical")
+            break
+        case Severity.Normal:
+        default:
+            toast.addClass("normal")
+            break
+    }
+
+
+    toast.removeClass("hidden")
+    toast.addClass("visible")
+    setTimeout(function() {
+        toast.removeClass("visible")
+        toast.addClass("hidden")
+    }, 2000)
+}

web/templates/index.html

@@ -8,6 +8,7 @@
         <link type="text/css" href="/css/styles.css" rel="stylesheet">
         <link type="text/css" href="/css/controls.css" rel="stylesheet">
         <script src="/js/jquery-3.4.1.min.js"></script>
+        <script src="/js/notifications.js" type="text/javascript"></script>
         <script src="/js/index.js" type="text/javascript"></script>
         <title>Gostfix mail {{.Version}}</title>
     </head>

web/templates/login.html

@@ -8,6 +8,7 @@
         <link type="text/css" href="/css/styles.css" rel="stylesheet">
         <link type="text/css" href="/css/controls.css" rel="stylesheet">
         <script src="/js/jquery-3.4.1.min.js"></script>
+        <script src="/js/notifications.js" type="text/javascript"></script>
         <title>Gostfix mail {{.Version}}</title>
     </head>
     <body>

web/templates/settings.html

@@ -9,6 +9,7 @@
         <link type="text/css" href="/css/controls.css" rel="stylesheet">
         <script src="/js/jquery-3.4.1.min.js"></script>
         <script src="/js/forms.js"></script>
+        <script src="/js/notifications.js"></script>
         <script>
             $(document).ready(function() {
                 initControls()
@@ -23,10 +24,10 @@
                     url: "/update",
                     data: formValue,
                     success: function(result) {
-                        console.log("update ok")
+                        showToast(Severity.Normal, "User information updated successfully")
                     },
                     error: function(jqXHR, textStatus, errorThrown) {
-                        console.log("Update failed: " + textStatus)
+                        showToast(Severity.Warning, "Unable to udapte user information: " + errorThrown + " " + textStatus)
                     }
                 })
             }