From b7c9bd4b6488aeca908924b8a490363a2646512f Mon Sep 17 00:00:00 2001 From: Luke Heath Date: Mon, 20 Mar 2023 10:40:43 -0500 Subject: [PATCH] Add fallback logic when gravatar fails (#10533) --- .../icon-avatar-default-dark-24x24@2x.png | Bin 0 -> 1775 bytes ...on-avatar-default-transparent-64x64@2x.png | Bin 0 -> 4971 bytes frontend/pages/LoginPage/LoginPage.tsx | 15 ++++++++++ frontend/utilities/constants.ts | 6 ++++ frontend/utilities/helpers.ts | 26 ++++++++++++++---- 5 files changed, 41 insertions(+), 6 deletions(-) create mode 100644 assets/images/icon-avatar-default-dark-24x24@2x.png create mode 100644 assets/images/icon-avatar-default-transparent-64x64@2x.png diff --git a/assets/images/icon-avatar-default-dark-24x24@2x.png b/assets/images/icon-avatar-default-dark-24x24@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..ea30e356caa765d0b621b3a97572ddcc7f3a0814 GIT binary patch literal 1775 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 { return false; }; + const testGravatarAvailability = async () => { + try { + const response = await fetch("https://gravatar.com/avatar"); + if (response.ok) { + localStorage.setItem("gravatar_available", "true"); + } else { + localStorage.setItem("gravatar_available", "false"); + } + } catch (error) { + localStorage.setItem("gravatar_available", "false"); + } + }; + + testGravatarAvailability(); + const onSubmit = async (formData: ILoginData) => { const { DASHBOARD, RESET_PASSWORD } = paths; diff --git a/frontend/utilities/constants.ts b/frontend/utilities/constants.ts index 4970421e3f..10155cd146 100644 --- a/frontend/utilities/constants.ts +++ b/frontend/utilities/constants.ts @@ -16,6 +16,12 @@ export const DEFAULT_GRAVATAR_LINK = export const DEFAULT_GRAVATAR_LINK_DARK = "https://fleetdm.com/images/permanent/icon-avatar-default-dark-24x24%402x.png"; +export const DEFAULT_GRAVATAR_LINK_FALLBACK = + "/assets/images/icon-avatar-default-transparent-64x64%402x.png"; + +export const DEFAULT_GRAVATAR_LINK_DARK_FALLBACK = + "/assets/images/icon-avatar-default-dark-24x24%402x.png"; + export const FREQUENCY_DROPDOWN_OPTIONS = [ { value: 900, label: "Every 15 minutes" }, { value: 3600, label: "Every hour" }, diff --git a/frontend/utilities/helpers.ts b/frontend/utilities/helpers.ts index a187067094..b45cbe6215 100644 --- a/frontend/utilities/helpers.ts +++ b/frontend/utilities/helpers.ts @@ -40,7 +40,9 @@ import sortUtils from "utilities/sort"; import { DEFAULT_EMPTY_CELL_VALUE, DEFAULT_GRAVATAR_LINK, + DEFAULT_GRAVATAR_LINK_FALLBACK, DEFAULT_GRAVATAR_LINK_DARK, + DEFAULT_GRAVATAR_LINK_DARK_FALLBACK, PLATFORM_LABEL_DISPLAY_TYPES, } from "utilities/constants"; import { IScheduledQueryStats } from "interfaces/scheduled_query_stats"; @@ -50,14 +52,26 @@ const ADMIN_ATTRS = ["email", "name", "password", "password_confirmation"]; export const addGravatarUrlToResource = (resource: any): any => { const { email } = resource; + const gravatarAvailable = + localStorage.getItem("gravatar_available") === "true"; const emailHash = md5(email.toLowerCase()); - const gravatar_url = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent( - DEFAULT_GRAVATAR_LINK - )}&size=200`; - const gravatar_url_dark = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent( - DEFAULT_GRAVATAR_LINK_DARK - )}&size=200`; + + let gravatar_url; + let gravatar_url_dark; + + if (gravatarAvailable) { + gravatar_url = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent( + DEFAULT_GRAVATAR_LINK + )}&size=200`; + gravatar_url_dark = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent( + DEFAULT_GRAVATAR_LINK_DARK + )}&size=200`; + } else { + gravatar_url = DEFAULT_GRAVATAR_LINK_FALLBACK; + gravatar_url_dark = DEFAULT_GRAVATAR_LINK_DARK_FALLBACK; + } + return { ...resource, gravatar_url,