client: add buttons for auth page modal

Casuals4Fun · Apr 26, 2024 · 76be906 · 76be906
1 parent 40d5162
commit 76be906
Showing 1 changed file with 29 additions and 21 deletions.
diff --git a/client/src/components/modal/auth/index.tsx b/client/src/components/modal/auth/index.tsx
@@ -1,6 +1,6 @@
 import "./index.css"
 import { useState } from "react"
-import { Link, useLocation } from "react-router-dom"
+import { Link, useLocation, useNavigate } from "react-router-dom"
 import Lottie from "lottie-react"
 import { useAuthStore, AuthTab, useTempStore } from "../../../store/useAuthStore"
 import { Theme, useNavStore } from "../../../store/useNavStore"
@@ -21,6 +21,8 @@ type RegisterData = {
 
 const AuthModal = () => {
     const location = useLocation();
+    const navigate = useNavigate();
+
     const { authTab, setAuthTab } = useAuthStore();
     const { theme, setTheme } = useNavStore();
     const { tempUser } = useTempStore();
@@ -40,6 +42,14 @@ const AuthModal = () => {
         setTheme(newTheme);
     }
 
+    const handleCloseModal = () => {
+        if (location.pathname !== '/auth') setAuthTab(AuthTab.Closed);
+        else {
+            navigate('/');
+            setAuthTab(AuthTab.Closed);
+        }
+    }
+
     const handleBackgroundClick = (event: React.MouseEvent<HTMLDivElement>) => {
         if (location.pathname !== '/auth' && event.target === event.currentTarget) {
             setAuthTab(AuthTab.Closed);
@@ -71,26 +81,24 @@ const AuthModal = () => {
                         />
                     )}
                 </div>
-                {location.pathname !== '/auth' && (
-                    <>
-                        <Link to='/' className='logo__wrapper'>
-                            <img src="/logo.png" alt="" />
-                        </Link>
-                        <button
-                            className='theme-btn'
-                            onClick={handleToggleTheme}
-                            title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
-                        >
-                            {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
-                        </button>
-                        <button
-                            className='close__btn'
-                            onClick={() => setAuthTab(AuthTab.Closed)}
-                        >
-                            <IoClose size={30} />
-                        </button>
-                    </>
-                )}
+                <>
+                    <Link to='/' className='logo__wrapper'>
+                        <img src="/logo.png" alt="" />
+                    </Link>
+                    <button
+                        className='theme-btn'
+                        onClick={handleToggleTheme}
+                        title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
+                    >
+                        {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
+                    </button>
+                    <button
+                        className='close__btn'
+                        onClick={handleCloseModal}
+                    >
+                        <IoClose size={30} />
+                    </button>
+                </>
             </div>
         </div>
     )