From c244dc9c0cc689d20929fdd3fdf5c5de71af01c0 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Wed, 13 Aug 2025 11:15:14 -0700
Subject: [PATCH] Add accept clients to install

---
 messages/en-US.json                           |   7 +-
 .../[orgId]/settings/sites/create/page.tsx    | 114 ++++++++++--------
 2 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index f8b3f8b9..6ac72d8a 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1344,5 +1344,10 @@
     "remoteSubnetsDescription": "Add CIDR ranges that can be accessed from this site remotely using clients. Use format like 10.0.0.0/24. This ONLY applies to VPN client connectivity.",
     "resourceEnableProxy": "Enable Public Proxy",
     "resourceEnableProxyDescription": "Enable public proxying to this resource. This allows access to the resource from outside the network through the cloud on an open port. Requires Traefik config.",
-    "externalProxyEnabled": "External Proxy Enabled"
+    "externalProxyEnabled": "External Proxy Enabled",
+    "siteConfiguration": "Configuration",
+    "siteAcceptClientConnections": "Accept client connections",
+    "siteAcceptClientConnectionsDescription": "Allow other devices to connect through this Newt instance as a gateway using clients.",
+    "siteAddress": "Site Address",
+    "siteAddressDescription": "Specify the IP address of the host for clients to connect to."
 }
\ No newline at end of file
diff --git a/src/app/[orgId]/settings/sites/create/page.tsx b/src/app/[orgId]/settings/sites/create/page.tsx
index d6ab64d0..4d5171f1 100644
--- a/src/app/[orgId]/settings/sites/create/page.tsx
+++ b/src/app/[orgId]/settings/sites/create/page.tsx
@@ -206,8 +206,10 @@ PersistentKeepalive = 5`;
         acceptClients: boolean = false
     ) => {
         const acceptClientsFlag = acceptClients ? " --accept-clients" : "";
-        const acceptClientsEnv = acceptClients ? "\n      - ACCEPT_CLIENTS=true" : "";
-        
+        const acceptClientsEnv = acceptClients
+            ? "\n      - ACCEPT_CLIENTS=true"
+            : "";
+
         const commands = {
             mac: {
                 "Apple Silicon (arm64)": [
@@ -388,7 +390,7 @@ WantedBy=default.target`
             case "freebsd":
                 return <FaFreebsd className="h-4 w-4 mr-2" />;
             case "nixos":
-                return <SiNixos  className="h-4 w-4 mr-2" />;
+                return <SiNixos className="h-4 w-4 mr-2" />;
             default:
                 return <Terminal className="h-4 w-4 mr-2" />;
         }
@@ -566,6 +568,11 @@ WantedBy=default.target`
         load();
     }, []);
 
+    // Sync form acceptClients value with local state
+    useEffect(() => {
+        form.setValue("acceptClients", acceptClients);
+    }, [acceptClients, form]);
+
     return (
         <>
             <div className="flex justify-between">
@@ -626,7 +633,7 @@ WantedBy=default.target`
                                                         render={({ field }) => (
                                                             <FormItem>
                                                                 <FormLabel>
-                                                                    Site Address
+                                                                    {t("siteAddress")}
                                                                 </FormLabel>
                                                                 <FormControl>
                                                                     <Input
@@ -652,59 +659,12 @@ WantedBy=default.target`
                                                                 </FormControl>
                                                                 <FormMessage />
                                                                 <FormDescription>
-                                                                    Specify the
-                                                                    IP address
-                                                                    of the host
-                                                                    for clients
-                                                                    to connect
-                                                                    to.
+                                                                    {t("siteAddressDescription")}
                                                                 </FormDescription>
                                                             </FormItem>
                                                         )}
                                                     />
                                                 )}
-                                            {form.watch("method") ===
-                                                "newt" && (
-                                                <FormField
-                                                    control={form.control}
-                                                    name="acceptClients"
-                                                    render={({ field }) => (
-                                                        <FormItem>
-                                                            <div className="flex items-center space-x-2">
-                                                                <Checkbox
-                                                                    id="acceptClients"
-                                                                    checked={field.value}
-                                                                    onCheckedChange={(checked) => {
-                                                                        const value = checked as boolean;
-                                                                        field.onChange(value);
-                                                                        setAcceptClients(value);
-                                                                        // Re-hydrate commands with new acceptClients value
-                                                                        if (newtId && newtSecret) {
-                                                                            hydrateCommands(
-                                                                                newtId,
-                                                                                newtSecret,
-                                                                                env.app.dashboardUrl,
-                                                                                newtVersion,
-                                                                                value
-                                                                            );
-                                                                        }
-                                                                    }}
-                                                                />
-                                                                <label
-                                                                    htmlFor="acceptClients"
-                                                                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                                                >
-                                                                    Accept client connections
-                                                                </label>
-                                                            </div>
-                                                            <FormDescription>
-                                                                Allow other devices to connect through this newt instance as a gateway.
-                                                            </FormDescription>
-                                                            <FormMessage />
-                                                        </FormItem>
-                                                    )}
-                                                />
-                                            )}
                                         </form>
                                     </Form>
                                 </SettingsSectionForm>
@@ -903,6 +863,56 @@ WantedBy=default.target`
                                                     )
                                                 )}
                                             </div>
+
+                                            <div className="pt-4">
+                                                <p className="font-bold mb-3">
+                                                    {t("siteConfiguration")}
+                                                </p>
+                                                <div className="flex items-center space-x-2 mb-4">
+                                                    <Checkbox
+                                                        id="acceptClients"
+                                                        checked={acceptClients}
+                                                        onCheckedChange={(
+                                                            checked
+                                                        ) => {
+                                                            const value =
+                                                                checked as boolean;
+                                                            setAcceptClients(
+                                                                value
+                                                            );
+                                                            form.setValue(
+                                                                "acceptClients",
+                                                                value
+                                                            );
+                                                            // Re-hydrate commands with new acceptClients value
+                                                            if (
+                                                                newtId &&
+                                                                newtSecret &&
+                                                                newtVersion
+                                                            ) {
+                                                                hydrateCommands(
+                                                                    newtId,
+                                                                    newtSecret,
+                                                                    env.app
+                                                                        .dashboardUrl,
+                                                                    newtVersion,
+                                                                    value
+                                                                );
+                                                            }
+                                                        }}
+                                                    />
+                                                    <label
+                                                        htmlFor="acceptClients"
+                                                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                                    >
+                                                        {t("siteAcceptClientConnections")}
+                                                    </label>
+                                                </div>
+                                                <p className="text-sm text-muted-foreground mb-4">
+                                                    {t("siteAcceptClientConnectionsDescription")}
+                                                </p>
+                                            </div>
+
                                             <div className="pt-4">
                                                 <p className="font-bold mb-3">
                                                     {t("commands")}