From c195d3becb4303a396ff6d18e7fbcc870420319a 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: Added Login Page with modifications to other
 components

added a Login page with changes to input and button components. routes
for login and signin pages were also added

Fixes: #79

integrated AuthContext

added Signup page
---
 frontend/src/App.tsx                  |   4 +
 frontend/src/Navbar.tsx               |  28 +++--
 frontend/src/contexts/AuthContext.tsx |  14 +--
 frontend/src/library/button.tsx       |   3 +
 frontend/src/library/input.tsx        |   2 +-
 frontend/src/pages/Home.tsx           |   2 +-
 frontend/src/pages/Login.tsx          | 125 +++++++++++++++++++++++
 frontend/src/pages/SignUp.tsx         | 142 ++++++++++++++++++++++++++
 8 files changed, 300 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/pages/Login.tsx
 create mode 100644 frontend/src/pages/SignUp.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 328ad8e..4c00605 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,6 +6,8 @@ import Error from './pages/Error';
 import Game from './pages/Game';
 import About from './pages/About';
 import { AuthProvider } from './contexts/AuthContext';
+import Login from './pages/Login';
+import SignUp from './pages/SignUp'
 
 const router = createBrowserRouter([
     {
@@ -23,6 +25,8 @@ const router = createBrowserRouter([
             },
             { path: '/about', element: <About /> },
             { path: '/error', element: <Error /> },
+            { path: '/login', element: <Login />},
+            { path: '/signup', element: <SignUp />}
         ],
     },
 ]);
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
index c43565c..5cb4348 100644
--- a/frontend/src/Navbar.tsx
+++ b/frontend/src/Navbar.tsx
@@ -36,17 +36,23 @@ const Navbar: React.FC<NavbarProps> = ({
                         />
                     </button>
                 </div>
-                {!isLoggedIn && (
-                    <div className="text-xl font-bold mt-2">
-                        <Button
-                            text="Login"
-                            buttonSize="w-56 h-11"
-                            className="border-4"
-                            rounded="rounded-2xl"
-                            onClick={onLogin}
-                        />
-                    </div>
-                )}
+                {isLoggedIn ? (
+                            <>
+
+                            </>
+                        ) : (
+                            <>
+                                <div className="text-xl font-bold mt-2">
+                                    <Button
+                                    text="Sign In /Login"
+                                    buttonSize="w-56 h-11"
+                                    className="border-4"
+                                    rounded="rounded-2xl"
+                                    />
+                                </div>
+                            </>
+                        )}
+               
             </div>
             {isOpen && (
                 <div className="fixed inset-0 flex z-20">
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
index 78b6d25..4b34852 100644
--- a/frontend/src/contexts/AuthContext.tsx
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -8,12 +8,12 @@ import {
 
 export type User = {
     name: string;
-    email: string;
+    pass: string;
 };
 
 export type AuthContextProps = {
     getUser: () => User | null;
-    login: () => void;
+    login: (arg0: string, arg1: string) => void;
     logout: () => void;
     isLoggedIn: () => boolean;
 };
@@ -30,14 +30,14 @@ export function useAuth() {
 }
 
 export function AuthProvider({ children }: { children: ReactElement }) {
-    const [user, setUser] = useState<User | null>(null);
+    const [user, setUser] = useState<User | null>(null);    
 
-    const login = useCallback(() => {
+    const login = useCallback((name: string, pass: string) => {
         setUser({
-            name: 'John Doe',
-            email: '',
+            name: name,
+            pass: pass,
         });
-    }, []);
+    }, [setUser]);
 
     const logout = useCallback(() => {
         setUser(null);
diff --git a/frontend/src/library/button.tsx b/frontend/src/library/button.tsx
index c9ba58a..af848eb 100644
--- a/frontend/src/library/button.tsx
+++ b/frontend/src/library/button.tsx
@@ -15,6 +15,7 @@ type ButtonProps = {
     fontSize?: string;
     rounded?: string;
     buttonSize?: string;
+    type?: "submit" | "reset" | "button"
     borderColor?: string;
     hoverColor?: string;
     hoverScale?: boolean;
@@ -36,11 +37,13 @@ const Button: React.FC<ButtonProps> = ({
     borderColor = 'border-black',
     hoverColor = 'hover:bg-lime-600',
     hoverScale = true,
+    type = 'button',
     onClick,
     className = '',
 }) => {
     return (
         <button
+            type={type}
             onClick={onClick}
             className={`text-stroke ${className} shadow-xl border-3 ${borderColor} font-kavoon ${textColor} ${buttonSize} ${rounded} ${fontSize} ${px} ${py} ${backgroundColor} transition-all duration-300 ${hoverScale ? 'transform hover:scale-105' : ''} ${hoverColor}`}
         >
diff --git a/frontend/src/library/input.tsx b/frontend/src/library/input.tsx
index 4f79b9d..f63dd6b 100644
--- a/frontend/src/library/input.tsx
+++ b/frontend/src/library/input.tsx
@@ -15,7 +15,7 @@ const Input: React.FC<Props> = ({
 }) => {
     return (
         <input
-            className={`w-[${width}] h-[${height}] bg-[#d9d9d9] border-4 border-black rounded-[20px] flex items-center justify-center text-center p-0 font-normal font-kavoon text-[23.2px] leading-[29px] text-black placeholder-white placeholder-opacity-50"`}
+            className={`w-${width} h-${height} bg-[#d9d9d9] border-4 border-black rounded-full flex items-center justify-center text-center p-0 font-normal font-kavoon text-[23.2px] leading-[29px] text-black placeholder-white placeholder-opacity-50"`}
             {...props}
         />
     );
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 0c2730e..cda1a01 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -23,7 +23,7 @@ const Home: React.FC = () => {
     const auth = useAuth();
 
     const handleLogin = () => {
-        auth.login();
+        navigate('/login');
     };
 
     const handleLogout = () => {
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 0000000..3654fd4
--- /dev/null
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import Button from '../library/button';
+import Input from '../library/input';
+import Navbar from '../Navbar';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+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 auth = useAuth();
+    
+    const handleLogin = () => {
+        setUsername('Username_7');
+        setIsLoggedIn(true);
+    };
+
+    const handleLogout = () => {
+        setUsername('');
+        setIsLoggedIn(false);
+    };
+
+    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setName(event.target.value);
+    };
+
+    const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPassword(event.target.value);
+    };
+
+
+    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");
+        }else{
+            console.log("Failed Login");
+        }
+    };
+
+    useEffect(() => {
+        setIsLoggedIn(auth.isLoggedIn());
+        console.log(isLoggedIn);
+    }, [auth, auth.getUser()]);
+
+    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
+                    username={username}
+                    onLogin={handleLogin}
+                    onLogout={handleLogout}
+                />
+                <div className=' w-full flex justify-center items-center grow'>
+                    <div className='flex flex-col justify-center items-center'>
+                        {/* <div className='flex justify-center'>
+                            <Button
+                                buttonSize="w-96 h-12"
+                                py="py-0"
+                                textColor="text-white"
+                                text="Login using Google"
+                                backgroundColor="bg-gray-300"            //Login with google to be handeled later
+                                hoverColor="hover:bg-gray-500"
+                                className='border-4 m-2 rounded-full'
+                                fontSize=' text-2xl'
+                            />
+                        </div>
+                        <div className='w-96 h-1 bg-neutral-300 my-3'></div> */}
+                        <div>
+                            <form onSubmit={handleSubmit} className=''>
+                                <div className=''>
+                                    <div className=' my-3'>
+                                        <Input
+                                            id="email"
+                                            type="text"
+                                            onChange={handleNameChange}
+                                            placeholder="Enter Username"
+                                            width = "96"
+                                            height= "12"
+                                        />
+                                    </div>
+                                    <div className='my-3'>
+                                        <Input
+                                            id="pass"
+                                            type="password"
+                                            onChange={handlePasswordChange}
+                                            placeholder="Password"
+                                            width = "96"
+                                            height= "12"
+                                        />
+                                    </div>
+                                    <div className='flex justify-center'>
+                                        <Button
+                                            text="Login"
+                                            textColor="text-white"
+                                            py='0'
+                                            buttonSize="w-32 h-10"
+                                            className='border-4 rounded-full'
+                                            fontSize='text-2xl'
+                                            type='submit'
+                                        />
+                                    </div>
+                                </div>
+                            </form>
+                            <div>
+                                <div className='font-kavoon flex justify-center items-center my-3'>
+                                    Don't have an account? <Link to="/signup" className=' text-blue-700 '> Sign up</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+        
+    );
+};
+
+export default Login;
\ No newline at end of file
diff --git a/frontend/src/pages/SignUp.tsx b/frontend/src/pages/SignUp.tsx
new file mode 100644
index 0000000..993931e
--- /dev/null
+++ b/frontend/src/pages/SignUp.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import Button from '../library/button';
+import Input from '../library/input';
+import Navbar from '../Navbar';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import '../index.css';
+
+const SignUp: React.FC = () => {
+    const [name, setName] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPass, setConfirmPass] = useState('');
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const [username, setUsername] = useState('');
+    const auth = useAuth();
+    
+    const handleLogin = () => {
+        setUsername('Username_7');
+        setIsLoggedIn(true);
+    };
+
+    const handleLogout = () => {
+        setUsername('');
+        setIsLoggedIn(false);
+    };
+
+    const handelConfirmPassChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setConfirmPass(event.target.value);
+    };
+
+    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setName(event.target.value);
+    };
+
+    const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPassword(event.target.value);
+    };
+
+
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        console.log('Form submitted');
+        if(password === confirmPass){
+            auth.login(name, password)
+            console.log("successfull signup")
+        }else{
+            console.log("failed signup");
+        }
+    };
+
+    useEffect(() => {
+        const user = auth.getUser();
+        console.log(user);
+        setIsLoggedIn(auth.isLoggedIn());
+        console.log(isLoggedIn);
+    }, [auth, auth.getUser()]);
+
+    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
+                    username={username}
+                    onLogin={handleLogin}
+                    onLogout={handleLogout}
+                />
+                <div className=' w-full flex justify-center items-center grow'>
+                    <div className='flex flex-col justify-center items-center'>
+                    {/* <div className='flex justify-center'>
+                        <Button
+                            buttonSize="w-96 h-12"
+                            py="py-0"
+                            textColor="text-white"
+                            text="Login using Google"                          //Sign up with google to be handeled later
+                            backgroundColor="bg-gray-300"
+                            hoverColor="hover:bg-gray-500"
+                            className='border-4 m-2 rounded-full'
+                            fontSize=' text-2xl'
+                        />
+                    </div>
+                    <div className='w-96 h-1 bg-neutral-300 my-3'></div> */}
+                        <div>
+                            <form onSubmit={handleSubmit} className=''>
+                                <div className=''>
+                                    <div className=' my-3'>
+                                        <Input
+                                            id="email"
+                                            type="text"
+                                            onChange={handleNameChange}
+                                            placeholder="Enter Username"
+                                            width = "96"
+                                            height= "12"
+                                        />
+                                    </div>
+                                    <div className='my-3'>
+                                        <Input
+                                            id="pass"
+                                            type="password"
+                                            onChange={handlePasswordChange}
+                                            placeholder="Password"
+                                            width = "96"
+                                            height= "12"
+                                        />
+                                    </div>
+                                    <div className='my-3'>
+                                        <Input
+                                            id="confirmPass"
+                                            type="password"
+                                            onChange={handelConfirmPassChange}
+                                            placeholder="Confirm Password"
+                                            width = "96"
+                                            height= "12"
+                                        />
+                                    </div>
+                                    <div className='flex justify-center'>
+                                        <Button
+                                            text="Sign Up"
+                                            textColor="text-white"
+                                            py='0'
+                                            buttonSize="w-32 h-10"
+                                            className='border-4 rounded-full'
+                                            fontSize='text-2xl'
+                                            type='submit'
+                                        />
+                                    </div>
+                                </div>
+                            </form>
+                            <div>
+                                <div className='font-kavoon flex justify-center items-center my-3'>
+                                    Already have an account? <Link to="/login" className=' text-blue-700 '> Login</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+        
+    );
+};
+
+export default SignUp;
\ No newline at end of file