refactor(web/dialog): Separate fields into individual components

web/src/features/dialog/components/checkbox.tsx

@@ -0,0 +1,24 @@
+import { Box, Checkbox } from "@chakra-ui/react";
+import { Row } from "../../../interfaces/dialog";
+
+interface Props {
+  row: Row;
+  index: number;
+  handleChange: (value: string | boolean, index: number) => void;
+}
+
+const CheckboxField: React.FC<Props> = (props) => {
+  return (
+    <>
+      <Box mb={3} key={`checkbox-${props.index}`}>
+        <Checkbox
+          onChange={(e) => props.handleChange(e.target.checked, props.index)}
+        >
+          {props.row.label}
+        </Checkbox>
+      </Box>
+    </>
+  );
+};
+
+export default CheckboxField;

web/src/features/dialog/components/input.tsx

@@ -0,0 +1,60 @@
+import {
+  Box,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
+  Text,
+  Input,
+} from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Row } from "../../../interfaces/dialog";
+
+interface Props {
+  row: Row;
+  index: number;
+  handleChange: (value: string | boolean, index: number) => void;
+  passwordStates: boolean[];
+  handlePasswordStates: (index: number) => void;
+}
+
+const InputField: React.FC<Props> = (props) => {
+  return (
+    <>
+      <Box mb={3} textAlign="left">
+        <Text>{props.row.label}</Text>
+        <InputGroup>
+          {props.row.icon && (
+            <InputLeftElement
+              pointerEvents="none"
+              children={<FontAwesomeIcon icon={props.row.icon} />}
+            />
+          )}
+          <Input
+            onChange={(e) => props.handleChange(e.target.value, props.index)}
+            type={
+              !props.row.password || props.passwordStates[props.index]
+                ? "text"
+                : "password"
+            }
+          />
+          {props.row.password && (
+            <InputRightElement
+              cursor="pointer"
+              onClick={() => props.handlePasswordStates(props.index)}
+              children={
+                <FontAwesomeIcon
+                  fixedWidth
+                  icon={props.passwordStates[props.index] ? "eye" : "eye-slash"}
+                  fontSize="1em"
+                  style={{ paddingRight: 8 }}
+                />
+              }
+            />
+          )}
+        </InputGroup>
+      </Box>
+    </>
+  );
+};
+
+export default InputField;

web/src/features/dialog/components/select.tsx

@@ -0,0 +1,32 @@
+import { Box, Select } from "@chakra-ui/react";
+import { Row } from "../../../interfaces/dialog";
+
+interface Props {
+  row: Row;
+  index: number;
+  handleChange: (value: string | boolean, index: number) => void;
+}
+
+const SelectField: React.FC<Props> = (props) => {
+  return (
+    <>
+      <Box mb={3} key={`select-${props.index}`}>
+        <Select
+          onChange={(e) => props.handleChange(e.target.value, props.index)}
+        >
+          {/* Hacky workaround for selectable placeholder issue */}
+          <option value="" selected hidden disabled>
+            {props.row.label}
+          </option>
+          {props.row.options?.map((option, index) => (
+            <option key={`option-${index}`} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
+      </Box>
+    </>
+  );
+};
+
+export default SelectField;