Added opensubtitlescom provider validation

frontend/src/pages/Settings/Providers/components.tsx

@@ -172,6 +172,14 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
       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<ProviderToolProps> = ({
 
   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<ProviderToolProps> = ({
         modals.closeAll();
       }
     },
-    [info, enabledProviders, modals, settingsKey],
+    [info, enabledProviders, modals, settingsKey, form],
   );
 
   const canSave = info !== null;
@@ -249,43 +263,61 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
       const label = value.name ?? capitalize(value.key);
       const options = value.options ?? [];
 
+      const error = form.errors[`settings.settings-${itemKey}-${key}`] ? (
+        <MantineText c="red" component="span" size="xs">
+          {form.errors[`settings.settings-${itemKey}-${key}`]}
+        </MantineText>
+      ) : null;
+
       switch (value.type) {
         case "text":
           elements.push(
+            <>
               <Text
                 key={BuildKey(itemKey, key)}
                 label={label}
                 settingKey={`settings-${itemKey}-${key}`}
-            ></Text>,
+              ></Text>
+              {error}
+            </>,
           );
           return;
         case "password":
           elements.push(
+            <>
               <Password
                 key={BuildKey(itemKey, key)}
                 label={label}
                 settingKey={`settings-${itemKey}-${key}`}
-            ></Password>,
+              ></Password>
+              {error}
+            </>,
           );
           return;
         case "switch":
           elements.push(
+            <>
               <Check
                 key={key}
                 inline
                 label={label}
                 settingKey={`settings-${itemKey}-${key}`}
-            ></Check>,
+              ></Check>
+              {error}
+            </>,
           );
           return;
         case "select":
           elements.push(
+            <>
               <GlobalSelector
                 key={key}
                 label={label}
                 settingKey={`settings-${itemKey}-${key}`}
                 options={options}
-            ></GlobalSelector>,
+              ></GlobalSelector>
+              {error}
+            </>,
           );
           return;
         case "testbutton":
@@ -295,11 +327,14 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
           return;
         case "chips":
           elements.push(
+            <>
               <Chips
                 key={key}
                 label={label}
                 settingKey={`settings-${itemKey}-${key}`}
-            ></Chips>,
+              ></Chips>
+              {error}
+            </>,
           );
           return;
         default:
@@ -308,7 +343,7 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
     });
 
     return <Stack gap="xs">{elements}</Stack>;
-  }, [info]);
+  }, [info, form]);
 
   return (
     <SettingsProvider value={settings}>