In this tutorial, we are going to learn login form in React js. After login, we will route to the dashboard page. We will use React hooks, bootstrap,...
Here is the image of what we will build at the end of the tutorial.
Go to bootstrap, copy the CSS, and add it to index.html in the head.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
We can also select the form from the bootstrap and add it to the code.
Add the following code to the Login.js file
<form>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">
Email address
</label>
<input
type="email"
className="form-control"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">
Password
</label>
<input
type="password"
className="form-control"
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button type="submit" className="btn btn-primary" onClick={handleSubmit}>
Login
</button>
</form>
When a user enters the details in a form, we use “useState” to store the data.
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
We will make an onChange function in <input/> and pass the setEmail and setPassword. So, whatever we pass in the function will be stored in useState. The data will be stored in email and password.
In the input field, the value entered by the user will be set in setEmail and setPassword. Whatever we pass from the functions setEmail and setPassword will be saved into email and password in useState.
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">
Email address
</label>
<input
type="email"
className="form-control"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
Now, to submit the form, we will add a function to the submit button. Take the “onClick” function.
Read this function, and we will also write the logic here. We will use react axios to post the data. It accepts some parameters like url, method, header, and data.
To use the “axios”, first we have to install its library using the command -
We are logging in, so we will take the post method, we have added a post url of login, and we will also accept some data and store it in the object form.
After successfully logging in, the login page will take the user to the dashboard page. If the login fails, the user will remain on the login page.
To route the user to the dashboard page, we will add the route in the App.js page.
function App() {
return (
<div className="container">
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Login />}></Route>
<Route exact path="/dashboard" element={<Dashboard />}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
And the code for the “axios” is here -
const history = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
axios
.post("https://localhost:44395/api/Customer/LoginCustomer", {
email: email,
password: password,
})
.then((res) => {
if (res.data.code === 200) {
history("/dashboard");
} else {
history("/login");
}
});
};
Our complete code will look like this:
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
const Login = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const history = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
axios
.post("https://localhost:44395/api/Customer/LoginCustomer", {
email: email,
password: password,
})
.then((res) => {
if (res.data.code === 200) {
history("/dashboard");
} else {
history("/login");
}
});
};
return (
<>
<h2>Login</h2>
<form>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">
Email address
</label>
<input
type="email"
className="form-control"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">
Password
</label>
<input
type="password"
className="form-control"
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button type="submit" className="btn btn-primary" onClick={handleSubmit}>
Login
</button>
</form>
</>
);
};
export default Login;
No comments:
Post a Comment