feat: additional script system setting (#467)

web/src/components/Settings/SystemSection.tsx

@@ -7,6 +7,7 @@ import "../../less/settings/preferences-section.less";
 interface State {
   allowSignUp: boolean;
   additionalStyle: string;
+  additionalScript: string;
 }
 
 const SystemSection = () => {
@@ -14,6 +15,7 @@ const SystemSection = () => {
   const [state, setState] = useState<State>({
     allowSignUp: false,
     additionalStyle: "",
+    additionalScript: "",
   });
 
   useEffect(() => {
@@ -22,6 +24,7 @@ const SystemSection = () => {
       setState({
         allowSignUp: status.allowSignUp,
         additionalStyle: status.additionalStyle,
+        additionalScript: status.additionalScript,
       });
     });
   }, []);
@@ -51,6 +54,20 @@ const SystemSection = () => {
     });
   };
 
+  const handleAdditionalScriptChanged = (value: string) => {
+    setState({
+      ...state,
+      additionalScript: value,
+    });
+  };
+
+  const handleSaveAdditionalScript = async () => {
+    await api.upsertSystemSetting({
+      name: "additionalScript",
+      value: JSON.stringify(state.additionalScript),
+    });
+  };
+
   return (
     <div className="section-container preferences-section-container">
       <p className="title-text">{t("common.basic")}</p>
@@ -58,12 +75,12 @@ const SystemSection = () => {
         <span className="normal-text">Allow user signup</span>
         <Switch size="sm" checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
       </label>
-      <label className="form-label selector">
+      <div className="form-label selector">
         <span className="normal-text">Additional style</span>
         <Button size="sm" onClick={handleSaveAdditionalStyle}>
           Save
         </Button>
-      </label>
+      </div>
       <Textarea
         className="w-full"
         sx={{
@@ -75,6 +92,23 @@ const SystemSection = () => {
         defaultValue={state.additionalStyle}
         onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
       />
+      <div className="form-label selector mt-2">
+        <span className="normal-text">Additional script</span>
+        <Button size="sm" onClick={handleSaveAdditionalScript}>
+          Save
+        </Button>
+      </div>
+      <Textarea
+        className="w-full"
+        sx={{
+          fontFamily: "monospace",
+          fontSize: "14px",
+        }}
+        minRows={5}
+        maxRows={10}
+        defaultValue={state.additionalScript}
+        onChange={(event) => handleAdditionalScriptChanged(event.target.value)}
+      />
     </div>
   );
 };