From d3be1fbf4c1270dd9fd710ecd5d7e7921f062004 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Fri, 5 Dec 2025 12:09:02 -0500
Subject: [PATCH] update descriptions and add adress back

---
 messages/en-US.json                           |   7 +-
 .../settings/clients/machine/create/page.tsx  | 174 ++++++------------
 .../[orgId]/settings/sites/create/page.tsx    | 122 ++++++------
 3 files changed, 126 insertions(+), 177 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index 87d65076..8888bd6a 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1645,8 +1645,9 @@
     "siteConfiguration": "Configuration",
     "siteAcceptClientConnections": "Accept Client Connections",
     "siteAcceptClientConnectionsDescription": "Allow user devices and clients to access resources on this site. This can be changed later.",
-    "siteAddress": "Site Address",
+    "siteAddress": "Site Address (Advanced)",
     "siteAddressDescription": "The internal address of the site. Must fall within the organization's subnet.",
+    "siteNameDescription": "The display name of the site that can be changed later.",
     "autoLoginExternalIdp": "Auto Login with External IDP",
     "autoLoginExternalIdpDescription": "Immediately redirect the user to the external IDP for authentication.",
     "selectIdp": "Select IDP",
@@ -2239,5 +2240,7 @@
     "noData": "No Data",
     "machineClients": "Machine Clients",
     "install": "Install",
-    "run": "Run"
+    "run": "Run",
+    "clientNameDescription": "The display name of the client that can be changed later.",
+    "clientAddress": "Client Address (Advanced)"
 }
diff --git a/src/app/[orgId]/settings/clients/machine/create/page.tsx b/src/app/[orgId]/settings/clients/machine/create/page.tsx
index 4bb2d24c..a0489f30 100644
--- a/src/app/[orgId]/settings/clients/machine/create/page.tsx
+++ b/src/app/[orgId]/settings/clients/machine/create/page.tsx
@@ -410,120 +410,68 @@ export default function Page() {
                                 </SettingsSectionTitle>
                             </SettingsSectionHeader>
                             <SettingsSectionBody>
-                                <SettingsSectionForm>
-                                    <Form {...form}>
-                                        <form
-                                            onKeyDown={(e) => {
-                                                if (e.key === "Enter") {
-                                                    e.preventDefault(); // block default enter refresh
-                                                }
-                                            }}
-                                            className="space-y-4"
-                                            id="create-client-form"
-                                        >
-                                            <FormField
-                                                control={form.control}
-                                                name="name"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <FormLabel>
-                                                            {t("name")}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <Input
-                                                                autoComplete="off"
-                                                                {...field}
-                                                            />
-                                                        </FormControl>
-                                                        <FormMessage />
-                                                    </FormItem>
-                                                )}
-                                            />
+                                <Form {...form}>
+                                    <form
+                                        onKeyDown={(e) => {
+                                            if (e.key === "Enter") {
+                                                e.preventDefault(); // block default enter refresh
+                                            }
+                                        }}
+                                        className="space-y-4 grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
+                                        id="create-client-form"
+                                    >
+                                        <FormField
+                                            control={form.control}
+                                            name="name"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("name")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            autoComplete="off"
+                                                            {...field}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                    <FormDescription>
+                                                        {t(
+                                                            "clientNameDescription"
+                                                        )}
+                                                    </FormDescription>
+                                                </FormItem>
+                                            )}
+                                        />
 
