Merge pull request #577 from kinode-dao/dr/improve-login-redirect

Improve login redirect

kinode/src/register-ui/src/App.tsx

@@ -21,7 +21,6 @@ function App() {
   const [reset, setReset] = useState<boolean>(false);
   const [direct, setDirect] = useState<boolean>(false);
   const [knsName, setKnsName] = useState<string>('');
-  const [appSizeOnLoad, setAppSizeOnLoad] = useState<number>(0);
   const [networkingKey, setNetworkingKey] = useState<string>('');
   const [ipAddress, setIpAddress] = useState<number>(0);
   const [ws_port, setWsPort] = useState<number>(0);
@@ -36,10 +35,6 @@ function App() {
   const openConnect = () => setConnectOpen(true)
   const closeConnect = () => setConnectOpen(false)
 
-  useEffect(() => setAppSizeOnLoad(
-    (window.performance.getEntriesByType('navigation') as any)[0].transferSize
-  ), []);
-
   useEffect(() => {
     (async () => {
       try {
@@ -84,7 +79,7 @@ function App() {
   // todo, most of these can be removed...
   const props = {
     direct, setDirect,
-    key, appSizeOnLoad,
+    key,
     keyFileName, setKeyFileName,
     reset, setReset,
     pw, setPw,

kinode/src/register-ui/src/lib/types.ts

@@ -21,7 +21,6 @@ export interface PageProps {
   setReset: React.Dispatch<React.SetStateAction<boolean>>,
   pw: string,
   setPw: React.Dispatch<React.SetStateAction<string>>,
-  appSizeOnLoad: number,
   nodeChainId: string,
 }
 

kinode/src/register-ui/src/pages/ImportKeyfile.tsx

@@ -7,13 +7,13 @@ import {
 import { PageProps } from "../lib/types";
 import Loader from "../components/Loader";
 import { sha256, toBytes } from "viem";
+import { redirectToHomepage } from "../utils/redirect-to-homepage";
 
 interface ImportKeyfileProps extends PageProps { }
 
 function ImportKeyfile({
   pw,
   setPw,
-  appSizeOnLoad,
 }: ImportKeyfileProps) {
 
   const [localKey, setLocalKey] = useState<Uint8Array | null>(null);
@@ -70,24 +70,15 @@ function ImportKeyfile({
           if (result.status > 399) {
             throw new Error("Incorrect password");
           }
+          redirectToHomepage();
 
-          const interval = setInterval(async () => {
-            const res = await fetch("/", { credentials: 'include' });
-            if (
-              res.status < 300 &&
-              Number(res.headers.get("content-length")) !== appSizeOnLoad
-            ) {
-              clearInterval(interval);
-              window.location.replace("/");
-            }
-          }, 2000);
         }
       } catch {
         window.alert("An error occurred, please try again.");
         setLoading(false);
       }
     },
-    [localKey, pw, keyErrs, appSizeOnLoad]
+    [localKey, pw, keyErrs]
   );
 
   return (

kinode/src/register-ui/src/pages/Login.tsx

@@ -4,13 +4,13 @@ import Loader from "../components/Loader";
 import { useNavigate } from "react-router-dom";
 import { sha256, toBytes } from "viem";
 import { Tooltip } from "../components/Tooltip";
+import { redirectToHomepage } from "../utils/redirect-to-homepage";
 
 interface LoginProps extends PageProps { }
 
 function Login({
   pw,
   setPw,
-  appSizeOnLoad,
   routers,
   setRouters,
   knsName,
@@ -57,23 +57,14 @@ function Login({
         if (result.status > 399) {
           throw new Error(await result.text());
         }
+        redirectToHomepage();
 
-        const interval = setInterval(async () => {
-          const res = await fetch("/", { credentials: 'include' });
-          if (
-            res.status < 300 &&
-            Number(res.headers.get("content-length")) !== appSizeOnLoad
-          ) {
-            clearInterval(interval);
-            window.location.replace("/");
-          }
-        }, 2000);
       } catch (err: any) {
         setKeyErrs([String(err)]);
         setLoading("");
       }
     },
-    [pw, appSizeOnLoad]
+    [pw]
   );
 
   const isDirect = Boolean(routers?.length === 0);

kinode/src/register-ui/src/pages/SetPassword.tsx

@@ -5,6 +5,7 @@ import { Tooltip } from "../components/Tooltip";
 import { sha256, toBytes } from "viem";
 import { useSignTypedData, useAccount, useChainId } from 'wagmi'
 import { KIMAP } from "../abis";
+import { redirectToHomepage } from "../utils/redirect-to-homepage";
 
 type SetPasswordProps = {
   direct: boolean;
@@ -12,7 +13,6 @@ type SetPasswordProps = {
   reset: boolean;
   knsName: string;
   setPw: React.Dispatch<React.SetStateAction<string>>;
-  appSizeOnLoad: number;
   nodeChainId: string;
   closeConnect: () => void;
 };
@@ -23,7 +23,6 @@ function SetPassword({
   pw,
   reset,
   setPw,
-  appSizeOnLoad,
 }: SetPasswordProps) {
   const [pw2, setPw2] = useState("");
   const [error, setError] = useState("");
@@ -103,25 +102,15 @@ function SetPassword({
           const base64String = await result.json();
 
           downloadKeyfile(knsName, base64String);
+          redirectToHomepage();
 
-          const interval = setInterval(async () => {
-            const res = await fetch("/", { credentials: 'include' });
-
-            if (
-              res.status < 300 &&
-              Number(res.headers.get("content-length")) !== appSizeOnLoad
-            ) {
-              clearInterval(interval);
-              window.location.replace("/");
-            }
-          }, 2000);
         } catch {
           alert("There was an error setting your password, please try again.");
           setLoading(false);
         }
       }, 500);
     },
-    [appSizeOnLoad, direct, pw, pw2, reset, knsName]
+    [direct, pw, pw2, reset, knsName]
   );
 
   return (

kinode/src/register-ui/src/utils/redirect-to-homepage.ts

@@ -0,0 +1,9 @@
+export const redirectToHomepage = () => {
+    const interval = setInterval(async () => {
+        const res = await fetch("/version", { credentials: 'include' });
+        if (res.status == 200) {
+            clearInterval(interval);
+            window.location.replace("/");
+        }
+    }, 500);
+};