Week-8.
Create a Simple Login form using React JS
import "./App.css";
import React, { useState } from "react";
export default function App() {
const [values, setValues] = useState({
firstName: "",
lastName: "",
email: ""
});
const handleInputChange = (event) => {
/* event.persist(); NO LONGER USED IN v.17*/
event.preventDefault();
const { name, value } = event.target;
setValues((values) => ({
...values,
[name]: value
}));
};
const [submitted, setSubmitted] = useState(false);
const [valid, setValid] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
if (values.firstName && values.lastName && values.email) {
setValid(true);
setSubmitted(true);
};
return (
<div className="form-container">
<form className="register-form" onSubmit={handleSubmit}>
{submitted && valid && (
<div className="success-message">
<h3>
{" "}
Welcome {values.firstName} {values.lastName}{" "}
</h3>
<div> Your registration was successful! </div>
</div>
)}
{!valid && (
<input
class="form-field"
type="text"
placeholder="First Name"
name="firstName"
value={values.firstName}
onChange={handleInputChange}
/>
)}
{submitted && !values.firstName && (
<span id="first-name-error">Please enter a first name</span>
)}
{!valid && (
<input
class="form-field"
type="text"
placeholder="Last Name"
name="lastName"
value={values.lastName}
onChange={handleInputChange}
/>
)}
{submitted && !values.lastName && (
<span id="last-name-error">Please enter a last name</span>
)}
{!valid && (
<input
class="form-field"
type="email"
placeholder="Email"
name="email"
value={values.email}
onChange={handleInputChange}
/>
)}
{submitted && !values.email && (
<span id="email-error">Please enter an email address</span>
)}
{!valid && (
<button class="form-field" type="submit">
Register
</button>
)}
</form>
</div>
);
Index.js file
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
App.css file
body {
background: #76b852;
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.form-container {
width: 360px;
background-color: white;
margin: auto;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
padding: 10px;
}
.register-form {
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 10px;
}
.success-message {
font-family: "Roboto", sans-serif;
background-color: #3f89f8;
padding: 15px;
color: white;
text-align: center;
}
.form-field {
margin: 10px 0 10px 0;
padding: 15px;
font-size: 16px;
border: 0;
font-family: "Roboto", sans-serif;
}
span {
font-family: "Roboto", sans-serif;
font-size: 14px;
color: red;
margin-bottom: 15px;
}
input {
background: #f2f2f2;
}
.error {
border-style: solid;
border: 2px solid #ffa4a4;
}
button {
background: #4caf50;
color: white;
cursor: pointer;
}
button:disabled {
cursor: default;
}
