Merge pull request #56 from Bug-Bust3rs/dev

feat : login
Bug-Bust3rs · Jul 22, 2024 · 3a11372 · 3a11372
2 parents d86a99f + 9f93121
commit 3a11372
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/apps/frontend/src/components/Navbar.tsx b/apps/frontend/src/components/Navbar.tsx
@@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../../public/Unite__Logo.png'
 import { useTheme } from '../context/ThemeCOntext';
-import { Moon , SunMoon } from 'lucide-react';
+import { Moon, SunMoon } from 'lucide-react';
+import { useAuthContext } from "../hooks/useAuthContext";
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const { isDarkMode, toggleTheme } = useTheme()
+  const { state } = useAuthContext();
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);
@@ -19,7 +21,7 @@ const Navbar: React.FC = () => {
           <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Unite</span>
         </Link>
         <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
-          <button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><Link to={'/login'}>Sign In</Link> </button>
+          {state.user ? <button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><Link to={'/logout'}>Log out</Link> </button> : <button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><Link to={'/login'}>Sign In</Link> </button>}
           <button
             onClick={toggleMenu}
             data-collapse-toggle="navbar-sticky"
@@ -49,16 +51,16 @@ const Navbar: React.FC = () => {
               <Link to="/contact" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</Link>
             </li>
             <li>
-            <button
-              onClick={toggleTheme}
-              className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-            >
-              {isDarkMode ? <SunMoon /> : <Moon/>}
-            </button>
+              <button
+                onClick={toggleTheme}
+                className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >
+                {isDarkMode ? <SunMoon /> : <Moon />}
+              </button>
             </li>
-
 
-
+
+
           </ul>
         </div>
       </div>

diff --git a/apps/frontend/src/components/auth/Login.tsx b/apps/frontend/src/components/auth/Login.tsx
@@ -92,7 +92,7 @@ export default function Login(): JSX.Element {
           )}
           {isSucess && (
             <div className="bg-green-200 text-green-500 p-5 rounded-lg mt-4">
-              Successfully logged in!
+              OTP sent to your Email!
             </div>
           )}
         </div>

diff --git a/apps/frontend/src/hooks/useLoginVerify.tsx b/apps/frontend/src/hooks/useLoginVerify.tsx
@@ -2,8 +2,10 @@ import { useState } from "react";
 import { useAuthContext } from "./useAuthContext";
 import axios from "axios";
 import { LoginVerifyData } from "../interfaces";
+import { useNavigate } from "react-router-dom";
 
 export const useVerifyLogin = () => {
+  const navigate = useNavigate();
   const [error, setError] = useState<boolean>(false);
   const [isLoading, setisLoading] = useState<boolean>(false);
   const [isSucess, setisSucess] = useState<boolean>(false);
@@ -22,6 +24,10 @@ export const useVerifyLogin = () => {
       localStorage.setItem("user", JSON.stringify(userData));
       dispatch({ type: "LOGIN", payload: userData });
       setisSucess(true);
+
+      setTimeout(() => {
+        navigate(`/`);
+      }, 2000);
     } catch (error) {
       console.error("Verification error:", error);
       setError(true);