Skip to content

Commit

Permalink
error fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@PrathamX595
PrathamX595 committed Jun 14, 2024
1 parent 7f5337f commit 2952885
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 103 deletions.
6 changes: 3 additions & 3 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ 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'
import SignUp from './pages/SignUp';

const router = createBrowserRouter([
{
Expand All @@ -25,8 +25,8 @@ const router = createBrowserRouter([
},
{ path: '/about', element: <About /> },
{ path: '/error', element: <Error /> },
{ path: '/login', element: <Login />},
{ path: '/signup', element: <SignUp />}
{ path: '/login', element: <Login /> },
{ path: '/signup', element: <SignUp /> },
],
},
]);
Expand Down
52 changes: 25 additions & 27 deletions frontend/src/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ const Navbar: React.FC<NavbarProps> = ({
};

const goToLogin = () => {
navigate('/login')
}
navigate('/login');
};

return (
<div>
Expand All @@ -50,31 +50,29 @@ const Navbar: React.FC<NavbarProps> = ({
</button>
</div>
{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">
<Button
text="Sign In /Login"
buttonSize="w-56 h-11"
className="border-4"
rounded="rounded-2xl"
onClick={goToLogin}
/>
</div>
</>
)}

<>
<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">
<Button
text="Sign In /Login"
buttonSize="w-56 h-11"
className="border-4"
rounded="rounded-2xl"
onClick={goToLogin}
/>
</div>
</>
)}
</div>
{isOpen && (
<div className="fixed inset-0 flex z-20">
Expand Down
19 changes: 11 additions & 8 deletions frontend/src/contexts/AuthContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,17 @@ export function useAuth() {
}

export function AuthProvider({ children }: { children: ReactElement }) {
const [user, setUser] = useState<User | null>(null);

const login = useCallback((name: string, pass: string) => {
setUser({
name: name,
pass: pass,
});
}, [setUser]);
const [user, setUser] = useState<User | null>(null);

const login = useCallback(
(name: string, pass: string) => {
setUser({
name: name,
pass: pass,
});
},
[setUser]
);

const logout = useCallback(() => {
setUser(null);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/library/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ type ButtonProps = {
fontSize?: string;
rounded?: string;
buttonSize?: string;
type?: "submit" | "reset" | "button"
type?: 'submit' | 'reset' | 'button';
borderColor?: string;
hoverColor?: string;
hoverScale?: boolean;
Expand Down
65 changes: 36 additions & 29 deletions frontend/src/pages/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const Login: React.FC = () => {
const [username, setUsername] = useState('');
const navigate = useNavigate();
const auth = useAuth();
const user = auth.getUser();
const user = auth.getUser();

const handleLogin = () => {
setUsername(username);
console.log(auth.isLoggedIn());
Expand All @@ -30,38 +30,39 @@ const Login: React.FC = () => {
setName(event.target.value);
};

const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const handlePasswordChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
setPassword(event.target.value);
};


const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log('Form submitted');
if(user?.name == name && user.pass == password){
console.log("Successful Login");
if (user?.name == name && user.pass == password) {
console.log('Successful Login');
navigate('/home');
}else{
console.log("Failed Login");
} else {
console.log('Failed Login');
}
};

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

Check warning on line 53 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'>
<div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
<Navbar
isLoggedIn={auth.isLoggedIn()} //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}
/>
<div className=' w-full flex justify-center items-center grow'>
<div className='flex flex-col justify-center items-center'>
<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"
Expand All @@ -76,52 +77,58 @@ const Login: React.FC = () => {
</div>
<div className='w-96 h-1 bg-neutral-300 my-3'></div> */}
<div>
<form onSubmit={handleSubmit} className=''>
<div className=''>
<div className=' my-3'>
<form onSubmit={handleSubmit} className="">
<div className="">
<div className=" my-3">
<Input
id="email"
type="text"
onChange={handleNameChange}
placeholder="Enter Username"
width = "96"
height= "12"
width="96"
height="12"
/>
</div>
<div className='my-3'>
<div className="my-3">
<Input
id="pass"
type="password"
onChange={handlePasswordChange}
placeholder="Password"
width = "96"
height= "12"
width="96"
height="12"
/>
</div>
<div className='flex justify-center'>
<div className="flex justify-center">
<Button
text="Login"
textColor="text-white"
py='0'
py="0"
buttonSize="w-32 h-10"
className='border-4 rounded-full'
fontSize='text-2xl'
type='submit'
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 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>
</>

);
};

Expand Down
Loading

0 comments on commit 2952885

Please sign in to comment.