client: show auth modal on authenticating

Casuals4Fun · Apr 8, 2024 · 5080a68 · 5080a68
1 parent 224f274
commit 5080a68
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/client/src/components/modal/login-tab.tsx b/client/src/components/modal/login-tab.tsx
@@ -122,7 +122,7 @@ const LoginTab = () => {
                     />
                 </div>
                 <button disabled={isAuthenticated === AuthStatus.Authenticating} type='submit'>
-                    {loginData.id && loginData.password && isAuthenticated === AuthStatus.Authenticating ? <LoadingSVG size={23} /> : 'Login'}
+                    {isAuthenticated === AuthStatus.Authenticating ? <LoadingSVG size={23} /> : 'Login'}
                 </button>
             </form>
             <div className='or-divider'>
@@ -135,7 +135,7 @@ const LoginTab = () => {
                 className='google-btn'
                 onClick={() => window.location.href = `${import.meta.env.VITE_SERVER_URL}/api/auth/google`}
             >
-                {!loginData.id && !loginData.password && isAuthenticated === AuthStatus.Authenticating ? (
+                {isAuthenticated === AuthStatus.Authenticating ? (
                     <LoadingSVG size={23} />
                 ) : (
                     <>

diff --git a/client/src/components/modal/signup-tab.tsx b/client/src/components/modal/signup-tab.tsx
@@ -3,6 +3,7 @@ import { RegisterDataProps } from "../../types";
 import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../store/useAuthStore";
 import { toast } from "sonner";
 import { FcGoogle } from "react-icons/fc";
+import { LoadingSVG } from "../loading/svg";
 
 const SignupTab: React.FC<RegisterDataProps> = ({ registerData, setRegisterData }) => {
     const { setAuthTab, isAuthenticated } = useAuthStore();
@@ -91,7 +92,7 @@ const SignupTab: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
                     />
                 </div>
                 <button type='submit'>
-                    Continue
+                    {isAuthenticated === AuthStatus.Authenticating ? <LoadingSVG size={23} /> : 'Continue'}
                 </button>
             </form>
             {!tempUser.email && (
@@ -106,8 +107,14 @@ const SignupTab: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
                         className='google-btn'
                         onClick={() => window.location.href = `${import.meta.env.VITE_SERVER_URL}/api/auth/google`}
                     >
-                        <FcGoogle size={25} />
-                        <span>Continue with Google</span>
+                        {isAuthenticated === AuthStatus.Authenticating ? (
+                            <LoadingSVG size={23} />
+                        ) : (
+                            <>
+                                <FcGoogle size={25} />
+                                <span>Continue with Google</span>
+                            </>
+                        )}
                     </button>
                 </>
             )}

diff --git a/client/src/pages/auth/index.tsx b/client/src/pages/auth/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 import { AuthStatus, AuthTab, useAuthStore, useTempStore } from "../../store/useAuthStore";
 import { useLocation, useNavigate } from "react-router-dom";
-import { LoadingComponent } from "../../components/loading/svg";
 
 export default function AuthPage() {
     const location = useLocation();
@@ -13,7 +12,10 @@ export default function AuthPage() {
         const params = new URLSearchParams(location.search);
         const type = params.get('type');
 
-        if (isAuthenticated === AuthStatus.Authenticated) {
+        if (isAuthenticated === AuthStatus.Authenticating) {
+            setAuthTab(type === 'login' ? AuthTab.Login : type === 'signup' ? AuthTab.Signup : AuthTab.Login);
+        }
+        else if (isAuthenticated === AuthStatus.Authenticated) {
             navigate(route === '/auth' || route === '/login' || route === '/signup' ? '/' : route)
         }
         else if (isAuthenticated === AuthStatus.Failed) {
@@ -38,5 +40,5 @@ export default function AuthPage() {
         }
     }, [isAuthenticated, location.search, navigate, route, setAuthTab, setTempUser]);
 
-    return <LoadingComponent />
+    return <div />
 }