put the login page back

src/navigation/Router.tsx

@@ -9,6 +9,7 @@ import { getWhitelabel } from "services/whiteLabel";
 import Ventilation from "pages/VentEditor";
 import { useGlobalState } from "providers"; 
 import DeviceSupport from "pages/DeviceSupport";
+import Login from "pages/Login";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
 const DevicePage = lazy(() => import("pages/Device"));
@@ -53,7 +54,7 @@ export const appendToUrl = (appendage: number | string) => {
 
 export default function Router() {
 
-  const { isLoading } = useAuth0();
+  const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();
   const whiteLabel = getWhitelabel();
   const [{ user }] = useGlobalState();
 
@@ -302,6 +303,7 @@ export default function Router() {
           
           {/* Redirects */}
           <Route path="/callback" element={<Navigate to="/" />} />
+          <Route path="/login" element={<Login />} />
           {/* <Route path="/team/:teamID" element={<Navigate to="/teams/:teamID" />} /> */}
           {/* <Route path="/device/:deviceID" element={<Navigate to="/devices/:devicesID" />} /> */}
           <Route path="" element={<Navigate to={whiteLabel.homePage ? whiteLabel.homePage : "/devices"} />} />

src/pages/Login.tsx

@@ -0,0 +1,51 @@
+import { RedirectLoginOptions, useAuth0 } from "@auth0/auth0-react";
+// import { useAuth } from "hooks";
+import queryString from "query-string";
+import { useCallback, useEffect } from "react";
+import { useLocation } from "react-router";
+// import Loading from "./Loading";
+import LoadingScreen from "app/LoadingScreen";
+
+interface Props {
+  prevPath?: string;
+}
+
+export default function Login(props: Props) {
+  const { prevPath } = props;
+  const location = useLocation();
+  const { loginWithRedirect } = useAuth0();
+
+  const setRouteBeforeLogin = useCallback((): Promise<string> => {
+    return new Promise(function(resolve) {
+      localStorage.setItem("routeBeforeLogin", prevPath ? prevPath : "/");
+      return resolve("success");
+    });
+  }, [prevPath]);
+
+  useEffect(() => {
+    const options: RedirectLoginOptions = {
+      authorizationParams: {}  // Initialize here
+    };
+    
+    if (location && location.search) {
+      let parsed = queryString.parse(location.search);
+
+      if (parsed.signup === "true") {
+        // if (options.authorizationParams) options.authorizationParams.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
+        options.authorizationParams!.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
+      }
+
+      if (parsed.email && parsed.email !== "") {
+        // if (options.authorizationParams) options.authorizationParams.login_hint = parsed.email.toString(); // prefill email
+        options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
+      }
+    }
+
+    setRouteBeforeLogin().finally(() => {
+      loginWithRedirect(options);
+    });
+  }, [location, loginWithRedirect, setRouteBeforeLogin]);
+
+  // return <LoadingScreen fullViewport={true} />;
+  return <LoadingScreen message="login redirect" />;
+}

src/providers/auth.tsx

@@ -1,7 +1,6 @@
 import { RedirectLoginOptions, useAuth0 } from "@auth0/auth0-react";
 import queryString from "query-string";
-import { PropsWithChildren, useCallback, useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { PropsWithChildren, useEffect } from "react";
 
 interface Props extends PropsWithChildren<any>{
     setToken: React.Dispatch<React.SetStateAction<string | undefined>>
@@ -9,7 +8,7 @@ interface Props extends PropsWithChildren<any>{
 }
 
 export default function AuthWrapper(props: Props) {
-  const { children, setToken, prevPath } = props;
+  const { children, setToken } = props;
   const { isLoading, loginWithRedirect, isAuthenticated, getAccessTokenSilently } = useAuth0();
 
 
@@ -17,6 +16,7 @@ export default function AuthWrapper(props: Props) {
     const url = new URL(window.location.href);
 
     const isManualLoginPage = url.pathname === "/login";
+    console.log(isManualLoginPage)
 
     if (isManualLoginPage) {
       const options: RedirectLoginOptions = {
@@ -31,7 +31,7 @@ export default function AuthWrapper(props: Props) {
       if (parsed.email && parsed.email !== "") {
         options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
       }
-      
+      console.log(options)
       loginWithRedirect(options)
 
     } else if (!isAuthenticated && !isLoading) {
@@ -44,7 +44,6 @@ export default function AuthWrapper(props: Props) {
       if (t.length < 1) {
         loginWithRedirect()
       }
-      console.log("setting token :)")
       setToken(t)
     }).catch(() => {
       // No token, go back to login
@@ -52,38 +51,5 @@ export default function AuthWrapper(props: Props) {
     })
   }, [setToken, isAuthenticated])
 
-  // const setRouteBeforeLogin = useCallback((): Promise<string> => {
-  //   return new Promise(function(resolve) {
-  //     localStorage.setItem("routeBeforeLogin", prevPath ? prevPath : "/");
-  //     return resolve("success");
-  //   });
-  // }, [prevPath]);
-
-  useEffect(() => {
-    const options: RedirectLoginOptions = {
-      authorizationParams: {}  // Initialize here
-    };
-    console.log(location)
-    if (location && location.search) {
-      let parsed = queryString.parse(location.search);
-
-      console.log(parsed.signup)
-      if (parsed.signup === "true") {
-        // if (options.authorizationParams) options.authorizationParams.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
-        options.authorizationParams!.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
-        console.log(options)
-      }
-
-      if (parsed.email && parsed.email !== "") {
-        // if (options.authorizationParams) options.authorizationParams.login_hint = parsed.email.toString(); // prefill email
-        options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
-      }
-    }
-
-    // setRouteBeforeLogin().finally(() => {
-    //   loginWithRedirect(options);
-    // });
-  }, [location, loginWithRedirect, /*setRouteBeforeLogin*/]);
-
   return children;
 }

src/user/UserMenu.tsx

@@ -1,11 +1,10 @@
-import { Avatar, Box, Button, Checkbox, Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, Tooltip, useTheme } from "@mui/material";
+import { Avatar, Box, Button, Checkbox, Divider, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, Tooltip, useTheme } from "@mui/material";
 import { useGlobalState } from "../providers/StateContainer";
 import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
 import { makeStyles } from "@mui/styles";
 import { LockOpen, Person, Lock, Settings, SupervisedUserCircle as TeamIcon, ExitToApp, PersonAdd } from "@mui/icons-material";
 import { useState } from "react";
 import UserTeamName from "./UserTeamName";
-import ThemeIcon from "../common/ThemeIcon";
 import { useAuth0 } from "@auth0/auth0-react";
 import UserSettings from "./UserSettings";
 import UserAvatar from "./UserAvatar";