Merge pull request #92 from uwblueprint/julia-cindy/tasks-modal

Create Tasks Modal Component

frontend/package.json

@@ -38,6 +38,7 @@
     "react-bootstrap": "^1.5.2",
     "react-dom": "^18.2.0",
     "react-google-login": "^5.2.2",
+    "react-icons": "^5.2.1",
     "react-json-schema": "^1.2.2",
     "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^6.4.3",

frontend/src/components/common/FormField.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import {
+  Button,
+  Input,
+  Select,
+  Flex,
+  FormControl,
+  FormLabel,
+  InputRightElement,
+  InputGroup,
+  InputLeftElement,
+  Checkbox,
+  Container,
+} from "@chakra-ui/react";
+
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+
+const FormField = ({
+  label,
+  value,
+  type = "text",
+  onChange,
+  onBlur,
+  submitPressed,
+  required = false,
+  isPassword = false,
+  showPassword,
+  setShowPassword,
+  leftElement
+}: {
+  label: string;
+  value: string;
+  type?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
+  submitPressed: boolean;
+  required?: boolean;
+  isPassword?: boolean;
+  showPassword?: boolean;
+  setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
+  leftElement?: string;
+}) => (
+  <Flex flexDir="column" flex="1">
+    <FormControl isRequired={required}>
+      <FormLabel mb="5px" color="gray.main" fontWeight="700">
+        {label}
+      </FormLabel>
+      <InputGroup>
+        {leftElement && <InputLeftElement height='34px' pointerEvents='none' color='black'>
+          <Flex>{leftElement}</Flex>
+        </InputLeftElement>}
+
+        <Input
+          variant="primary"
+          placeholder='Enter amount'
+          borderColor={submitPressed && !value ? "red.error" : "gray.300"}
+          boxShadow={submitPressed && !value ? "0 0 2px red.error" : "none"}
+          type={
+            isPassword && setShowPassword && !showPassword ? "password" : type
+          }
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+        />
+        {isPassword && setShowPassword && (
+          <InputRightElement h="34px">
+            <Button
+              onClick={() => setShowPassword(!showPassword)}
+              bg="transparent"
+              _hover={{ bg: "transparent" }}
+            >
+              {!showPassword ? (
+                <VisibilityIcon fontSize="small" />
+              ) : (
+                <VisibilityOffIcon fontSize="small" />
+              )}
+            </Button>
+          </InputRightElement>
+        )}
+      </InputGroup>
+    </FormControl>
+  </Flex>
+);
+
+export default FormField;

frontend/src/components/pages/residents/ResidentModal.tsx

@@ -13,69 +13,13 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 
 import ModalContainer from "../../common/ModalContainer";
+import FormField from "../../common/FormField";
 
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const FormField = ({
-  label,
-  value,
-  type = "text",
-  onChange,
-  submitPressed,
-  required = false,
-  isPassword = false,
-  showPassword,
-  setShowPassword,
-}: {
-  label: string;
-  value: string;
-  type?: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  submitPressed: boolean;
-  required?: boolean;
-  isPassword?: boolean;
-  showPassword?: boolean;
-  setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
-}) => (
-  <Flex flexDir="column" flex="1">
-    <FormControl isRequired={required}>
-      <FormLabel mb="5px" color="gray.main" fontWeight="700">
-        {label}
-      </FormLabel>
-      <InputGroup>
-        <Input
-          variant="primary"
-          borderColor={submitPressed && !value ? "red.error" : "gray.300"}
-          boxShadow={submitPressed && !value ? "0 0 2px red.error" : "none"}
-          type={
-            isPassword && setShowPassword && !showPassword ? "password" : type
-          }
-          value={value}
-          onChange={onChange}
-        />
-        {isPassword && setShowPassword && (
-          <InputRightElement h="34px">
-            <Button
-              onClick={() => setShowPassword(!showPassword)}
-              bg="transparent"
-              _hover={{ bg: "transparent" }}
-            >
-              {!showPassword ? (
-                <VisibilityIcon fontSize="small" />
-              ) : (
-                <VisibilityOffIcon fontSize="small" />
-              )}
-            </Button>
-          </InputRightElement>
-        )}
-      </InputGroup>
-    </FormControl>
-  </Flex>
-);
-
 const ResidentModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");