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 = ({ payload, enabledProviders, @@ -173,12 +194,7 @@ const ProviderTool: FunctionComponent = ({ 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 = { type: N; key: string; @@ -8,15 +9,18 @@ type Input = { name?: string; description?: string; options?: SelectorOption[]; + validation?: { + rule: (value: string) => string | null; + }; }; type AvailableInput = - | Input + | Input | Input | Input | Input | Input - | Input; + | Input; export interface ProviderInfo { key: string; @@ -390,6 +394,12 @@ export const ProviderList: Readonly = [ { type: "text", key: "username", + validation: { + rule: (value: string) => + /^.\S+@\S+$/.test(value) + ? "Invalid Username. Do not use your e-mail." + : null, + }, }, { type: "password",