Frontend Validators: Form URLs and email addresses (#3511)

changes/issue-3507-url-email-validators

@@ -0,0 +1 @@
+* App wide frontend validators for email addresses and urls

frontend/components/forms/FormField/_styles.scss

@@ -10,7 +10,7 @@
 
     &--error {
       font-weight: $bold;
-      color: $ui-error;
+      color: $core-vibrant-red;
     }
   }
 

frontend/components/forms/UserSettingsForm/validate.js

@@ -1,5 +1,6 @@
 import { size } from "lodash";
 import validatePresence from "components/forms/validators/validate_presence";
+import validEmail from "components/forms/validators/valid_email";
 
 const validate = (formData) => {
   const errors = {};
@@ -7,6 +8,8 @@ const validate = (formData) => {
 
   if (!validatePresence(email)) {
     errors.email = "Email field must be completed";
+  } else if (!validEmail(email)) {
+    errors.email = `${email} is not a valid email`;
   }
 
   if (!validatePresence(name)) {

frontend/components/forms/admin/AppConfigForm/AppConfigForm.tsx

@@ -18,6 +18,9 @@ import InputField from "components/forms/fields/InputField";
 import OrgLogoIcon from "components/icons/OrgLogoIcon";
 // @ts-ignore
 import validateYaml from "components/forms/validators/validate_yaml";
+import validEmail from "components/forms/validators/valid_email";
+import validUrl from "components/forms/validators/valid_url";
+
 import IconToolTip from "components/IconToolTip";
 import InfoBanner from "components/InfoBanner/InfoBanner";
 // @ts-ignore
@@ -160,14 +163,27 @@ const AppConfigFormFunctional = ({
       errors.org_name = "Organization name must be present";
     }
 
+    if (orgLogoURL && !validUrl(orgLogoURL)) {
+      errors.org_logo_url = `${orgLogoURL} is not a valid URL`;
+    }
+
     if (!serverURL) {
       errors.server_url = "Fleet server URL must be present";
     }
 
     if (enableSSO) {
-      if (metadata === "" && metadataURL === "") {
-        errors.metadata_url = "Metadata URL must be present";
+      if (idpImageURL && !validUrl(idpImageURL)) {
+        errors.idp_image_url = `${idpImageURL} is not a valid URL`;
       }
+
+      if (metadata === "") {
+        if (metadataURL === "") {
+          errors.metadata_url = "Metadata URL must be present";
+        } else if (!validUrl(metadataURL)) {
+          errors.metadata_url = `${metadataURL} is not a valid URL`;
+        }
+      }
+
       if (!entityID) {
         errors.entity_id = "Entity ID must be present";
       }
@@ -179,7 +195,10 @@ const AppConfigFormFunctional = ({
     if (enableSMTP) {
       if (!smtpSenderAddress) {
         errors.sender_address = "SMTP sender address must be present";
+      } else if (!validEmail(smtpSenderAddress)) {
+        errors.sender_address = `${smtpSenderAddress} is not a valid email`;
       }
+
       if (!smtpServer) {
         errors.server = "SMTP server must be present";
       }
@@ -204,6 +223,11 @@ const AppConfigFormFunctional = ({
     if (enableHostStatusWebhook) {
       if (!hostStatusWebhookDestinationURL) {
         errors.destination_url = "Destination URL must be present";
+      } else if (
+        hostStatusWebhookDestinationURL &&
+        !validUrl(hostStatusWebhookDestinationURL)
+      ) {
+        errors.destination_url = `${hostStatusWebhookDestinationURL} is not a valid URL`;
       }
     }
 
@@ -328,6 +352,8 @@ const AppConfigFormFunctional = ({
             name="orgLogoURL"
             value={orgLogoURL}
             parseTarget
+            onBlur={validateForm}
+            error={formErrors.org_logo_url}
           />
         </div>
         <div className={`${baseClass}__details ${baseClass}__avatar-preview`}>
@@ -447,6 +473,8 @@ const AppConfigFormFunctional = ({
             name="idpImageURL"
             value={idpImageURL}
             parseTarget
+            onBlur={validateForm}
+            error={formErrors.idp_image_url}
           />
         </div>
         <div className={`${baseClass}__details`}>

frontend/components/forms/admin/AppConfigForm/constants.ts

@@ -18,6 +18,8 @@ export interface IAppConfigFormErrors {
   idp_name?: string | null;
   server_url?: string | null;
   org_name?: string | null;
+  org_logo_url?: string | null;
+  idp_image_url?: string | null;
   sender_address?: string | null;
   server?: string | null;
   server_port?: string | null;