UI: Validate both org logo URLs, accept data URIs (#27160)

## For #26271 


![ezgif-582a8acaa8686e](https://github.com/user-attachments/assets/4284bbf7-8708-46f3-b020-f4039f8bd1b0)

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
This commit is contained in:
jacobshandling
2025-03-18 12:57:07 -07:00
committed by GitHub
co-authored by Jacob Shandling
parent 7953fe2e2c
commit 11307525d1
2 changed files with 14 additions and 4 deletions
@@ -0,0 +1 @@
* Add validation to both org logo URL fields, and accept data URIs as valid
@@ -1,5 +1,7 @@
import React, { useState } from "react";
import isDataURI from "validator/lib/isDataURI";
import Button from "components/buttons/Button";
// @ts-ignore
import InputField from "components/forms/fields/InputField";
@@ -30,6 +32,9 @@ interface IOrgInfoFormErrors {
const baseClass = "app-config-form";
const cardClass = "org-info";
const validateOrgLogoURL = (url: string) =>
isDataURI(url) || validUrl({ url, protocols: ["http", "https"] });
const Info = ({
appConfig,
handleSubmit,
@@ -67,13 +72,17 @@ const Info = ({
errors.org_name = "Organization name must be present";
}
if (
orgLogoURL &&
!validUrl({ url: orgLogoURL, protocols: ["http", "https"] })
) {
if (orgLogoURL && !validateOrgLogoURL(orgLogoURL)) {
errors.org_logo_url = `${orgLogoURL} is not a valid URL`;
}
if (
orgLogoURLLightBackground &&
!validateOrgLogoURL(orgLogoURLLightBackground)
) {
errors.org_logo_url_light_background = `${orgLogoURL} is not a valid URL`;
}
if (!orgSupportURL) {
errors.org_support_url = `Organization support URL must be present`;
} else if (