add form validation for zoom google meet

client/src/components/manageProjects/createNewEvent.jsx

@@ -99,6 +99,7 @@ const CreateNewEvent = ({
         handleInputChange={handleInputChange}
         formValues={formValues}
         formErrors={formErrors}
+        setFormErrors={setFormErrors}
         title="Create New Recurring Event"
       >
         <div className="button-box">

client/src/components/manageProjects/eventForm.jsx

@@ -1,16 +1,24 @@
 import React from 'react';
 import { createClockHours } from '../../utils/createClockHours';
+import validateEventForm from './utilities/validateEventForm';
 import '../../sass/ManageProjects.scss';
 
 const EventForm = ({
   title,
   formValues,
   formErrors,
+  setFormErrors,
   handleInputChange,
   children,
 }) => {
   // This creates the clock hours for the form
   const clockHours = createClockHours();
+  const handleInputChangeWithValidation = (e) => {
+    const { name, value } = e.target;
+    handleInputChange(e);
+    const errors = validateEventForm({ ...formValues, [name]: value });
+    setFormErrors(errors || {});
+  };
   return (
     <div className="event-form-box">
       {title && <h3 className="event-form-title">{title}</h3>}
@@ -24,9 +32,9 @@ const EventForm = ({
           onChange={handleInputChange}
           maxLength={30}
         />
-        {formErrors?.name &&
+        {formErrors?.name && (
           <div className="event-form-error">{formErrors.name}</div>
-        }
+        )}
       </label>
       <div className="event-form-row">
         <label className="event-form-label" htmlFor="eventType">
@@ -114,13 +122,13 @@ const EventForm = ({
           placeholder="Enter meeting url..."
           name="videoConferenceLink"
           value={formValues.videoConferenceLink}
-          onChange={handleInputChange}
+          onChange={handleInputChangeWithValidation}
         />
-        {formErrors?.videoConferenceLink &&
+        {formErrors?.videoConferenceLink && (
           <div className="event-form-error">
             {formErrors.videoConferenceLink}
           </div>
-        }
+        )}
       </label>
 
       {children}

client/src/components/manageProjects/utilities/validateEventForm.js

@@ -1,4 +1,3 @@
-import validator from 'validator';
 import { isWordInArrayInString } from './../../../utils/stringUtils.js';
 
 const validateEventForm = (vals, projectToEdit) => {
@@ -10,10 +9,7 @@ const validateEventForm = (vals, projectToEdit) => {
         if (!vals[key]) {
           newErrors = { ...newErrors, name: 'Event name is required' };
         } else if (
-          isWordInArrayInString(
-            ['meeting', 'mtg'],
-            vals[key].toLowerCase()
-          )
+          isWordInArrayInString(['meeting', 'mtg'], vals[key].toLowerCase())
         ) {
           newErrors = {
             ...newErrors,
@@ -61,6 +57,9 @@ const validateEventForm = (vals, projectToEdit) => {
 
 export default validateEventForm;
 
-function validateLink(str) {
-  return validator.isURL(str);
+function validateLink(url) {
+  const ZoomMeetRegex =
+    /^https:\/\/(www\.)?zoom\.us\/j\/[0-9]+(\?pwd=[a-zA-Z0-9]+)?$/;
+  const GoogleMeetRegex = /^https:\/\/meet\.google\.com\/[a-zA-Z0-9-]+$/;
+  return ZoomMeetRegex.test(url) || GoogleMeetRegex.test(url);
 }