From 6cc4db1103f03634ddf13fba4e82b4a458673fea Mon Sep 17 00:00:00 2001
From: ZhaiSoul <842607283@qq.com>
Date: Wed, 29 Apr 2026 14:13:32 +0800
Subject: [PATCH] docs: remove 5000 port tips

---
 .../DockerComposeGenerator.tsx                |   6 +-
 .../components/PortConfig.tsx                 | 122 +++++-------------
 .../DockerComposeGenerator/config/config.yaml |   3 +-
 .../DockerComposeGenerator/config/types.ts    |   8 +-
 .../hooks/useConfigGenerator.ts               |  16 +--
 .../hooks/useCooldown.ts                      |  42 ------
 6 files changed, 44 insertions(+), 153 deletions(-)
 delete mode 100644 docs/src/components/DockerComposeGenerator/hooks/useCooldown.ts

diff --git a/docs/src/components/DockerComposeGenerator/DockerComposeGenerator.tsx b/docs/src/components/DockerComposeGenerator/DockerComposeGenerator.tsx
index 0779f4249..b8a8a8fc8 100644
--- a/docs/src/components/DockerComposeGenerator/DockerComposeGenerator.tsx
+++ b/docs/src/components/DockerComposeGenerator/DockerComposeGenerator.tsx
@@ -32,12 +32,12 @@ function renderHelpText(text: string): React.ReactNode {
 export default function DockerComposeGenerator() {
   const {
     deviceId, device, hardwareEnabled,
-    portEnabled, port5000Confirmed,
+    portEnabled,
     nvidiaGpuCount, nvidiaGpuDeviceId,
     configPath, mediaPath, rtspPassword, timezone, shmSize,
     shmSizeError, gpuDeviceIdError, configPathError, mediaPathError,
     hasAnyHardware, generatedYaml,
-    selectDevice, toggleHardware, togglePort, setPort5000Confirmed,
+    selectDevice, toggleHardware, togglePort,
     handleShmSizeChange, handleConfigPathChange, handleMediaPathChange,
     handleNvidiaGpuCountChange, handleNvidiaGpuDeviceIdChange,
     setRtspPassword, setTimezone, isHardwareDisabled,
@@ -82,9 +82,7 @@ export default function DockerComposeGenerator() {
 
         <PortConfigSection
           portEnabled={portEnabled}
-          port5000Confirmed={port5000Confirmed}
           onTogglePort={togglePort}
-          onConfirm5000={setPort5000Confirmed}
         />
 
         <OtherOptions
diff --git a/docs/src/components/DockerComposeGenerator/components/PortConfig.tsx b/docs/src/components/DockerComposeGenerator/components/PortConfig.tsx
index 983a6b45e..c4e5acf71 100644
--- a/docs/src/components/DockerComposeGenerator/components/PortConfig.tsx
+++ b/docs/src/components/DockerComposeGenerator/components/PortConfig.tsx
@@ -1,125 +1,71 @@
 import React from "react";
 import Admonition from "@theme/Admonition";
 import { ports } from "../config";
-import { useCooldown } from "../hooks/useCooldown";
 import styles from "../styles.module.css";
 
 interface Props {
   portEnabled: Record<string, boolean>;
-  port5000Confirmed: boolean;
   onTogglePort: (portId: string) => void;
-  onConfirm5000: (confirmed: boolean) => void;
 }
 
-function Port5000Confirmation({
-  portEnabled,
-  confirmed,
+function PortItem({
+  port,
+  enabled,
   onToggle,
-  onConfirm,
 }: {
-  portEnabled: boolean;
-  confirmed: boolean;
+  port: typeof ports[number];
+  enabled: boolean;
   onToggle: () => void;
-  onConfirm: (confirmed: boolean) => void;
 }) {
-  const { remaining, start, stop } = useCooldown(10);
-
-  React.useEffect(() => {
-    if (portEnabled) {
-      start();
-    } else {
-      stop();
-      onConfirm(false);
-    }
-    return stop;
-  }, [portEnabled]);
+  const showWarning = port.warningContent && (
+    port.warningWhen === "checked" ? enabled :
+    port.warningWhen === "unchecked" ? !enabled : enabled
+  );
 
   return (
-    <div className={styles.portSection}>
-      {portEnabled && (
-        <Admonition type="danger">
-          <p>
-            Exposing port 5000 allows <strong>unauthenticated access</strong> to
-            your Frigate instance. Anyone on your network (or the internet if you
-            have a public IP) could access it without credentials.
-          </p>
-          <p>
-            This may lead to <strong>unauthorized access</strong>,{" "}
-            <strong>privacy leaks</strong>, or further attacks. Ensure you have
-            proper firewall rules or VPN in place.
-          </p>
-          <label
-            className={`${styles.checkboxLabel} ${remaining > 0 ? styles.checkboxDisabled : ""}`}
-          >
-            <input
-              type="checkbox"
-              checked={confirmed}
-              onChange={(e) => onConfirm(e.target.checked)}
-              disabled={remaining > 0}
-            />
-            <span>
-              I understand the risk and confirm enabling port 5000
-              {remaining > 0 && ` (${remaining}s)`}
-            </span>
-          </label>
-        </Admonition>
-      )}
-      <label className={styles.checkboxLabel}>
+    <div className={styles.hardwareItem}>
+      <label className={`${styles.checkboxLabel} ${port.locked ? styles.checkboxDisabled : ""}`}>
         <input
           type="checkbox"
-          checked={portEnabled}
+          checked={enabled}
           onChange={onToggle}
+          disabled={port.locked}
         />
-        <span>Port 5000 (unauthenticated access)</span>
-        <span className={styles.warningBadge}>⚠️ Expose carefully</span>
+        <span>
+          {port.locked && "🔒 "}
+          Port {port.host}
+          {port.protocol !== "tcp" && `/${port.protocol}`}
+        </span>
       </label>
+      {port.description && (
+        <div className={styles.hardwareDescription}>{port.description}</div>
+      )}
+      {showWarning && (
+        <Admonition type={port.warningType || "warning"}>
+          {port.warningContent}
+        </Admonition>
+      )}
     </div>
   );
 }
 
 export default function PortConfigSection({
   portEnabled,
-  port5000Confirmed,
   onTogglePort,
-  onConfirm5000,
 }: Props) {
   return (
     <div className={styles.formSection}>
       <h4>Port Configuration</h4>
-
-      {/* All ports except 5000 */}
       <div className={styles.checkboxGrid}>
-        {ports
-          .filter((p) => p.id !== "5000")
-          .map((port) => (
-            <div key={port.id} className={styles.hardwareItem}>
-              <label className={`${styles.checkboxLabel} ${port.locked ? styles.checkboxDisabled : ""}`}>
-                <input
-                  type="checkbox"
-                  checked={!!portEnabled[port.id]}
-                  onChange={() => onTogglePort(port.id)}
-                  disabled={port.locked}
-                />
-                <span>
-                  {port.locked && "🔒 "}
-                  Port {port.host}
-                  {port.protocol !== "tcp" && `/${port.protocol}`}
-                </span>
-              </label>
-              {port.description && (
-                <div className={styles.hardwareDescription}>{port.description}</div>
-              )}
-            </div>
-          ))}
+        {ports.map((port) => (
+          <PortItem
+            key={port.id}
+            port={port}
+            enabled={!!portEnabled[port.id]}
+            onToggle={() => onTogglePort(port.id)}
+          />
+        ))}
       </div>
-
-      {/* Port 5000 with special warning — placed last */}
-      <Port5000Confirmation
-        portEnabled={!!portEnabled["5000"]}
-        confirmed={port5000Confirmed}
-        onToggle={() => onTogglePort("5000")}
-        onConfirm={onConfirm5000}
-      />
     </div>
   );
 }
diff --git a/docs/src/components/DockerComposeGenerator/config/config.yaml b/docs/src/components/DockerComposeGenerator/config/config.yaml
index 09b538281..22734a1bf 100644
--- a/docs/src/components/DockerComposeGenerator/config/config.yaml
+++ b/docs/src/components/DockerComposeGenerator/config/config.yaml
@@ -265,7 +265,8 @@ ports:
     protocol: "tcp"
     description: "Authenticated UI and API access (default HTTPS)"
     defaultEnabled: true
-    locked: true
+    warningContent: "This is the access port for Frigate. Closing it means you will no longer be able to access the instance."
+    warningWhen: "unchecked"
 
   - id: "8554"
     host: 8554
diff --git a/docs/src/components/DockerComposeGenerator/config/types.ts b/docs/src/components/DockerComposeGenerator/config/types.ts
index 6d9b048f0..87bcb608d 100644
--- a/docs/src/components/DockerComposeGenerator/config/types.ts
+++ b/docs/src/components/DockerComposeGenerator/config/types.ts
@@ -145,14 +145,10 @@ export interface PortConfig {
   defaultEnabled: boolean;
   /** Whether this port is locked (always enabled, cannot be toggled off) */
   locked?: boolean;
-  /** Whether this port requires a confirmation step before enabling */
-  requiresConfirmation?: boolean;
   /** Admonition type for the warning */
   warningType?: "warning" | "danger";
   /** Warning content (markdown) */
   warningContent?: string;
-  /** Confirmation checkbox label */
-  confirmationLabel?: string;
-  /** Cooldown in seconds before the confirmation checkbox becomes available */
-  cooldownSeconds?: number;
+  /** When to show the warning: when the port is checked or unchecked */
+  warningWhen?: "checked" | "unchecked";
 }
diff --git a/docs/src/components/DockerComposeGenerator/hooks/useConfigGenerator.ts b/docs/src/components/DockerComposeGenerator/hooks/useConfigGenerator.ts
index 994ac631a..72821be26 100644
--- a/docs/src/components/DockerComposeGenerator/hooks/useConfigGenerator.ts
+++ b/docs/src/components/DockerComposeGenerator/hooks/useConfigGenerator.ts
@@ -29,7 +29,6 @@ export function useConfigGenerator() {
     return initial;
   });
 
-  const [port5000Confirmed, setPort5000Confirmed] = useState(false);
   const [nvidiaGpuCount, setNvidiaGpuCount] = useState("all");
   const [nvidiaGpuDeviceId, setNvidiaGpuDeviceId] = useState("");
   const [configPath, setConfigPath] = useState("");
@@ -69,13 +68,7 @@ export function useConfigGenerator() {
   const togglePort = useCallback((portId: string) => {
     const port = portMap.get(portId);
     if (port?.locked) return;
-    setPortEnabled((prev) => {
-      const next = { ...prev, [portId]: !prev[portId] };
-      if (portId === "5000" && !next[portId]) {
-        setPort5000Confirmed(false);
-      }
-      return next;
-    });
+    setPortEnabled((prev) => ({ ...prev, [portId]: !prev[portId] }));
   }, []);
 
   const isHardwareDisabled = useCallback(
@@ -149,7 +142,6 @@ export function useConfigGenerator() {
     const lines: string[] = [];
     for (const [id, enabled] of Object.entries(portEnabled)) {
       if (!enabled) continue;
-      if (id === "5000" && !port5000Confirmed) continue;
       const p = portMap.get(id);
       if (!p) continue;
       const proto = p.protocol && p.protocol !== "tcp" ? `/${p.protocol}` : "";
@@ -157,7 +149,7 @@ export function useConfigGenerator() {
       lines.push(`      - "${p.host}:${p.container}${proto}"${comment}`);
     }
     return lines;
-  }, [portEnabled, port5000Confirmed]);
+  }, [portEnabled]);
 
   const selectedHardwareIds = useMemo(() => {
     return Object.entries(hardwareEnabled)
@@ -195,11 +187,11 @@ export function useConfigGenerator() {
 
   return {
     deviceId, device, hardwareEnabled, portEnabled,
-    port5000Confirmed, nvidiaGpuCount, nvidiaGpuDeviceId,
+    nvidiaGpuCount, nvidiaGpuDeviceId,
     configPath, mediaPath, rtspPassword, timezone, shmSize,
     shmSizeError, gpuDeviceIdError, configPathError, mediaPathError,
     hasAnyHardware, generatedYaml,
-    selectDevice, toggleHardware, togglePort, setPort5000Confirmed,
+    selectDevice, toggleHardware, togglePort,
     handleShmSizeChange, handleConfigPathChange, handleMediaPathChange,
     handleNvidiaGpuCountChange, handleNvidiaGpuDeviceIdChange,
     setRtspPassword, setTimezone, isHardwareDisabled,
diff --git a/docs/src/components/DockerComposeGenerator/hooks/useCooldown.ts b/docs/src/components/DockerComposeGenerator/hooks/useCooldown.ts
deleted file mode 100644
index 253edca87..000000000
--- a/docs/src/components/DockerComposeGenerator/hooks/useCooldown.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-
-/**
- * Hook for a countdown timer (e.g. cooldown before confirming port 5000).
- */
-export function useCooldown(initialSeconds: number) {
-  const [remaining, setRemaining] = useState(0);
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const start = useCallback(() => {
-    // Clear any existing timer
-    if (timerRef.current) clearInterval(timerRef.current);
-    setRemaining(initialSeconds);
-    timerRef.current = setInterval(() => {
-      setRemaining((prev) => {
-        if (prev <= 1) {
-          if (timerRef.current) clearInterval(timerRef.current);
-          timerRef.current = null;
-          return 0;
-        }
-        return prev - 1;
-      });
-    }, 1000);
-  }, [initialSeconds]);
-
-  const stop = useCallback(() => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-    setRemaining(0);
-  }, []);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) clearInterval(timerRef.current);
-    };
-  }, []);
-
-  return { remaining, start, stop };
-}