141 lines
4.3 KiB
JavaScript
141 lines
4.3 KiB
JavaScript
import React, { useState } from "react";
|
|
import {Link} from 'react-router-dom';
|
|
import {
|
|
TextField,
|
|
Button,
|
|
Box,
|
|
Typography,
|
|
Grid,
|
|
Paper,
|
|
InputAdornment,
|
|
IconButton,
|
|
FormControl,
|
|
InputLabel,
|
|
OutlinedInput,
|
|
} from "@mui/material";
|
|
import Visibility from "@mui/icons-material/Visibility";
|
|
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
|
|
|
const RegisterPage = () => {
|
|
// State for form fields
|
|
const [name, setName] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
// Handle password visibility toggle
|
|
const handleClickShowPassword = () => setShowPassword(!showPassword);
|
|
|
|
// Handle form submission
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (password !== confirmPassword) {
|
|
alert("Passwords do not match!");
|
|
return;
|
|
}
|
|
if (name && email && password && confirmPassword) {
|
|
// Handle registration logic, like calling an API to create the user
|
|
console.log("Registered with:", { name, email, password });
|
|
} else {
|
|
alert("Please fill in all fields.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Grid
|
|
container
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
style={{ minHeight: "100vh", backgroundColor: "#f4f6f8" }}
|
|
>
|
|
<Grid item xs={12} sm={6} md={4}>
|
|
<Paper elevation={3} sx={{ padding: 3 }}>
|
|
<Typography variant="h5" align="center" gutterBottom>
|
|
Create an Account
|
|
</Typography>
|
|
<form onSubmit={handleSubmit}>
|
|
<Box mb={2}>
|
|
<TextField
|
|
label="Name"
|
|
variant="outlined"
|
|
fullWidth
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
required
|
|
/>
|
|
</Box>
|
|
<Box mb={2}>
|
|
<TextField
|
|
label="Email"
|
|
variant="outlined"
|
|
fullWidth
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
type="email"
|
|
required
|
|
/>
|
|
</Box>
|
|
<Box mb={2}>
|
|
<FormControl variant="outlined" fullWidth required>
|
|
<InputLabel>Password</InputLabel>
|
|
<OutlinedInput
|
|
label="Password"
|
|
type={showPassword ? "text" : "password"}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
endAdornment={
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
onClick={handleClickShowPassword}
|
|
edge="end"
|
|
>
|
|
{showPassword ? <VisibilityOff /> : <Visibility />}
|
|
</IconButton>
|
|
</InputAdornment>
|
|
}
|
|
/>
|
|
</FormControl>
|
|
</Box>
|
|
<Box mb={2}>
|
|
<FormControl variant="outlined" fullWidth required>
|
|
<InputLabel>Confirm Password</InputLabel>
|
|
<OutlinedInput
|
|
label="Confirm Password"
|
|
type={showPassword ? "text" : "password"}
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
endAdornment={
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
onClick={handleClickShowPassword}
|
|
edge="end"
|
|
>
|
|
{showPassword ? <VisibilityOff /> : <Visibility />}
|
|
</IconButton>
|
|
</InputAdornment>
|
|
}
|
|
/>
|
|
</FormControl>
|
|
</Box>
|
|
<Box mt={2} textAlign="center">
|
|
<Button>
|
|
<Link to="/login">Login</Link>
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
type="submit"
|
|
fullWidth
|
|
>
|
|
Register
|
|
</Button>
|
|
</Box>
|
|
</form>
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default RegisterPage; |