Add Camera Wizard tweaks (#20889)

* digest auth backend

* frontend

* i18n

* update field description language to include note about onvif specific credentials

* mask util helper function

* language

* mask passwords in http-flv and others where a url param is password

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(

web/src/components/settings/wizard/Step1NameCamera.tsx

@@ -8,6 +8,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -81,6 +82,7 @@ export default function Step1NameCamera({
       password: z.string().optional(),
       brandTemplate: z.enum(CAMERA_BRAND_VALUES).optional(),
       onvifPort: z.coerce.number().int().min(1).max(65535).optional(),
+      useDigestAuth: z.boolean().optional(),
       customUrl: z
         .string()
         .optional()
@@ -118,6 +120,7 @@ export default function Step1NameCamera({
           : "dahua",
       customUrl: wizardData.customUrl || "",
       onvifPort: wizardData.onvifPort ?? 80,
+      useDigestAuth: wizardData.useDigestAuth ?? false,
     },
     mode: "onChange",
   });
@@ -330,6 +333,32 @@ export default function Step1NameCamera({
             />
           )}
 
+          {probeMode && (
+            <FormField
+              control={form.control}
+              name="useDigestAuth"
+              render={({ field }) => (
+                <FormItem className="flex items-start space-x-2">
+                  <FormControl>
+                    <Checkbox
+                      className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white"
+                      checked={!!field.value}
+                      onCheckedChange={(val) => field.onChange(!!val)}
+                    />
+                  </FormControl>
+                  <div className="flex flex-1 flex-col space-y-1">
+                    <FormLabel className="mb-0 text-primary-variant">
+                      {t("cameraWizard.step1.useDigestAuth")}
+                    </FormLabel>
+                    <FormDescription className="mt-0">
+                      {t("cameraWizard.step1.useDigestAuthDescription")}
+                    </FormDescription>
+                  </div>
+                </FormItem>
+              )}
+            />
+          )}
+
           {!probeMode && (
             <div className="space-y-4">
               <FormField

web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx

@@ -191,6 +191,7 @@ export default function Step2ProbeOrSnapshot({
           username: wizardData.username || "",
           password: wizardData.password || "",
           test: false,
+          auth_type: wizardData.useDigestAuth ? "digest" : "basic",
         },
         timeout: 30000,
       });

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={() => {

web/src/types/cameraWizard.ts

@@ -114,6 +114,7 @@ export type WizardFormData = {
   streams?: StreamConfig[];
   probeMode?: boolean; // true for probe, false for manual
   onvifPort?: number;
+  useDigestAuth?: boolean;
   probeResult?: OnvifProbeResponse;
   probeCandidates?: string[]; // candidate URLs from probe
   candidateTests?: CandidateTestMap; // test results for candidates

web/src/utils/cameraUtil.ts

@@ -71,3 +71,26 @@ export async function detectReolinkCamera(
     return null;
   }
 }
+
+/**
+ * Mask credentials in RTSP URIs for display
+ */
+export function maskUri(uri: string): string {
+  try {
+    // Handle RTSP URLs with user:pass@host format
+    const rtspMatch = uri.match(/rtsp:\/\/([^:]+):([^@]+)@(.+)/);
+    if (rtspMatch) {
+      return `rtsp://${rtspMatch[1]}:${"*".repeat(4)}@${rtspMatch[3]}`;
+    }
+
+    // Handle HTTP/HTTPS URLs with password query parameter
+    const urlObj = new URL(uri);
+    if (urlObj.searchParams.has("password")) {
+      urlObj.searchParams.set("password", "*".repeat(4));
+      return urlObj.toString();
+    }
+  } catch (e) {
+    // ignore
+  }
+  return uri;
+}