Skip to content

Commit

Permalink
fixed lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@shivansh-bhatnagar18
shivansh-bhatnagar18 committed Jun 14, 2024
1 parent 562e37c commit d0c5a4e
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 91 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
29 changes: 13 additions & 16 deletions frontend/src/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,22 +41,19 @@ const Navbar: React.FC<NavbarProps> = ({
</button>
</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 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">
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 @@ -12,7 +12,7 @@ const Login: React.FC = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [username, setUsername] = useState('');
const auth = useAuth();

const handleLogin = () => {
setUsername('Username_7');
setIsLoggedIn(true);
Expand All @@ -27,19 +27,20 @@ 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');
const user = auth.getUser();
if(user?.name == name && user.pass == password){
console.log("Successful Login");
}else{
console.log("Failed Login");
const user = auth.getUser();
if (user?.name == name && user.pass == password) {
console.log('Successful Login');
} else {
console.log('Failed Login');
}
};

Expand All @@ -50,15 +51,15 @@ const Login: React.FC = () => {

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={true} //true here so that navbar does not render signin/login button
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=" 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 @@ -73,53 +74,59 @@ 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>
</>

);
};

export default Login;
export default Login;
77 changes: 43 additions & 34 deletions frontend/src/pages/SignUp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const SignUp: React.FC = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [username, setUsername] = useState('');
const auth = useAuth();

const handleLogin = () => {
setUsername('Username_7');
setIsLoggedIn(true);
Expand All @@ -24,27 +24,30 @@ const SignUp: React.FC = () => {
setIsLoggedIn(false);
};

const handelConfirmPassChange = (event: React.ChangeEvent<HTMLInputElement>) => {
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>) => {
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");
if (password === confirmPass) {
auth.login(name, password);
console.log('successfull signup');
} else {
console.log('failed signup');
}
};

Expand All @@ -57,16 +60,16 @@ const SignUp: React.FC = () => {

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={true} //true here so that navbar does not render signin/login button
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'>
<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"
Expand All @@ -80,63 +83,69 @@ const SignUp: 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='my-3'>
<div className="my-3">
<Input
id="confirmPass"
type="password"
onChange={handelConfirmPassChange}
placeholder="Confirm Password"
width = "96"
height= "12"
width="96"
height="12"
/>
</div>
<div className='flex justify-center'>
<div className="flex justify-center">
<Button
text="Sign Up"
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'>
Already have an account? <Link to="/login" className=' text-blue-700 '> Login</Link>
<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;
export default SignUp;

0 comments on commit d0c5a4e

Please sign in to comment.