From 02ba2bc958b2ace2aec9ae94faeeabac83b11b0b Mon Sep 17 00:00:00 2001 From: bconti123 Date: Sat, 26 Jul 2025 16:49:17 -0700 Subject: [PATCH 1/7] ADD TODO things --- client/src/components/auth/HandleAuth.jsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/client/src/components/auth/HandleAuth.jsx b/client/src/components/auth/HandleAuth.jsx index 4c9d6abb4..d1b7eb3a5 100644 --- a/client/src/components/auth/HandleAuth.jsx +++ b/client/src/components/auth/HandleAuth.jsx @@ -1,7 +1,8 @@ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { Redirect } from 'react-router-dom'; import { isValidToken } from '../../services/user.service'; import { authLevelRedirect } from '../../utils/authUtils'; +import { Box, CircularProgress } from '@mui/material'; import '../../sass/MagicLink.scss'; import useAuth from '../../hooks/useAuth'; @@ -42,8 +43,18 @@ const HandleAuth = (props) => { setIsLoaded(true); }, [isMagicLinkValid, setIsLoaded, auth]); - - if (!isLoaded) return
Loading...
; + // TODO : Improve Loading screen... + if (!isLoaded) + return ( + + + + ); const Delayed = ({ children, waitBeforeShow = 500 }) => { const [isShown, setIsShown] = useState(false); @@ -63,7 +74,7 @@ const HandleAuth = (props) => { if (auth?.user) { loginRedirect = authLevelRedirect(auth.user); } - + // TODO: Replacing HTML with MUI and improve response design. return (
From 6612388e200e29194f0f4dd4e3750932d69ea745 Mon Sep 17 00:00:00 2001 From: bconti123 Date: Wed, 30 Jul 2025 16:44:13 -0700 Subject: [PATCH 2/7] Replaced HTML with MUI and fixed CSS --- client/src/components/auth/HandleAuth.jsx | 24 +++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/client/src/components/auth/HandleAuth.jsx b/client/src/components/auth/HandleAuth.jsx index d1b7eb3a5..e92bf277c 100644 --- a/client/src/components/auth/HandleAuth.jsx +++ b/client/src/components/auth/HandleAuth.jsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import { Redirect } from 'react-router-dom'; import { isValidToken } from '../../services/user.service'; import { authLevelRedirect } from '../../utils/authUtils'; -import { Box, CircularProgress } from '@mui/material'; +import { Box, CircularProgress, Typography } from '@mui/material'; import '../../sass/MagicLink.scss'; import useAuth from '../../hooks/useAuth'; @@ -43,14 +43,16 @@ const HandleAuth = (props) => { setIsLoaded(true); }, [isMagicLinkValid, setIsLoaded, auth]); - // TODO : Improve Loading screen... + if (!isLoaded) return ( @@ -74,14 +76,16 @@ const HandleAuth = (props) => { if (auth?.user) { loginRedirect = authLevelRedirect(auth.user); } - // TODO: Replacing HTML with MUI and improve response design. + return ( -
+ -
Sorry, the link is not valid anymore.
+ + Sorry, the link is not valid anymore. + {auth?.user && /* Redirect to /welcome */} -
+ ); }; From 42d82980aaa002a54c0efe8b20c32a6f7d32f469 Mon Sep 17 00:00:00 2001 From: bconti123 Date: Tue, 5 Aug 2025 17:35:21 -0700 Subject: [PATCH 3/7] Fix LoadingSpinner --- client/src/components/auth/HandleAuth.jsx | 42 ++++++++++++----------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/client/src/components/auth/HandleAuth.jsx b/client/src/components/auth/HandleAuth.jsx index e92bf277c..a96e19533 100644 --- a/client/src/components/auth/HandleAuth.jsx +++ b/client/src/components/auth/HandleAuth.jsx @@ -34,29 +34,26 @@ const HandleAuth = (props) => { // Step 3: Set IsLoaded value to render Component useEffect(() => { - if (!isMagicLinkValid) { - setIsLoaded(true); - return; + if (!isLoaded) { + const timer = setTimeout(() => { + setIsLoaded(true); + }, 1000); + + return () => clearTimeout(timer); } + }, [isLoaded]); - if (!auth || auth.isError) return; + // This is the old code and logic doesn't work on loading spinner. + // useEffect(() => { + // if (!isMagicLinkValid) { + // setIsLoaded(true); + // return; + // } - setIsLoaded(true); - }, [isMagicLinkValid, setIsLoaded, auth]); + // if (!auth || auth.isError) return; - if (!isLoaded) - return ( - - - - ); + // setIsLoaded(true); + // }, [isMagicLinkValid, setIsLoaded, auth]); const Delayed = ({ children, waitBeforeShow = 500 }) => { const [isShown, setIsShown] = useState(false); @@ -79,7 +76,12 @@ const HandleAuth = (props) => { return ( - + {!isLoaded && } + Sorry, the link is not valid anymore. From b447d63e2ceaa7b4cd90700e6d97777a15885a49 Mon Sep 17 00:00:00 2001 From: bconti123 Date: Tue, 5 Aug 2025 22:17:20 -0700 Subject: [PATCH 4/7] Forget to remove isLoaded in Delayed component. --- client/src/components/auth/HandleAuth.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/client/src/components/auth/HandleAuth.jsx b/client/src/components/auth/HandleAuth.jsx index a96e19533..b74c1971a 100644 --- a/client/src/components/auth/HandleAuth.jsx +++ b/client/src/components/auth/HandleAuth.jsx @@ -77,11 +77,7 @@ const HandleAuth = (props) => { return ( {!isLoaded && } - + Sorry, the link is not valid anymore. From 0d1bf567d7298de24dd339d7950fa8a0b40f17ba Mon Sep 17 00:00:00 2001 From: bconti123 Date: Mon, 11 Aug 2025 16:12:53 -0700 Subject: [PATCH 5/7] Changed logic function to old one back then implemented it. --- client/src/components/auth/HandleAuth.jsx | 57 ++++++++++++----------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/client/src/components/auth/HandleAuth.jsx b/client/src/components/auth/HandleAuth.jsx index b74c1971a..f60769f56 100644 --- a/client/src/components/auth/HandleAuth.jsx +++ b/client/src/components/auth/HandleAuth.jsx @@ -23,6 +23,7 @@ const HandleAuth = (props) => { setMagicLink(isValid); }); }, [props.location.search]); + console.debug('Step 1: isMagicLinkValid: ', isMagicLinkValid); // Step 2: Refresh user auth (requires valid Magic Link) useEffect(() => { @@ -31,42 +32,41 @@ const HandleAuth = (props) => { refreshAuth(); }, [isMagicLinkValid, refreshAuth, auth]); + console.debug('Step 2: auth: ', auth); + console.debug('Step 2: isMagicLinkValid: ', isMagicLinkValid); // Step 3: Set IsLoaded value to render Component useEffect(() => { - if (!isLoaded) { - const timer = setTimeout(() => { - setIsLoaded(true); - }, 1000); + if (!isMagicLinkValid) return; - return () => clearTimeout(timer); - } - }, [isLoaded]); + if (!auth || auth.isError) return; - // This is the old code and logic doesn't work on loading spinner. - // useEffect(() => { - // if (!isMagicLinkValid) { - // setIsLoaded(true); - // return; - // } + setIsLoaded(true); + }, [isMagicLinkValid, setIsLoaded, auth]); + console.debug('Step 3: isLoaded: ', isLoaded); - // if (!auth || auth.isError) return; + // const Delayed = ({ children, waitBeforeShow = 500 }) => { + // const [isShown, setIsShown] = useState(false); + // useEffect(() => { + // const timer = setTimeout(() => { + // setIsShown(true); + // }, waitBeforeShow); - // setIsLoaded(true); - // }, [isMagicLinkValid, setIsLoaded, auth]); + // return () => clearTimeout(timer); + // }, [waitBeforeShow]); - const Delayed = ({ children, waitBeforeShow = 500 }) => { - const [isShown, setIsShown] = useState(false); - useEffect(() => { + // return isShown ? children : null; + // }; + + useEffect(() => { + if (!isLoaded) { const timer = setTimeout(() => { - setIsShown(true); - }, waitBeforeShow); + setIsLoaded(true); + }, 1000); return () => clearTimeout(timer); - }, [waitBeforeShow]); - - return isShown ? children : null; - }; + } + }, [isLoaded]); let loginRedirect = ''; @@ -76,12 +76,13 @@ const HandleAuth = (props) => { return ( - {!isLoaded && } - + {!isLoaded ? ( + + ) : ( Sorry, the link is not valid anymore. - + )} {auth?.user && /* Redirect to /welcome */} ); From 8eacba29d93461198633a992cd46cd6516d3454f Mon Sep 17 00:00:00 2001 From: bconti123 Date: Mon, 11 Aug 2025 16:17:51 -0700 Subject: [PATCH 6/7] Removed console.debug --- client/src/components/auth/HandleAuth.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/src/components/auth/HandleAuth.jsx b/client/src/components/auth/HandleAuth.jsx index f60769f56..71a418cb4 100644 --- a/client/src/components/auth/HandleAuth.jsx +++ b/client/src/components/auth/HandleAuth.jsx @@ -23,7 +23,6 @@ const HandleAuth = (props) => { setMagicLink(isValid); }); }, [props.location.search]); - console.debug('Step 1: isMagicLinkValid: ', isMagicLinkValid); // Step 2: Refresh user auth (requires valid Magic Link) useEffect(() => { @@ -32,8 +31,6 @@ const HandleAuth = (props) => { refreshAuth(); }, [isMagicLinkValid, refreshAuth, auth]); - console.debug('Step 2: auth: ', auth); - console.debug('Step 2: isMagicLinkValid: ', isMagicLinkValid); // Step 3: Set IsLoaded value to render Component useEffect(() => { @@ -43,7 +40,6 @@ const HandleAuth = (props) => { setIsLoaded(true); }, [isMagicLinkValid, setIsLoaded, auth]); - console.debug('Step 3: isLoaded: ', isLoaded); // const Delayed = ({ children, waitBeforeShow = 500 }) => { // const [isShown, setIsShown] = useState(false); From 5c210b7e888c74d4185cbac95516ce6e03ac2518 Mon Sep 17 00:00:00 2001 From: bconti123 Date: Mon, 18 Aug 2025 19:08:55 -0700 Subject: [PATCH 7/7] Removed the comment of Delayed Component --- client/src/components/auth/HandleAuth.jsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/client/src/components/auth/HandleAuth.jsx b/client/src/components/auth/HandleAuth.jsx index 71a418cb4..e54eec6cc 100644 --- a/client/src/components/auth/HandleAuth.jsx +++ b/client/src/components/auth/HandleAuth.jsx @@ -41,19 +41,6 @@ const HandleAuth = (props) => { setIsLoaded(true); }, [isMagicLinkValid, setIsLoaded, auth]); - // const Delayed = ({ children, waitBeforeShow = 500 }) => { - // const [isShown, setIsShown] = useState(false); - // useEffect(() => { - // const timer = setTimeout(() => { - // setIsShown(true); - // }, waitBeforeShow); - - // return () => clearTimeout(timer); - // }, [waitBeforeShow]); - - // return isShown ? children : null; - // }; - useEffect(() => { if (!isLoaded) { const timer = setTimeout(() => {