show alert when disconnected

net/web/src/User/SideBar/Identity/Identity.jsx

@@ -1,6 +1,6 @@
-import { Avatar, Space, Image, Modal, Form, Input, Button } from 'antd';
+import { Avatar, Space, Tooltip,  Image, Modal, Form, Input, Button } from 'antd';
 import React, { useState } from 'react'
-import { IdentityWrapper, IdentityDropdown, MenuWrapper } from './Identity.styled';
+import { IdentityWrapper, IdentityDropdown, MenuWrapper, AlertIcon } from './Identity.styled';
 import { ExclamationCircleOutlined, RightOutlined, EditOutlined, UserOutlined, LockOutlined } from '@ant-design/icons';
 import { useIdentity } from './useIdentity.hook';
 import { Menu, Dropdown } from 'antd';
@@ -34,6 +34,17 @@ export function Identity() {
     </MenuWrapper>
   );
 
+  const Disconnected = () => {
+    if(state.disconnected) {
+      return (
+        <Tooltip placement="right" title="Disconnected">
+          <AlertIcon />
+        </Tooltip>
+      )
+    }
+    return <></>;
+  }
+
   return (
     <IdentityWrapper>
       <IdentityDropdown overlay={menu} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="rightTop">
@@ -43,7 +54,10 @@ export function Identity() {
           </div>
           <div class="username">
             <span class="name">{ state.name }</span>
-            <span class="handle">{ state.handle }</span>
+            <div class="handle">
+              <Disconnected />
+              <span>{ state.handle }</span>
+            </div>
           </div>
           <RightOutlined />
         </div>

net/web/src/User/SideBar/Identity/Identity.styled.js

@@ -1,5 +1,6 @@
 import { Menu, Button, Dropdown } from 'antd';
 import styled from 'styled-components';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 
 export const IdentityWrapper = styled.div`
   border-bottom: 1px solid #8fbea7;
@@ -35,7 +36,7 @@ export const IdentityWrapper = styled.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
     padding-right: 8px;
   }
 
@@ -61,6 +62,12 @@ export const IdentityWrapper = styled.div`
     color: #444444;
     font-weight: bold;
   }
+
+`;
+
+export const AlertIcon = styled(ExclamationCircleOutlined)`
+  color: red;
+  margin-right: 6px;
 `;
 
 export const MenuWrapper = styled(Menu)`

net/web/src/User/SideBar/Identity/useIdentity.hook.js

@@ -22,6 +22,7 @@ export function useIdentity() {
     confirmStatus: null,
     busy: false,
     showLogin: false,
+    disconnected: false,
   });
 
   const navigate = useNavigate();
@@ -107,8 +108,11 @@ export function useIdentity() {
   };
 
   useEffect(() => {
-    if (app.state && app.state.access != 'user') {
-      navigate('/');
+    if (app.state) {
+      if (app.state.access != 'user') {
+        navigate('/');
+      }
+      updateState({ disconnected: app.state.disconnected });
     }
   }, [app]);
 

net/web/src/context/useAppContext.hook.js

@@ -129,12 +129,14 @@ export function useAppContext() {
       try {
         let rev = JSON.parse(ev.data);
         setAppRevision(rev);
+        updateState({ disconnected: false });
       }
       catch (err) {
         console.log(err);
       }
     }
     ws.current.onclose = (e) => {
+      updateState({ disconnected: true });
       console.log(e)
       setTimeout(() => {
         if (ws.current != null) {
@@ -143,7 +145,9 @@ export function useAppContext() {
           ws.current.onopen = () => {}
           ws.current.onerror = () => {}
           setWebsocket(token);
-          delay.current += 1;
+          if (delay.current < 60) {
+            delay.current += 1;
+          }
         }
       }, delay.current * 1000)
     }
@@ -151,6 +155,7 @@ export function useAppContext() {
       ws.current.send(JSON.stringify({ AppToken: token }))
     }
     ws.current.error = (e) => {
+      updateState({ disconnected: true });
       console.log(e)
     }
   }