added url validation and styling to the AgencySettings page

Recidiviz · May 10, 2024 · 7134a8e · 7134a8e
1 parent b2dcac4
commit 7134a8e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/common/utils/helperUtils.ts b/common/utils/helperUtils.ts
@@ -279,6 +279,12 @@ export const validateEmail = (email: string | undefined) => {
       .match(/^([A-Z0-9_+-]\.?)*[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i)
   );
 };
+
+export const validateAgencyURL = (url: string) => {
+  const urlRegex = /^(?:https?|ftp):\/\/[\w.-]+\.[a-zA-Z]{2,}(?:\/\S*)?$/;
+  return urlRegex.test(url);
+};
+
 /**
  * Updates a set of selections by either adding or removing a specified item.
  * @param prevSet - The previous set of selected items to update
@@ -298,4 +304,4 @@ export const toggleAddRemoveSetItem = <T>(prevSet: Set<T>, item: T): Set<T> => {
 export const isCSGOrRecidivizUserByEmail = (email?: string) => {
   if (!email) return false;
   return email.includes("@csg.org") || email.includes("@recidiviz.org");
-};
+};
diff --git a/publisher/src/components/Settings/AgencySettingsURL.tsx b/publisher/src/components/Settings/AgencySettingsURL.tsx
@@ -19,7 +19,7 @@ import { Button } from "@justice-counts/common/components/Button";
 import { formatExternalLink } from "@justice-counts/common/components/DataViz/utils";
 import { NewInput } from "@justice-counts/common/components/Input";
 import { Modal } from "@justice-counts/common/components/Modal";
-// import { validateAgencyURL } from "@justice-counts/common/utils/helperUtils";
+import { validateAgencyURL } from "@justice-counts/common/utils/helperUtils";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
@@ -57,13 +57,22 @@ const AgencySettingsUrl: React.FC<{
     )?.value || "";
 
   const isAgencySettingConfigured = Boolean(homepageUrlSetting);
-
+  const [isURLValid, setIsURLValid] = React.useState(true);
+  const [errorMsg, setErrorMsg] = React.useState<
+    { message: string } | undefined
+  >(undefined);
   const handleSaveClick = () => {
+    if (!validateAgencyURL(urlText)) {
+      setIsURLValid(false);
+      setErrorMsg({ message: "Invalid Email" });
+      return;
+    }
     const updatedSettings = updateAgencySettings(
       "HOMEPAGE_URL",
       urlText,
       parseInt(agencyId)
     );
+    setErrorMsg(undefined);
     saveAgencySettings(updatedSettings, agencyId);
     removeEditMode();
   };
@@ -103,11 +112,15 @@ const AgencySettingsUrl: React.FC<{
           <Modal
             title="Agency URL"
             description={
-              <AccountSettingsInputsWrapper agencySettingsConfigs>
+              <AccountSettingsInputsWrapper
+                agencySettingsConfigs
+                error={!isURLValid}
+              >
                 <NewInput
                   style={{ marginBottom: "0" }}
                   persistLabel
                   value={urlText}
+                  error={errorMsg}
                   placeholder="URL of agency (e.g., https://doc.iowa.gov/)"
                   isPlaceholderVisible
                   onChange={(e) => {