added alertify.js

chatto/src/main/resources/static/js/chat.js

@@ -39,6 +39,8 @@ var userBoxes = document.getElementsByName('user-box');
 
 var md = window.markdownit();
 
+alertify.set('notifier', 'position', 'top-center');
+
 // Loop through the buttons and add the active class to the current/clicked button
 // for (var i = 0; i < btns.length; i++) {
 //     btns[i].addEventListener("click", function() {
@@ -60,7 +62,8 @@ for (let i = 0; i < userBoxes.length; i++) {
         let passphrase = passphraseInput.value;
         if (current.length > 0) {
             if (passphrase == '') {
-                alert('Please input passphrase')
+                // alert('Please input passphrase')
+                alertify.error('Please enter a passphrase');
                 return;
             }
             current[0].className = current[0].className.replace(" active", "");
@@ -71,7 +74,8 @@ for (let i = 0; i < userBoxes.length; i++) {
             let elem = document.getElementById('passphrase-initial');
             passphrase = elem.value;
             if (passphrase == '') {
-                alert('Please input passphrase')
+                // alert('Please input passphrase')
+                alertify.error('Please enter a passphrase');
                 return;
             }
             document.getElementById('no-user-selected').hidden = true;
@@ -294,7 +298,8 @@ document.getElementById('chatMessageForm').addEventListener('submit', function(e
     this.classList.add('was-validated');
 
     if (user == null) {
-        window.alert('please select a user');
+        // window.alert('please select a user');
+        alertify.error('Please select a user');
         return;
     }
     let messageContent = chatInput.value;
@@ -329,9 +334,9 @@ function messageSend(chatMessageDTO) {
         })
         .then(response => {
             console.log(response);
-            return response;
+            return response.clone();
         })
-        .then(response => fetchErrorHandler(response));
+        .then(response => fetchHandler(response));
 }
 
 
@@ -383,35 +388,49 @@ function fetchHandler(response) {
     if (response.ok) {
         return response.json().then(json => {
             // the status was ok and there is a json body
-            return Promise.resolve({ json: json, response: response });
+            // return Promise.resolve({ json: json, response: response });
+            alertify.success('Message sent succesfully' + sprintf(" (http code %d)", response.status));
         }).catch(err => {
             // the status was ok but there is no json body
-            return Promise.resolve({ response: response });
+            // return Promise.resolve({ response: response });
+            alertify.success('Message sent succesfully' + sprintf(" (http code %d)", response.status));
         });
 
     } else {
         return response.json().catch(err => {
             // the status was not ok and there is no json body
-            throw new Error(response.statusText);
+            // throw new Error(response.statusText);
+            alertify.error('Some error occured. Please try again.');
         }).then(json => {
             // the status was not ok but there is a json body
-            throw new Error(json.error.message); // example error message returned by a REST API
+            // throw new Error(json.error.message); // example error message returned by a REST
+            let delay = alertify.get('notifier', 'delay');
+            alertify.set('notifier', 'delay', 30);
+            let errorMessage = "";
+            json.errors.forEach(function(data) {
+                errorMessage += sprintf("Field Name: %s \n Rejected value: %s \n Reason: %s \n", data.field_name, data.rejected_value, data.error_message);
+            });
+            alertify.error(sprintf('There were errors in your message - %s', errorMessage));
+            alertify.set('notifier', 'delay', delay);
         });
     }
 }
 
 
 function fetchErrorHandler(response) {
+    // alertify.success('Current position : ' + alertify.get('notifier', 'position'));
     if (!response.ok) {
         return response.text().catch(err => {
             // the status was not ok and there is no json body
             // throw new Error(response.statusText);
-            window.alert(sprintf('Some error occured. Http code is %s', response.status));
+            // window.alert(sprintf('Some error occured. Http code is %s', response.status));
+            alertify.error(sprintf('Some error occured. Http code is %s', response.status));
             return true;
         }).then(json => {
             // the status was not ok but there is a json body
             // throw new Error(json.error.message); // example error message returned by a REST API
-            window.alert(sprintf('Error: %s (Http code %s)', json, response.status));
+            // window.alert(sprintf('Error: %s (Http code %s)', json, response.status));
+            alertify.error(sprintf('Some error occured. Http code is %s', response.status));
             console.log(json);
             return true;
         });

chatto/src/main/resources/templates/chat.html

@@ -16,6 +16,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.3/purify.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/alertify.min.js" integrity="sha256-yscIZgtlDR9q6eoYCRmcaiNE6W80UFSnq+6Llwu4NLI=" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/alertify.min.css" integrity="sha256-nhstgDCuZGQRk+wvwXZIPt278arHtuZKJ1YQ0rrXiL4=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/default.css" integrity="sha256-dawRQVhnqw8jRXaGnK0aj/NpOsPaQm+Em1sWN+fvegI=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/bootstrap.css" integrity="sha256-1fgYpB3cyITZIur7E+Mj3R54NtlN9HwHykgKTJf0pmU=" crossorigin="anonymous" />
     <!-- <script th:src="@{js/my_Crypto.js}" type="text/javascript"></script> -->