move cert to info box and add network access to create wizard

src/app/[orgId]/settings/resources/private/PrivateResourceHttpFields.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import CertificateStatus from "@app/components/CertificateStatus";
 import DomainPicker from "@app/components/DomainPicker";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import {
@@ -27,7 +26,6 @@ import {
     SelectValue
 } from "@app/components/ui/select";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { build } from "@server/build";
 import { useTranslations } from "next-intl";
 import type { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
 
@@ -38,8 +36,6 @@ type PrivateResourceHttpFieldsProps = {
     watch: UseFormWatch<any>;
     disabled?: boolean;
     siteResourceId?: number;
-    resourceDomainId?: string | null;
-    resourceFullDomain?: string | null;
     labelPrefix?: "create" | "edit";
     hideDomainPicker?: boolean;
     hidePaidFeaturesAlert?: boolean;
@@ -52,8 +48,6 @@ export function PrivateResourceHttpFields({
     watch,
     disabled = false,
     siteResourceId,
-    resourceDomainId,
-    resourceFullDomain,
     labelPrefix = "edit",
     hideDomainPicker = false,
     hidePaidFeaturesAlert = false
@@ -91,7 +85,6 @@ export function PrivateResourceHttpFields({
     const httpConfigSubdomain = watch("httpConfigSubdomain");
     const httpConfigDomainId = watch("httpConfigDomainId");
     const httpConfigFullDomain = watch("httpConfigFullDomain");
-    const ssl = watch("ssl");
 
     return (
         <SettingsFormGrid>
@@ -274,29 +267,6 @@ export function PrivateResourceHttpFields({
                             )}
                         />
                     </SettingsFormCell>
-                    {siteResourceId &&
-                        resourceDomainId &&
-                        httpConfigFullDomain &&
-                        httpConfigDomainId === resourceDomainId &&
-                        httpConfigFullDomain === resourceFullDomain &&
-                        build != "oss" &&
-                        ssl && (
-                            <SettingsFormCell span="half">
-                                <div className="flex items-center gap-2 pt-1">
-                                    <span className="text-sm font-medium">
-                                        {t("certificateStatus")}:
-                                    </span>
-                                    <CertificateStatus
-                                        orgId={orgId}
-                                        domainId={resourceDomainId}
-                                        fullDomain={httpConfigFullDomain}
-                                        autoFetch={true}
-                                        showLabel={false}
-                                        polling={true}
-                                    />
-                                </div>
-                            </SettingsFormCell>
-                        )}
                 </>
             )}
 

src/app/[orgId]/settings/resources/private/[niceId]/http/page.tsx

@@ -122,12 +122,6 @@ export default function PrivateResourceHttpPage() {
                                             watch={asAnyWatch(form.watch)}
                                             disabled={httpSectionDisabled}
                                             siteResourceId={siteResource.id}
-                                            resourceDomainId={
-                                                siteResource.domainId
-                                            }
-                                            resourceFullDomain={
-                                                siteResource.fullDomain
-                                            }
                                         />
                                     </SettingsFormCell>
                                 </SettingsFormGrid>

src/app/[orgId]/settings/resources/private/create/page.tsx

@@ -53,6 +53,7 @@ import { z } from "zod";
 import { PrivateResourceSitesField } from "../PrivateResourceSitesField";
 import { PrivateResourceHttpFields } from "../PrivateResourceHttpFields";
 import { PrivateResourceSshFields } from "../PrivateResourceSshFields";
+import { PrivateResourcePortRanges } from "../PrivateResourcePortRanges";
 import {
     PrivateResourceAliasField,
     PrivateResourceCidrDestinationField,
@@ -105,6 +106,8 @@ export default function CreatePrivateResourcePage() {
             standardDaemonLocation: "site",
             authDaemonPort: null,
             pamMode: "passthrough",
+            tcpPortRangeString: "*",
+            udpPortRangeString: "*",
             disableIcmp: false
         }
     });
@@ -426,6 +429,16 @@ export default function CreatePrivateResourcePage() {
                                                 hideAlias
                                             />
                                         </SettingsFormCell>
+                                        <SettingsFormCell span="full">
+                                            <PrivateResourcePortRanges
+                                                control={asAnyControl(
+                                                    form.control
+                                                )}
+                                                setValue={asAnySetValue(
+                                                    form.setValue
+                                                )}
+                                            />
+                                        </SettingsFormCell>
                                     </SettingsFormGrid>
                                 </SettingsSectionForm>
                             </SettingsSectionBody>
@@ -466,6 +479,16 @@ export default function CreatePrivateResourcePage() {
                                                 labelPrefix="create"
                                             />
                                         </SettingsFormCell>
+                                        <SettingsFormCell span="full">
+                                            <PrivateResourcePortRanges
+                                                control={asAnyControl(
+                                                    form.control
+                                                )}
+                                                setValue={asAnySetValue(
+                                                    form.setValue
+                                                )}
+                                            />
+                                        </SettingsFormCell>
                                     </SettingsFormGrid>
                                 </SettingsSectionForm>
                             </SettingsSectionBody>

src/components/LayoutMobileMenu.tsx

@@ -155,7 +155,7 @@ export function LayoutMobileMenu({
                                                                     </span>
                                                                     <span className="flex-1">
                                                                         {t(
-                                                                            "resourceLauncherTitle"
+                                                                            "resourceSidebarLauncherTitle"
                                                                         )}
                                                                     </span>
                                                                 </Link>

src/components/LayoutSidebar.tsx

@@ -195,7 +195,7 @@ export function LayoutSidebar({
                                                 sideOffset={8}
                                             >
                                                 <p>
-                                                    {t("resourceLauncherTitle")}
+                                                    {t("resourceSidebarLauncherTitle")}
                                                 </p>
                                             </TooltipContent>
                                         </Tooltip>
@@ -211,7 +211,7 @@ export function LayoutSidebar({
                                             <SquareMousePointer className="h-4 w-4" />
                                         </span>
                                         <span className="flex-1">
-                                            {t("resourceLauncherTitle")}
+                                            {t("resourceSidebarLauncherTitle")}
                                         </span>
                                     </Link>
                                 )}

src/components/SiteResourceInfoBox.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import CertificateStatus from "@app/components/CertificateStatus";
 import CopyToClipboard from "@app/components/CopyToClipboard";
 import {
     InfoSection,
@@ -17,14 +18,17 @@ import {
     type LauncherAccessFields
 } from "@app/lib/launcherResourceAccess";
 import type { PrivateResourceMode } from "@app/lib/privateResourceForm";
+import { build } from "@server/build";
 import { useTranslations } from "next-intl";
 
 type SiteResourceInfoInput = {
+    orgId: string;
     mode: PrivateResourceMode;
     destination: string | null;
     destinationPort: number | null;
     scheme: "http" | "https" | null;
     ssl: boolean;
+    domainId?: string | null;
     fullDomain?: string | null;
     alias?: string | null;
     aliasAddress?: string | null;
@@ -108,9 +112,20 @@ export function SiteResourceInfoSections({
     const showDestination = !(
         siteResource.mode === "ssh" && siteResource.authDaemonMode === "native"
     );
+    const showCertificate = !!(
+        siteResource.mode === "http" &&
+        siteResource.ssl &&
+        siteResource.domainId &&
+        siteResource.fullDomain &&
+        build != "oss"
+    );
 
     const numSections =
-        2 + (showDestination ? 1 : 0) + (showAlias ? 1 : 0) + (isPanel ? 1 : 0);
+        2 +
+        (showDestination ? 1 : 0) +
+        (showAlias ? 1 : 0) +
+        (showCertificate ? 1 : 0) +
+        (isPanel ? 1 : 0);
 
     const sections = (
         <InfoSections cols={numSections} layout={isPanel ? "panel" : "default"}>
@@ -155,6 +170,26 @@ export function SiteResourceInfoSections({
                 </InfoSection>
             ) : null}
 
+            {showCertificate ? (
+                <InfoSection>
+                    <InfoSectionTitle>
+                        {t("certificateStatus", {
+                            defaultValue: "Certificate"
+                        })}
+                    </InfoSectionTitle>
+                    <InfoSectionContent>
+                        <CertificateStatus
+                            orgId={siteResource.orgId}
+                            domainId={siteResource.domainId!}
+                            fullDomain={siteResource.fullDomain!}
+                            autoFetch={true}
+                            showLabel={false}
+                            polling={true}
+                        />
+                    </InfoSectionContent>
+                </InfoSection>
+            ) : null}
+
             {isPanel ? (
                 <InfoSection>
                     <InfoSectionTitle>{t("portRestrictions")}</InfoSectionTitle>

src/lib/privateResourceForm.ts

@@ -400,6 +400,8 @@ export function createCreateFormSchema(t: TranslateFn) {
                 .nullable(),
             authDaemonPort: z.number().int().positive().optional().nullable(),
             pamMode: z.enum(["passthrough", "push"]).optional().nullable(),
+            tcpPortRangeString: createPortRangeStringSchema(t),
+            udpPortRangeString: createPortRangeStringSchema(t),
             disableIcmp: z.boolean().optional()
         })
         .superRefine((data, ctx) => {