feat: proxy pool add form with separate protocol/host/port/auth fields

Replace single URL input with structured fields (protocol dropdown,
host, port, username, password) for easier configuration of
authenticated proxies. Backend still accepts raw url for API compat.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

shared/hooks/use-proxies.ts

@@ -1,13 +1,22 @@
 import { useState, useEffect, useCallback } from "preact/hooks";
 import type { ProxyEntry, ProxyAssignment } from "../types";
 
+export interface AddProxyFields {
+  name: string;
+  protocol: string;
+  host: string;
+  port: string;
+  username: string;
+  password: string;
+}
+
 export interface ProxiesState {
   proxies: ProxyEntry[];
   assignments: ProxyAssignment[];
   healthCheckIntervalMinutes: number;
   loading: boolean;
   refresh: () => Promise<void>;
-  addProxy: (name: string, url: string) => Promise<string | null>;
+  addProxy: (fields: AddProxyFields) => Promise<string | null>;
   removeProxy: (id: string) => Promise<string | null>;
   checkProxy: (id: string) => Promise<void>;
   checkAll: () => Promise<void>;
@@ -43,12 +52,19 @@ export function useProxies(): ProxiesState {
   }, [refresh]);
 
   const addProxy = useCallback(
-    async (name: string, url: string): Promise<string | null> => {
+    async (fields: AddProxyFields): Promise<string | null> => {
       try {
         const resp = await fetch("/api/proxies", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ name, url }),
+          body: JSON.stringify({
+            name: fields.name,
+            protocol: fields.protocol,
+            host: fields.host,
+            port: fields.port,
+            username: fields.username,
+            password: fields.password,
+          }),
         });
         const data = await resp.json();
         if (!resp.ok) return data.error || "Failed to add proxy";

shared/i18n/translations.ts

@@ -77,6 +77,12 @@ export const translations = {
     addProxy: "Add Proxy",
     proxyName: "Name",
     proxyUrl: "Proxy URL",
+    proxyProtocol: "Protocol",
+    proxyHost: "Host",
+    proxyPort: "Port",
+    proxyUsername: "Username",
+    proxyPassword: "Password",
+    proxyOptional: "optional",
     noProxies: "No proxies configured. Add one to route accounts through different IPs.",
     proxyActive: "Active",
     proxyUnreachable: "Unreachable",
@@ -177,6 +183,12 @@ export const translations = {
     addProxy: "\u6dfb\u52a0\u4ee3\u7406",
     proxyName: "\u540d\u79f0",
     proxyUrl: "\u4ee3\u7406 URL",
+    proxyProtocol: "\u534f\u8bae",
+    proxyHost: "\u4e3b\u673a",
+    proxyPort: "\u7aef\u53e3",
+    proxyUsername: "\u7528\u6237\u540d",
+    proxyPassword: "\u5bc6\u7801",
+    proxyOptional: "\u53ef\u9009",
     noProxies: "\u672a\u914d\u7f6e\u4ee3\u7406\u3002\u6dfb\u52a0\u4e00\u4e2a\u4ee5\u901a\u8fc7\u4e0d\u540c IP \u8def\u7531\u8d26\u53f7\u3002",
     proxyActive: "\u6d3b\u8dc3",
     proxyUnreachable: "\u4e0d\u53ef\u8fbe",

src/routes/proxies.ts

@@ -29,14 +29,28 @@ export function createProxyRoutes(proxyPool: ProxyPool): Hono {
     });
   });
 
