fixing navigation to admin dashboard

net/web/src/access/admin/Admin.jsx

@@ -1,5 +1,5 @@
 import { Button, Modal, Form, Input } from 'antd';
-import { SettingOutlined, LockOutlined } from '@ant-design/icons';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import { AdminWrapper } from './Admin.styled';
 import { useAdmin } from './useAdmin.hook';
 
@@ -30,7 +30,7 @@ export  function Admin() {
       <div className="app-title">
         <span>Databag</span>
         <div className="settings" onClick={() => actions.navUser()}>
-          <SettingOutlined />
+          <UserOutlined />
         </div>
       </div>
       <div className="form-title">Admin</div>

net/web/src/access/admin/useAdmin.hook.js

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { getNodeStatus } from 'api/getNodeStatus';
 import { setNodeStatus } from 'api/setNodeStatus';
 import { getNodeConfig } from 'api/getNodeConfig';
+import { AppContext } from 'context/AppContext';
 
 export function useAdmin() {
 
@@ -14,6 +15,7 @@ export function useAdmin() {
   });
 
   const navigate = useNavigate();
+  const app = useContext(AppContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -32,6 +34,12 @@ export function useAdmin() {
     check();
   }, []);
 
+  useEffect(() => {
+    if (app.state.adminToken) {
+      navigate('/dashboard'); 
+    }
+  }, [app.state]);
+
   const actions = {
     setPassword: (password) => {
       updateState({ password });
@@ -46,14 +54,17 @@ export function useAdmin() {
           if (state.unclaimed === true) {
             await setNodeStatus(state.password);
           }
-          const status = await getNodeConfig(state.password);
+console.log("CHECK1");
-          const config = encodeURIComponent(JSON.stringify(config));
+          await getNodeConfig(state.password);
-          const pass= encodeURIComponent(state.password);
+console.log("CHECK2");
-          
           updateState({ busy: false });
-          navigate(`/dashboard?config=${status}&pass=${pass}`); 
+console.log("CHECK3");
+console.log(app);
+          app.actions.setAdmin(state.password);          
+console.log("DONE!");
         }
         catch(err) {
+console.log("ERROR!");
           console.log(err);
           updateState({ busy: false });
           throw new Error("login failed");

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

@@ -14,6 +14,7 @@ import { createWebsocket } from 'api/fetchUtil';
 export function useAppContext(websocket) {
   const [state, setState] = useState({
     status: null,
+    adminToken: null,
   });
   const [appRevision, setAppRevision] = useState();
 
@@ -26,6 +27,7 @@ export function useAppContext(websocket) {
   const ws = useRef(null);
 
   const updateState = (value) => {
+console.log(" UPDATE STATE", value);
     setState((s) => ({ ...s, ...value }))
   }
 
@@ -77,6 +79,14 @@ export function useAppContext(websocket) {
     create: async (username, password, token) => {
       await appCreate(username, password, token)
     },
+    setAdmin: (token) => {
+console.log("TOKEN SET!", token);
+      updateState({ adminToken: token });
+console.log("TOKEN SET: done");
+    },
+    clearAdmin: () => {
+      updateState({ adminToken: null });
+    },
   }
 
   const appCreate = async (username, password, token) => {

net/web/src/dashboard/Dashboard.jsx

@@ -4,9 +4,12 @@ import { ExclamationCircleOutlined, SettingOutlined, CopyOutlined, UserAddOutlin
 import { useDashboard } from './useDashboard.hook';
 import { AccountItem } from './accountItem/AccountItem';
 
-export function Dashboard({ token, config, logout }) {
+export function Dashboard() {
 
-  const { state, actions } = useDashboard(token, config);
+console.log("IN DASHBOARD");
+
+  const { state, actions } = useDashboard();
+console.log("IN DASHBOARD here");
 
   const onClipboard = (value) => {
     navigator.clipboard.writeText(value);
@@ -33,7 +36,7 @@ export function Dashboard({ token, config, logout }) {
               </div>
               <div class="settings">
                   <SettingsButton type="text" size="small" icon={<LogoutOutlined />}
-                      onClick={() => logout()}></SettingsButton>
+                      onClick={() => actions.logout()}></SettingsButton>
               </div>
               { state.errorMessage && (
                 <div class="alert">
@@ -63,7 +66,7 @@ export function Dashboard({ token, config, logout }) {
               <div class="settings">
                 <Tooltip placement="topRight" title="Logout"> 
                   <SettingsButton type="text" size="small" icon={<LogoutOutlined />}
-                      onClick={() => logout()}></SettingsButton>
+                      onClick={() => actions.logout()}></SettingsButton>
                 </Tooltip>
               </div>
               { state.errorMessage && (
@@ -89,8 +92,7 @@ export function Dashboard({ token, config, logout }) {
             itemLayout="horizontal"
             dataSource={state.accounts}
             loading={state.loading}
-            renderItem={item => (<AccountItem token={token} item={item}
+            renderItem={item => (<AccountItem item={item} remove={actions.removeAccount}/>)}
-              remove={actions.removeAccount}/>)}
           />
         </div>
       </div>

net/web/src/dashboard/Dashboard.styled.js

@@ -21,6 +21,7 @@ export const DashboardWrapper = styled.div`
     border-radius: 4px;
     max-width: 100%;
     max-height: 80%;
+    background-color: ${Colors.formBackground};
 
     .header {
       color: #444444;

net/web/src/dashboard/accountItem/AccountItem.jsx

@@ -4,9 +4,9 @@ import { useAccountItem } from './useAccountItem.hook';
 import { ExclamationCircleOutlined, CopyOutlined, UserDeleteOutlined, UnlockOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import { Modal, Tooltip, Button } from 'antd';
 
-export function AccountItem({ token, item, remove }) {
+export function AccountItem({ item, remove }) {
 
-  const { state, actions } = useAccountItem(token, item, remove);
+  const { state, actions } = useAccountItem(item, remove);
 
   const removeAccount = () => {
     Modal.confirm({

net/web/src/dashboard/accountItem/useAccountItem.hook.js

@@ -3,8 +3,9 @@ import { getAccountImageUrl } from 'api/getAccountImageUrl';
 import { setAccountStatus } from 'api/setAccountStatus';
 import { addAccountAccess } from 'api/addAccountAccess';
 import { ViewportContext } from 'context/ViewportContext';
+import { AppContext } from 'context/AppContext';
 
-export function useAccountItem(token, item, remove) {
+export function useAccountItem(item, remove) {
   
   const [state, setState] = useState({
     statusBusy: false,
@@ -13,6 +14,7 @@ export function useAccountItem(token, item, remove) {
     showAccess: false,
   });
  
+  const app = useContext(AppContext);
   const viewport = useContext(ViewportContext); 
 
   const updateState = (value) => {
@@ -27,9 +29,9 @@ export function useAccountItem(token, item, remove) {
       name: item?.name,
       guid: item?.guid,
       handle: item?.handle,
-      imageUrl: item?.imageSet ? getAccountImageUrl(token, item?.accountId) : null,
+      imageUrl: item?.imageSet ? getAccountImageUrl(app.state.adminToken, item?.accountId) : null,
     });
-  }, [token, item]); 
+  }, [app.state.adminToken, item]); 
 
   useEffect(() => {
     updateState({ display: viewport.state.display });
@@ -40,7 +42,7 @@ export function useAccountItem(token, item, remove) {
       if (!state.accessBusy) {
         updateState({ accessBusy: true });
         try {
-          let access = await addAccountAccess(token, item.accountId);
+          let access = await addAccountAccess(app.state.adminToken, item.accountId);
           updateState({ accessToken: access, showAccess: true });
         }
         catch (err) {
@@ -69,7 +71,7 @@ export function useAccountItem(token, item, remove) {
       if (!state.statusBusy) {
         updateState({ statusBusy: true });
         try {
-          await setAccountStatus(token, item.accountId, disabled);
+          await setAccountStatus(app.state.adminToken, item.accountId, disabled);
           updateState({ disabled, activeClass: disabled ? 'inactive' : 'active' });
         }
         catch(err) {

net/web/src/dashboard/useDashboard.hook.js

@@ -1,9 +1,11 @@
 import { useContext, useRef, useState, useEffect } from 'react';
+import { getNodeConfig } from 'api/getNodeConfig';
 import { setNodeConfig } from 'api/setNodeConfig';
 import { getNodeAccounts } from 'api/getNodeAccounts';
 import { removeAccount } from 'api/removeAccount';
 import { addAccountCreate } from 'api/addAccountCreate';
-import { useNavigation, useLocation } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { AppContext } from 'context/AppContext';
 
 export function useDashboard() {
 
@@ -24,20 +26,32 @@ export function useDashboard() {
     accounts: [],
   });
 
-  const navigate = useNavigation();
+console.log("HERE1");
-  const location = useLocation();
+  const navigate = useNavigate();
-  const token = useRef();
+console.log("HERE2");
+  const app = useContext(AppContext);
+console.log("HERE4");
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    if (!app.state.adminToken) {
+      navigate('/admin');
+    }
+    else {
+      syncConfig();
+      syncAccounts();
+    }
+  }, [app]);
+
   const actions = {
     setCreateLink: async () => {
       if (!state.createBusy) {
         updateState({ busy: true });
         try {
-          const create = await addAccountCreate(token.current)
+          const create = await addAccountCreate(app.state.adminToken)
           updateState({ createToken: create, showCreate: true });
         }
         catch (err) {
@@ -50,7 +64,7 @@ export function useDashboard() {
       updateState({ showCreate });
     },
     removeAccount: async (accountId) => {
-      await removeAccount(token, accountId);
+      await removeAccount(app.state.adminToken, accountId);
       actions.getAccounts();
     },
     setHost: (domain) => {
@@ -77,6 +91,12 @@ export function useDashboard() {
     setShowSettings: (value) => {
       updateState({ showSettings: value });
     },
+    logout: () => {
+      app.actions.clearAdmin();
+    },
+    getAccounts: async () => {
+      await syncAccounts();
+    },
     setSettings: async () => {
       if (!state.busy) {
         updateState({ busy: true });
@@ -84,7 +104,7 @@ export function useDashboard() {
           const { domain, keyType, accountStorage, pushSupported, enableImage, enableAudio, enableVideo } = state;
           const storage = accountStorage * 1073741824;
           const config = { domain,  accountStorage: storage, keyType, enableImage, enableAudio, enableVideo, pushSupported };
-          await setNodeConfig(token.current, config);
+          await setNodeConfig(app.state.adminToken, config);
           updateState({ busy: false, showSettings: false });
         }
         catch(err) {
@@ -94,46 +114,41 @@ export function useDashboard() {
         }
       }
     },
-    getAccounts: async () => {
-      if (!state.busy) {
-        updateState({ busy: true });
-        try {
-          let accounts = await getNodeAccounts(token.current);
-          accounts.sort((a, b) => {
-            if (a.handle < b.handle) {
-              return -1;
-            }
-            if (a.handle > b.handle) {
-              return 1;
-            }
-            return 0;
-          });
-          updateState({ busy: false, accounts });
-        }
-        catch(err) {
-          console.log(err);
-          updateState({ busy: false, errorMessage: 'failed to load accounts' });
-        }
-      }
-    },
   };
 
-  useEffect(() => {
+  const syncConfig = async () => {
-    const params = new URLSearchParams(location);
+    try {
-    const pass = params.get("pass");
+      const config = await getNodeConfig(app.state.adminToken);
-    if (!pass) {
-      navigate('/admin');
-    }
-    else {
-      token.current = pass;
-      const config = JSON.parse(params.get("config"));
       const { storage, domain, keyType, pushSupported, enableImage, enableAudio, enableVideo } = config;
-      const accountStorage = Math.ceil(accountStorage / 1073741824);
+      const accountStorage = Math.ceil(storage / 1073741824);
       updateState({ domain, accountStorage, keyType, enableImage, enableAudio, enableVideo, pushSupported });
-      actions.getAccounts();
     }
-  }, []);
+    catch(err) {
-      
+      console.log(err);
+      updateState({ errorMessage: 'failed to sync config' });
+    }
+  };
+
+  const syncAccounts = async () => {
+    try {
+      const accounts = await getNodeAccounts(app.state.adminToken);
+      accounts.sort((a, b) => {
+        if (a.handle < b.handle) {
+          return -1;
+        }
+        if (a.handle > b.handle) {
+          return 1;
+        }
+        return 0;
+      });
+      updateState({ accounts });
+    }
+    catch(err) {
+      console.log(err);
+      updateState({ errorMessage: 'failed to sync accounts' });
+    }
+  };
+
   return { state, actions };
 }