Fix bug in validation that allowed ports in TLS passthrough

Author: pimterry

src/components/component-utils.tsx

@@ -23,16 +23,32 @@ export const noPropagation = <E extends React.BaseSyntheticEvent>(
     callback(event);
 }
 
+/**
+ * An input validation function combines check logic with an explanatory error
+ * message, and provides a convenient mechanism to check the validity of an
+ * input itself (in which case it sets the input's validity state) or a raw
+ * input value (in which case it just returns the result, with no side effects).
+ */
+export interface InputValidationFunction {
+    (input: HTMLInputElement | string): boolean;
+}
+
 export const inputValidation = (
     checkFn: (input: string) => boolean,
     errorMessage: string
-) => (input: HTMLInputElement) => {
-    const inputValue = input.value;
-    if (!inputValue || checkFn(inputValue)) {
-        input.setCustomValidity('');
+): InputValidationFunction => (input) => {
+    const isInput = typeof input !== 'string';
+    const inputValue = isInput ? input.value : input;
+
+    if (isInput) {
+        if (!inputValue || checkFn(inputValue)) {
+            input.setCustomValidity('');
+        } else {
+            input.setCustomValidity(errorMessage);
+        }
+        input.reportValidity();
+        return input.validity.valid;
     } else {
-        input.setCustomValidity(errorMessage);
+        return checkFn(inputValue);
     }
-    input.reportValidity();
-    return input.validity.valid;
 }

src/components/settings/string-settings-list.tsx

@@ -4,9 +4,8 @@ import { observer } from 'mobx-react';
 
 import { styled } from '../../styles';
 import { Icon } from '../../icons';
-import { isValidHost } from '../../model/network';
 
-import { inputValidation } from '../component-utils';
+import { InputValidationFunction } from '../component-utils';
 import { TextInput } from '../common/inputs';
 import { SettingsButton } from './settings-components';
 
@@ -36,8 +35,7 @@ export class StringSettingsList extends React.Component<{
     onDelete: (value: string) => void,
     onAdd: (value: string) => void,
     placeholder: string,
-
-    validationFn: (input: HTMLInputElement) => void
+    validationFn: InputValidationFunction
 }> {
 
     @observable
@@ -70,7 +68,7 @@ export class StringSettingsList extends React.Component<{
             />
             <SettingsButton
                 disabled={
-                    !isValidHost(this.inputValue) ||
+                    !this.props.validationFn(this.inputValue) ||
                     values.includes(this.inputValue)
                 }
                 onClick={this.addHost}