Merge branch 'main' of github-alt.com:reporter29/httptoolkit-ui

Author: reporter29

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

@@ -71,6 +71,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 === '*';
 
@@ -88,6 +106,25 @@ 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 }> {