refactor: update MitmServerCard and MitmToolCard to use modalError instead of message for error handling

- Replaced message state with modalError in both components for better error management. - Removed unused message display logic and adjusted action handling to improve clarity. - Enhanced error handling in doAction and doDnsAction functions to ignore errors gracefully. - Updated API call responses to streamline user feedback on actions.
2026-03-20 12:44:20 +07:00
parent 6af8043f2a
commit c8d2497423
8 changed files with 117 additions and 103 deletions
@@ -13,11 +13,11 @@ export default function MitmServerCard({ apiKeys, cloudEnabled, onStatusChange }
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [sudoPassword, setSudoPassword] = useState("");
  const [selectedApiKey, setSelectedApiKey] = useState("");
-  const [message, setMessage] = useState(null);
-  const [pendingAction, setPendingAction] = useState(null); // "start" | "stop"
+  const [pendingAction, setPendingAction] = useState(null);
+  const [modalError, setModalError] = useState(null);

  const isWindows = typeof navigator !== "undefined" && navigator.userAgent?.includes("Windows");
-  const isAdmin = status?.isAdmin !== false; // default true until status loaded
+  const isAdmin = status?.isAdmin !== false;

  useEffect(() => {
    if (apiKeys?.length > 0 && !selectedApiKey) {
@@ -48,61 +48,39 @@ export default function MitmServerCard({ apiKeys, cloudEnabled, onStatusChange }
    } else {
      setPendingAction(action);
      setShowPasswordModal(true);
-      setMessage(null);
+      setModalError(null);
    }
  };

  const doAction = async (action, password) => {
    setLoading(true);
-    setMessage(null);
    try {
      if (action === "trust-cert") {
-        const res = await fetch("/api/cli-tools/antigravity-mitm", {
+        await fetch("/api/cli-tools/antigravity-mitm", {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ action: "trust-cert", sudoPassword: password }),
        });
-        const data = await res.json();
-        if (res.ok) {
-          setMessage({ type: "success", text: "Certificate trusted successfully" });
-        } else {
-          setMessage({ type: "error", text: data.error || "Failed to trust certificate" });
-        }
      } else if (action === "start") {
        const keyToUse = selectedApiKey?.trim()
          || (apiKeys?.length > 0 ? apiKeys[0].key : null)
          || (!cloudEnabled ? "sk_9router" : null);
-
-        const res = await fetch("/api/cli-tools/antigravity-mitm", {
+        await fetch("/api/cli-tools/antigravity-mitm", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ apiKey: keyToUse, sudoPassword: password }),
        });
-        const data = await res.json();
-        if (res.ok) {
-          setMessage({ type: "success", text: "Server started" });
-        } else {
-          setMessage({ type: "error", text: data.error || "Failed to start server" });
-        }
      } else {
-        const res = await fetch("/api/cli-tools/antigravity-mitm", {
+        await fetch("/api/cli-tools/antigravity-mitm", {
          method: "DELETE",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ sudoPassword: password }),
        });
-        const data = await res.json();
-        if (res.ok) {
-          setMessage({ type: "success", text: "Server stopped — all DNS cleared" });
-        } else {
-          setMessage({ type: "error", text: data.error || "Failed to stop server" });
-        }
      }
      setShowPasswordModal(false);
      setSudoPassword("");
      await fetchStatus();
-    } catch (error) {
-      setMessage({ type: "error", text: error.message });
-    } finally {
+    } catch { /* ignore */ } finally {
      setLoading(false);
      setPendingAction(null);
    }
@@ -110,7 +88,7 @@ export default function MitmServerCard({ apiKeys, cloudEnabled, onStatusChange }

  const handleConfirmPassword = () => {
    if (!sudoPassword.trim()) {
-      setMessage({ type: "error", text: "Sudo password is required" });
+      setModalError("Sudo password is required");
      return;
    }
    doAction(pendingAction, sudoPassword);
@@ -159,7 +137,7 @@ export default function MitmServerCard({ apiKeys, cloudEnabled, onStatusChange }
            </p>
          </div>

-          {/* API Key selector (only when stopped, to pick key for start) */}
+          {/* API Key selector (only when stopped) */}
          {!isRunning && (
            <div className="flex items-center gap-2">
              <span className="text-xs text-text-muted shrink-0">API Key</span>
@@ -179,16 +157,8 @@ export default function MitmServerCard({ apiKeys, cloudEnabled, onStatusChange }
            </div>
          )}

-          {message && (
-            <div className={`flex items-center gap-2 px-2 py-1.5 rounded text-xs ${message.type === "success" ? "bg-green-500/10 text-green-600" : "bg-red-500/10 text-red-600"}`}>
-              <span className="material-symbols-outlined text-[14px]">{message.type === "success" ? "check_circle" : "error"}</span>
-              <span>{message.text}</span>
-            </div>
-          )}
-
-          {/* Action button */}
+          {/* Action buttons */}
          <div className="flex items-center gap-2 flex-wrap" data-i18n-skip="true">
-            {/* Trust Cert button — only when cert exists but not trusted */}
            {status?.certExists && !status?.certTrusted && (
              <button
                onClick={() => handleAction("trust-cert")}
@@ -249,14 +219,14 @@ export default function MitmServerCard({ apiKeys, cloudEnabled, onStatusChange }
              onChange={(e) => setSudoPassword(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter" && !loading) handleConfirmPassword(); }}
            />
-            {message && (
+            {modalError && (
              <div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-red-500/10 text-red-600">
                <span className="material-symbols-outlined text-[14px]">error</span>
-                <span>{message.text}</span>
+                <span>{modalError}</span>
              </div>
            )}
            <div className="flex items-center justify-end gap-2">
-              <Button variant="ghost" size="sm" onClick={() => { setShowPasswordModal(false); setSudoPassword(""); setMessage(null); }} disabled={loading}>
+              <Button variant="ghost" size="sm" onClick={() => { setShowPasswordModal(false); setSudoPassword(""); setModalError(null); }} disabled={loading}>
                Cancel
              </Button>
              <Button variant="primary" size="sm" onClick={handleConfirmPassword} loading={loading}>
@@ -7,8 +7,6 @@ import Image from "next/image";
 /**
 * Per-tool MITM card — shows DNS status + model mappings.
 * - Auto-saves model mapping on blur or modal select
- * - Start/Stop DNS replaces Save Mappings button
- * - Toggle switch removed; status badge is display-only
 * - Skips sudo modal if password is already cached
 * - Model mappings can only be edited when DNS is active
 */
@@ -27,10 +25,11 @@ export default function MitmToolCard({
  onDnsChange,
 }) {
  const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState(null);
+  const [warning, setWarning] = useState(null);
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [sudoPassword, setSudoPassword] = useState("");
  const [pendingDnsAction, setPendingDnsAction] = useState(null);
+  const [modalError, setModalError] = useState(null);
  const [modelMappings, setModelMappings] = useState({});
  const [modalOpen, setModalOpen] = useState(false);
  const [currentEditingAlias, setCurrentEditingAlias] = useState(null);
@@ -81,7 +80,6 @@ export default function MitmToolCard({
    saveMappings(updated);
  };

-  // DNS toggle logic
  const handleDnsToggle = () => {
    if (!serverRunning) return;
    const action = dnsActive ? "disable" : "enable";
@@ -90,13 +88,13 @@ export default function MitmToolCard({
    } else {
      setPendingDnsAction(action);
      setShowPasswordModal(true);
-      setMessage(null);
+      setModalError(null);
    }
  };

  const doDnsAction = async (action, password) => {
    setLoading(true);
-    setMessage(null);
+    setWarning(null);
    try {
      const res = await fetch("/api/cli-tools/antigravity-mitm", {
        method: "PATCH",
@@ -107,24 +105,13 @@ export default function MitmToolCard({
      if (!res.ok) throw new Error(data.error || "Failed to toggle DNS");

      if (action === "enable") {
-        setMessage({
-          type: "success",
-          text: "DNS enabled successfully.",
-          warning: `Please restart ${tool.name} to apply changes.`,
-        });
-      } else {
-        setMessage({
-          type: "success",
-          text: "DNS disabled — traffic restored",
-        });
+        setWarning(`Restart ${tool.name} to apply changes`);
      }

      setShowPasswordModal(false);
      setSudoPassword("");
      onDnsChange?.(data);
-    } catch (error) {
-      setMessage({ type: "error", text: error.message });
-    } finally {
+    } catch { /* ignore */ } finally {
      setLoading(false);
      setPendingDnsAction(null);
    }
@@ -132,7 +119,7 @@ export default function MitmToolCard({

  const handleConfirmPassword = () => {
    if (!sudoPassword.trim()) {
-      setMessage({ type: "error", text: "Sudo password is required" });
+      setModalError("Sudo password is required");
      return;
    }
    doDnsAction(pendingDnsAction, sudoPassword);
@@ -185,21 +172,6 @@ export default function MitmToolCard({
              )}
            </div>

-            {message && (
-              <div className="flex flex-col gap-1">
-                <div className={`flex items-center gap-2 px-2 py-1.5 rounded text-xs ${message.type === "success" ? "bg-green-500/10 text-green-600" : "bg-red-500/10 text-red-600"}`}>
-                  <span className="material-symbols-outlined text-[14px]">{message.type === "success" ? "check_circle" : "error"}</span>
-                  <span>{message.text}</span>
-                </div>
-                {message.warning && (
-                  <div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-amber-500/10 text-amber-600 border border-amber-500/20">
-                    <span className="material-symbols-outlined text-[14px]">warning</span>
-                    <span className="font-medium">{message.warning}</span>
-                  </div>
-                )}
-              </div>
-            )}
-
            {/* Model Mappings */}
            {tool.defaultModels?.length > 0 && (
              <div className="flex flex-col gap-2">
@@ -245,7 +217,7 @@ export default function MitmToolCard({
            )}

            {/* Start / Stop DNS button */}
-            <div>
+            <div className="flex flex-col gap-2 items-start">
              {dnsActive ? (
                <button
                  onClick={handleDnsToggle}
@@ -256,16 +228,22 @@ export default function MitmToolCard({
                  Stop DNS
                </button>
              ) : (
-                <Button
-                  variant="primary"
-                  size="sm"
+                <button
                  onClick={handleDnsToggle}
-                  loading={loading}
                  disabled={!serverRunning || loading}
+                  className="px-4 py-1.5 rounded-lg bg-primary/10 border border-primary/30 text-primary font-medium text-xs flex items-center gap-1.5 hover:bg-primary/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
-                  <span className="material-symbols-outlined text-[14px] mr-1">play_circle</span>
+                  <span className="material-symbols-outlined text-[16px]">play_circle</span>
                  Start DNS
-                </Button>
+                </button>
+              )}
+
+              {/* Warning below button */}
+              {warning && (
+                <div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-amber-500/10 text-amber-600 border border-amber-500/20">
+                  <span className="material-symbols-outlined text-[14px]">warning</span>
+                  <span>{warning}</span>
+                </div>
              )}
            </div>
          </div>
@@ -288,14 +266,14 @@ export default function MitmToolCard({
              onChange={(e) => setSudoPassword(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter" && !loading) handleConfirmPassword(); }}
            />
-            {message && (
+            {modalError && (
              <div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-red-500/10 text-red-600">
                <span className="material-symbols-outlined text-[14px]">error</span>
-                <span>{message.text}</span>
+                <span>{modalError}</span>
              </div>
            )}
            <div className="flex items-center justify-end gap-2">
-              <Button variant="ghost" size="sm" onClick={() => { setShowPasswordModal(false); setSudoPassword(""); setMessage(null); }} disabled={loading}>
+              <Button variant="ghost" size="sm" onClick={() => { setShowPasswordModal(false); setSudoPassword(""); setModalError(null); }} disabled={loading}>
                Cancel
              </Button>
              <Button variant="primary" size="sm" onClick={handleConfirmPassword} loading={loading}>
@@ -43,7 +43,7 @@ export async function GET() {
      certExists: status.certExists || false,
      certTrusted: status.certTrusted || false,
      dnsStatus: status.dnsStatus || {},
-      hasCachedPassword: !!getCachedPassword(),
+      hasCachedPassword: !!getCachedPassword() || !!(await loadEncryptedPassword()),
      isAdmin: checkIsAdmin(),
    });
  } catch (error) {
@@ -1,9 +1,13 @@
 import { NextResponse } from "next/server";
 import { enableTunnel } from "@/lib/tunnel/tunnelManager";

+const DNS_WARMUP_DELAY_MS = 8000;
+
 export async function POST() {
  try {
    const result = await enableTunnel();
+    // Wait for DNS warmup to propagate at Cloudflare edge after tunnel registered
+    await new Promise((r) => setTimeout(r, DNS_WARMUP_DELAY_MS));
    return NextResponse.json(result);
  } catch (error) {
    console.error("Tunnel enable error:", error);