tpay client

src/pages/Register.js

@@ -0,0 +1,141 @@
+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;