fix signin

interface/src/AuthenticatedRouting.tsx

@@ -1,13 +1,13 @@
-import { useCallback, useEffect } from 'react';
-import { Navigate, Routes, Route, useNavigate, useLocation } from 'react-router-dom';
+// import { useCallback, useEffect } from 'react';
+import { Navigate, Routes, Route } from 'react-router-dom';
 import Dashboard from './project/Dashboard';
 import Help from './project/Help';
 import Settings from './project/Settings';
-import type { AxiosError } from 'axios';
+// import type { AxiosError } from 'axios';
 import type { FC } from 'react';
 
-import * as AuthenticationApi from 'api/authentication';
-import { AXIOS } from 'api/endpoints';
+// import * as AuthenticationApi from 'api/authentication';
+// import { AXIOS } from 'api/endpoints';
 import { Layout, RequireAdmin } from 'components';
 
 import AccessPoint from 'framework/ap/AccessPoint';
@@ -17,11 +17,11 @@ import NetworkTime from 'framework/ntp/NetworkTime';
 import Security from 'framework/security/Security';
 import System from 'framework/system/System';
 
-const AuthenticatedRouting: FC = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
+const AuthenticatedRouting: FC = () => (
+  // const location = useLocation();
+  // const navigate = useNavigate();
 
-  // TODO fix this - how to redirect on a 401
+  // TODO not sure if this is needed, to redirect on 401. If so add incerceptor to Alova
   // const handleApiResponseError = useCallback(
   //   (error: AxiosError) => {
   //     if (error.response && error.response.status === 401) {
@@ -34,42 +34,38 @@ const AuthenticatedRouting: FC = () => {
   // );
 
   // useEffect(() => {
-  //   // TODO replace AXIOS.interceptors.response.use ???
   //   const axiosHandlerId = AXIOS.interceptors.response.use((response) => response, handleApiResponseError);
   //   return () => AXIOS.interceptors.response.eject(axiosHandlerId);
   // }, [handleApiResponseError]);
 
-  return (
-    <Layout>
-      <Routes>
-        <Route path="/dashboard/*" element={<Dashboard />} />
-        <Route
-          path="/settings/*"
-          element={
-            <RequireAdmin>
-              <Settings />
-            </RequireAdmin>
-          }
-        />
-        <Route path="/help/*" element={<Help />} />
-
-        <Route path="/network/*" element={<NetworkConnection />} />
-        <Route path="/ap/*" element={<AccessPoint />} />
-        <Route path="/ntp/*" element={<NetworkTime />} />
-        <Route path="/mqtt/*" element={<Mqtt />} />
-        <Route
-          path="/security/*"
-          element={
-            <RequireAdmin>
-              <Security />
-            </RequireAdmin>
-          }
-        />
-        <Route path="/system/*" element={<System />} />
-        <Route path="/*" element={<Navigate to="/" />} />
-      </Routes>
-    </Layout>
-  );
-};
+  <Layout>
+    <Routes>
+      <Route path="/dashboard/*" element={<Dashboard />} />
+      <Route
+        path="/settings/*"
+        element={
+          <RequireAdmin>
+            <Settings />
+          </RequireAdmin>
+        }
+      />
+      <Route path="/help/*" element={<Help />} />
 
+      <Route path="/network/*" element={<NetworkConnection />} />
+      <Route path="/ap/*" element={<AccessPoint />} />
+      <Route path="/ntp/*" element={<NetworkTime />} />
+      <Route path="/mqtt/*" element={<Mqtt />} />
+      <Route
+        path="/security/*"
+        element={
+          <RequireAdmin>
+            <Security />
+          </RequireAdmin>
+        }
+      />
+      <Route path="/system/*" element={<System />} />
+      <Route path="/*" element={<Navigate to="/" />} />
+    </Routes>
+  </Layout>
+);
 export default AuthenticatedRouting;

interface/src/api/endpoints.ts

@@ -49,13 +49,11 @@ export const alovaInstance = createAlova({
       return data;
     },
 
-    // TODO handle errors
+    // TODO how best to handle alova http errors like 401
     // Interceptor for request failure
     // This interceptor will be entered when the request is wrong.
     // The second parameter is the method instance of the current request, you can use it to synchronize the configuration information before and after the request
-    onError: (error, method) => {
-      console.log('error:', error); // TODO fix me
-      console.log('method:', method); // TODO fix me
+    onError: (error) => {
       alert(error.message);
     }
   }

interface/src/contexts/authentication/Authentication.tsx

@@ -56,6 +56,9 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
           setMe(undefined);
           setInitialized(true);
         });
+    } else {
+      setMe(undefined);
+      setInitialized(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

interface/src/framework/system/SystemStatusForm.tsx

@@ -29,13 +29,11 @@ import {
 } from '@mui/material';
 
 import { useRequest } from 'alova';
-import axios from 'axios';
-import { useContext, useState, useEffect } from 'react';
+import { useContext, useState } from 'react';
 import { toast } from 'react-toastify';
 import RestartMonitor from './RestartMonitor';
 import type { FC } from 'react';
 
-import type { Version } from 'types';
 import * as SystemApi from 'api/system';
 import { ButtonRow, FormLoader, SectionContent, MessageBox } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
@@ -71,6 +69,7 @@ const SystemStatusForm: FC = () => {
     immediate: false
   });
 
+  // fetch versions from GH on load
   const { data: latestVersion } = useRequest(SystemApi.getStableVersion);
   const { data: latestDevVersion } = useRequest(SystemApi.getDevVersion);