mirror of
https://github.com/Nezumi-2711/9router.git
synced 2026-09-22 13:38:31 +00:00
Enhance token refresh logic and improve MITM server handling
- Introduced a caching mechanism for in-flight token refresh requests to prevent race conditions and reduce unnecessary API calls. - Added error handling for unrecoverable refresh errors, ensuring that the application can gracefully handle token reuse and invalidation scenarios. - Updated the MITM server management to handle port 443 conflicts, allowing users to kill processes occupying the port before starting the server. - Improved user feedback in the MitmServerCard component regarding port conflicts and admin privileges. - Refactored the ComboList component to streamline the display of media provider combos. This update aims to enhance the reliability and user experience of the token management and MITM functionalities.
This commit is contained in:
decolua
@@ -75,9 +75,9 @@ export default function QuotaTable({ quotas = [], compact = false }) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const cellPad = compact ? "py-1.5 px-2" : "py-2 px-3";
|
||||
const nameText = compact ? "text-xs" : "text-sm";
|
||||
const resetPrimary = compact ? "text-xs" : "text-sm";
|
||||
const cellPad = compact ? "py-1 px-1.5" : "py-2 px-3";
|
||||
const nameText = compact ? "text-[11px]" : "text-sm";
|
||||
const resetPrimary = compact ? "text-[11px]" : "text-sm";
|
||||
const resetSecondary = compact ? "text-[10px] leading-tight" : "text-xs";
|
||||
|
||||
return (
|
||||
@@ -136,18 +136,27 @@ export default function QuotaTable({ quotas = [], compact = false }) {
|
||||
{/* Reset Time */}
|
||||
<td className={`${cellPad} w-[25%]`}>
|
||||
{countdown !== "-" || resetDisplay ? (
|
||||
<div className="space-y-0.5">
|
||||
{countdown !== "-" && (
|
||||
<div className={`${resetPrimary} text-text-primary font-medium`}>
|
||||
in {countdown}
|
||||
</div>
|
||||
)}
|
||||
{resetDisplay && (
|
||||
<div className={`${resetSecondary} text-text-muted`}>
|
||||
{resetDisplay}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
compact ? (
|
||||
<div
|
||||
className={`${resetPrimary} text-text-primary font-medium truncate`}
|
||||
title={resetDisplay || ""}
|
||||
>
|
||||
{countdown !== "-" ? `in ${countdown}` : resetDisplay}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-0.5">
|
||||
{countdown !== "-" && (
|
||||
<div className={`${resetPrimary} text-text-primary font-medium`}>
|
||||
in {countdown}
|
||||
</div>
|
||||
)}
|
||||
{resetDisplay && (
|
||||
<div className={`${resetSecondary} text-text-muted`}>
|
||||
{resetDisplay}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className={`${resetPrimary} text-text-muted italic`}>N/A</div>
|
||||
)}
|
||||
|
||||
@@ -6,18 +6,23 @@ import QuotaTable from "./QuotaTable";
|
||||
import Toggle from "@/shared/components/Toggle";
|
||||
import { parseQuotaData, calculatePercentage } from "./utils";
|
||||
import Card from "@/shared/components/Card";
|
||||
import Button from "@/shared/components/Button";
|
||||
import { EditConnectionModal } from "@/shared/components";
|
||||
import { USAGE_SUPPORTED_PROVIDERS } from "@/shared/constants/providers";
|
||||
|
||||
const REFRESH_INTERVAL_MS = 60000; // 60 seconds
|
||||
const DEPLETED_QUOTA_THRESHOLD = 5; // percent
|
||||
const AUTO_REFRESH_STORAGE_KEY = "quotaAutoRefresh";
|
||||
|
||||
export default function ProviderLimits() {
|
||||
const [connections, setConnections] = useState([]);
|
||||
const [quotaData, setQuotaData] = useState({});
|
||||
const [loading, setLoading] = useState({});
|
||||
const [errors, setErrors] = useState({});
|
||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||||
const [autoRefresh, setAutoRefresh] = useState(() => {
|
||||
if (typeof window === "undefined") return true;
|
||||
const stored = window.localStorage.getItem(AUTO_REFRESH_STORAGE_KEY);
|
||||
return stored === null ? true : stored === "true";
|
||||
});
|
||||
const [lastUpdated, setLastUpdated] = useState(null);
|
||||
const [refreshingAll, setRefreshingAll] = useState(false);
|
||||
const [countdown, setCountdown] = useState(60);
|
||||
@@ -30,6 +35,7 @@ export default function ProviderLimits() {
|
||||
const [providerFilter, setProviderFilter] = useState("all");
|
||||
const [expiringFirst, setExpiringFirst] = useState(false);
|
||||
const [providerMenuOpen, setProviderMenuOpen] = useState(false);
|
||||
const [bulkToggling, setBulkToggling] = useState(false);
|
||||
|
||||
const intervalRef = useRef(null);
|
||||
const countdownRef = useRef(null);
|
||||
@@ -282,6 +288,12 @@ export default function ProviderLimits() {
|
||||
initializeData();
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Persist auto-refresh preference
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
window.localStorage.setItem(AUTO_REFRESH_STORAGE_KEY, String(autoRefresh));
|
||||
}, [autoRefresh]);
|
||||
|
||||
// Auto-refresh interval
|
||||
useEffect(() => {
|
||||
if (!autoRefresh) {
|
||||
@@ -342,22 +354,6 @@ export default function ProviderLimits() {
|
||||
};
|
||||
}, [autoRefresh, refreshAll]);
|
||||
|
||||
// Format last updated time
|
||||
const formatLastUpdated = useCallback(() => {
|
||||
if (!lastUpdated) return "Never";
|
||||
|
||||
const now = new Date();
|
||||
const diffMs = now - lastUpdated;
|
||||
const diffMinutes = Math.floor(diffMs / (1000 * 60));
|
||||
const diffHours = Math.floor(diffMinutes / 60);
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
|
||||
if (diffDays > 0) return `${diffDays}d ago`;
|
||||
if (diffHours > 0) return `${diffHours}h ago`;
|
||||
if (diffMinutes > 0) return `${diffMinutes}m ago`;
|
||||
return "Just now";
|
||||
}, [lastUpdated]);
|
||||
|
||||
// Filter only supported providers
|
||||
const filteredConnections = connections.filter(
|
||||
(conn) =>
|
||||
@@ -389,6 +385,56 @@ export default function ProviderLimits() {
|
||||
return a.provider.localeCompare(b.provider);
|
||||
});
|
||||
|
||||
// Connection is depleted when any quota entry hit the threshold
|
||||
const isConnectionDepleted = (conn) => {
|
||||
const quotas = quotaData[conn.id]?.quotas;
|
||||
if (!quotas?.length) return false;
|
||||
return quotas.some((q) => {
|
||||
if (!q.total || q.total <= 0) return false;
|
||||
return calculatePercentage(q.used, q.total) <= DEPLETED_QUOTA_THRESHOLD;
|
||||
});
|
||||
};
|
||||
|
||||
const bulkSetActive = useCallback(
|
||||
async (targetIds, isActive) => {
|
||||
if (!targetIds.length || bulkToggling) return;
|
||||
setBulkToggling(true);
|
||||
try {
|
||||
await Promise.all(
|
||||
targetIds.map((id) =>
|
||||
fetch(`/api/providers/${id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ isActive }),
|
||||
}),
|
||||
),
|
||||
);
|
||||
setConnections((prev) =>
|
||||
prev.map((c) => (targetIds.includes(c.id) ? { ...c, isActive } : c)),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Error bulk toggling connections:", error);
|
||||
} finally {
|
||||
setBulkToggling(false);
|
||||
}
|
||||
},
|
||||
[bulkToggling],
|
||||
);
|
||||
|
||||
const handleDisableDepleted = () => {
|
||||
const ids = sortedConnections
|
||||
.filter((c) => (c.isActive ?? true) && isConnectionDepleted(c))
|
||||
.map((c) => c.id);
|
||||
bulkSetActive(ids, false);
|
||||
};
|
||||
|
||||
const handleEnableAvailable = () => {
|
||||
const ids = sortedConnections
|
||||
.filter((c) => !(c.isActive ?? true) && !isConnectionDepleted(c))
|
||||
.map((c) => c.id);
|
||||
bulkSetActive(ids, true);
|
||||
};
|
||||
|
||||
const providerOptions = Array.from(new Set(filteredConnections.map((conn) => conn.provider))).sort();
|
||||
const selectedProviderLabel = providerFilter === "all" ? "All providers" : providerFilter;
|
||||
|
||||
@@ -438,36 +484,33 @@ export default function ProviderLimits() {
|
||||
<h2 className="text-xl font-semibold text-text-primary">
|
||||
Provider Limits
|
||||
</h2>
|
||||
<span className="text-sm text-text-muted">
|
||||
Last updated: {formatLastUpdated()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setProviderMenuOpen((prev) => !prev)}
|
||||
className="flex h-10 min-w-[116px] items-center justify-between gap-2 rounded-xl border border-black/10 bg-black/[0.02] px-3 text-sm text-text-primary transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10 sm:min-w-[180px]"
|
||||
className="flex h-8 items-center justify-between gap-1 rounded-lg border border-black/10 bg-black/[0.02] px-2 text-xs text-text-primary transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={providerMenuOpen}
|
||||
title="Filter quota providers"
|
||||
>
|
||||
<span className="flex min-w-0 items-center gap-2">
|
||||
<span className="flex min-w-0 items-center gap-1.5">
|
||||
{providerFilter === "all" ? (
|
||||
<span className="material-symbols-outlined text-[20px] text-text-muted">apps</span>
|
||||
<span className="material-symbols-outlined text-[14px] text-text-muted">apps</span>
|
||||
) : (
|
||||
<ProviderIcon
|
||||
src={`/providers/${providerFilter}.png`}
|
||||
alt={providerFilter}
|
||||
size={22}
|
||||
className="size-[22px] rounded-md object-contain"
|
||||
size={18}
|
||||
className="size-[18px] rounded object-contain"
|
||||
fallbackText={providerFilter.slice(0, 2).toUpperCase()}
|
||||
/>
|
||||
)}
|
||||
<span className="truncate capitalize hidden sm:inline">{selectedProviderLabel}</span>
|
||||
<span className="truncate capitalize hidden lg:inline">{selectedProviderLabel}</span>
|
||||
</span>
|
||||
<span className="material-symbols-outlined text-[18px] text-text-muted">expand_more</span>
|
||||
<span className="material-symbols-outlined text-[14px] text-text-muted">expand_more</span>
|
||||
</button>
|
||||
|
||||
{providerMenuOpen && (
|
||||
@@ -516,42 +559,66 @@ export default function ProviderLimits() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpiringFirst((prev) => !prev)}
|
||||
className={`flex shrink-0 items-center gap-1.5 rounded-lg border px-3 py-2 text-sm transition-colors ${expiringFirst ? "border-amber-500/40 bg-amber-500/10 text-amber-500" : "border-black/10 text-text-primary hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5"}`}
|
||||
className={`flex h-8 shrink-0 items-center gap-1 rounded-lg border px-2 text-xs transition-colors ${expiringFirst ? "border-amber-500/40 bg-amber-500/10 text-amber-500" : "border-black/10 text-text-primary hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5"}`}
|
||||
title="Sort accounts by earliest quota reset time"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">hourglass_top</span>
|
||||
<span className="material-symbols-outlined text-[14px]">hourglass_top</span>
|
||||
<span className="hidden sm:inline">Expiring first</span>
|
||||
</button>
|
||||
|
||||
{/* Bulk: disable depleted */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDisableDepleted}
|
||||
disabled={bulkToggling}
|
||||
className="flex h-8 shrink-0 items-center gap-1 rounded-lg border border-red-500/30 px-2 text-xs text-red-500 transition-colors hover:bg-red-500/10 disabled:opacity-50"
|
||||
title="Disable connections with depleted quota (within current filter)"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[14px]">block</span>
|
||||
<span className="hidden sm:inline">Turn off Empty</span>
|
||||
</button>
|
||||
|
||||
{/* Bulk: enable available */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleEnableAvailable}
|
||||
disabled={bulkToggling}
|
||||
className="flex h-8 shrink-0 items-center gap-1 rounded-lg border border-emerald-500/30 px-2 text-xs text-emerald-500 transition-colors hover:bg-emerald-500/10 disabled:opacity-50"
|
||||
title="Enable connections that still have quota (within current filter)"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[14px]">check_circle</span>
|
||||
<span className="hidden sm:inline">Turn on Available</span>
|
||||
</button>
|
||||
|
||||
{/* Auto-refresh toggle */}
|
||||
<button
|
||||
onClick={() => setAutoRefresh((prev) => !prev)}
|
||||
className="flex shrink-0 items-center gap-2 rounded-lg border border-black/10 px-3 py-2 transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5"
|
||||
className="flex h-8 shrink-0 items-center gap-1 rounded-lg border border-black/10 px-2 text-xs transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5"
|
||||
title={autoRefresh ? "Disable auto-refresh" : "Enable auto-refresh"}
|
||||
>
|
||||
<span
|
||||
className={`material-symbols-outlined text-[18px] ${
|
||||
className={`material-symbols-outlined text-[14px] ${
|
||||
autoRefresh ? "text-primary" : "text-text-muted"
|
||||
}`}
|
||||
>
|
||||
{autoRefresh ? "toggle_on" : "toggle_off"}
|
||||
</span>
|
||||
<span className="hidden text-sm text-text-primary sm:inline">Auto-refresh</span>
|
||||
<span className="hidden text-text-primary sm:inline">Auto-refresh</span>
|
||||
{autoRefresh && (
|
||||
<span className="text-xs text-text-muted">({countdown}s)</span>
|
||||
<span className="text-[10px] text-text-muted tabular-nums">({countdown}s)</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Refresh all button */}
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="md"
|
||||
icon="refresh"
|
||||
<button
|
||||
type="button"
|
||||
onClick={refreshAll}
|
||||
disabled={refreshingAll}
|
||||
loading={refreshingAll}
|
||||
className="flex h-8 shrink-0 items-center gap-1 rounded-lg border border-black/10 px-2 text-xs text-text-primary transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5 disabled:opacity-50"
|
||||
title="Refresh all"
|
||||
>
|
||||
Refresh All
|
||||
</Button>
|
||||
<span className={`material-symbols-outlined text-[14px] ${refreshingAll ? "animate-spin" : ""}`}>refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -572,7 +639,7 @@ export default function ProviderLimits() {
|
||||
padding="none"
|
||||
className={`min-w-0 ${isInactive ? "opacity-60" : ""}`}
|
||||
>
|
||||
<div className="px-4 py-3 border-b border-black/10 dark:border-white/10">
|
||||
<div className="px-3 py-2 border-b border-black/10 dark:border-white/10">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div className="w-8 h-8 shrink-0 rounded-md flex items-center justify-center overflow-hidden">
|
||||
@@ -662,7 +729,7 @@ export default function ProviderLimits() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-3 py-3">
|
||||
<div className="px-2 py-1.5">
|
||||
{isLoading ? (
|
||||
<div className="text-center py-5 text-text-muted">
|
||||
<span className="material-symbols-outlined text-[28px] animate-spin">
|
||||
|
||||
Reference in New Issue
Block a user