-                                            {/* <FormField */}
-                                            {/*     control={form.control} */}
-                                            {/*     name="subnet" */}
-                                            {/*     render={({ field }) => ( */}
-                                            {/*         <FormItem> */}
-                                            {/*             <FormLabel> */}
-                                            {/*                 {t("address")} */}
-                                            {/*             </FormLabel> */}
-                                            {/*             <FormControl> */}
-                                            {/*                 <Input */}
-                                            {/*                     autoComplete="off" */}
-                                            {/*                     placeholder={t( */}
-                                            {/*                         "subnetPlaceholder" */}
-                                            {/*                     )} */}
-                                            {/*                     {...field} */}
-                                            {/*                 /> */}
-                                            {/*             </FormControl> */}
-                                            {/*             <FormMessage /> */}
-                                            {/*             <FormDescription> */}
-                                            {/*                 {t( */}
-                                            {/*                     "addressDescription" */}
-                                            {/*                 )} */}
-                                            {/*             </FormDescription> */}
-                                            {/*         </FormItem> */}
-                                            {/*     )} */}
-                                            {/* /> */}
-
-                                            {/* <FormField */}
-                                            {/*     control={form.control} */}
-                                            {/*     name="siteIds" */}
-                                            {/*     render={(field) => ( */}
-                                            {/*         <FormItem className="flex flex-col"> */}
-                                            {/*             <FormLabel> */}
-                                            {/*                 {t("sites")} */}
-                                            {/*             </FormLabel> */}
-                                            {/*             <TagInput */}
-                                            {/*                 {...field} */}
-                                            {/*                 activeTagIndex={ */}
-                                            {/*                     activeSitesTagIndex */}
-                                            {/*                 } */}
-                                            {/*                 setActiveTagIndex={ */}
-                                            {/*                     setActiveSitesTagIndex */}
-                                            {/*                 } */}
-                                            {/*                 placeholder={t("selectSites")} */}
-                                            {/*                 size="sm" */}
-                                            {/*                 tags={ */}
-                                            {/*                     form.getValues() */}
-                                            {/*                         .siteIds */}
-                                            {/*                 } */}
-                                            {/*                 setTags={( */}
-                                            {/*                     olmags */}
-                                            {/*                 ) => { */}
-                                            {/*                     form.setValue( */}
-                                            {/*                         "siteIds", */}
-                                            {/*                         olmags as [ */}
-                                            {/*                             Tag, */}
-                                            {/*                             ...Tag[] */}
-                                            {/*                         ] */}
-                                            {/*                     ); */}
-                                            {/*                 }} */}
-                                            {/*                 enableAutocomplete={ */}
-                                            {/*                     true */}
-                                            {/*                 } */}
-                                            {/*                 autocompleteOptions={ */}
-                                            {/*                     sites */}
-                                            {/*                 } */}
-                                            {/*                 allowDuplicates={ */}
-                                            {/*                     false */}
-                                            {/*                 } */}
-                                            {/*                 restrictTagsToAutocompleteOptions={ */}
-                                            {/*                     true */}
-                                            {/*                 } */}
-                                            {/*                 sortTags={true} */}
-                                            {/*             /> */}
-                                            {/*             <FormDescription> */}
-                                            {/*                 {t("sitesDescription")} */}
-                                            {/*             </FormDescription> */}
-                                            {/*             <FormMessage /> */}
-                                            {/*         </FormItem> */}
-                                            {/*     )} */}
-                                            {/* /> */}
-                                        </form>
-                                    </Form>
-                                </SettingsSectionForm>
+                                        <FormField
+                                            control={form.control}
+                                            name="subnet"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("clientAddress")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            autoComplete="off"
+                                                            placeholder={t(
+                                                                "subnetPlaceholder"
+                                                            )}
+                                                            {...field}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                    <FormDescription>
+                                                        {t(
+                                                            "addressDescription"
+                                                        )}
+                                                    </FormDescription>
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </form>
+                                </Form>
                             </SettingsSectionBody>
                         </SettingsSection>
 
