import React from "react";
import { useNavigate } from "react-router";
import { TextField, Button } from "@mui/material";
import Navbar from "../comp/navbar";
import { createSearchParams } from "react-router-dom";
import { useState } from "react";
const Signup = () => {
const [details, setDatails] = useState({
fullName: " ",
mobileNumber: " ",
email: " ",
password: " ",
});
const navigation = useNavigate();
const handlesubmit = () => {
navigation({
pathname: "/login",
search: `?${createSearchParams({
fullName: details.fullName,
mobileNumber: details.mobileNumber,
email: details.email,
password: details.password,
})}`,
});
};
return (
<div className="span1">
<Navbar />
<form className="signup">
<div className="h1">
{" "}
<h1> Register Now </h1>{" "}
</div>
<div>
<TextField
sx={{ marginTop: 1, marginLeft: 1 }}
label="First Name"
variant="standard"
required
/>
<TextField
sx={{ marginTop: 1, marginLeft: 8, marginRight: 2 }}
label="Last Name"
variant="standard"
required
/>
</div>
<TextField
sx={{ marginTop: 1, marginLeft: 1, marginRight: 2 }}
label="FullName"
variant="standard"
onChange={(e) => setDatails({ ...details, fullName: e.target.value })}
required
/>
<TextField
sx={{ marginTop: 1, marginLeft: 1, marginRight: 2 }}
label="Email"
variant="standard"
onChange={(e) => setDatails({ ...details, email: e.target.value })}
type="email"
required
/>
<TextField
sx={{ marginTop: 1, marginLeft: 1, marginRight: 2 }}
label="Mobile Number"
variant="standard"
onChange={(e) =>
setDatails({ ...details, mobileNumber: e.target.value })
}
required
/>
<TextField
sx={{ marginTop: 1, marginLeft: 1, marginRight: 2 }}
label="Password"
variant="standard"
onChange={(e) => setDatails({ ...details, password: e.target.value })}
type="password"
required
/>
<TextField
sx={{ marginTop: 1, marginLeft: 1, marginRight: 2 }}
label="Retype Password"
variant="standard"
required
/>
<div className="butt">
<Button sx={{ marginTop: 1 }} variant="contained">
Cancel
</Button>
<Button
type="submit"
sx={{ marginTop: 1, marginLeft: 3 }}
onClick={handlesubmit}
variant="contained"
>
Signup
</Button>
</div>
</form>
</div>
);
};
export default Signup;
Log in page
const Login = () => {
const [search] = useSearchParams();
const email = search.get("email");
const password = search.get("password");
const fullName = search.get("fullName");
const mobileNumber = search.get("mobileNumber");
const { state } = useLocation();
return (
<div>
{" "}
<h1>{JSON.stringify(state)}</h1>
<h4> Please check your deatils </h4>
<p>FULL_NAME: {fullName}</p>
<p>Mobile_Number: {mobileNumber}</p>
<p>Email: {email}</p>
<p>Password: {password}</p>
</div>
);
};
export default Login;
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);
}
A
0 Comments