TCES-41 urd create and update user information to be updated

client/src/App.jsx

@@ -1,6 +1,8 @@
 import "./App.css";
 import DashboardPage from "./pages/dashboard";
 // import LoginPage from "./pages/login";
+// import CreatePage from "./pages/create-user/create-user";
+// import EditPage from "./pages/edit-user/edit-user";
 
 function App() {
   return (

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

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import {
+  TextField,
+  Stack,
+  Button,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+} from "@mui/material";
+import { 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",
+      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"
+                id="firstName"
+                name="firstName"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                label="First Name"
+                helperText="*Required"
+                required
+              />
+              <TextField
+                type="text"
+                id="lastName"
+                name="lastName"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                label="Last Name"
+                helperText="*Required"
+                required
+              />
+              <TextField
+                type="email"
+                id="email"
+                name="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                label="Email"
+                helperText="*Required"
+                required
+              />
+              <TextField
+                type="password"
+                id="password"
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                label="Password"
+                helperText="*Required"
+                required
+              />
+            </Stack>
+          </CardContent>
+        </Card>
+        <Stack direction="row">
+          <Cancel variant="outlined" size="large">
+            Cancel
+          </Cancel>
+          <Button
+            type="submit"
+            variant="contained"
+            size="large"
+            onClick={handleCreate}
+          >
+            Submit
+          </Button>
+        </Stack>
+      </Stack>
+    </Form>
+  );
+}
+
+export default CreateComponent;

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

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+import { Box, Button } from "@mui/material";
+
+const Form = styled.form`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: Helvetica;
+  background-color: #f0f3f8;
+  text-align: initial;
+`;
+
+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 !important;
+`;
+
+export { Form, Header, Cancel };

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

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import {
+  TextField,
+  Stack,
+  Button,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+} from "@mui/material";
+import { 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",
+      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"
+                id="firstName"
+                name="firstName"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                label="First Name"
+                helperText="*Required"
+                required
+              />
+              <TextField
+                type="text"
+                id="lastName"
+                name="lastName"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                label="Last Name"
+                helperText="*Required"
+                required
+              />
+              <TextField
+                type="email"
+                id="email"
+                name="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                label="Email"
+                helperText="*Required"
+                required
+              />
+              <TextField
+                type="password"
+                id="password"
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                label="Password"
+                helperText="*Required"
+                required
+              />
+            </Stack>
+          </CardContent>
+        </Card>
+        <Stack direction="row">
+          <Cancel variant="outlined" size="large">
+            Cancel
+          </Cancel>
+          <Button
+            type="submit"
+            variant="contained"
+            size="large"
+            onClick={handleSave}
+          >
+            Save
+          </Button>
+        </Stack>
+      </Stack>
+    </Form>
+  );
+}
+
+export default EditComponent;

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

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+import { Box, Button } from "@mui/material";
+
+const Form = styled.form`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: Helvetica;
+  background-color: #f0f3f8;
+  text-align: initial;
+`;
+
+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 !important;
+`;
+
+export { Form, Header, Cancel };

client/src/pages/create-user/create-user.jsx

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

client/src/pages/edit-user/edit-user.jsx

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