Skip to content

Commit

Permalink
integrated AuthContext
Browse files Browse the repository at this point in the history
  • Loading branch information
@PrathamX595
PrathamX595 committed Jun 13, 2024
1 parent 4345d8e commit 3fe8cb3
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 75 deletions.
14 changes: 7 additions & 7 deletions frontend/src/contexts/AuthContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Home: React.FC = () => {
const auth = useAuth();

const handleLogin = () => {
auth.login();
navigate('/login');
};

const handleLogout = () => {
Expand Down
146 changes: 79 additions & 67 deletions frontend/src/pages/Login.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import React, { useState } from 'react';
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 [email, setEmail] = useState('');
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');
Expand All @@ -21,89 +23,99 @@ const Login: React.FC = () => {
setIsLoggedIn(false);
};

const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(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');
// Handle form submission logic here
auth.login(name, password)
};

useEffect(() => {
const user = auth.getUser();
console.log(user);
setIsLoggedIn(auth.isLoggedIn());
console.log(isLoggedIn);
}, [auth, auth.getUser()]);

Check warning on line 46 in frontend/src/pages/Login.tsx

View workflow job for this annotation

GitHub Actions / eslint-frontend 

React Hook useEffect has a missing dependency: 'isLoggedIn'. Either include it or remove the dependency array

Check warning on line 46 in frontend/src/pages/Login.tsx

View workflow job for this annotation

GitHub Actions / eslint-frontend 

React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked

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"
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={handleEmailChange}
placeholder="Email Address"
width = "96"
height= "12"
/>
</div>
<div className='my-3'>
<Input
id="pass"
type="password"
onChange={handlePasswordChange}
placeholder="Password"
width = "96"
height= "12"
/>
<>
<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"
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>
<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'
/>
</form>
<div>
<div className='font-kavoon flex justify-center items-center my-3'>
Don't have an account? <Link to="/signin" className=' text-blue-700 '> Sign in</Link>
</div>
</div>
</form>
<div>
<div className='font-kavoon flex justify-center items-center my-3'>
Don't have an account? <Link to="/signin" className=' text-blue-700 '> Sign in</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>

);
};

Expand Down

0 comments on commit 3fe8cb3

Please sign in to comment.