Week-8.
Create a Simple Login form using React JS
import "./[Link]";
import React, { useState } from "react";
export default function App() {
const [values, setValues] = useState({
firstName: "",
lastName: "",
email: ""
});
const handleInputChange = (event) => {
/* [Link](); NO LONGER USED IN v.17*/
[Link]();
const { name, value } = [Link];
setValues((values) => ({
...values,
[name]: value
}));
};
const [submitted, setSubmitted] = useState(false);
const [valid, setValid] = useState(false);
const handleSubmit = (e) => {
[Link]();
if ([Link] && [Link] && [Link]) {
setValid(true);
setSubmitted(true);
};
return (
<div className="form-container">
<form className="register-form" onSubmit={handleSubmit}>
{submitted && valid && (
<div className="success-message">
<h3>
{" "}
Welcome {[Link]} {[Link]}{" "}
</h3>
<div> Your registration was successful! </div>
</div>
)}
{!valid && (
<input
class="form-field"
type="text"
placeholder="First Name"
name="firstName"
value={[Link]}
onChange={handleInputChange}
/>
)}
{submitted && ![Link] && (
<span id="first-name-error">Please enter a first name</span>
)}
{!valid && (
<input
class="form-field"
type="text"
placeholder="Last Name"
name="lastName"
value={[Link]}
onChange={handleInputChange}
/>
)}
{submitted && ![Link] && (
<span id="last-name-error">Please enter a last name</span>
)}
{!valid && (
<input
class="form-field"
type="email"
placeholder="Email"
name="email"
value={[Link]}
onChange={handleInputChange}
/>
)}
{submitted && ![Link] && (
<span id="email-error">Please enter an email address</span>
)}
{!valid && (
<button class="form-field" type="submit">
Register
</button>
)}
</form>
</div>
);
[Link] file
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = [Link]("root");
[Link](
<StrictMode>
<App />
</StrictMode>,
rootElement
);
[Link] 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;
}
