From ffe024be236039feb9888043769c8e34109faac3 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 25 Jan 2022 11:06:47 -0500
Subject: [PATCH] Frontend Validators: Form URLs and email addresses (#3511)

---
 changes/issue-3507-url-email-validators       |  1 +
 .../components/forms/FormField/_styles.scss   |  2 +-
 .../forms/UserSettingsForm/validate.js        |  3 ++
 .../admin/AppConfigForm/AppConfigForm.tsx     | 32 +++++++++++++++++--
 .../forms/admin/AppConfigForm/constants.ts    |  2 ++
 5 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 changes/issue-3507-url-email-validators

diff --git a/changes/issue-3507-url-email-validators b/changes/issue-3507-url-email-validators
new file mode 100644
index 0000000000..88aea588c7
--- /dev/null
+++ b/changes/issue-3507-url-email-validators
@@ -0,0 +1 @@
+* App wide frontend validators for email addresses and urls
\ No newline at end of file
diff --git a/frontend/components/forms/FormField/_styles.scss b/frontend/components/forms/FormField/_styles.scss
index 1b05658ce0..be36437038 100644
--- a/frontend/components/forms/FormField/_styles.scss
+++ b/frontend/components/forms/FormField/_styles.scss
@@ -10,7 +10,7 @@
 
     &--error {
       font-weight: $bold;
-      color: $ui-error;
+      color: $core-vibrant-red;
     }
   }
 
diff --git a/frontend/components/forms/UserSettingsForm/validate.js b/frontend/components/forms/UserSettingsForm/validate.js
index 07e79f7b55..cf352558b8 100644
--- a/frontend/components/forms/UserSettingsForm/validate.js
+++ b/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)) {
diff --git a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.tsx b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.tsx
index 13ed2c8345..0297404463 100644
--- a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.tsx
+++ b/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`}>
diff --git a/frontend/components/forms/admin/AppConfigForm/constants.ts b/frontend/components/forms/admin/AppConfigForm/constants.ts
index 44c328ff8b..9c96fb65bf 100644
--- a/frontend/components/forms/admin/AppConfigForm/constants.ts
+++ b/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;