From fbb5f974735a8aa24a6cd58ddf5c1848cc011827 Mon Sep 17 00:00:00 2001
From: PrathamX595 <pratham.seth.cer23@itbhu.ac.in>
Date: Mon, 10 Jun 2024 23:20:14 +0530
Subject: [PATCH] Frontend: Improved Auth UX

auth context was used to use the username on the navbar and sidepanel

integrated AuthContext

added Signup page

implemented Login and SignUp

error fixes

error fixes

eslint fix

fixes
---
 frontend/src/App.tsx          |  2 +-
 frontend/src/Navbar.tsx       | 23 +++++++++++++++++++++--
 frontend/src/pages/Login.tsx  | 17 ++++++++++-------
 frontend/src/pages/SignUp.tsx |  6 +++++-
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1ad3a4b..b016e02 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -26,7 +26,7 @@ const router = createBrowserRouter([
             { path: '/about', element: <About /> },
             { path: '/error', element: <Error /> },
             { path: '/login', element: <Login /> },
-            { path: '/signup', element: <SignUp /> },
+            { path: '/register', element: <SignUp /> },
         ],
     },
 ]);
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
index 46bb356..821d932 100644
--- a/frontend/src/Navbar.tsx
+++ b/frontend/src/Navbar.tsx
@@ -3,6 +3,7 @@ import Button from './library/button';
 import './index.css';
 import { useNavigate } from 'react-router-dom';
 import RulesModal from './library/rulesModal';
+import { useAuth } from './contexts/AuthContext';
 
 type NavbarProps = {
     isLoggedIn?: boolean;
@@ -22,12 +23,20 @@ const Navbar: React.FC<NavbarProps> = ({
     const [isOpen, setIsOpen] = useState(false);
     const [showRulesModal, setShowRulesModal] = useState(false);
 
+    const auth = useAuth();
+
+    const user = auth.getUser();
+
     const navigate = useNavigate();
 
     const toggleMenu = () => {
         setIsOpen(!isOpen);
     };
 
+    const goToLogin = () => {
+        navigate('/login');
+    };
+
     return (
         <div>
             <div className="flex justify-between items-center p-4 ml-4 mt-4 mr-2 relative z-10">
@@ -40,8 +49,17 @@ const Navbar: React.FC<NavbarProps> = ({
                         />
                     </button>
                 </div>
-                {isLoggedIn ? (
-                    <></>
+                {auth.isLoggedIn() ? (
+                    <>
+                        <div className="text-xl font-bold mt-2">
+                            <Button
+                                text={user ? user.name : 'Noname'}
+                                buttonSize="w-56 h-11"
+                                className="border-4"
+                                rounded="rounded-2xl"
+                            />
+                        </div>
+                    </>
                 ) : (
                     <>
                         <div className="text-xl font-bold mt-2">
@@ -50,6 +68,7 @@ const Navbar: React.FC<NavbarProps> = ({
                                 buttonSize="w-56 h-11"
                                 className="border-4"
                                 rounded="rounded-2xl"
+                                onClick={goToLogin}
                             />
                         </div>
                     </>
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 115c2bc..dcbd5c5 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -4,6 +4,7 @@ import Input from '../library/input';
 import Navbar from '../Navbar';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
+import { useNavigate } from 'react-router-dom';
 import '../index.css';
 
 const Login: React.FC = () => {
@@ -11,16 +12,18 @@ const Login: React.FC = () => {
     const [password, setPassword] = useState('');
     const [isLoggedIn, setIsLoggedIn] = useState(false);
     const [username, setUsername] = useState('');
+    const navigate = useNavigate();
     const auth = useAuth();
+    const user = auth.getUser();
 
     const handleLogin = () => {
-        setUsername('Username_7');
-        setIsLoggedIn(true);
+        setUsername(username);
+        console.log(auth.isLoggedIn());
     };
 
     const handleLogout = () => {
         setUsername('');
-        setIsLoggedIn(false);
+        auth.logout();
     };
 
     const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -36,9 +39,9 @@ const Login: React.FC = () => {
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         console.log('Form submitted');
-        const user = auth.getUser();
         if (user?.name == name && user.pass == password) {
             console.log('Successful Login');
+            navigate('/home');
         } else {
             console.log('Failed Login');
         }
@@ -47,13 +50,13 @@ const Login: React.FC = () => {
     useEffect(() => {
         setIsLoggedIn(auth.isLoggedIn());
         console.log(isLoggedIn);
-    }, [auth, auth.getUser()]);
+    }, [auth, user, isLoggedIn]);
 
     return (
         <>
             <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
                 <Navbar
-                    isLoggedIn={true} //true here so that navbar does not render signin/login button
+                    isLoggedIn={auth.isLoggedIn()} //true here so that navbar does not render signin/login button
                     username={username}
                     onLogin={handleLogin}
                     onLogout={handleLogout}
@@ -113,7 +116,7 @@ const Login: React.FC = () => {
                                 <div className="font-kavoon flex justify-center items-center my-3">
                                     Don't have an account?{' '}
                                     <Link
-                                        to="/signup"
+                                        to="/register"
                                         className=" text-blue-700 "
                                     >
                                         {' '}
diff --git a/frontend/src/pages/SignUp.tsx b/frontend/src/pages/SignUp.tsx
index 21e0d41..bb4df9a 100644
--- a/frontend/src/pages/SignUp.tsx
+++ b/frontend/src/pages/SignUp.tsx
@@ -4,6 +4,7 @@ import Input from '../library/input';
 import Navbar from '../Navbar';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
+import { useNavigate } from 'react-router-dom';
 import '../index.css';
 
 const SignUp: React.FC = () => {
@@ -12,7 +13,9 @@ const SignUp: React.FC = () => {
     const [confirmPass, setConfirmPass] = useState('');
     const [isLoggedIn, setIsLoggedIn] = useState(false);
     const [username, setUsername] = useState('');
+    const navigate = useNavigate();
     const auth = useAuth();
+    const user = auth.getUser();
 
     const handleLogin = () => {
         setUsername('Username_7');
@@ -46,6 +49,7 @@ const SignUp: React.FC = () => {
         if (password === confirmPass) {
             auth.login(name, password);
             console.log('successfull signup');
+            navigate('/');
         } else {
             console.log('failed signup');
         }
@@ -56,7 +60,7 @@ const SignUp: React.FC = () => {
         console.log(user);
         setIsLoggedIn(auth.isLoggedIn());
         console.log(isLoggedIn);
-    }, [auth, auth.getUser()]);
+    }, [auth, user, isLoggedIn]);
 
     return (
         <>