fix(ui): add validation to hostname/IP fields (#1206)

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -73,7 +73,11 @@ const NotificationsEmail: React.FC = () => {
     emailFrom: Yup.string()
       .required(intl.formatMessage(messages.validationEmail))
       .email(intl.formatMessage(messages.validationEmail)),
-    smtpHost: Yup.string().required(
+    smtpHost: Yup.string()
+      .required(intl.formatMessage(messages.validationSmtpHostRequired))
+      .matches(
+        // eslint-disable-next-line
+        /^(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
         intl.formatMessage(messages.validationSmtpHostRequired)
       ),
     smtpPort: Yup.number().required(

src/components/Settings/RadarrModal/index.tsx

@@ -91,7 +91,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
     name: Yup.string().required(
       intl.formatMessage(messages.validationNameRequired)
     ),
-    hostname: Yup.string().required(
+    hostname: Yup.string()
+      .required(intl.formatMessage(messages.validationHostnameRequired))
+      .matches(
+        // eslint-disable-next-line
+        /^(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
         intl.formatMessage(messages.validationHostnameRequired)
       ),
     port: Yup.number().required(
@@ -312,7 +316,12 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 }
               }}
               secondaryDisabled={
-                !values.apiKey || !values.hostname || !values.port || isTesting
+                !values.apiKey ||
+                !values.hostname ||
+                !values.port ||
+                isTesting ||
+                isSubmitting ||
+                !isValid
               }
               okDisabled={!isValidated || isSubmitting || isTesting || !isValid}
               onOk={() => handleSubmit()}

src/components/Settings/SettingsPlex.tsx

@@ -113,7 +113,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
   const intl = useIntl();
   const { addToast, removeToast } = useToasts();
   const PlexSettingsSchema = Yup.object().shape({
-    hostname: Yup.string().required(
+    hostname: Yup.string()
+      .required(intl.formatMessage(messages.validationHostnameRequired))
+      .matches(
+        // eslint-disable-next-line
+        /^(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
         intl.formatMessage(messages.validationHostnameRequired)
       ),
     port: Yup.number().required(

src/components/Settings/SonarrModal/index.tsx

@@ -102,7 +102,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
     name: Yup.string().required(
       intl.formatMessage(messages.validationNameRequired)
     ),
-    hostname: Yup.string().required(
+    hostname: Yup.string()
+      .required(intl.formatMessage(messages.validationHostnameRequired))
+      .matches(
+        // eslint-disable-next-line
+        /^(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
         intl.formatMessage(messages.validationHostnameRequired)
       ),
     port: Yup.number().required(
@@ -341,7 +345,12 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 }
               }}
               secondaryDisabled={
-                !values.apiKey || !values.hostname || !values.port || isTesting
+                !values.apiKey ||
+                !values.hostname ||
+                !values.port ||
+                isTesting ||
+                isSubmitting ||
+                !isValid
               }
               okDisabled={!isValidated || isSubmitting || isTesting || !isValid}
               onOk={() => handleSubmit()}