Support additional upstream proxy connection formats

Author: reporter29

src/components/settings/connection-settings-card.tsx

@@ -70,6 +70,24 @@ const UpstreamProxyDropdown = styled(Select)`
     margin-right: 10px;
 `;
 
+const HOST_PATTERN = '[A-Za-z0-9\\-.]+';
+const PORT_PATTERN = '\\d+';
+// Disallow "@", "/" and ":" in username/password
+const CRED_PATTERN = '[^@/:]+';
+
+const PROXY_HOST_REGEXES = [
+    // 0) host or host:port
+    new RegExp(`^(${HOST_PATTERN})(:${PORT_PATTERN})?$`),
+    // 1) user:pass@host:port
+    new RegExp(`^(${CRED_PATTERN}):(${CRED_PATTERN})@(${HOST_PATTERN}):(${PORT_PATTERN})$`),
+    // 2) host:port@user:pass
+    new RegExp(`^(${HOST_PATTERN}):(${PORT_PATTERN})@(${CRED_PATTERN}):(${CRED_PATTERN})$`),
+    // 3) host:port:user:pass
+    new RegExp(`^(${HOST_PATTERN}):(${PORT_PATTERN}):(${CRED_PATTERN}):(${CRED_PATTERN})$`),
+    // 4) user:pass:host:port
+    new RegExp(`^(${CRED_PATTERN}):(${CRED_PATTERN}):(${HOST_PATTERN}):(${PORT_PATTERN})$`),
+];
+
 const isValidClientCertHost = (input: string): boolean =>
     isValidHost(input) || input === '*';
 
@@ -82,11 +100,30 @@ const validateClientCertHost = inputValidation(isValidClientCertHost,
 );
 
 const isValidProxyHost = (host: string | undefined): boolean =>
-    !!host?.match(/^([^/@]*@)?[A-Za-z0-9\-.]+(:\d+)?$/);
+    !!host && PROXY_HOST_REGEXES.some(regex => regex.test(host));
 const validateProxyHost = inputValidation(isValidProxyHost,
     "Should be a plain hostname, optionally with a specific port and/or username:password"
 );
 
+// Translates the proxy host input into standard form if needed
+const normalizeProxyHost = (host: string): string => {
+    const idx = PROXY_HOST_REGEXES.findIndex(regex => regex.test(host));
+    if (idx === -1) return host; // Should not occur
+
+    const groups = host.match(PROXY_HOST_REGEXES[idx])!;
+
+    switch (idx) {
+        case 2: // host:port@user:pass
+            return `${groups[3]}:${groups[4]}@${groups[1]}:${groups[2]}`;
+        case 3: // host:port:user:pass
+            return `${groups[3]}:${groups[4]}@${groups[1]}:${groups[2]}`;
+        case 4: // user:pass:host:port
+            return `${groups[1]}:${groups[2]}@${groups[3]}:${groups[4]}`;
+        default:  // Does not include auth or already in standard format
+            return host;
+    }
+};
+
 @observer
 class UpstreamProxyConfig extends React.Component<{ rulesStore: RulesStore }> {
 
@@ -126,7 +163,7 @@ class UpstreamProxyConfig extends React.Component<{ rulesStore: RulesStore }> {
         // We update the rules store proxy type only at the point where we save the host:
         const rulesStore = this.props.rulesStore;
         rulesStore.upstreamProxyType = this.proxyType;
-        rulesStore.upstreamProxyHost = this.proxyHostInput;
+        rulesStore.upstreamProxyHost = normalizeProxyHost(this.proxyHostInput);
     }
 
     @action.bound
@@ -216,7 +253,7 @@ class UpstreamProxyConfig extends React.Component<{ rulesStore: RulesStore }> {
                     <SettingsButton
                         disabled={
                             !isValidProxyHost(proxyHostInput) ||
-                            (proxyHostInput === savedProxyHost && proxyType === savedProxyType)
+                            (normalizeProxyHost(proxyHostInput) === savedProxyHost && proxyType === savedProxyType)
                         }
                         onClick={saveProxyHost}
                     >