updated app.jsx

client/src/components/create-component/index.jsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+
+import {
+  TextField,
+  Stack,
+  Button,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  Form,
+  Header,
+  Cancel,
+} from "./index.styles";
+
+function CreateComponent() {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleCreate = () => {
+    // Create a JSON object with the required keys and values
+    const userData = {
+      firstName,
+      lastName,
+      email,
+      password,
+    };
+
+    // Convert the JSON object to a string
+    const userDataJSON = JSON.stringify(userData);
+
+    // Replace url with target route
+    fetch("http://localhost:8000/create", {
+      method: "POST", // Not sure which method
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: userDataJSON,
+    });
+    // .then((response) => {
+    //     if (response.ok) {
+    //         // Handle success response (e.g., redirect or show a success message)
+    //         console.log('Login successful');
+    //     } else {
+    //         // Handle error response (e.g., show an error message)
+    //         console.error('Login failed');
+    //     }
+    // })
+    // .catch((error) => {
+    //     console.error('Error:', error);
+    // });
+  };
+
+  return (
+    <Form>
+      <Stack maxWidth="md" gap={4}>
+        <Header>
+          <Typography variant="h3">Create New User</Typography>
+          <Typography variant="body1">Manually create a new user</Typography>
+        </Header>
+
+        <Card>
+          <CardHeader title="User Information" />
+          <CardContent>
+            <Stack gap={1.5}>
+              <TextField
+                type="text"
+                name="firstName"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                label="First Name"
+                helperText="*Required"
+              />
+              <TextField
+                type="text"
+                name="lastName"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                label="Last Name"
+                helperText="*Required"
+              />
+              <TextField
+                type="text"
+                name="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                label="Email"
+                helperText="*Required"
+              />
+              <TextField
+                type="text"
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                label="Password"
+                helperText="*Required"
+              />
+            </Stack>
+          </CardContent>
+        </Card>
+        <Stack direction="row">
+          <Cancel variant="outlined" size="large">
+            Cancel
+          </Cancel>
+          <Button variant="contained" size="large" onClick={handleCreate}>
+            Submit
+          </Button>
+        </Stack>
+      </Stack>
+    </Form>
+  );
+}
+
+export default CreateComponent;

client/src/components/create-component/index.styles.jsx

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+import {
+  Box,
+  TextField,
+  Stack,
+  Button,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+} from "@mui/material";
+
+const Form = styled.div`
+    height: "100vh";
+    display: "flex";
+    flex - direction: "column";
+    align - items: "center";
+    justify - content: "center";
+    font - family: "Helvetica";
+    background - color: "#f0f3f8";
+`;
+
+const Header = styled(Box)`
+    display: "flex";
+    width: "47.5rem";
+    padding - right: "0px";
+    flex - direction: "column";
+    align - items: "flex-start";
+    gap: "0.625rem";
+`;
+
+const Cancel = styled(Button)`
+  margin-right: "auto";
+`;
+
+export {
+  TextField,
+  Stack,
+  Button,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  Form,
+  Header,
+  Cancel,
+};

client/src/components/edit-component/index.jsx

@@ -0,0 +1,118 @@
+import { useState } from "react";
+
+import {
+  TextField,
+  Stack,
+  Button,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  Form,
+  Header,
+  Cancel,
+} from "./index.styles";
+
+function EditComponent() {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSave = () => {
+    // Create a JSON object with the required keys and values
+    const userData = {
+      firstName,
+      lastName,
+      email,
+      password,
+    };
+
+    // Convert the JSON object to a string
+    const userDataJSON = JSON.stringify(userData);
+
+    // Replace url with target route
+    fetch("http://localhost:8000/edit", {
+      method: "POST", // Not sure which method
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: userDataJSON,
+    });
+    // .then((response) => {
+    //     if (response.ok) {
+    //         // Handle success response (e.g., redirect or show a success message)
+    //         console.log('Login successful');
+    //     } else {
+    //         // Handle error response (e.g., show an error message)
+    //         console.error('Login failed');
+    //     }
+    // })
+    // .catch((error) => {
+    //     console.error('Error:', error);
+    // });
+  };
+
+  return (
+    <Form>
+      <Stack maxWidth="md" gap={4}>
+        <Header>
+          <Typography variant="h3">Edit User</Typography>
+          <Typography variant="body1">
+            Edit existing user information
+          </Typography>
+        </Header>
+
+        <Card>
+          <CardHeader title="User Information" />
+          <CardContent>
+            <Stack gap={1.5}>
+              <TextField
+                type="text"
+                name="firstName"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                label="First Name"
+                helperText="*Required"
+              />
+              <TextField
+                type="text"
+                name="lastName"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                label="Last Name"
+                helperText="*Required"
+              />
+              <TextField
+                type="text"
+                name="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                label="Email"
+                helperText="*Required"
+              />
+              <TextField
+                type="text"
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                label="Password"
+                helperText="*Required"
+              />
+            </Stack>
+          </CardContent>
+        </Card>
+        <Stack direction="row">
+          <Cancel variant="outlined" size="large">
+            Cancel
+          </Cancel>
+          <Button variant="contained" size="large" onClick={handleSave}>
+            Save
+          </Button>
+        </Stack>
+      </Stack>
+    </Form>
+  );
+}
+
+export default EditComponent;

client/src/components/edit-component/index.styles.jsx

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+import {
+  Box,
+  TextField,
+  Stack,
+  Button,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+} from "@mui/material";
+
+const Form = styled.div`
+    height: "100vh";
+    display: "flex";
+    flex - direction: "column";
+    align - items: "center";
+    justify - content: "center";
+    font - family: "Helvetica";
+    background - color: "#f0f3f8";
+`;
+
+const Header = styled(Box)`
+    display: "flex";
+    width: "47.5rem";
+    padding - right: "0px";
+    flex - direction: "column";
+    align - items: "flex-start";
+    gap: "0.625rem";
+`;
+
+const Cancel = styled(Button)`
+  margin-right: "auto";
+`;
+
+export {
+  TextField,
+  Stack,
+  Button,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  Form,
+  Header,
+  Cancel,
+};

client/src/pages/create/index.jsx

@@ -0,0 +1,7 @@
+import CreateComponent from "../../components/create-component";
+
+function Create() {
+  return <CreateComponent />;
+}
+
+export default Create;

client/src/pages/edit/index.jsx

@@ -0,0 +1,7 @@
+import EditComponent from "../../components/edit-component";
+
+function Edit() {
+  return <EditComponent />;
+}
+
+export default Edit;