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
sethdivyansh · Jun 14, 2024 · ec21f99 · ec21f99
1 parent d0c5a4e
commit ec21f99
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git 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
@@ -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
@@ -4,23 +4,26 @@ 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 = () => {
     const [name, setName] = useState('');
     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
@@ -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 (
         <>