Validation with signin page in reactJS
import { Box, TextField, Button, Avatar, Input, Alert } from "@mui/material";
import { red } from "@mui/material/colors";
import React from "react";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import Axios from "axios";
import { createSearchParams } from "react-router-dom";
const Signin = () => {
const initialValue = { email: "", password: "" };
const [formValues, setFormValues] = useState(initialValue);
const [formErrors, setFormErrors] = useState({});
const [isSubmit, setIsSubmit] = useState(false);
const [isApi, setIsApi] = useState();
const navigation = useNavigate();
const handlesubmit = (e) => {
e.preventDefault();
setFormErrors(validate(formValues));
setIsSubmit(true);
// Axios({
// url: "http://54.198.53.38:8000/v1/login",
// method: "Post",
// data: formValues,
// }).then((response) => {
// if (response.data.status === true) {
// isApi (JSON.stringify(response));
// }
// // else{
// // alert(JSON.stringify(response))
// // }
// });
// // .catch(error => {
// // // alert(error);
// // })
// };
};
useEffect(() => {
console.log(formErrors);
if (Object.keys(formErrors).length === 0 && isSubmit) {
console.log(formValues);
}
}, [formErrors]);
const validate = (value) => {
const errors = {};
const emailRegex = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}/;
if (!value.email) {
errors.email = "Please enter email!";
if (!value.password) {
errors.password = "Plase enter password!";
}
} else if (!emailRegex.test(value.email)) {
errors.email = "Please enter valid email";
} else if (!value.password) {
errors.password = "Plase enter password!";
} else if (emailRegex.test(value.email)) {
if (value.password.trim().length === 6) {
navigation({ pathname: "/login" }, { state: isApi });
}
if (value.password) {
errors.password = "Please enter correct password";
}
}
return errors;
};
return (
<div className="span">
<Box className="span1">
<Box className="Box" component="form">
<Avatar
className="Avatar"
src="/images/14.png"
sx={{ width: 150, height: 150 }}
/>
<h2> Sign in</h2>
<TextField
sx={{ marginTop: 1 }}
error={formErrors.email}
helperText={formErrors.email}
onChange={(e) =>
setFormValues({ ...formValues, email: e.target.value })
}
label="Enter your Email"
variant="standard"
type="email"
required
/>
<TextField
sx={{ marginTop: 1 }}
error={formErrors.password}
helperText={formErrors.password}
onChange={(e) =>
setFormValues({ ...formValues, password: e.target.value })
}
label=" Enter your Password"
variant="standard"
type="password"
required
/>
<Button
sx={{ marginTop: 1 }}
type="submit"
variant="contained"
onClick={handlesubmit}
>
{" "}
Login{" "}
</Button>
<Button variant="text" type="Forget">
Forget Password?
</Button>
<Button
variant="contained"
color="success"
onClick={() => navigation("/signup")}
>
{" "}
Register
</Button>
</Box>
<Box className="Box1" />
<Box className="Box2">
<h3 className="text1">
{" "}
Nature <br></br>
Nature, in the broadest sense, is the natural, physical, material
world or universe. <br></br>
"Nature" can refer to the phenomena of the physical world, and also
to life in general. <br></br>The study of nature is a large, if not
the only, part of science. <br></br>{" "}
<p className="par">
{" "}
Your Dont have Account, Please Click on Register{" "}
</p>
</h3>
</Box>
</Box>
</div>
);
};
export default Signin;
App.css
.App {
width: 100%;
height: 100%;
}
h1 {
color: #000;
}
.span {
background-image: url(/src/images/13.jpg);
background-size: cover;
height: 100vh;
width: 10vw;
}
.Box {
display: flex;
flex-direction: column;
width: 30%;
margin-left: 60%;
border: 2px solid rgb(202, 192, 192);
border-radius: 12px;
box-shadow: 1px 3px 1px #9e9e9e;
height: 80%;
padding: 10px;
text-align: center;
position: absolute;
background-size: cover;
margin-top: 50px;
background-image: url(/src/images/15.jpg);
}
.Box:hover {
box-shadow: 0 8px 16px 0 slategrey;
}
.Box1 {
background-image: url(/src/images/logo.png);
background-size: cover;
width: 160px;
height: 150px;
margin-left: 5%;
position: absolute;
margin-top: 5%;
}
.Box2 {
position: absolute;
margin-top: 18%;
margin-left: 5%;
}
.text1 {
color: aliceblue;
font-size: large;
}
.par {
color: rgb(35, 204, 30);
}
.par:hover {
color: rgb(51, 136, 48);
}
.Avatar {
margin: auto;
}
.signup {
display: flex;
flex-direction: column;
justify-content: center;
width: 420px;
border: 2px solid rgb(235, 221, 221);
border-radius: 15px;
box-shadow: 1px 3px 4px #9e9e9e;
margin-top: 5%;
position: absolute;
background-color: blanchedalmond;
margin-left: 35%;
}
.butt {
text-align: center;
margin-bottom: 20px;
}
.Box3 {
background-image: url(/src/images/logo.png);
background-size: cover;
width: 160px;
height: 150px;
margin-left: 5%;
position: absolute;
margin-top: 5%;
}
.span1 {
background-image: url(/src/images/13.jpg);
background-size: cover;
height: 100vh;
width: 100vw;
}
.form {
width: 30%;
margin-left: 65%;
border: 2px solid rgb(202, 192, 192);
border-radius: 12px;
box-shadow: 1px 3px 1px #9e9e9e;
height: 80%;
position: absolute;
background-size: cover;
margin-top: 50px;
background-image: url(/src/images/12.jpeg);
}
.text2 {
color: #fff;
font-size: medium;
}
.head {
height: auto;
}
.footer {
position: relative;
margin-top: 110px;
width: 100vw;
height: 60vh;
}
.h1 {
text-align: center;
}
.table {
border: 2px solid rgb(10, 10, 10);
}
.td {
border: 2px solid rgb(10, 10, 10);
}
0 Comments