diff --git a/frontend/src/pages/Settings/Providers/components.tsx b/frontend/src/pages/Settings/Providers/components.tsx index 5c37188a2..569b17808 100644 --- a/frontend/src/pages/Settings/Providers/components.tsx +++ b/frontend/src/pages/Settings/Providers/components.tsx @@ -172,6 +172,14 @@ const ProviderTool: FunctionComponent = ({ settings: staged, hooks: {}, }, + validate: { + settings: { + "settings-opensubtitlescom-username": (value) => + /^.\S+@\S+$/.test(value) + ? "Invalid Username. Do not use your e-mail." + : null, + }, + }, }); const deletePayload = useCallback(() => { @@ -188,6 +196,12 @@ const ProviderTool: FunctionComponent = ({ const submit = useCallback( (values: FormValues) => { + const result = form.validate(); + + if (result.hasErrors) { + return; + } + if (info && enabledProviders) { const changes = { ...values.settings }; const hooks = values.hooks; @@ -204,7 +218,7 @@ const ProviderTool: FunctionComponent = ({ modals.closeAll(); } }, - [info, enabledProviders, modals, settingsKey], + [info, enabledProviders, modals, settingsKey, form], ); const canSave = info !== null; @@ -249,43 +263,61 @@ const ProviderTool: FunctionComponent = ({ const label = value.name ?? capitalize(value.key); const options = value.options ?? []; + const error = form.errors[`settings.settings-${itemKey}-${key}`] ? ( + + {form.errors[`settings.settings-${itemKey}-${key}`]} + + ) : null; + switch (value.type) { case "text": elements.push( - , + <> + + {error} + , ); return; case "password": elements.push( - , + <> + + {error} + , ); return; case "switch": elements.push( - , + <> + + {error} + , ); return; case "select": elements.push( - , + <> + + {error} + , ); return; case "testbutton": @@ -295,11 +327,14 @@ const ProviderTool: FunctionComponent = ({ return; case "chips": elements.push( - , + <> + + {error} + , ); return; default: @@ -308,7 +343,7 @@ const ProviderTool: FunctionComponent = ({ }); return {elements}; - }, [info]); + }, [info, form]); return (