-  // Add proxy
+  // Add proxy — accepts { name, url } OR { name, protocol, host, port, username?, password? }
   app.post("/api/proxies", async (c) => {
-    const body = await c.req.json<{ name?: string; url?: string }>();
-    const url = body.url?.trim();
+    const body = await c.req.json<{
+      name?: string;
+      url?: string;
+      protocol?: string;
+      host?: string;
+      port?: string | number;
+      username?: string;
+      password?: string;
+    }>();
+
+    let url = body.url?.trim();
+
+    // Compose URL from separate fields if raw url not provided
+    if (!url && body.host) {
+      url = composeProxyUrl(body.protocol, body.host, body.port, body.username, body.password);
+    }
 
     if (!url) {
       c.status(400);
-      return c.json({ error: "url is required" });
+      return c.json({ error: "url or host is required" });
     }
 
     // URL validation + scheme check
@@ -174,3 +188,23 @@ export function createProxyRoutes(proxyPool: ProxyPool): Hono {
 
   return app;
 }
+
+/** Compose a proxy URL from separate fields. */
+function composeProxyUrl(
+  protocol: string | undefined,
+  host: string,
+  port: string | number | undefined,
+  username: string | undefined,
+  password: string | undefined,
+): string {
+  const scheme = protocol || "http";
+  const trimmedHost = host.trim();
+  let auth = "";
+  if (username) {
+    auth = password
+      ? `${encodeURIComponent(username)}:${encodeURIComponent(password)}@`
+      : `${encodeURIComponent(username)}@`;
+  }
+  const portSuffix = port ? `:${port}` : "";
+  return `${scheme}://${auth}${trimmedHost}${portSuffix}`;
+}

web/src/components/ProxyPool.tsx

@@ -3,6 +3,8 @@ import { useT } from "../../../shared/i18n/context";
 import type { TranslationKey } from "../../../shared/i18n/translations";
 import type { ProxiesState } from "../../../shared/hooks/use-proxies";
 
+const PROTOCOLS = ["http", "https", "socks5", "socks5h"] as const;
+
 const statusStyles: Record<string, [string, TranslationKey]> = {
   active: [
     "bg-green-100 text-green-700 border-green-200 dark:bg-[#11281d] dark:text-primary dark:border-[#1a442e]",
@@ -18,6 +20,8 @@ const statusStyles: Record<string, [string, TranslationKey]> = {
   ],
 };
 
+const inputCls = "px-3 py-2 text-sm border border-gray-200 dark:border-border-dark rounded-lg bg-transparent focus:outline-none focus:ring-1 focus:ring-primary";
+
 interface ProxyPoolProps {
   proxies: ProxiesState;
 }
@@ -26,26 +30,46 @@ export function ProxyPool({ proxies }: ProxyPoolProps) {
   const t = useT();
   const [showAdd, setShowAdd] = useState(false);
   const [newName, setNewName] = useState("");
-  const [newUrl, setNewUrl] = useState("");
+  const [newProtocol, setNewProtocol] = useState("http");
+  const [newHost, setNewHost] = useState("");
+  const [newPort, setNewPort] = useState("");
+  const [newUsername, setNewUsername] = useState("");
+  const [newPassword, setNewPassword] = useState("");
   const [addError, setAddError] = useState("");
   const [checking, setChecking] = useState<string | null>(null);
   const [checkingAll, setCheckingAll] = useState(false);
 
+  const resetForm = useCallback(() => {
+    setNewName("");
+    setNewProtocol("http");
+    setNewHost("");
+    setNewPort("");
+    setNewUsername("");
+    setNewPassword("");
+    setAddError("");
+  }, []);
+
   const handleAdd = useCallback(async () => {
     setAddError("");
-    if (!newUrl.trim()) {
-      setAddError("URL is required");
+    if (!newHost.trim()) {
+      setAddError(t("proxyHost") + " is required");
       return;
     }
-    const err = await proxies.addProxy(newName || newUrl, newUrl);
+    const err = await proxies.addProxy({
+      name: newName,
+      protocol: newProtocol,
+      host: newHost,
+      port: newPort,
+      username: newUsername,
+      password: newPassword,
+    });
     if (err) {
       setAddError(err);
     } else {
-      setNewName("");
-      setNewUrl("");
+      resetForm();
       setShowAdd(false);
     }
-  }, [newName, newUrl, proxies]);
+  }, [newName, newProtocol, newHost, newPort, newUsername, newPassword, proxies, resetForm, t]);
 
   const handleCheck = useCallback(
     async (id: string) => {
@@ -102,31 +126,69 @@ export function ProxyPool({ proxies }: ProxyPoolProps) {
       {/* Add form */}
       {showAdd && (
         <div class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-4 mb-4">
-          <div class="flex flex-col sm:flex-row gap-3">
+          <div class="grid grid-cols-[auto_1fr_auto] sm:grid-cols-[auto_1fr_80px] gap-2 items-center">
+            {/* Row 1: Protocol + Host + Port */}
+            <select
+              value={newProtocol}
+              onChange={(e) => setNewProtocol((e.target as HTMLSelectElement).value)}
+              class={`${inputCls} w-[110px]`}
+            >
+              {PROTOCOLS.map((p) => (
+                <option key={p} value={p}>{p}://</option>
+              ))}
+            </select>
+            <input
+              type="text"
+              placeholder={t("proxyHost")}
+              value={newHost}
+              onInput={(e) => setNewHost((e.target as HTMLInputElement).value)}
+              class={`${inputCls} font-mono`}
+            />
+            <input
+              type="text"
+              placeholder={t("proxyPort")}
+              value={newPort}
+              onInput={(e) => setNewPort((e.target as HTMLInputElement).value)}
+              class={`${inputCls} font-mono`}
+            />
+          </div>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 mt-2">
+            {/* Row 2: Name + Username + Password */}
             <input
               type="text"
-              placeholder={t("proxyName")}
+              placeholder={`${t("proxyName")} (${t("proxyOptional")})`}
               value={newName}
               onInput={(e) => setNewName((e.target as HTMLInputElement).value)}
-              class="flex-1 px-3 py-2 text-sm border border-gray-200 dark:border-border-dark rounded-lg bg-transparent focus:outline-none focus:ring-1 focus:ring-primary"
+              class={inputCls}
             />
             <input
               type="text"
-              placeholder="http://host:port or socks5://host:port"
-              value={newUrl}
-              onInput={(e) => setNewUrl((e.target as HTMLInputElement).value)}
-              class="flex-[2] px-3 py-2 text-sm border border-gray-200 dark:border-border-dark rounded-lg bg-transparent focus:outline-none focus:ring-1 focus:ring-primary font-mono"
+              placeholder={`${t("proxyUsername")} (${t("proxyOptional")})`}
+              value={newUsername}
+              onInput={(e) => setNewUsername((e.target as HTMLInputElement).value)}
+              class={inputCls}
+            />
+            <input
+              type="password"
+              placeholder={`${t("proxyPassword")} (${t("proxyOptional")})`}
+              value={newPassword}
+              onInput={(e) => setNewPassword((e.target as HTMLInputElement).value)}
+              class={`${inputCls} col-span-2 sm:col-span-1`}
             />
-            <button
-              onClick={handleAdd}
-              class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors whitespace-nowrap"
-            >
-              {t("addProxy")}
-            </button>
           </div>
-          {addError && (
-            <p class="text-xs text-red-500 mt-2">{addError}</p>
-          )}
+          <div class="flex items-center justify-between mt-3">
+            {addError && (
+              <p class="text-xs text-red-500">{addError}</p>
+            )}
+            <div class="ml-auto">
+              <button
+                onClick={handleAdd}
+                class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors whitespace-nowrap"
+              >
+                {t("addProxy")}
+              </button>
+            </div>
+          </div>
         </div>
       )}