From 886a89d1b7e505fb33335be73f18b07f1e31abc4 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 11 Nov 2025 07:01:43 -0600
Subject: [PATCH] mask util helper function

---
 .../settings/wizard/OnvifProbeResults.tsx           |  7 +------
 .../components/settings/wizard/Step4Validation.tsx  |  3 ++-
 web/src/utils/cameraUtil.ts                         | 13 +++++++++++++
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/web/src/components/settings/wizard/OnvifProbeResults.tsx b/web/src/components/settings/wizard/OnvifProbeResults.tsx
index 5f3f9af8e..9e997dfec 100644
--- a/web/src/components/settings/wizard/OnvifProbeResults.tsx
+++ b/web/src/components/settings/wizard/OnvifProbeResults.tsx
@@ -16,6 +16,7 @@ import type {
 } from "@/types/cameraWizard";
 import { FaCircleCheck } from "react-icons/fa6";
 import { cn } from "@/lib/utils";
+import { maskUri } from "@/utils/cameraUtil";
 
 type OnvifProbeResultsProps = {
   isLoading: boolean;
@@ -258,12 +259,6 @@ function CandidateItem({
   const { t } = useTranslation(["views/settings"]);
   const [showFull, setShowFull] = useState(false);
 
-  const maskUri = (uri: string) => {
-    const match = uri.match(/rtsp:\/\/([^:]+):([^@]+)@(.+)/);
-    if (match) return `rtsp://${match[1]}:••••@${match[3]}`;
-    return uri;
-  };
-
   return (
     <Card
       className={cn(
diff --git a/web/src/components/settings/wizard/Step4Validation.tsx b/web/src/components/settings/wizard/Step4Validation.tsx
index f99a05305..628b40a5b 100644
--- a/web/src/components/settings/wizard/Step4Validation.tsx
+++ b/web/src/components/settings/wizard/Step4Validation.tsx
@@ -18,6 +18,7 @@ import { PlayerStatsType } from "@/types/live";
 import { FaCircleCheck, FaTriangleExclamation } from "react-icons/fa6";
 import { LuX } from "react-icons/lu";
 import { Card, CardContent } from "../../ui/card";
+import { maskUri } from "@/utils/cameraUtil";
 
 type Step4ValidationProps = {
   wizardData: Partial<WizardFormData>;
@@ -374,7 +375,7 @@ export default function Step4Validation({
 
                   <div className="mb-2 flex flex-col justify-between gap-1 md:flex-row md:items-center">
                     <span className="break-all text-sm text-muted-foreground">
-                      {stream.url}
+                      {maskUri(stream.url)}
                     </span>
                     <Button
                       onClick={() => {
diff --git a/web/src/utils/cameraUtil.ts b/web/src/utils/cameraUtil.ts
index caebd7ff0..24bda62a1 100644
--- a/web/src/utils/cameraUtil.ts
+++ b/web/src/utils/cameraUtil.ts
@@ -71,3 +71,16 @@ export async function detectReolinkCamera(
     return null;
   }
 }
+
+/**
+ * Mask credentials in RTSP URIs for display (e.g., rtsp://user:pass@host -> rtsp://user:••••@host)
+ */
+export function maskUri(uri: string): string {
+  try {
+    const match = uri.match(/rtsp:\/\/([^:]+):([^@]+)@(.+)/);
+    if (match) return `rtsp://${match[1]}:${"*".repeat(4)}@${match[3]}`;
+  } catch (e) {
+    // ignore
+  }
+  return uri;
+}