Created
August 29, 2022 23:44
-
-
Save rushil1999/a793e99509cfd0f077cee8a98a81e671 to your computer and use it in GitHub Desktop.
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
import React, {useContext, useState} from 'react'; | |
import { AuthContext } from '../contexts/AuthContextProvider'; | |
import { useNavigate, useLocation } from "react-router-dom"; | |
import Button from '@mui/material/Button' | |
import Paper from '@mui/material/Paper'; | |
import TextField from '@mui/material/TextField'; | |
const Login = () => { | |
const navigate = useNavigate(); | |
const location = useLocation(); | |
//State to store username entered by user | |
const [userName, setUserName] = useState("") | |
//State to give message to user in case of any form error | |
const [userNameFieldMessage, setUserNameFieldMessage] = useState(""); | |
// State to indicate whether error is occured ot not | |
const [userNameFieldError, setUserNameFieldError] = useState(false); | |
//useContext hook in action | |
// useContext hook takes in the Context( AuthContext in this case) exported by the Context Provider component and gets the functions and objects passed in context | |
const [authState, setAuthState, userDetails, setUserDetails] = useContext(AuthContext); | |
// Function to handle the event when user clicks login | |
const handleLogin = () => { | |
//User name must not be empty | |
if(userName.length == 0){ | |
setUserNameFieldMessage("Please fill in the name"); | |
setUserNameFieldError(true); | |
return; | |
} | |
else if(setUserNameFieldError === true){ | |
return; | |
} | |
//This is where the child component, update the context state so all the components consuming the context can now refer to updated value | |
setAuthState(true); | |
setUserDetails({...userDetails, userName}); | |
//Navigating to the previoue URL on successfull login | |
navigate(`${location.state.from.pathname}`) | |
} | |
//Stores username to state | |
const handleUserNameFieldChange = (e) => { | |
if(e.target.value > 0){ | |
setUserNameFieldMessage(""); | |
setUserNameFieldError(false); | |
} | |
if(e.target.value > 10){ | |
setUserNameFieldMessage("Name too long"); | |
setUserNameFieldError(true); | |
} | |
setUserName(e.target.value) | |
} | |
return( | |
<div> | |
<div style={{textAlign: "center", margin: "35px"}}> | |
<div style={{padding: "15px"}}> | |
<TextField | |
error={userNameFieldError} | |
id="username" | |
defaultValue="" | |
helperText={userNameFieldMessage} | |
onChange={handleUserNameFieldChange} | |
/> | |
</div> | |
<Button variant="contained" onClick={() => handleLogin()}> | |
Login User | |
</Button> | |
</div> | |
<div style={{textAlign: "center", justifyContent: "center", display: "flex"}}> | |
<Paper elevation={3} | |
sx={{ | |
padding: "10px", | |
width: "50%", | |
border: 1, | |
borderColor: 'primary.main', | |
boxShadow: 1, | |
bgcolor: "#C3EAD4", | |
color: "#58615C" | |
}} | |
> | |
This is where you have to get User credentials. | |
Fields like username, password, email, etc can be acquired from this component. | |
</Paper> | |
</div> | |
</div> | |
) | |
} | |
export default Login; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment