impr(commandline): validate input for polyglot and layoutfluid (@fehmer) (monkeytypegame#6709)

Author: fehmer

frontend/src/ts/commandline/lists.ts

@@ -101,11 +101,13 @@ import * as FPSCounter from "../elements/fps-counter";
 import {
   CustomBackgroundSchema,
   CustomLayoutFluid,
+  CustomLayoutFluidSchema,
+  CustomPolyglot,
+  CustomPolyglotSchema,
 } from "@monkeytype/contracts/schemas/configs";
-import { Command, CommandsSubgroup } from "./types";
+import { Command, CommandsSubgroup, withValidation } from "./types";
 import * as TestLogic from "../test/test-logic";
 import * as ActivePage from "../states/active-page";
-import { Language } from "@monkeytype/contracts/schemas/languages";
 
 const fontsPromise = JSONData.getFontsList();
 fontsPromise
@@ -189,37 +191,39 @@ export const commands: CommandsSubgroup = {
     ...LanguagesCommands,
     ...BritishEnglishCommands,
     ...FunboxCommands,
-    {
+    withValidation({
       id: "changeCustomLayoutfluid",
       display: "Custom layoutfluid...",
       defaultValue: (): string => {
         return Config.customLayoutfluid.join(" ");
       },
       input: true,
       icon: "fa-tint",
+      inputValueConvert: (val) => val.trim().split(" ") as CustomLayoutFluid,
+      validation: { schema: CustomLayoutFluidSchema },
       exec: ({ input }): void => {
         if (input === undefined) return;
-        UpdateConfig.setCustomLayoutfluid(
-          input.split(" ") as CustomLayoutFluid
-        );
+        UpdateConfig.setCustomLayoutfluid(input);
       },
-    },
-    {
+    }),
+    withValidation({
       id: "changeCustomPolyglot",
       display: "Polyglot languages...",
       defaultValue: (): string => {
         return Config.customPolyglot.join(" ");
       },
       input: true,
       icon: "fa-language",
+      inputValueConvert: (val) => val.trim().split(" ") as CustomPolyglot,
+      validation: { schema: CustomPolyglotSchema },
       exec: ({ input }): void => {
         if (input === undefined) return;
-        void UpdateConfig.setCustomPolyglot(input.split(" ") as Language[]);
+        void UpdateConfig.setCustomPolyglot(input);
         if (ActivePage.get() === "test") {
           TestLogic.restart();
         }
       },
-    },
+    }),
 
     //input
     ...FreedomModeCommands,

packages/contracts/src/schemas/layouts.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { customEnumErrorHandler } from "./util";
 
 export const LayoutNameSchema = z.enum([
     "qwerty",
@@ -217,7 +218,10 @@ export const LayoutNameSchema = z.enum([
     "tarmak_2",
     "tarmak_3",
     "tarmak_4",
-  ]
+  ], 
+  {
+    errorMap: customEnumErrorHandler("Must be a supported layout"),
+  }
 );
 
 export type LayoutName = z.infer<typeof LayoutNameSchema>;