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 SubmitData =async(e) =>{
navigation({pathname:"/signin"})
e.preventDefault()
const{fullName,mobileNumber,email,password}=details;
const res=await fetch ("https://form-cfb2c-default-rtdb.firebaseio.com/Registerform.json",
{
method:'POST',
headers:{
'content-Type': 'application/json'
},
body:JSON.stringify({
fullName,mobileNumber,email,password
})
})
}
// 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={SubmitData}
variant="contained"
>
Signup
</Button>
</div>
</form>
</div>
);
};
export default Signup;
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