fix: handle optional chaining for address and validation in StaticIpv4Card and StaticIpv6Card components

network.go

@@ -27,6 +27,11 @@ func (s *RpcNetworkSettings) ToNetworkConfig() *types.NetworkConfig {
 	return &s.NetworkConfig
 }
 
+type PostRebootAction struct {
+	HealthCheck string `json:"healthCheck"`
+	RedirectUrl string `json:"redirectUrl"`
+}
+
 func toRpcNetworkSettings(config *types.NetworkConfig) *RpcNetworkSettings {
 	return &RpcNetworkSettings{
 		NetworkConfig: *config,
@@ -171,9 +176,9 @@ func setHostname(nm *nmlite.NetworkManager, hostname, domain string) error {
 	return nm.SetHostname(hostname, domain)
 }
 
-func shouldRebootForNetworkChange(oldConfig, newConfig *types.NetworkConfig) (bool, *string) {
+func shouldRebootForNetworkChange(oldConfig, newConfig *types.NetworkConfig) (bool, *PostRebootAction) {
 	var rebootRequired bool
-	var suggestedIp *string
+	var postRebootAction *PostRebootAction
 
 	oldDhcpClient := oldConfig.DHCPClient.String
 
@@ -183,31 +188,29 @@ func shouldRebootForNetworkChange(oldConfig, newConfig *types.NetworkConfig) (bo
 		networkLogger.Info().Str("old", oldDhcpClient).Str("new", newConfig.DHCPClient.String).Msg("DHCP client changed, reboot required")
 	}
 
-	// IPv4 mode change requires reboot when using udhcpc
-	if newConfig.IPv4Mode.String != oldConfig.IPv4Mode.String && oldDhcpClient == "udhcpc" {
+	// IPv4 mode change requires reboot
+	if newConfig.IPv4Mode.String != oldConfig.IPv4Mode.String {
 		rebootRequired = true
 		networkLogger.Info().Str("old", oldConfig.IPv4Mode.String).Str("new", newConfig.IPv4Mode.String).Msg("IPv4 mode changed with udhcpc, reboot required")
 	}
 
 	// IPv4 static config changes require reboot
-	if newConfig.IPv4Static != nil && oldConfig.IPv4Static != nil {
-		if newConfig.IPv4Static.Address.String != oldConfig.IPv4Static.Address.String {
-			rebootRequired = true
-			suggestedIp = &newConfig.IPv4Static.Address.String
-			networkLogger.Info().Str("old", oldConfig.IPv4Static.Address.String).Str("new", newConfig.IPv4Static.Address.String).Msg("IPv4 address changed, reboot required")
-		}
-		if newConfig.IPv4Static.Netmask.String != oldConfig.IPv4Static.Netmask.String {
-			rebootRequired = true
-			networkLogger.Info().Str("old", oldConfig.IPv4Static.Netmask.String).Str("new", newConfig.IPv4Static.Netmask.String).Msg("IPv4 netmask changed, reboot required")
-		}
-		if newConfig.IPv4Static.Gateway.String != oldConfig.IPv4Static.Gateway.String {
-			rebootRequired = true
-			networkLogger.Info().Str("old", oldConfig.IPv4Static.Gateway.String).Str("new", newConfig.IPv4Static.Gateway.String).Msg("IPv4 gateway changed, reboot required")
-		}
-		if !reflect.DeepEqual(newConfig.IPv4Static.DNS, oldConfig.IPv4Static.DNS) {
-			rebootRequired = true
-			networkLogger.Info().Strs("old", oldConfig.IPv4Static.DNS).Strs("new", newConfig.IPv4Static.DNS).Msg("IPv4 DNS changed, reboot required")
+	if !reflect.DeepEqual(oldConfig.IPv4Static, newConfig.IPv4Static) {
+		rebootRequired = true
+
+		// Handle IP change for redirect (only if both are not nil and IP changed)
+		if newConfig.IPv4Static != nil && oldConfig.IPv4Static != nil &&
+			newConfig.IPv4Static.Address.String != oldConfig.IPv4Static.Address.String {
+			postRebootAction = &PostRebootAction{
+				HealthCheck: fmt.Sprintf("//%s/device/status", newConfig.IPv4Static.Address.String),
+				RedirectUrl: fmt.Sprintf("//%s", newConfig.IPv4Static.Address.String),
+			}
 		}
+
+		networkLogger.Info().
+			Interface("old", oldConfig.IPv4Static).
+			Interface("new", newConfig.IPv4Static).
+			Msg("IPv4 static config changed, reboot required")
 	}
 
 	// IPv6 mode change requires reboot when using udhcpc
@@ -216,7 +219,7 @@ func shouldRebootForNetworkChange(oldConfig, newConfig *types.NetworkConfig) (bo
 		networkLogger.Info().Str("old", oldConfig.IPv6Mode.String).Str("new", newConfig.IPv6Mode.String).Msg("IPv6 mode changed with udhcpc, reboot required")
 	}
 
-	return rebootRequired, suggestedIp
+	return rebootRequired, postRebootAction
 }
 
 func rpcGetNetworkState() *types.RpcInterfaceState {
@@ -239,12 +242,12 @@ func rpcSetNetworkSettings(settings RpcNetworkSettings) (*RpcNetworkSettings, er
 	l.Debug().Msg("setting new config")
 
 	// Check if reboot is needed
-	rebootRequired, suggestedIp := shouldRebootForNetworkChange(config.NetworkConfig, netConfig)
+	rebootRequired, postRebootAction := shouldRebootForNetworkChange(config.NetworkConfig, netConfig)
 
 	// If reboot required, send willReboot event before applying network config
 	if rebootRequired {
 		l.Info().Msg("Sending willReboot event before applying network config")
-		writeJSONRPCEvent("willReboot", suggestedIp, currentSession)
+		writeJSONRPCEvent("willReboot", postRebootAction, currentSession)
 	}
 
 	_ = setHostname(networkManager, netConfig.Hostname.String, netConfig.Domain.String)

ota.go

@@ -488,6 +488,15 @@ func TryUpdate(ctx context.Context, deviceId string, includePreRelease bool) err
 
 	if rebootNeeded {
 		scopedLogger.Info().Msg("System Rebooting in 10s")
+
+		// TODO: Future enhancement - send postRebootAction to redirect to release notes
+		// Example:
+		//   postRebootAction := &PostRebootAction{
+		//     HealthCheck: "[..]/device/status",
+		//     RedirectUrl: "[..]/settings/general/update?version=X.Y.Z",
+		//   }
+		//   writeJSONRPCEvent("willReboot", postRebootAction, currentSession)
+
 		time.Sleep(10 * time.Second)
 		cmd := exec.Command("reboot")
 		err := cmd.Start()

ui/package-lock.json

@@ -28,7 +28,7 @@
         "react": "^19.1.1",
         "react-animate-height": "^3.2.3",
         "react-dom": "^19.1.1",
-        "react-hook-form": "^7.62.0",
+        "react-hook-form": "^7.65.0",
         "react-hot-toast": "^2.6.0",
         "react-icons": "^5.5.0",
         "react-router": "^7.9.3",
@@ -5858,9 +5858,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.62.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
-      "integrity": "sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==",
+      "version": "7.65.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.65.0.tgz",
+      "integrity": "sha512-xtOzDz063WcXvGWaHgLNrNzlsdFgtUWcb32E6WFaGTd7kPZG3EeDusjdZfUsPwKCKVXy1ZlntifaHZ4l8pAsmw==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"

ui/package.json

@@ -40,7 +40,7 @@
     "react-animate-height": "^3.2.3",
     "react-dom": "^19.1.1",
     "react-hot-toast": "^2.6.0",
-    "react-hook-form": "^7.62.0",
+    "react-hook-form": "^7.65.0",
     "react-icons": "^5.5.0",
     "react-router": "^7.9.3",
     "react-simple-keyboard": "^3.8.125",

ui/src/components/StaticIpv4Card.tsx

@@ -26,9 +26,9 @@ export default function StaticIpv4Card() {
   const hideSubnetMask = ipv4StaticAddress?.includes("/");
   useEffect(() => {
     const parts = ipv4StaticAddress?.split("/", 2);
-    if (parts.length !== 2) return;
+    if (parts?.length !== 2) return;
 
-    const cidrNotation = parseInt(parts[1]);
+    const cidrNotation = parseInt(parts?.[1] ?? "");
     if (isNaN(cidrNotation) || cidrNotation < 0 || cidrNotation > 32) return;
 
     const mask = netMaskFromCidr4(cidrNotation);
@@ -60,7 +60,9 @@ export default function StaticIpv4Card() {
               size="SM"
               placeholder="192.168.1.100"
               {
-              ...register("ipv4_static.address", { validate: validateIsIPOrCIDR4 })}
+              ...register("ipv4_static.address", {
+                validate: (value: string | undefined) => validateIsIPOrCIDR4(value ?? "")
+              })}
               error={formState.errors.ipv4_static?.address?.message}
             />
 
@@ -69,7 +71,7 @@ export default function StaticIpv4Card() {
               type="text"
               size="SM"
               placeholder="255.255.255.0"
-              {...register("ipv4_static.netmask", { validate })}
+              {...register("ipv4_static.netmask", { validate: (value: string | undefined) => validate(value ?? "") })}
               error={formState.errors.ipv4_static?.netmask?.message}
             />}
           </div>
@@ -79,7 +81,7 @@ export default function StaticIpv4Card() {
             type="text"
             size="SM"
             placeholder="192.168.1.1"
-            {...register("ipv4_static.gateway", { validate })}
+            {...register("ipv4_static.gateway", { validate: (value: string | undefined) => validate(value ?? "") })}
             error={formState.errors.ipv4_static?.gateway?.message}
           />
 
@@ -95,7 +97,10 @@ export default function StaticIpv4Card() {
                         type="text"
                         size="SM"
                         placeholder="1.1.1.1"
-                        {...register(`ipv4_static.dns.${index}`, { validate })}
+                        {...register(
+                          `ipv4_static.dns.${index}`,
+                          { validate: (value: string | undefined) => validate(value ?? "") }
+                        )}
                         error={formState.errors.ipv4_static?.dns?.[index]?.message}
                       />
                     </div>
@@ -123,7 +128,7 @@ export default function StaticIpv4Card() {
             LeadingIcon={LuPlus}
             type="button"
             text="Add DNS Server"
-            disabled={dns[0] === ""}
+            disabled={dns?.[0] === ""}
           />
         </div>
       </div>

ui/src/components/StaticIpv6Card.tsx

@@ -55,7 +55,7 @@ export default function StaticIpv6Card() {
             type="text"
             size="SM"
             placeholder="2001:db8::1/64"
-            {...register("ipv6_static.prefix", { validate: cidrValidation })}
+            {...register("ipv6_static.prefix", { validate: (value: string | undefined) => cidrValidation(value ?? "") })}
             error={formState.errors.ipv6_static?.prefix?.message}
           />
 
@@ -64,7 +64,7 @@ export default function StaticIpv6Card() {
             type="text"
             size="SM"
             placeholder="2001:db8::1"
-            {...register("ipv6_static.gateway", { validate: ipv6Validation })}
+            {...register("ipv6_static.gateway", { validate: (value: string | undefined) => ipv6Validation(value ?? "") })}
             error={formState.errors.ipv6_static?.gateway?.message}
           />
 
@@ -80,9 +80,7 @@ export default function StaticIpv6Card() {
                         type="text"
                         size="SM"
                         placeholder="2001:4860:4860::8888"
-                        {...register(`ipv6_static.dns.${index}`, {
-                          validate: ipv6Validation,
-                        })}
+                        {...register(`ipv6_static.dns.${index}`, { validate: (value: string | undefined) => ipv6Validation(value ?? "") })}
                         error={formState.errors.ipv6_static?.dns?.[index]?.message}
                       />
                     </div>
@@ -110,7 +108,7 @@ export default function StaticIpv6Card() {
             LeadingIcon={LuPlus}
             type="button"
             text="Add DNS Server"
-            disabled={dns[0] === ""}
+            disabled={dns?.[0] === ""}
           />
         </div>
       </div>

ui/src/components/VideoOverlay.tsx

@@ -8,7 +8,7 @@ import { BsMouseFill } from "react-icons/bs";
 import { Button, LinkButton } from "@components/Button";
 import LoadingSpinner from "@components/LoadingSpinner";
 import Card, { GridCard } from "@components/Card";
-import { useRTCStore } from "@/hooks/stores";
+import { useRTCStore, PostRebootAction } from "@/hooks/stores";
 import LogoBlue from "@/assets/logo-blue.svg";
 import LogoWhite from "@/assets/logo-white.svg";
 import { isOnDevice } from "@/main";
@@ -400,10 +400,10 @@ export function PointerLockBar({ show }: PointerLockBarProps) {
 
 interface RebootingOverlayProps {
   readonly show: boolean;
-  readonly suggestedIp: string | null;
+  readonly postRebootAction: PostRebootAction;
 }
 
-export function RebootingOverlay({ show, suggestedIp }: RebootingOverlayProps) {
+export function RebootingOverlay({ show, postRebootAction }: RebootingOverlayProps) {
   const { peerConnectionState } = useRTCStore();
 
   // Check if we've already seen the connection drop (confirms reboot actually started)
@@ -447,12 +447,12 @@ export function RebootingOverlay({ show, suggestedIp }: RebootingOverlayProps) {
   const isFetchingRef = useRef(false);
 
   useEffect(() => {
-    // Only run in device mode with a suggested IP
-    if (!isOnDevice || !suggestedIp || !show || !hasSeenDisconnect) {
+    // Only run in device mode with a postRebootAction
+    if (!isOnDevice || !postRebootAction || !show || !hasSeenDisconnect) {
       return;
     }
 
-    const checkSuggestedIp = async () => {
+    const checkPostRebootHealth = async () => {
       // Don't start a new fetch if one is already in progress
       if (isFetchingRef.current) {
         return;
@@ -468,26 +468,24 @@ export function RebootingOverlay({ show, suggestedIp }: RebootingOverlayProps) {
       abortControllerRef.current = abortController;
       isFetchingRef.current = true;
 
-      console.log('Checking suggested IP:', suggestedIp);
+      console.log('Checking post-reboot health endpoint:', postRebootAction.healthCheck);
       const timeoutId = window.setTimeout(() => abortController.abort(), 2000);
       try {
         const response = await fetch(
-          `${window.location.protocol}//${suggestedIp}/device/status`,
-          {
-            signal: abortController.signal,
-          }
+          postRebootAction.healthCheck,
+          { signal: abortController.signal, }
         );
 
         if (response.ok) {
-          // Device is available at the new IP, redirect to it
-          console.log('Device is available at the new IP, redirecting to it');
-          window.location.href = `${window.location.protocol}//${suggestedIp}`;
+          // Device is available, redirect to the specified URL
+          console.log('Device is available, redirecting to:', postRebootAction.redirectUrl);
+          window.location.href = postRebootAction.redirectUrl;
         }
       } catch (err) {
         // Ignore errors - they're expected while device is rebooting
         // Only log if it's not an abort error
         if (err instanceof Error && err.name !== 'AbortError') {
-          console.debug('Error checking suggested IP:', err);
+          console.debug('Error checking post-reboot health:', err);
         }
       } finally {
         clearTimeout(timeoutId);
@@ -496,10 +494,10 @@ export function RebootingOverlay({ show, suggestedIp }: RebootingOverlayProps) {
     };
 
     // Start interval (check every 2 seconds)
-    const intervalId = setInterval(checkSuggestedIp, 2000);
+    const intervalId = setInterval(checkPostRebootHealth, 2000);
 
     // Also check immediately
-    checkSuggestedIp();
+    checkPostRebootHealth();
 
     // Cleanup on unmount or when dependencies change
     return () => {
@@ -509,7 +507,7 @@ export function RebootingOverlay({ show, suggestedIp }: RebootingOverlayProps) {
       }
       isFetchingRef.current = false;
     };
-  }, [show, suggestedIp, hasTimedOut, hasSeenDisconnect]);
+  }, [show, postRebootAction, hasTimedOut, hasSeenDisconnect]);
 
   return (
     <AnimatePresence>
@@ -543,18 +541,7 @@ export function RebootingOverlay({ show, suggestedIp }: RebootingOverlayProps) {
                       ) : (
                         <>
                           Please wait while the device restarts. This usually takes 20-30 seconds.
-                            {suggestedIp && (
-                              <>
-                                {" "}If reconnection fails, the device may be at{" "}
-                                <a
-                                  href={`${window.location.protocol}//${suggestedIp}`}
-                                  className="font-medium text-blue-600 hover:underline dark:text-blue-400"
-                                >
-                                  {suggestedIp}
-                                </a>
-                                .
-                              </>
-                            )}
+
                         </>
                       )}
                     </p>

ui/src/components/WebRTCVideo.tsx

@@ -538,7 +538,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
                           },
                         )}
                       />
-                      {peerConnection?.connectionState == "connected" && (
+                      {peerConnection?.connectionState == "connected" && !hasConnectionIssues && (
                         <div
                           style={{ animationDuration: "500ms" }}
                           className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center"

ui/src/hooks/stores.ts

@@ -19,6 +19,11 @@ interface JsonRpcResponse {
   id: number | string | null;
 }
 
+export type PostRebootAction = {
+  healthCheck: string;
+  redirectUrl: string;
+} | null;
+
 // Utility function to append stats to a Map
 const appendStatToMap = <T extends { timestamp: number }>(
   stat: T,
@@ -70,9 +75,9 @@ export interface UIState {
   terminalType: AvailableTerminalTypes;
   setTerminalType: (type: UIState["terminalType"]) => void;
 
-  rebootState: { isRebooting: boolean; suggestedIp: string | null } | null;
+  rebootState: { isRebooting: boolean; postRebootAction: PostRebootAction } | null;
   setRebootState: (
-    state: { isRebooting: boolean; suggestedIp: string | null } | null,
+    state: { isRebooting: boolean; postRebootAction: PostRebootAction } | null,
   ) => void;
 }
 

ui/src/routes/devices.$id.settings.network.tsx

@@ -145,18 +145,18 @@ export default function SettingsNetworkRoute() {
     },
   });
 
-  const prepareSettings = (data: FieldValues) => {
+  const prepareSettings = useCallback((data: FieldValues) => {
     return {
       ...data,
 
       // If custom domain option is selected, use the custom domain as value
       domain: data.domain === "custom" ? customDomain : data.domain,
     } as NetworkSettings;
-  };
+  }, [customDomain]);
 
   const { register, handleSubmit, watch, formState, reset } = formMethods;
 
-  const onSubmit = async (settings: NetworkSettings) => {
+  const onSubmit = useCallback(async (settings: NetworkSettings) => {
     if (settings.ipv4_static?.address?.includes("/")) {
       const parts = settings.ipv4_static.address.split("/");
       const cidrNotation = parseInt(parts[1]);
@@ -175,14 +175,22 @@ export default function SettingsNetworkRoute() {
       } else {
         // If the settings are saved successfully, fetch the latest network data and reset the form
         // We do this so we get all the form state values, for stuff like is the form dirty, etc...
-        const networkData = await fetchNetworkData();
-        reset(networkData.settings);
-        notifications.success("Network settings saved");
+
+        try {
+          const networkData = await fetchNetworkData();
+          if (!networkData) return
+
+          reset(networkData.settings);
+          notifications.success("Network settings saved");
+
+        } catch (error) {
+          console.error("Failed to fetch network data:", error);
+        }
       }
     });
-  };
+  }, [fetchNetworkData, reset, send]);
 
-  const onSubmitGate = async (data: FieldValues) => {
+  const onSubmitGate = useCallback(async (data: FieldValues) => {
     const settings = prepareSettings(data);
     const dirty = formState.dirtyFields;
 
@@ -252,7 +260,7 @@ export default function SettingsNetworkRoute() {
     setStagedSettings(settings);
     setCriticalChanges(changes);
     setShowCriticalSettingsConfirm(true);
-  };
+  }, [prepareSettings, formState.dirtyFields, onSubmit]);
 
   const ipv4mode = watch("ipv4_mode");
   const ipv6mode = watch("ipv6_mode");

ui/src/routes/devices.$id.tsx

@@ -24,6 +24,7 @@ import {
   KeysDownState,
   NetworkState,
   OtaState,
+  PostRebootAction,
   USBStates,
   useHidStore,
   useNetworkStateStore,
@@ -274,7 +275,7 @@ export default function KvmIdRoute() {
         // 5. WS tries to reconnect
         // 6. WS reconnects
         // 7. This function is called and now we clear the reboot state
-        setRebootState({ isRebooting: false, suggestedIp: null });
+        setRebootState({ isRebooting: false, postRebootAction: null });
       },
 
       onMessage: message => {
@@ -677,8 +678,9 @@ export default function KvmIdRoute() {
     }
 
     if (resp.method === "willReboot") {
-      const suggestedIp = resp.params as unknown as string | null;
-      setRebootState({ isRebooting: true, suggestedIp });
+      const postRebootAction = resp.params as unknown as PostRebootAction;
+      console.debug("Setting reboot state", postRebootAction);
+      setRebootState({ isRebooting: true, postRebootAction });
       navigateTo("/");
     }
   }
@@ -785,7 +787,7 @@ export default function KvmIdRoute() {
 
     // Rebooting takes priority over connection status
     if (rebootState?.isRebooting) {
-      return <RebootingOverlay show={true} suggestedIp={rebootState.suggestedIp} />;
+      return <RebootingOverlay show={true} postRebootAction={rebootState.postRebootAction} />;
     }
 
     const hasConnectionFailed =
@@ -812,7 +814,7 @@ export default function KvmIdRoute() {
     }
 
     return null;
-  }, [location.pathname, rebootState?.isRebooting, rebootState?.suggestedIp, connectionFailed, peerConnectionState, peerConnection, setupPeerConnection, loadingMessage]);
+  }, [location.pathname, rebootState?.isRebooting, rebootState?.postRebootAction, connectionFailed, peerConnectionState, peerConnection, setupPeerConnection, loadingMessage]);
 
   return (
     <FeatureFlagProvider appVersion={appVersion}>