diff --git a/changes/26271-fix-org-logo-url-validation b/changes/26271-fix-org-logo-url-validation new file mode 100644 index 0000000000..f20781f2af --- /dev/null +++ b/changes/26271-fix-org-logo-url-validation @@ -0,0 +1 @@ +* Add validation to both org logo URL fields, and accept data URIs as valid \ No newline at end of file diff --git a/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx b/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx index 20256db23b..8a3a1ec38b 100644 --- a/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx +++ b/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx @@ -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 (