fix(validation-indicator): punctuation when there are multiple errors (@Leonabcd123)

frontend/src/ts/elements/input-validation.ts

@@ -112,9 +112,9 @@ export function createInputEventHandler<T>(
       if (!schemaResult.success) {
         callback({
           status: "failed",
-          errorMessage: schemaResult.error.errors
-            .map((err) => err.message)
-            .join(", "),
+          errorMessage:
+            schemaResult.error.errors.map((err) => err.message).join(", ") +
+            ".",
         });
         return;
       }

packages/schemas/__tests__/config.spec.ts

@@ -31,44 +31,44 @@ describe("config schema", () => {
       {
         name: "tiff",
         input: `https://example.com/path/image.tiff`,
-        expectedError: "Unsupported image format.",
+        expectedError: "Unsupported image format",
       },
       {
         name: "non-url",
         input: `test`,
-        expectedError: "Needs to be an URI.",
+        expectedError: "Needs to be an URI",
       },
       {
         name: "single quotes",
         input: `https://example.com/404.jpg?q=alert('1')`,
-        expectedError: "May not contain quotes.",
+        expectedError: "May not contain quotes",
       },
       {
         name: "double quotes",
         input: `https://example.com/404.jpg?q=alert("1")`,
-        expectedError: "May not contain quotes.",
+        expectedError: "May not contain quotes",
       },
       {
         name: "back tick",
         input: `https://example.com/404.jpg?q=alert(\`1\`)`,
-        expectedError: "May not contain quotes.",
+        expectedError: "May not contain quotes",
       },
       {
         name: "javascript url",
         input: `javascript:alert('asdf');//https://example.com/img.jpg`,
-        expectedError: "Unsupported protocol.",
+        expectedError: "Unsupported protocol",
       },
       {
         name: "data url",
         input: `data:image/gif;base64,data`,
-        expectedError: "Unsupported protocol.",
+        expectedError: "Unsupported protocol",
       },
       {
         name: "long url",
         input: `https://example.com/path/image.jpeg?q=${new Array(2048)
           .fill("x")
           .join()}`,
-        expectedError: "URL is too long.",
+        expectedError: "URL is too long",
       },
     ])(`$name`, ({ input, expectedError }) => {
       const parsed = CustomBackgroundSchema.safeParse(input);

packages/schemas/src/configs.ts

@@ -360,11 +360,11 @@ export type MaxLineWidth = z.infer<typeof MaxLineWidthSchema>;
 
 export const CustomBackgroundSchema = z
   .string()
-  .url("Needs to be an URI.")
-  .regex(/^(https|http):\/\/.*/, "Unsupported protocol.")
-  .regex(/^[^`'"]*$/, "May not contain quotes.")
-  .regex(/.+(\.png|\.gif|\.jpeg|\.jpg|\.webp)/gi, "Unsupported image format.")
-  .max(2048, "URL is too long.")
+  .url("Needs to be an URI")
+  .regex(/^(https|http):\/\/.*/, "Unsupported protocol")
+  .regex(/^[^`'"]*$/, "May not contain quotes")
+  .regex(/.+(\.png|\.gif|\.jpeg|\.jpg|\.webp)/gi, "Unsupported image format")
+  .max(2048, "URL is too long")
   .or(z.literal(""));
 export type CustomBackground = z.infer<typeof CustomBackgroundSchema>;