From a7f4dcf9e03f0dc0642e27cd1e173f05b7d0e285 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 10 Apr 2025 14:28:13 +0200
Subject: [PATCH] fix: unhelpful error messages when custom background image
 was not a valid url

---
 frontend/src/ts/commandline/lists.ts | 13 ++++++++-
 frontend/src/ts/pages/settings.ts    | 41 +++++++++++++++++++++-------
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/frontend/src/ts/commandline/lists.ts b/frontend/src/ts/commandline/lists.ts
index 346ea790d..1c3bc84bc 100644
--- a/frontend/src/ts/commandline/lists.ts
+++ b/frontend/src/ts/commandline/lists.ts
@@ -106,7 +106,10 @@ import * as TestStats from "../test/test-stats";
 import * as QuoteSearchModal from "../modals/quote-search";
 import * as FPSCounter from "../elements/fps-counter";
 import { migrateConfig } from "../utils/config";
-import { PartialConfigSchema } from "@monkeytype/contracts/schemas/configs";
+import {
+  CustomBackgroundSchema,
+  PartialConfigSchema,
+} from "@monkeytype/contracts/schemas/configs";
 import { Command, CommandsSubgroup } from "./types";
 import { parseWithSchema as parseJsonWithSchema } from "@monkeytype/util/json";
 
@@ -307,6 +310,14 @@ export const commands: CommandsSubgroup = {
       },
       input: true,
       exec: ({ input }): void => {
+        const parsed = CustomBackgroundSchema.safeParse(input);
+        if (!parsed.success) {
+          Notifications.add(
+            `Invalid custom background URL (${parsed.error.issues[0]?.message})`,
+            0
+          );
+          return;
+        }
         UpdateConfig.setCustomBackground(input ?? "");
       },
     },
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 04ebb0264..de785cf3d 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -22,6 +22,7 @@ import * as Skeleton from "../utils/skeleton";
 import * as CustomBackgroundFilter from "../elements/custom-background-filter";
 import {
   ConfigValue,
+  CustomBackgroundSchema,
   CustomLayoutFluid,
 } from "@monkeytype/contracts/schemas/configs";
 import {
@@ -1108,11 +1109,21 @@ $(".pageSettings .sectionGroupTitle").on("click", (e) => {
 $(
   ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton button.save"
 ).on("click", () => {
-  UpdateConfig.setCustomBackground(
-    $(
-      ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
-    ).val() as string
-  );
+  const newVal = $(
+    ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
+  ).val() as string;
+
+  const parsed = CustomBackgroundSchema.safeParse(newVal);
+
+  if (!parsed.success) {
+    Notifications.add(
+      `Invalid custom background URL (${parsed.error.issues[0]?.message})`,
+      0
+    );
+    return;
+  }
+
+  UpdateConfig.setCustomBackground(newVal);
 });
 
 $(
@@ -1125,11 +1136,21 @@ $(
   ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
 ).on("keypress", (e) => {
   if (e.key === "Enter") {
-    UpdateConfig.setCustomBackground(
-      $(
-        ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
-      ).val() as string
-    );
+    const newVal = $(
+      ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
+    ).val() as string;
+
+    const parsed = CustomBackgroundSchema.safeParse(newVal);
+
+    if (!parsed.success) {
+      Notifications.add(
+        `Invalid custom background URL (${parsed.error.issues[0]?.message})`,
+        0
+      );
+      return;
+    }
+
+    UpdateConfig.setCustomBackground(newVal);
   }
 });