diff --git a/src/app/[orgId]/settings/sites/create/page.tsx b/src/app/[orgId]/settings/sites/create/page.tsx
index c107ef57..a1362e87 100644
--- a/src/app/[orgId]/settings/sites/create/page.tsx
+++ b/src/app/[orgId]/settings/sites/create/page.tsx
@@ -693,87 +693,85 @@ WantedBy=default.target`
                                 </SettingsSectionTitle>
                             </SettingsSectionHeader>
                             <SettingsSectionBody>
-                                <SettingsSectionForm>
-                                    <Form {...form}>
-                                        <form
-                                            onKeyDown={(e) => {
-                                                if (e.key === "Enter") {
-                                                    e.preventDefault(); // block default enter refresh
-                                                }
-                                            }}
-                                            className="space-y-4"
-                                            id="create-site-form"
-                                        >
+                                <Form {...form}>
+                                    <form
+                                        onKeyDown={(e) => {
+                                            if (e.key === "Enter") {
+                                                e.preventDefault(); // block default enter refresh
+                                            }
+                                        }}
+                                        className="space-y-4 grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
+                                        id="create-site-form"
+                                    >
+                                        <FormField
+                                            control={form.control}
+                                            name="name"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("name")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            autoComplete="off"
+                                                            {...field}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                    <FormDescription>
+                                                        {t(
+                                                            "siteNameDescription"
+                                                        )}
+                                                    </FormDescription>
+                                                </FormItem>
+                                            )}
+                                        />
+                                        {form.watch("method") === "newt" && (
                                             <FormField
                                                 control={form.control}
-                                                name="name"
+                                                name="clientAddress"
                                                 render={({ field }) => (
                                                     <FormItem>
                                                         <FormLabel>
-                                                            {t("name")}
+                                                            {t("siteAddress")}
                                                         </FormLabel>
                                                         <FormControl>
                                                             <Input
                                                                 autoComplete="off"
-                                                                {...field}
+                                                                value={
+                                                                    clientAddress
+                                                                }
+                                                                onChange={(
+                                                                    e
+                                                                ) => {
+                                                                    setClientAddress(
+                                                                        e.target
+                                                                            .value
+                                                                    );
+                                                                    field.onChange(
+                                                                        e.target
+                                                                            .value
+                                                                    );
+                                                                }}
                                                             />
                                                         </FormControl>
                                                         <FormMessage />
+                                                        <FormDescription>
+                                                            {t(
+                                                                "siteAddressDescription"
+                                                            )}
+                                                        </FormDescription>
                                                     </FormItem>
                                                 )}
                                             />
-                                            {/*form.watch("method") ===
-                                                "newt" && (
-                                                <FormField
-                                                    control={form.control}
-                                                    name="clientAddress"
-                                                    render={({ field }) => (
-                                                        <FormItem>
-                                                            <FormLabel>
-                                                                {t(
-                                                                    "siteAddress"
-                                                                )}
-                                                            </FormLabel>
-                                                            <FormControl>
-                                                                <Input
-                                                                    autoComplete="off"
-                                                                    value={
-                                                                        clientAddress
-                                                                    }
-                                                                    onChange={(
-                                                                        e
-                                                                    ) => {
-                                                                        setClientAddress(
-                                                                            e
-                                                                                .target
-                                                                                .value
-                                                                        );
-                                                                        field.onChange(
-                                                                            e
-                                                                                .target
-                                                                                .value
-                                                                        );
-                                                                    }}
-                                                                />
-                                                            </FormControl>
-                                                            <FormMessage />
-                                                            <FormDescription>
-                                                                {t(
-                                                                    "siteAddressDescription"
-                                                                )}
-                                                            </FormDescription>
-                                                        </FormItem>
-                                                    )}
-                                                />
-                                            )*/}
-                                        </form>
-                                    </Form>
-                                </SettingsSectionForm>
+                                        )}
+                                    </form>
+                                </Form>
 
                                 {tunnelTypes.length > 1 && (
                                     <>
                                         <div className="mb-2">
-                                            <span>{t("type")}</span>
+                                            <span className="text-sm font-medium">{t("type")}</span>
                                         </div>
                                         <StrategySelect
                                             options={tunnelTypes}