token expiry and other errors are reported in web frontend with alerts. Later, the alterts must be replaced with a js notification library

chatto/src/main/java/org/ros/chatto/security/TokenAuthenticationFilter.java

@@ -99,6 +99,7 @@ public class TokenAuthenticationFilter extends OncePerRequestFilter {
 					TokenCacheUtil.evictSingleTokenValue(userToken.getTokenContent());
 					response.setHeader(HttpHeaders.CONTENT_TYPE, MediaType.TEXT_PLAIN_VALUE);
 					response.setStatus(440);
+//					response.sendError(440, "Token authentication error: Token has expired");
 					response.getWriter().write("Token authentication error: Token has expired");
 					logger.warn("Token authentication error: Token has expired");
 					return;

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

@@ -59,18 +59,26 @@ for (let i = 0; i < userBoxes.length; i++) {
         let current = document.getElementsByClassName('user-box active');
         let passphrase = passphraseInput.value;
         if (current.length > 0) {
+            if (passphrase == '') {
+                alert('Please input passphrase')
+                return;
+            }
             current[0].className = current[0].className.replace(" active", "");
 
         }
         // Add the active class to the current/clicked button
         else if (current.length == 0) {
-            document.getElementById('no-user-selected').hidden = true;
-            document.getElementById('chat-card').hidden = false;
             let elem = document.getElementById('passphrase-initial');
             passphrase = elem.value;
+            if (passphrase == '') {
+                alert('Please input passphrase')
+                return;
+            }
+            document.getElementById('no-user-selected').hidden = true;
+            document.getElementById('chat-card').hidden = false;
             elem.hidden = true;
         }
-        console.log(this.getElementsByClassName('to-user-span'));
+        // console.log(this.getElementsByClassName('to-user-span'));
         let userName = this.getElementsByClassName('to-user-span')[0].innerText;
         document.getElementById('user-name-span').innerText = userName;
         populateMessages(userName, passphrase);
@@ -91,6 +99,7 @@ function populateMessages(userName, passphrase) {
         chatAreaNew.innerHTML = '';
         getAllMessages(userName)
             .then(json => {
+                if (json == null) return;
                 console.log(json);
                 let i = 0;
                 let messageLog = [];
@@ -153,6 +162,7 @@ function populateMessages(userName, passphrase) {
         if (lastMessageTime != null) {
             getNewMessages(userName, lastMessageTime)
                 .then(json => {
+                    if (json == null) return;
                     console.log(json)
                     if (json.length > 0) {
                         json.forEach(function(obj) {
@@ -331,6 +341,13 @@ async function getAllMessages(toUser) {
         headers: headers
     });
     console.log(response);
+    if (fetchErrorHandler(response.clone())) {
+        return null;
+    }
+    // if (response.status == 440) {
+    //     window.alert('Token has expired. Please login again');
+    //     return null;
+    // }
     let data = await response.json();
     return data;
 }
@@ -343,11 +360,9 @@ async function getNewMessages(toUser, lastMessageTimeStamp) {
         method: 'GET',
         headers: headers
     });
-    console.log(response);
+    console.log(response.clone());
-    if(response.status == 440)
+    if (fetchErrorHandler(response.clone())) {
-    {
+        return null;
-        window.alert('Token has expired. Please login again');
-        return;
     }
     let data = await response.json();
     return data;
@@ -358,3 +373,42 @@ $(document).ready(function() {
         $('.action_menu').toggle();
     });
 });
+
+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 });
+        }).catch(err => {
+            // the status was ok but there is no json body
+            return Promise.resolve({ response: response });
+        });
+
+    } else {
+        return response.json().catch(err => {
+            // the status was not ok and there is no json body
+            throw new Error(response.statusText);
+        }).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
+        });
+    }
+}
+
+
+function fetchErrorHandler(response) {
+    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));
+            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));
+            console.log(json);
+            return true;
+        });
+    }
+}

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

@@ -148,24 +148,6 @@
                         </div>
                     </div>
                     <div class="card-body msg_card_body" id="chat_area_new">
-                        <div class="d-flex justify-content-start mb-4">
-                            <div class="img_cont_msg">
-                                <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
-                            </div>
-                            <div class="msg_container">
-                                Hi, how are you samim?
-                                <span class="msg_time">8:40 AM, Today</span>
-                            </div>
-                        </div>
-                        <div class="d-flex justify-content-end mb-4">
-                            <div class="msg_container_send">
-                                Hi Khalid i am good tnx how about you?
-                                <span class="msg_time_send">8:55 AM, Today</span>
-                            </div>
-                            <div class="img_cont_msg">
-                                <img src="" class="rounded-circle user_img_msg">
-                            </div>
-                        </div>
                     </div>
                     <div class="card-footer">
                         <form action="#" th:object="${chatMessageDTO}" method="post" id="chatMessageForm" class="needs-validation" novalidate>