-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
df7b381
commit b0344ef
Showing
5 changed files
with
134 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import React, { useState } from 'react'; | ||
| import Button from '../library/button'; | ||
| import Input from '../library/input'; | ||
| import Navbar from '../Navbar'; | ||
| import { Link } from 'react-router-dom'; | ||
| import '../index.css'; | ||
|
|
||
| const Login: React.FC = () => { | ||
| const [email, setEmail] = useState(''); | ||
| const [password, setPassword] = useState(''); | ||
| const [isLoggedIn, setIsLoggedIn] = useState(false); | ||
| const [username, setUsername] = useState(''); | ||
|
|
||
| const handleLogin = () => { | ||
| setUsername('Username_7'); | ||
| setIsLoggedIn(true); | ||
| }; | ||
|
|
||
| const handleLogout = () => { | ||
| setUsername(''); | ||
| setIsLoggedIn(false); | ||
| }; | ||
|
|
||
| const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| setEmail(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 | ||
| }; | ||
|
|
||
| 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> | ||
| <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="/signin" className=' text-blue-700 '> Sign in</Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Login; |