Validate custom locale and javascript strings (#4893)

* Validate locale json string
* Validate custom javascript string

ui/v2.5/src/components/Settings/Inputs.tsx

@@ -273,9 +273,14 @@ export interface ISettingModal<T> {
   subHeading?: React.ReactNode;
   value: T | undefined;
   close: (v?: T) => void;
-  renderField: (value: T | undefined, setValue: (v?: T) => void) => JSX.Element;
+  renderField: (
+    value: T | undefined,
+    setValue: (v?: T) => void,
+    error?: string
+  ) => JSX.Element;
   modalProps?: ModalProps;
   validate?: (v: T) => boolean | undefined;
+  error?: string | undefined;
 }
 
 export const SettingModal = <T extends {}>(props: ISettingModal<T>) => {
@@ -289,6 +294,7 @@ export const SettingModal = <T extends {}>(props: ISettingModal<T>) => {
     renderField,
     modalProps,
     validate,
+    error,
   } = props;
 
   const intl = useIntl();
@@ -306,7 +312,7 @@ export const SettingModal = <T extends {}>(props: ISettingModal<T>) => {
           {headingID ? <FormattedMessage id={headingID} /> : heading}
         </Modal.Header>
         <Modal.Body>
-          {renderField(currentValue, setCurrentValue)}
+          {renderField(currentValue, setCurrentValue, error)}
           {subHeadingID ? (
             <div className="sub-heading">
               {intl.formatMessage({ id: subHeadingID })}
@@ -341,9 +347,14 @@ interface IModalSetting<T> extends ISetting {
   buttonText?: string;
   buttonTextID?: string;
   onChange: (v: T) => void;
-  renderField: (value: T | undefined, setValue: (v?: T) => void) => JSX.Element;
+  renderField: (
+    value: T | undefined,
+    setValue: (v?: T) => void,
+    error?: string
+  ) => JSX.Element;
   renderValue?: (v: T | undefined) => JSX.Element;
   modalProps?: ModalProps;
+  validateChange?: (v: T) => void | undefined;
 }
 
 export const ModalSetting = <T extends {}>(props: IModalSetting<T>) => {
@@ -364,10 +375,29 @@ export const ModalSetting = <T extends {}>(props: IModalSetting<T>) => {
     modalProps,
     disabled,
     advanced,
+    validateChange,
   } = props;
   const [showModal, setShowModal] = useState(false);
+  const [error, setError] = useState<string>();
   const { advancedMode } = useSettings();
 
+  function onClose(v: T | undefined) {
+    setError(undefined);
+    if (v !== undefined) {
+      if (validateChange) {
+        try {
+          validateChange(v);
+        } catch (e) {
+          setError((e as Error).message);
+          return;
+        }
+      }
+
+      onChange(v);
+    }
+    setShowModal(false);
+  }
+
   if (advanced && !advancedMode) return null;
 
   return (
@@ -380,10 +410,8 @@ export const ModalSetting = <T extends {}>(props: IModalSetting<T>) => {
           subHeading={subHeading}
           value={value}
           renderField={renderField}
-          close={(v) => {
+          close={onClose}
-            if (v !== undefined) onChange(v);
+          error={error}
-            setShowModal(false);
-          }}
           {...modalProps}
         />
       ) : undefined}

ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx

@@ -135,6 +135,40 @@ export const SettingsInterfacePanel: React.FC = () => {
     });
   }
 
+  function validateLocaleString(v: string) {
+    if (!v) return;
+    try {
+      JSON.parse(v);
+    } catch (e) {
+      throw new Error(
+        intl.formatMessage(
+          { id: "errors.invalid_json_string" },
+          {
+            error: (e as SyntaxError).message,
+          }
+        )
+      );
+    }
+  }
+
+  function validateJavascriptString(v: string) {
+    if (!v) return;
+    try {
+      // creates a function from the string to validate it but does not execute it
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      new Function(v);
+    } catch (e) {
+      throw new Error(
+        intl.formatMessage(
+          { id: "errors.invalid_javascript_string" },
+          {
+            error: (e as SyntaxError).message,
+          }
+        )
+      );
+    }
+  }
+
   if (error) return <h1>{error.message}</h1>;
   if (loading) return <LoadingIndicator />;
 
@@ -726,16 +760,23 @@ export const SettingsInterfacePanel: React.FC = () => {
           subHeadingID="config.ui.custom_javascript.description"
           value={iface.javascript ?? undefined}
           onChange={(v) => saveInterface({ javascript: v })}
-          renderField={(value, setValue) => (
+          validateChange={validateJavascriptString}
-            <Form.Control
+          renderField={(value, setValue, err) => (
-              as="textarea"
+            <>
-              value={value}
+              <Form.Control
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                as="textarea"
-                setValue(e.currentTarget.value)
+                value={value}
-              }
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-              rows={16}
+                  setValue(e.currentTarget.value)
-              className="text-input code"
+                }
-            />
+                rows={16}
+                className="text-input code"
+                isInvalid={!!err}
+              />
+              <Form.Control.Feedback type="invalid">
+                {err}
+              </Form.Control.Feedback>
+            </>
           )}
           renderValue={() => {
             return <></>;
@@ -756,16 +797,23 @@ export const SettingsInterfacePanel: React.FC = () => {
           subHeadingID="config.ui.custom_locales.description"
           value={iface.customLocales ?? undefined}
           onChange={(v) => saveInterface({ customLocales: v })}
-          renderField={(value, setValue) => (
+          validateChange={validateLocaleString}
-            <Form.Control
+          renderField={(value, setValue, err) => (
-              as="textarea"
+            <>
-              value={value}
+              <Form.Control
-              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                as="textarea"
-                setValue(e.currentTarget.value)
+                value={value}
-              }
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-              rows={16}
+                  setValue(e.currentTarget.value)
-              className="text-input code"
+                }
-            />
+                rows={16}
+                className="text-input code"
+                isInvalid={!!err}
+              />
+              <Form.Control.Feedback type="invalid">
+                {err}
+              </Form.Control.Feedback>
+            </>
           )}
           renderValue={() => {
             return <></>;

ui/v2.5/src/locales/en-GB.json

@@ -1017,6 +1017,8 @@
   "errors": {
     "header": "Error",
     "image_index_greater_than_zero": "Image index must be greater than 0",
+    "invalid_javascript_string": "Invalid javascript code: {error}",
+    "invalid_json_string": "Invalid JSON string: {error}",
     "lazy_component_error_help": "If you recently upgraded Stash, please reload the page or clear your browser cache.",
     "loading_type": "Error loading {type}",
     "something_went_wrong": "Something went wrong."