feat: add loopback-only mode functionality to UI

- Implemented a new setting for enabling loopback-only mode, restricting web interface access to localhost.
- Added a confirmation dialog to warn users before enabling this feature.
- Updated the ConfirmDialog component to accept React nodes for the description prop.
- Refactored imports and adjusted component structure for clarity.

ui/src/components/ConfirmDialog.tsx

@@ -1,12 +1,12 @@
 import {
-  ExclamationTriangleIcon,
   CheckCircleIcon,
+  ExclamationTriangleIcon,
   InformationCircleIcon,
 } from "@heroicons/react/24/outline";
 
-import { cx } from "@/cva.config";
 import { Button } from "@/components/Button";
 import Modal from "@/components/Modal";
+import { cx } from "@/cva.config";
 
 type Variant = "danger" | "success" | "warning" | "info";
 
@@ -14,7 +14,7 @@ interface ConfirmDialogProps {
   open: boolean;
   onClose: () => void;
   title: string;
-  description: string;
+  description: React.ReactNode;
   variant?: Variant;
   confirmText?: string;
   cancelText?: string | null;
@@ -84,8 +84,8 @@ export function ConfirmDialog({
               >
                 <Icon aria-hidden="true" className={cx("size-6", iconClass)} />
               </div>
-              <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                <h2 className="text-lg font-bold leading-tight text-black dark:text-white">
+                <h2 className="text-lg leading-tight font-bold text-black dark:text-white">
                   {title}
                 </h2>
                 <div className="mt-2 text-sm leading-snug text-slate-600 dark:text-slate-400">
@@ -111,4 +111,4 @@ export function ConfirmDialog({
       </div>
     </Modal>
   );
-}
+}

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

@@ -1,17 +1,16 @@
-
+import { useCallback, useEffect, useState } from "react";
-import { useCallback, useState, useEffect } from "react";
 
 import { GridCard } from "@components/Card";
 
-import { SettingsPageHeader } from "../components/SettingsPageheader";
-import Checkbox from "../components/Checkbox";
-import { useJsonRpc } from "../hooks/useJsonRpc";
-import notifications from "../notifications";
-import { TextAreaWithLabel } from "../components/TextArea";
-import { isOnDevice } from "../main";
 import { Button } from "../components/Button";
+import Checkbox from "../components/Checkbox";
+import { ConfirmDialog } from "../components/ConfirmDialog";
+import { SettingsPageHeader } from "../components/SettingsPageheader";
+import { TextAreaWithLabel } from "../components/TextArea";
 import { useSettingsStore } from "../hooks/stores";
-
+import { useJsonRpc } from "../hooks/useJsonRpc";
+import { isOnDevice } from "../main";
+import notifications from "../notifications";
 
 import { SettingsItem } from "./devices.$id.settings";
 
@@ -22,6 +21,8 @@ export default function SettingsAdvancedRoute() {
   const setDeveloperMode = useSettingsStore(state => state.setDeveloperMode);
   const [devChannel, setDevChannel] = useState(false);
   const [usbEmulationEnabled, setUsbEmulationEnabled] = useState(false);
+  const [showLoopbackWarning, setShowLoopbackWarning] = useState(false);
+  const [localLoopbackOnly, setLocalLoopbackOnly] = useState(false);
 
   const settings = useSettingsStore();
 
@@ -46,6 +47,11 @@ export default function SettingsAdvancedRoute() {
       if ("error" in resp) return;
       setDevChannel(resp.result as boolean);
     });
+
+    send("getLocalLoopbackOnly", {}, resp => {
+      if ("error" in resp) return;
+      setLocalLoopbackOnly(resp.result as boolean);
+    });
   }, [send, setDeveloperMode]);
 
   const getUsbEmulationState = useCallback(() => {
@@ -122,6 +128,42 @@ export default function SettingsAdvancedRoute() {
     });
   };
 
+  const handleLoopbackOnlyModeChange = (enabled: boolean) => {
+    // If trying to enable loopback-only mode, show warning first
+    if (enabled) {
+      setShowLoopbackWarning(true);
+    } else {
+      // If disabling, just proceed
+      applyLoopbackOnlyMode(false);
+    }
+  };
+
+  const applyLoopbackOnlyMode = (enabled: boolean) => {
+    send("setLocalLoopbackOnly", { enabled }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to ${enabled ? "enable" : "disable"} loopback-only mode: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      setLocalLoopbackOnly(enabled);
+      if (enabled) {
+        notifications.success(
+          "Loopback-only mode enabled. Restart your device to apply.",
+        );
+      } else {
+        notifications.success(
+          "Loopback-only mode disabled. Restart your device to apply.",
+        );
+      }
+    });
+  };
+
+  const confirmLoopbackModeEnable = () => {
+    applyLoopbackOnlyMode(true);
+    setShowLoopbackWarning(false);
+  };
+
   return (
     <div className="space-y-4">
       <SettingsPageHeader
@@ -153,7 +195,7 @@ export default function SettingsAdvancedRoute() {
 
         {settings.developerMode && (
           <GridCard>
-            <div className="flex select-none items-start gap-x-4 p-4">
+            <div className="flex items-start gap-x-4 p-4 select-none">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -187,6 +229,16 @@ export default function SettingsAdvancedRoute() {
           </GridCard>
         )}
 
+        <SettingsItem
+          title="Loopback-Only Mode"
+          description="Restrict web interface access to localhost only (127.0.0.1)"
+        >
+          <Checkbox
+            checked={localLoopbackOnly}
+            onChange={e => handleLoopbackOnlyModeChange(e.target.checked)}
+          />
+        </SettingsItem>
+
         {isOnDevice && settings.developerMode && (
           <div className="space-y-4">
             <SettingsItem
@@ -261,6 +313,30 @@ export default function SettingsAdvancedRoute() {
           </>
         )}
       </div>
+
+      <ConfirmDialog
+        open={showLoopbackWarning}
+        onClose={() => {
+          setShowLoopbackWarning(false);
+        }}
+        title="Enable Loopback-Only Mode?"
+        description={
+          <>
+            <p>
+              WARNING: This will restrict web interface access to localhost (127.0.0.1)
+              only.
+            </p>
+            <p>Before enabling this feature, make sure you have either:</p>
+            <ul className="list-disc space-y-1 pl-5 text-xs text-slate-700 dark:text-slate-300">
+              <li>SSH access configured and tested</li>
+              <li>Cloud access enabled and working</li>
+            </ul>
+          </>
+        }
+        variant="warning"
+        confirmText="I Understand, Enable Anyway"
+        onConfirm={confirmLoopbackModeEnable}
+      />
     </div>
   );
 }