From 46ca62a9ccc202e675ee7af2dd430572f037080b Mon Sep 17 00:00:00 2001 From: CRSantiago <42612374+CRSantiago@users.noreply.github.com> Date: Wed, 8 May 2024 13:29:28 -0400 Subject: [PATCH] Input limiting based on input type. --- .../Dashboard/CreateJobApplicationForm.jsx | 2 + .../Dashboard/JobApplicationEditRow.jsx | 52 ++++++++++--------- client/src/features/components/FormInput.jsx | 18 +++++++ 3 files changed, 47 insertions(+), 25 deletions(-) diff --git a/client/src/features/Dashboard/CreateJobApplicationForm.jsx b/client/src/features/Dashboard/CreateJobApplicationForm.jsx index ac5ad17..07b639b 100644 --- a/client/src/features/Dashboard/CreateJobApplicationForm.jsx +++ b/client/src/features/Dashboard/CreateJobApplicationForm.jsx @@ -302,6 +302,8 @@ const CreateJobApplicationForm = ({ setIsCreating, fetchUserData }) => { placeholder="Add any additional notes here..." value={formData.notes} onChange={handleChange} + maxLength={1000} + style={{ resize: 'none' }} // Prevent resizing > )} diff --git a/client/src/features/Dashboard/JobApplicationEditRow.jsx b/client/src/features/Dashboard/JobApplicationEditRow.jsx index fba3624..7874a2a 100644 --- a/client/src/features/Dashboard/JobApplicationEditRow.jsx +++ b/client/src/features/Dashboard/JobApplicationEditRow.jsx @@ -1,12 +1,12 @@ -import React, { useState } from 'react' -import { FormInput, FormButton } from '../components' -import SuccessAnimation from './SuccessAnimation' -import checkbox_checked from './assets/checkbox_checked.svg' -import checkbox_unchecked from './assets/checkbox_unchecked.svg' -import edit_icon from './assets/edit_icon.svg' -import { updateJobApplication } from './api' -import useForm from '../../hooks/useForm' -import validateFormData from './utils/validateApplicationData' +import React, { useState } from "react" +import { FormInput, FormButton } from "../components" +import SuccessAnimation from "./SuccessAnimation" +import checkbox_checked from "./assets/checkbox_checked.svg" +import checkbox_unchecked from "./assets/checkbox_unchecked.svg" +import edit_icon from "./assets/edit_icon.svg" +import { updateJobApplication } from "./api" +import useForm from "../../hooks/useForm" +import validateFormData from "./utils/validateApplicationData" const JobApplicationEditRow = ({ application, @@ -28,13 +28,13 @@ const JobApplicationEditRow = ({ const [isSubmitted, setIsSubmitted] = useState(false) const statusEnum = [ - 'Applied', - 'Assessment', - 'Phone Screen', - 'Interviewing', - 'Offer', - 'Accepted', - 'Rejected', + "Applied", + "Assessment", + "Phone Screen", + "Interviewing", + "Offer", + "Accepted", + "Rejected", ] // Handle the edit mode toggle and revert to original data @@ -56,7 +56,7 @@ const JobApplicationEditRow = ({ }, 2000) }) .catch((error) => { - console.error('Error creating job application', error) + console.error("Error creating job application", error) }) } } @@ -64,7 +64,7 @@ const JobApplicationEditRow = ({ return ( <> {isSubmitted ? ( - + ) : ( <> @@ -143,7 +143,7 @@ const JobApplicationEditRow = ({

- Source:{' '} + Source:{" "}

- Location:{' '} + Location:{" "}

- Contact Email:{' '} + Contact Email:{" "}

- Contact Phone:{' '} + Contact Phone:{" "}

- Interview Dates:{' '} + Interview Dates:{" "} {formData.interviewDates .map((date) => date.substring(0, 10)) - .join(', ')} + .join(", ")}

diff --git a/client/src/features/components/FormInput.jsx b/client/src/features/components/FormInput.jsx index 3bf5dfc..06e4c57 100644 --- a/client/src/features/components/FormInput.jsx +++ b/client/src/features/components/FormInput.jsx @@ -1,12 +1,30 @@ import React from "react" +const getInputConstraints = (type) => { + switch (type) { + case "text": + return { maxLength: 100 } // General text input + case "email": + return { maxLength: 254 } // Maximum length for email as per standards + case 'password': + return { maxLength: 64, minLength: 8 }; + case "tel": + return { maxLength: 15 } // Phone numbers might include country code + default: + return {} + } +} + const FormInput = ({ type, id, name, value, onChange, error }) => { + const { maxLength, minLength} = getInputConstraints(type) return (