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);
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;
0 Comments