refactor

2 files changed, 36 insertions, 10 deletions

diff --git a/frontend/src/pages/Settings/Providers/components.tsx b/frontend/src/pages/Settings/Providers/components.tsx
index 569b17808..4b14b17cc 100644
--- a/frontend/src/pages/Settings/Providers/components.tsx
+++ b/frontend/src/pages/Settings/Providers/components.tsx
@@ -42,7 +42,7 @@ import {
 } from "@/pages/Settings/utilities/SettingsProvider";
 import { BuildKey, useSelectorOptions } from "@/utilities";
 import { ASSERT } from "@/utilities/console";
-import { ProviderInfo } from "./list";
+import { ProviderInfo, ProviderList } from "./list";
 
 type SettingsKey =
   | "settings-general-enabled_providers"
@@ -151,6 +151,27 @@ const SelectItem: AutocompleteProps["renderOption"] = ({ option }) => {
   );
 };
 
+const validation = ProviderList.map((provider) => {
+  return provider.inputs
+    ?.map((input) => {
+      if (input.validation === undefined) {
+        return null;
+      }
+
+      return {
+        [`settings-${provider.key}-${input.key}`]: input.validation?.rule,
+      };
+    })
+    .filter((input) => input && Object.keys(input).length > 0)
+    .reduce((acc, curr) => {
+      return { ...acc, ...curr };
+    }, {});
+})
+  .filter((provider) => provider && Object.keys(provider).length > 0)
+  .reduce((acc, item) => {
+    return { ...acc, ...item };
+  }, {});
+
 const ProviderTool: FunctionComponent<ProviderToolProps> = ({
   payload,
   enabledProviders,
@@ -173,12 +194,7 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
       hooks: {},
     },
     validate: {
-      settings: {
-        "settings-opensubtitlescom-username": (value) =>
-          /^.\S+@\S+$/.test(value)
-            ? "Invalid Username. Do not use your e-mail."
-            : null,
-      },
+      settings: validation!,
     },
   });
 
diff --git a/frontend/src/pages/Settings/Providers/list.ts b/frontend/src/pages/Settings/Providers/list.ts
index e9d75b87f..df3b50c61 100644
--- a/frontend/src/pages/Settings/Providers/list.ts
+++ b/frontend/src/pages/Settings/Providers/list.ts
@@ -1,6 +1,7 @@
-import { ReactText } from "react";
 import { SelectorOption } from "@/components";
 
+type Text = string | number;
+
 type Input<T, N> = {
   type: N;
   key: string;
@@ -8,15 +9,18 @@ type Input<T, N> = {
   name?: string;
   description?: string;
   options?: SelectorOption<string>[];
+  validation?: {
+    rule: (value: string) => string | null;
+  };
 };
 
 type AvailableInput =
-  | Input<ReactText, "text">
+  | Input<Text, "text">
   | Input<string, "password">
   | Input<boolean, "switch">
   | Input<string, "select">
   | Input<string, "testbutton">
-  | Input<ReactText[], "chips">;
+  | Input<Text[], "chips">;
 
 export interface ProviderInfo {
   key: string;
@@ -390,6 +394,12 @@ export const ProviderList: Readonly<ProviderInfo[]> = [
       {
         type: "text",
         key: "username",
+        validation: {
+          rule: (value: string) =>
+            /^.\S+@\S+$/.test(value)
+              ? "Invalid Username. Do not use your e-mail."
+              : null,
+        },
       },
       {
         type: "password",