adapt ValidatedTextField to accept custom validation functions

client/src/components/ProjectForm.jsx

@@ -11,6 +11,7 @@ import {
   FormControl,
   FormControlLabel,
   RadioGroup,
+  Paper,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
@@ -21,6 +22,7 @@ import PlusIcon from '../svg/PlusIcon.svg?react';
 import ValidatedTextField from './parts/form/ValidatedTextField';
 import TitledBox from './parts/boxes/TitledBox';
 import ChangesModal from './ChangesModal';
+import { simpleInputs, additionalInputsForEdit } from './data';
 
 /** STYLES
  *  -most TextField and InputLabel styles are controlled by the theme
@@ -234,19 +236,40 @@ export default function ProjectForm({
       <Box sx={{ textAlign: 'center' }}>
         <Typography variant="h1">Project Management</Typography>
       </Box>
-      {auth.user.accessLevel === 'admin' ||
-      auth.user.accessLevel == 'superadmin' ? (
-        <TitledBox
-          title={editMode ? 'Editing Project' : 'Project Information'}
-          badge={isEdit ? editIcon() : addIcon()}
+
+      <Paper
+        elevation={3}
+        sx={{ padding: 3, borderRadius: 1, backgroundColor: '#f5f5f5' }}
+      >
+        {auth.user.accessLevel === 'admin' ? (
+          <TitledBox
+            title={editMode ? 'Editing Project' : 'Project Information'}
+            badge={isEdit ? editIcon() : addIcon()}
+          />
+        ) : (
+          <TitledBox title={'Project Information'} />
+        )}
+
+        <form
+          id="project-form"
+          onSubmit={handleSubmit((data) => {
+            isEdit ? submitEditProject(data) : submitNewProject(data);
+          })}
         >
-          <form
-            id="project-form"
-            onSubmit={handleSubmit((data) => {
-              isEdit ? submitEditProject(data) : submitNewProject(data);
-            })}
-          >
-            {arr.map((input) => (
+          {simpleInputs.map((input) => (
+            <ValidatedTextField
+              key={input.name}
+              register={register}
+              isEdit={isEdit}
+              editMode={editMode}
+              locationType={locationType}
+              locationRadios={locationRadios}
+              errors={errors}
+              input={input}
+            />
+          ))}
+          {isEdit &&
+            additionalInputsForEdit.map((input) => (
               <ValidatedTextField
                 key={input.name}
                 register={register}
@@ -258,15 +281,20 @@ export default function ProjectForm({
                 input={input}
               />
             ))}
-            <ChangesModal
-              open={isModalOpen}
-              onClose={handleClose}
-              destination={'/projects'}
-              aria-labelledby="modal-modal-title"
-              aria-describedby="modal-modal-description"
-              handleClose={handleClose}
-            />
-          </form>{' '}
+
+          <ChangesModal
+            open={isModalOpen}
+            onClose={handleClose}
+            destination={'/projects'}
+            aria-labelledby="modal-modal-title"
+            aria-describedby="modal-modal-description"
+            handleClose={handleClose}
+          />
+        </form>
+      </Paper>
+      {auth.user.accessLevel === 'admin' ? (
+        <Box>
+
           <Grid container justifyContent="space-evenly" sx={{ my: 3 }}>
             <Grid item xs="auto">
               <StyledButton

client/src/components/parts/form/ValidatedTextField.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Grid, InputLabel, TextField } from "@mui/material";
+import { Box, Grid, InputLabel, TextField } from '@mui/material';
 
 /**
  * A validated text field component for forms.
@@ -24,61 +24,63 @@ function ValidatedTextField({
   locationRadios,
   input,
 }) {
-
-  const validationRules = {};
 
-  // Validation rules for Google Drive URL
-  if (input.required) {
-    validationRules.required = `${input.label || input.name} is required`
-  }
-  if(input.name === 'googleDriveUrl'){
-    validationRules.pattern = {
-      value: /^https:\/\/drive\.google\.com\/.+$/,
-      message: "Invalid Google Drive URL", // Pattern validation for Google Drive URL
-    };
-  }
+  const inputObj = {};
 
   if (input.name === 'location') {
     if (locationType === 'remote') {
-      validationRules.pattern = {
+      inputObj.pattern = {
         value: input.value,
-        message: input.errorMessage || "Invalid remote location URL",
+        message: input.errorMessage,
       };
     } else {
-      validationRules.pattern = {
+      inputObj.pattern = {
         value: input.addressValue,
-        message: input.addressError || "Invalid physical address",
+        message: input.addressError,
+      };
+    }
+  } else {
+    if (input.value) {
+      inputObj.pattern = {
+        value: input.value,
+        message:
+          input.errorMessage || `${input.label} is not in the correct format`,
       };
     }
   }
-  
-  const registerObj = {
-    ...register(input.name, validationRules),
+
+  if (input.required !== false) {
+    inputObj.required = `${input.label} is required`;
   }
 
+  const registerObj = {
+    ...register(input.name, inputObj),
+  };
+
+
   return (
-  <Box sx={{ mb: 1 }} key={input.name}>
-    <Grid container alignItems="center">
-      <Grid item xs="auto" sx={{ pr: 3 }}>
-        <InputLabel
-          sx={{ width: 'max-content', ml: 0.5, mb: 0.5 }}
-          id={input.name}
-        >
-          {input.label}
-        </InputLabel>
+    <Box sx={{ mb: 1 }} key={input.name}>
+      <Grid container alignItems="center">
+        <Grid item xs="auto" sx={{ pr: 3 }}>
+          <InputLabel
+            sx={{ width: 'max-content', ml: 0.5, mb: 0.5 }}
+            id={input.name}
+          >
+            {input.label}
+          </InputLabel>
+        </Grid>
+        {input.name === 'location' && locationRadios}
       </Grid>
-      {input.name === 'location' && locationRadios}
-    </Grid>
-    <TextField
-      {...registerObj}
-      error={!!errors[input.name]}
-      type={input.type}
-      placeholder={input.placeholder}
-      helperText={`${errors[input.name]?.message || ' '}`}
-      disabled={isEdit ? !editMode || input.disabled : undefined} // handles edit mode for EditProjcet form
-    />
-  </Box>
+      <TextField
+        {...registerObj}
+        error={!!errors[input.name]}
+        type={input.type}
+        placeholder={input.placeholder}
+        helperText={`${errors[input.name]?.message || ' '}`}
+        disabled={isEdit ? !editMode || input.disabled : undefined} // handles edit mode for EditProjcet form
+      />
+    </Box>
   );
-};
+}
 
-export default ValidatedTextField;
+export default ValidatedTextField;