mirror of
https://github.com/zhom/donutbrowser.git
synced 2026-06-26 00:19:57 +02:00
zhom
912 lines
36 KiB
TypeScript
912 lines
36 KiB
TypeScript
"use client";
|
|
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
import { emit, listen } from "@tauri-apps/api/event";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { GoPlus } from "react-icons/go";
|
|
import { LuDownload, LuPencil, LuTrash2, LuUpload } from "react-icons/lu";
|
|
import { toast } from "sonner";
|
|
import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog";
|
|
import { ProxyExportDialog } from "@/components/proxy-export-dialog";
|
|
import { ProxyFormDialog } from "@/components/proxy-form-dialog";
|
|
import { ProxyImportDialog } from "@/components/proxy-import-dialog";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { useProxyEvents } from "@/hooks/use-proxy-events";
|
|
import { useVpnEvents } from "@/hooks/use-vpn-events";
|
|
import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
|
|
import type { ProxyCheckResult, StoredProxy, VpnConfig } from "@/types";
|
|
import { ProxyCheckButton } from "./proxy-check-button";
|
|
import { RippleButton } from "./ui/ripple";
|
|
import { VpnCheckButton } from "./vpn-check-button";
|
|
import { VpnFormDialog } from "./vpn-form-dialog";
|
|
import { VpnImportDialog } from "./vpn-import-dialog";
|
|
|
|
type SyncStatus = "disabled" | "syncing" | "synced" | "error" | "waiting";
|
|
|
|
function getSyncStatusDot(
|
|
item: { sync_enabled?: boolean; last_sync?: number },
|
|
liveStatus: SyncStatus | undefined,
|
|
t: (key: string, options?: Record<string, unknown>) => string,
|
|
errorMessage?: string,
|
|
): { color: string; tooltip: string; animate: boolean } {
|
|
const status = liveStatus ?? (item.sync_enabled ? "synced" : "disabled");
|
|
|
|
switch (status) {
|
|
case "syncing":
|
|
return {
|
|
color: "bg-warning",
|
|
tooltip: t("syncTooltips.syncing"),
|
|
animate: true,
|
|
};
|
|
case "synced":
|
|
return {
|
|
color: "bg-success",
|
|
tooltip: item.last_sync
|
|
? t("syncTooltips.syncedAt", {
|
|
time: new Date(item.last_sync * 1000).toLocaleString(),
|
|
})
|
|
: t("syncTooltips.synced"),
|
|
animate: false,
|
|
};
|
|
case "waiting":
|
|
return {
|
|
color: "bg-warning",
|
|
tooltip: t("syncTooltips.waiting"),
|
|
animate: false,
|
|
};
|
|
case "error":
|
|
return {
|
|
color: "bg-destructive",
|
|
tooltip: errorMessage
|
|
? t("syncTooltips.errorWith", { error: errorMessage })
|
|
: t("syncTooltips.error"),
|
|
animate: false,
|
|
};
|
|
default:
|
|
return {
|
|
color: "bg-muted-foreground",
|
|
tooltip: t("syncTooltips.notSynced"),
|
|
animate: false,
|
|
};
|
|
}
|
|
}
|
|
|
|
interface ProxyManagementDialogProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function ProxyManagementDialog({
|
|
isOpen,
|
|
onClose,
|
|
}: ProxyManagementDialogProps) {
|
|
const { t } = useTranslation();
|
|
// Proxy state
|
|
const [showProxyForm, setShowProxyForm] = useState(false);
|
|
const [showImportDialog, setShowImportDialog] = useState(false);
|
|
const [showExportDialog, setShowExportDialog] = useState(false);
|
|
const [editingProxy, setEditingProxy] = useState<StoredProxy | null>(null);
|
|
const [proxyToDelete, setProxyToDelete] = useState<StoredProxy | null>(null);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
const [checkingProxyId, setCheckingProxyId] = useState<string | null>(null);
|
|
const [proxyCheckResults, setProxyCheckResults] = useState<
|
|
Record<string, ProxyCheckResult>
|
|
>({});
|
|
const [proxySyncStatus, setProxySyncStatus] = useState<
|
|
Record<string, SyncStatus>
|
|
>({});
|
|
const [proxySyncErrors, setProxySyncErrors] = useState<
|
|
Record<string, string>
|
|
>({});
|
|
const [proxyInUse, setProxyInUse] = useState<Record<string, boolean>>({});
|
|
const [isTogglingSync, setIsTogglingSync] = useState<Record<string, boolean>>(
|
|
{},
|
|
);
|
|
|
|
// VPN state
|
|
const [showVpnForm, setShowVpnForm] = useState(false);
|
|
const [showVpnImportDialog, setShowVpnImportDialog] = useState(false);
|
|
const [editingVpn, setEditingVpn] = useState<VpnConfig | null>(null);
|
|
const [vpnToDelete, setVpnToDelete] = useState<VpnConfig | null>(null);
|
|
const [isDeletingVpn, setIsDeletingVpn] = useState(false);
|
|
const [checkingVpnId, setCheckingVpnId] = useState<string | null>(null);
|
|
const [vpnSyncStatus, setVpnSyncStatus] = useState<
|
|
Record<string, SyncStatus>
|
|
>({});
|
|
const [vpnSyncErrors, setVpnSyncErrors] = useState<Record<string, string>>(
|
|
{},
|
|
);
|
|
const [vpnInUse, setVpnInUse] = useState<Record<string, boolean>>({});
|
|
const [isTogglingVpnSync, setIsTogglingVpnSync] = useState<
|
|
Record<string, boolean>
|
|
>({});
|
|
|
|
const { storedProxies: rawProxies, proxyUsage, isLoading } = useProxyEvents();
|
|
const { vpnConfigs, vpnUsage, isLoading: isLoadingVpns } = useVpnEvents();
|
|
|
|
// Filter out cloud-managed and cloud-derived proxies (cloud proxies are deprecated)
|
|
const storedProxies = rawProxies
|
|
.filter((p) => !p.is_cloud_managed && !p.is_cloud_derived)
|
|
.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
|
|
|
|
// Listen for proxy sync status events
|
|
useEffect(() => {
|
|
let unlisten: (() => void) | undefined;
|
|
|
|
const setupListener = async () => {
|
|
unlisten = await listen<{ id: string; status: string; error?: string }>(
|
|
"proxy-sync-status",
|
|
(event) => {
|
|
const { id, status, error } = event.payload;
|
|
setProxySyncStatus((prev) => ({
|
|
...prev,
|
|
[id]: status as SyncStatus,
|
|
}));
|
|
if (error) {
|
|
setProxySyncErrors((prev) => ({ ...prev, [id]: error }));
|
|
}
|
|
},
|
|
);
|
|
};
|
|
|
|
void setupListener();
|
|
return () => {
|
|
unlisten?.();
|
|
};
|
|
}, []);
|
|
|
|
// Listen for VPN sync status events
|
|
useEffect(() => {
|
|
let unlisten: (() => void) | undefined;
|
|
|
|
const setupListener = async () => {
|
|
unlisten = await listen<{ id: string; status: string; error?: string }>(
|
|
"vpn-sync-status",
|
|
(event) => {
|
|
const { id, status, error } = event.payload;
|
|
setVpnSyncStatus((prev) => ({
|
|
...prev,
|
|
[id]: status as SyncStatus,
|
|
}));
|
|
if (error) {
|
|
setVpnSyncErrors((prev) => ({ ...prev, [id]: error }));
|
|
}
|
|
},
|
|
);
|
|
};
|
|
|
|
void setupListener();
|
|
return () => {
|
|
unlisten?.();
|
|
};
|
|
}, []);
|
|
|
|
// Load cached check results on mount and when proxies change
|
|
useEffect(() => {
|
|
const loadCachedResults = async () => {
|
|
const results: Record<string, ProxyCheckResult> = {};
|
|
const inUse: Record<string, boolean> = {};
|
|
for (const proxy of storedProxies) {
|
|
try {
|
|
const cached = await invoke<ProxyCheckResult | null>(
|
|
"get_cached_proxy_check",
|
|
{ proxyId: proxy.id },
|
|
);
|
|
if (cached) {
|
|
results[proxy.id] = cached;
|
|
}
|
|
|
|
const inUseBySynced = await invoke<boolean>(
|
|
"is_proxy_in_use_by_synced_profile",
|
|
{ proxyId: proxy.id },
|
|
);
|
|
inUse[proxy.id] = inUseBySynced;
|
|
} catch (_error) {
|
|
// Ignore errors
|
|
}
|
|
}
|
|
setProxyCheckResults(results);
|
|
setProxyInUse(inUse);
|
|
};
|
|
if (storedProxies.length > 0) {
|
|
void loadCachedResults();
|
|
}
|
|
}, [storedProxies]);
|
|
|
|
// Load VPN in-use status
|
|
useEffect(() => {
|
|
const loadVpnInUse = async () => {
|
|
const inUse: Record<string, boolean> = {};
|
|
for (const vpn of vpnConfigs) {
|
|
try {
|
|
const inUseBySynced = await invoke<boolean>(
|
|
"is_vpn_in_use_by_synced_profile",
|
|
{ vpnId: vpn.id },
|
|
);
|
|
inUse[vpn.id] = inUseBySynced;
|
|
} catch (_error) {
|
|
// Ignore errors
|
|
}
|
|
}
|
|
setVpnInUse(inUse);
|
|
};
|
|
if (vpnConfigs.length > 0) {
|
|
void loadVpnInUse();
|
|
}
|
|
}, [vpnConfigs]);
|
|
|
|
// Proxy handlers
|
|
const handleDeleteProxy = useCallback((proxy: StoredProxy) => {
|
|
setProxyToDelete(proxy);
|
|
}, []);
|
|
|
|
const handleConfirmDelete = useCallback(async () => {
|
|
if (!proxyToDelete) return;
|
|
setIsDeleting(true);
|
|
try {
|
|
await invoke("delete_stored_proxy", { proxyId: proxyToDelete.id });
|
|
toast.success(t("proxies.management.deleteSuccess"));
|
|
await emit("stored-proxies-changed");
|
|
} catch (error) {
|
|
console.error("Failed to delete proxy:", error);
|
|
toast.error(t("proxies.management.deleteFailed"));
|
|
} finally {
|
|
setIsDeleting(false);
|
|
setProxyToDelete(null);
|
|
}
|
|
}, [proxyToDelete, t]);
|
|
|
|
const handleCreateProxy = useCallback(() => {
|
|
setEditingProxy(null);
|
|
setShowProxyForm(true);
|
|
}, []);
|
|
|
|
const handleEditProxy = useCallback((proxy: StoredProxy) => {
|
|
setEditingProxy(proxy);
|
|
setShowProxyForm(true);
|
|
}, []);
|
|
|
|
const handleProxyFormClose = useCallback(() => {
|
|
setShowProxyForm(false);
|
|
setEditingProxy(null);
|
|
}, []);
|
|
|
|
const handleToggleSync = useCallback(
|
|
async (proxy: StoredProxy) => {
|
|
setIsTogglingSync((prev) => ({ ...prev, [proxy.id]: true }));
|
|
try {
|
|
await invoke("set_proxy_sync_enabled", {
|
|
proxyId: proxy.id,
|
|
enabled: !proxy.sync_enabled,
|
|
});
|
|
showSuccessToast(
|
|
proxy.sync_enabled
|
|
? t("proxies.management.syncDisabled")
|
|
: t("proxies.management.syncEnabled"),
|
|
);
|
|
await emit("stored-proxies-changed");
|
|
} catch (error) {
|
|
console.error("Failed to toggle sync:", error);
|
|
showErrorToast(
|
|
error instanceof Error
|
|
? error.message
|
|
: t("proxies.management.updateSyncFailed"),
|
|
);
|
|
} finally {
|
|
setIsTogglingSync((prev) => ({ ...prev, [proxy.id]: false }));
|
|
}
|
|
},
|
|
[t],
|
|
);
|
|
|
|
// VPN handlers
|
|
const handleDeleteVpn = useCallback((vpn: VpnConfig) => {
|
|
setVpnToDelete(vpn);
|
|
}, []);
|
|
|
|
const handleConfirmDeleteVpn = useCallback(async () => {
|
|
if (!vpnToDelete) return;
|
|
setIsDeletingVpn(true);
|
|
try {
|
|
await invoke("delete_vpn_config", { vpnId: vpnToDelete.id });
|
|
toast.success(t("vpns.management.deleteSuccess"));
|
|
await emit("vpn-configs-changed");
|
|
} catch (error) {
|
|
console.error("Failed to delete VPN:", error);
|
|
toast.error(t("vpns.management.deleteFailed"));
|
|
} finally {
|
|
setIsDeletingVpn(false);
|
|
setVpnToDelete(null);
|
|
}
|
|
}, [vpnToDelete, t]);
|
|
|
|
const handleCreateVpn = useCallback(() => {
|
|
setEditingVpn(null);
|
|
setShowVpnForm(true);
|
|
}, []);
|
|
|
|
const handleEditVpn = useCallback((vpn: VpnConfig) => {
|
|
setEditingVpn(vpn);
|
|
setShowVpnForm(true);
|
|
}, []);
|
|
|
|
const handleVpnFormClose = useCallback(() => {
|
|
setShowVpnForm(false);
|
|
setEditingVpn(null);
|
|
}, []);
|
|
|
|
const handleToggleVpnSync = useCallback(
|
|
async (vpn: VpnConfig) => {
|
|
setIsTogglingVpnSync((prev) => ({ ...prev, [vpn.id]: true }));
|
|
try {
|
|
await invoke("set_vpn_sync_enabled", {
|
|
vpnId: vpn.id,
|
|
enabled: !vpn.sync_enabled,
|
|
});
|
|
showSuccessToast(
|
|
vpn.sync_enabled
|
|
? t("proxies.management.syncDisabled")
|
|
: t("proxies.management.syncEnabled"),
|
|
);
|
|
await emit("vpn-configs-changed");
|
|
} catch (error) {
|
|
console.error("Failed to toggle VPN sync:", error);
|
|
showErrorToast(
|
|
error instanceof Error
|
|
? error.message
|
|
: t("proxies.management.updateSyncFailed"),
|
|
);
|
|
} finally {
|
|
setIsTogglingVpnSync((prev) => ({ ...prev, [vpn.id]: false }));
|
|
}
|
|
},
|
|
[t],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-[min(95vw,1600px)] max-h-[90vh] flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle>{t("proxies.management.title")}</DialogTitle>
|
|
<DialogDescription>
|
|
{t("proxies.management.description")}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<ScrollArea className="overflow-y-auto flex-1">
|
|
<Tabs defaultValue="proxies">
|
|
<TabsList className="w-full">
|
|
<TabsTrigger value="proxies" className="flex-1">
|
|
{t("proxies.management.tabProxies")}
|
|
</TabsTrigger>
|
|
<TabsTrigger value="vpns" className="flex-1">
|
|
{t("proxies.management.tabVpns")}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="proxies" className="mt-4">
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex gap-2">
|
|
<RippleButton
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => {
|
|
setShowImportDialog(true);
|
|
}}
|
|
className="flex gap-2 items-center"
|
|
>
|
|
<LuUpload className="w-4 h-4" />
|
|
{t("common.buttons.import")}
|
|
</RippleButton>
|
|
<RippleButton
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => {
|
|
setShowExportDialog(true);
|
|
}}
|
|
className="flex gap-2 items-center"
|
|
disabled={storedProxies.length === 0}
|
|
>
|
|
<LuDownload className="w-4 h-4" />
|
|
{t("common.buttons.export")}
|
|
</RippleButton>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<RippleButton
|
|
size="sm"
|
|
onClick={handleCreateProxy}
|
|
className="flex gap-2 items-center"
|
|
>
|
|
<GoPlus className="w-4 h-4" />
|
|
{t("proxies.management.create")}
|
|
</RippleButton>
|
|
</div>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="text-sm text-muted-foreground">
|
|
{t("proxies.management.loading")}
|
|
</div>
|
|
) : storedProxies.length === 0 ? (
|
|
<div className="text-sm text-muted-foreground">
|
|
{t("proxies.management.noneCreated")}
|
|
</div>
|
|
) : (
|
|
<div className="border rounded-md max-h-[240px] overflow-auto">
|
|
<Table className="min-w-max">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>{t("common.labels.name")}</TableHead>
|
|
<TableHead className="whitespace-nowrap w-px">
|
|
{t("proxies.management.usage")}
|
|
</TableHead>
|
|
<TableHead className="whitespace-nowrap w-px">
|
|
{t("proxies.management.syncCol")}
|
|
</TableHead>
|
|
<TableHead className="whitespace-nowrap w-px">
|
|
{t("common.labels.actions")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{storedProxies.map((proxy) => {
|
|
const syncDot = getSyncStatusDot(
|
|
proxy,
|
|
proxySyncStatus[proxy.id],
|
|
t,
|
|
proxySyncErrors[proxy.id],
|
|
);
|
|
return (
|
|
<TableRow key={proxy.id}>
|
|
<TableCell className="font-medium">
|
|
<div className="flex items-center gap-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className={`w-2 h-2 rounded-full shrink-0 ${syncDot.color} ${
|
|
syncDot.animate
|
|
? "animate-pulse"
|
|
: ""
|
|
}`}
|
|
/>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{syncDot.tooltip}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
{proxy.name}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="secondary">
|
|
{proxyUsage[proxy.id] ?? 0}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="flex items-center">
|
|
<Checkbox
|
|
checked={proxy.sync_enabled}
|
|
onCheckedChange={() =>
|
|
void handleToggleSync(proxy)
|
|
}
|
|
disabled={
|
|
isTogglingSync[proxy.id] ||
|
|
proxyInUse[proxy.id]
|
|
}
|
|
/>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{proxyInUse[proxy.id] ? (
|
|
<p>
|
|
{t(
|
|
"proxies.management.syncCannotDisable",
|
|
)}
|
|
</p>
|
|
) : (
|
|
<p>
|
|
{proxy.sync_enabled
|
|
? t(
|
|
"proxies.management.disableSync",
|
|
)
|
|
: t(
|
|
"proxies.management.enableSync",
|
|
)}
|
|
</p>
|
|
)}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex gap-1">
|
|
<ProxyCheckButton
|
|
proxy={proxy}
|
|
profileId={proxy.id}
|
|
checkingProfileId={checkingProxyId}
|
|
cachedResult={proxyCheckResults[proxy.id]}
|
|
setCheckingProfileId={setCheckingProxyId}
|
|
onCheckComplete={(result) => {
|
|
setProxyCheckResults((prev) => ({
|
|
...prev,
|
|
[proxy.id]: result,
|
|
}));
|
|
}}
|
|
onCheckFailed={(result) => {
|
|
setProxyCheckResults((prev) => ({
|
|
...prev,
|
|
[proxy.id]: result,
|
|
}));
|
|
}}
|
|
/>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
handleEditProxy(proxy);
|
|
}}
|
|
>
|
|
<LuPencil className="w-4 h-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>
|
|
{t("proxies.management.editProxy")}
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
handleDeleteProxy(proxy);
|
|
}}
|
|
disabled={
|
|
(proxyUsage[proxy.id] ?? 0) > 0
|
|
}
|
|
>
|
|
<LuTrash2 className="w-4 h-4" />
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{(proxyUsage[proxy.id] ?? 0) > 0 ? (
|
|
<p>
|
|
{(proxyUsage[proxy.id] ?? 0) === 1
|
|
? t(
|
|
"proxies.management.cannotDelete_one",
|
|
{
|
|
count: proxyUsage[proxy.id],
|
|
},
|
|
)
|
|
: t(
|
|
"proxies.management.cannotDelete_other",
|
|
{
|
|
count: proxyUsage[proxy.id],
|
|
},
|
|
)}
|
|
</p>
|
|
) : (
|
|
<p>
|
|
{t(
|
|
"proxies.management.deleteProxy",
|
|
)}
|
|
</p>
|
|
)}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="vpns" className="mt-4">
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex gap-2">
|
|
<RippleButton
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => {
|
|
setShowVpnImportDialog(true);
|
|
}}
|
|
className="flex gap-2 items-center"
|
|
>
|
|
<LuUpload className="w-4 h-4" />
|
|
{t("common.buttons.import")}
|
|
</RippleButton>
|
|
</div>
|
|
<RippleButton
|
|
size="sm"
|
|
onClick={handleCreateVpn}
|
|
className="flex gap-2 items-center"
|
|
>
|
|
<GoPlus className="w-4 h-4" />
|
|
{t("proxies.management.create")}
|
|
</RippleButton>
|
|
</div>
|
|
|
|
{isLoadingVpns ? (
|
|
<div className="text-sm text-muted-foreground">
|
|
{t("vpns.management.loading")}
|
|
</div>
|
|
) : vpnConfigs.length === 0 ? (
|
|
<div className="text-sm text-muted-foreground">
|
|
{t("vpns.management.noneCreated")}
|
|
</div>
|
|
) : (
|
|
<div className="border rounded-md max-h-[240px] overflow-auto">
|
|
<Table className="min-w-max">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>{t("common.labels.name")}</TableHead>
|
|
<TableHead className="whitespace-nowrap w-px">
|
|
{t("common.labels.type")}
|
|
</TableHead>
|
|
<TableHead className="whitespace-nowrap w-px">
|
|
{t("proxies.management.usage")}
|
|
</TableHead>
|
|
<TableHead className="whitespace-nowrap w-px">
|
|
{t("proxies.management.syncCol")}
|
|
</TableHead>
|
|
<TableHead className="whitespace-nowrap w-px">
|
|
{t("common.labels.actions")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{vpnConfigs.map((vpn) => {
|
|
const syncDot = getSyncStatusDot(
|
|
vpn,
|
|
vpnSyncStatus[vpn.id],
|
|
t,
|
|
vpnSyncErrors[vpn.id],
|
|
);
|
|
return (
|
|
<TableRow key={vpn.id}>
|
|
<TableCell className="font-medium">
|
|
<div className="flex items-center gap-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className={`w-2 h-2 rounded-full shrink-0 ${syncDot.color} ${
|
|
syncDot.animate
|
|
? "animate-pulse"
|
|
: ""
|
|
}`}
|
|
/>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{syncDot.tooltip}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
{vpn.name}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline">WG</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="secondary">
|
|
{vpnUsage[vpn.id] ?? 0}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="flex items-center">
|
|
<Checkbox
|
|
checked={vpn.sync_enabled}
|
|
onCheckedChange={() =>
|
|
void handleToggleVpnSync(vpn)
|
|
}
|
|
disabled={
|
|
isTogglingVpnSync[vpn.id] ||
|
|
vpnInUse[vpn.id]
|
|
}
|
|
/>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{vpnInUse[vpn.id] ? (
|
|
<p>
|
|
{t(
|
|
"vpns.management.syncCannotDisable",
|
|
)}
|
|
</p>
|
|
) : (
|
|
<p>
|
|
{vpn.sync_enabled
|
|
? t(
|
|
"proxies.management.disableSync",
|
|
)
|
|
: t(
|
|
"proxies.management.enableSync",
|
|
)}
|
|
</p>
|
|
)}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex gap-1">
|
|
<VpnCheckButton
|
|
vpnId={vpn.id}
|
|
vpnName={vpn.name}
|
|
checkingVpnId={checkingVpnId}
|
|
setCheckingVpnId={setCheckingVpnId}
|
|
/>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
handleEditVpn(vpn);
|
|
}}
|
|
>
|
|
<LuPencil className="w-4 h-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{t("vpns.management.editVpn")}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
handleDeleteVpn(vpn);
|
|
}}
|
|
disabled={
|
|
(vpnUsage[vpn.id] ?? 0) > 0
|
|
}
|
|
>
|
|
<LuTrash2 className="w-4 h-4" />
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{(vpnUsage[vpn.id] ?? 0) > 0 ? (
|
|
<p>
|
|
{(vpnUsage[vpn.id] ?? 0) === 1
|
|
? t(
|
|
"vpns.management.cannotDelete_one",
|
|
{ count: vpnUsage[vpn.id] },
|
|
)
|
|
: t(
|
|
"vpns.management.cannotDelete_other",
|
|
{ count: vpnUsage[vpn.id] },
|
|
)}
|
|
</p>
|
|
) : (
|
|
<p>
|
|
{t("vpns.management.deleteVpn")}
|
|
</p>
|
|
)}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</ScrollArea>
|
|
|
|
<DialogFooter>
|
|
<RippleButton variant="outline" onClick={onClose}>
|
|
{t("common.buttons.close")}
|
|
</RippleButton>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<ProxyFormDialog
|
|
isOpen={showProxyForm}
|
|
onClose={handleProxyFormClose}
|
|
editingProxy={editingProxy}
|
|
/>
|
|
<DeleteConfirmationDialog
|
|
isOpen={proxyToDelete !== null}
|
|
onClose={() => {
|
|
setProxyToDelete(null);
|
|
}}
|
|
onConfirm={handleConfirmDelete}
|
|
title={t("proxies.management.deleteTitle")}
|
|
description={t("proxies.management.deleteDescription", {
|
|
name: proxyToDelete?.name ?? "",
|
|
})}
|
|
confirmButtonText={t("common.buttons.delete")}
|
|
isLoading={isDeleting}
|
|
/>
|
|
<ProxyImportDialog
|
|
isOpen={showImportDialog}
|
|
onClose={() => {
|
|
setShowImportDialog(false);
|
|
}}
|
|
/>
|
|
<ProxyExportDialog
|
|
isOpen={showExportDialog}
|
|
onClose={() => {
|
|
setShowExportDialog(false);
|
|
}}
|
|
/>
|
|
<VpnFormDialog
|
|
isOpen={showVpnForm}
|
|
onClose={handleVpnFormClose}
|
|
editingVpn={editingVpn}
|
|
/>
|
|
<DeleteConfirmationDialog
|
|
isOpen={vpnToDelete !== null}
|
|
onClose={() => {
|
|
setVpnToDelete(null);
|
|
}}
|
|
onConfirm={handleConfirmDeleteVpn}
|
|
title={t("vpns.management.deleteTitle")}
|
|
description={t("vpns.management.deleteDescription", {
|
|
name: vpnToDelete?.name ?? "",
|
|
})}
|
|
confirmButtonText={t("common.buttons.delete")}
|
|
isLoading={isDeletingVpn}
|
|
/>
|
|
<VpnImportDialog
|
|
isOpen={showVpnImportDialog}
|
|
onClose={() => {
|
|
setShowVpnImportDialog(false);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|