Add RTSP URL parsing utility and enhance camera settings handling

- Implement parseRTSPUrl function to extract username, password, IP, port, and path from RTSP URLs.
- Update CameraSettingFields to utilize parsed RTSP URL data for camera configuration.
- Modify WiFiSettingsForm to allow password visibility toggle.
- Improve SightingOverview loading and error handling UI.
- Adjust NavigationArrow component to reflect updated camera side logic.

src/components/CameraSettings/CameraSettingFields.tsx

@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
 import { useCameraZoom } from "../../hooks/useCameraZoom";
+import { parseRTSPUrl } from "../../utils/utils";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
@@ -30,6 +31,8 @@ const CameraSettingFields = ({
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
   const zoomOptions = [1, 2, 4, 8];
 
+  const parsed = parseRTSPUrl(initialData?.propURI?.value);
+
   useEffect(() => {
     if (!query.data) return;
     const apiZoom = getZoomLevel(query.data);
@@ -61,8 +64,8 @@ const CameraSettingFields = ({
     () => ({
       friendlyName: initialData?.id ?? "",
       cameraAddress: initialData?.propURI?.value ?? "",
-      userName: "",
-      password: "",
+      userName: parsed?.username ?? "",
+      password: parsed?.password ?? "",
       id: initialData?.id,
 
       zoom: zoomLevel,
@@ -179,7 +182,7 @@ const CameraSettingFields = ({
             </div>
             <div className="my-3">
               <CardHeader title="Zoom settings" />
-              <div className="mx-auto flex gap-10 items-center">
+              <div className="mx-auto grid grid-cols-4 items-center">
                 {zoomOptions.map((zoom) => (
                   <div key={zoom}>
                     <Field