From 757b735d98fdaa29f924e1085ac25baff5392c9b Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Sat, 20 Dec 2025 22:29:22 -0500
Subject: [PATCH] separate maintenance section

---
 .../resources/proxy/[niceId]/general/page.tsx | 649 ++++++++++--------
 1 file changed, 373 insertions(+), 276 deletions(-)

diff --git a/src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx b/src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx
index 88bf77c9..897c5d00 100644
--- a/src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx
+++ b/src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx
@@ -61,6 +61,363 @@ import {
     TooltipTrigger
 } from "@app/components/ui/tooltip";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { GetResourceResponse } from "@server/routers/resource/getResource";
+import type { ResourceContextType } from "@app/contexts/resourceContext";
+
+type MaintenanceSectionFormProps = {
+    resource: GetResourceResponse;
+    updateResource: ResourceContextType["updateResource"];
+};
+
+function MaintenanceSectionForm({
+    resource,
+    updateResource
+}: MaintenanceSectionFormProps) {
+    const { env } = useEnvContext();
+    const t = useTranslations();
+    const api = createApiClient({ env });
+    const { isUnlocked } = useLicenseStatusContext();
+    const subscription = useSubscriptionStatusContext();
+
+    const MaintenanceFormSchema = z.object({
+        maintenanceModeEnabled: z.boolean().optional(),
+        maintenanceModeType: z.enum(["forced", "automatic"]).optional(),
+        maintenanceTitle: z.string().max(255).optional(),
+        maintenanceMessage: z.string().max(2000).optional(),
+        maintenanceEstimatedTime: z.string().max(100).optional()
+    });
+
+    const maintenanceForm = useForm({
+        resolver: zodResolver(MaintenanceFormSchema),
+        defaultValues: {
+            maintenanceModeEnabled: resource.maintenanceModeEnabled || false,
+            maintenanceModeType: resource.maintenanceModeType || "automatic",
+            maintenanceTitle:
+                resource.maintenanceTitle || "We'll be back soon!",
+            maintenanceMessage:
+                resource.maintenanceMessage ||
+                "We are currently performing scheduled maintenance. Please check back soon.",
+            maintenanceEstimatedTime: resource.maintenanceEstimatedTime || ""
+        },
+        mode: "onChange"
+    });
+
+    const isMaintenanceEnabled = maintenanceForm.watch(
+        "maintenanceModeEnabled"
+    );
+    const maintenanceModeType = maintenanceForm.watch("maintenanceModeType");
+
+    const [, maintenanceFormAction, maintenanceSaveLoading] = useActionState(
+        onMaintenanceSubmit,
+        null
+    );
+
+    async function onMaintenanceSubmit() {
+        const isValid = await maintenanceForm.trigger();
+        if (!isValid) return;
+
+        const data = maintenanceForm.getValues();
+
+        const res = await api
+            .post<AxiosResponse<UpdateResourceResponse>>(
+                `resource/${resource?.resourceId}`,
+                {
+                    maintenanceModeEnabled: data.maintenanceModeEnabled,
+                    maintenanceModeType: data.maintenanceModeType,
+                    maintenanceTitle: data.maintenanceTitle || null,
+                    maintenanceMessage: data.maintenanceMessage || null,
+                    maintenanceEstimatedTime:
+                        data.maintenanceEstimatedTime || null
+                }
+            )
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("resourceErrorUpdate"),
+                    description: formatAxiosError(
+                        e,
+                        t("resourceErrorUpdateDescription")
+                    )
+                });
+            });
+
+        if (res && res.status === 200) {
+            updateResource({
+                maintenanceModeEnabled: data.maintenanceModeEnabled,
+                maintenanceModeType: data.maintenanceModeType,
+                maintenanceTitle: data.maintenanceTitle || null,
+                maintenanceMessage: data.maintenanceMessage || null,
+                maintenanceEstimatedTime: data.maintenanceEstimatedTime || null
+            });
+
+            toast({
+                title: t("resourceUpdated"),
+                description: t("resourceUpdatedDescription")
+            });
+        }
+    }
+
+    const isSecurityFeatureDisabled = () => {
+        const isEnterpriseNotLicensed = build === "enterprise" && !isUnlocked();
+        const isSaasNotSubscribed =
+            build === "saas" && !subscription?.isSubscribed();
+        return isEnterpriseNotLicensed || isSaasNotSubscribed;
+    };
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>
+                    {t("maintenanceMode")}
+                </SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {t("maintenanceModeDescription")}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+
+            <SettingsSectionBody>
+                <SettingsSectionForm>
+                    <Form {...maintenanceForm}>
+                        <form
+                            action={maintenanceFormAction}
+                            className="space-y-4"
+                            id="maintenance-settings-form"
+                        >
+                            <PaidFeaturesAlert></PaidFeaturesAlert>
+                            <FormField
+                                control={maintenanceForm.control}
+                                name="maintenanceModeEnabled"
+                                render={({ field }) => {
+                                    const isDisabled =
+                                        isSecurityFeatureDisabled();
+
+                                    return (
+                                        <FormItem>
+                                            <div className="flex items-center space-x-2">
+                                                <FormControl>
+                                                    <TooltipProvider>
+                                                        <Tooltip>
+                                                            <TooltipTrigger
+                                                                asChild
+                                                            >
+                                                                <div className="flex items-center gap-2">
+                                                                    <SwitchInput
+                                                                        id="enable-maintenance"
+                                                                        checked={
+                                                                            field.value
+                                                                        }
+                                                                        label={t(
+                                                                            "enableMaintenanceMode"
+                                                                        )}
+                                                                        disabled={
+                                                                            isDisabled
+                                                                        }
+                                                                        onCheckedChange={(
+                                                                            val
+                                                                        ) => {
+                                                                            if (
+                                                                                !isDisabled
+                                                                            ) {
+                                                                                maintenanceForm.setValue(
+                                                                                    "maintenanceModeEnabled",
+                                                                                    val
+                                                                                );
+                                                                            }
+                                                                        }}
+                                                                    />
+                                                                </div>
+                                                            </TooltipTrigger>
+                                                        </Tooltip>
+                                                    </TooltipProvider>
+                                                </FormControl>
+                                            </div>
+                                            <FormMessage />
+                                        </FormItem>
+                                    );
+                                }}
+                            />
+
+                            {isMaintenanceEnabled && (
+                                <div className="space-y-4">
+                                    <FormField
+                                        control={maintenanceForm.control}
+                                        name="maintenanceModeType"
+                                        render={({ field }) => (
+                                            <FormItem className="space-y-3">
+                                                <FormLabel>
+                                                    {t("maintenanceModeType")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <RadioGroup
+                                                        onValueChange={
+                                                            field.onChange
+                                                        }
+                                                        defaultValue={
+                                                            field.value
+                                                        }
+                                                        disabled={isSecurityFeatureDisabled()}
+                                                        className="flex flex-col space-y-1"
+                                                    >
+                                                        <FormItem className="flex items-start space-x-3 space-y-0">
+                                                            <FormControl>
+                                                                <RadioGroupItem value="automatic" />
+                                                            </FormControl>
+                                                            <div className="space-y-1 leading-none">
+                                                                <FormLabel className="font-normal">
+                                                                    <strong>
+                                                                        {t(
+                                                                            "automatic"
+                                                                        )}
+                                                                    </strong>{" "}
+                                                                    (
+                                                                    {t(
+                                                                        "recommended"
+                                                                    )}
+                                                                    )
+                                                                </FormLabel>
+                                                                <FormDescription>
+                                                                    {t(
+                                                                        "automaticModeDescription"
+                                                                    )}
+                                                                </FormDescription>
+                                                            </div>
+                                                        </FormItem>
+                                                        <FormItem className="flex items-start space-x-3 space-y-0">
+                                                            <FormControl>
+                                                                <RadioGroupItem value="forced" />
+                                                            </FormControl>
+                                                            <div className="space-y-1 leading-none">
+                                                                <FormLabel className="font-normal">
+                                                                    <strong>
+                                                                        {t(
+                                                                            "forced"
+                                                                        )}
+                                                                    </strong>
+                                                                </FormLabel>
+                                                                <FormDescription>
+                                                                    {t(
+                                                                        "forcedModeDescription"
+                                                                    )}
+                                                                </FormDescription>
+                                                            </div>
+                                                        </FormItem>
+                                                    </RadioGroup>
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    {maintenanceModeType === "forced" && (
+                                        <Alert variant={"neutral"}>
+                                            <AlertCircle className="h-4 w-4" />
+                                            <AlertDescription>
+                                                {t("forcedeModeWarning")}
+                                            </AlertDescription>
+                                        </Alert>
+                                    )}
+
+                                    <FormField
+                                        control={maintenanceForm.control}
+                                        name="maintenanceTitle"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t("pageTitle")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        {...field}
+                                                        disabled={isSecurityFeatureDisabled()}
+                                                        placeholder="We'll be back soon!"
+                                                    />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t("pageTitleDescription")}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <FormField
+                                        control={maintenanceForm.control}
+                                        name="maintenanceMessage"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t(
+                                                        "maintenancePageMessage"
+                                                    )}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Textarea
+                                                        {...field}
+                                                        rows={4}
+                                                        disabled={isSecurityFeatureDisabled()}
+                                                        placeholder={t(
+                                                            "maintenancePageMessagePlaceholder"
+                                                        )}
+                                                    />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t(
+                                                        "maintenancePageMessageDescription"
+                                                    )}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <FormField
+                                        control={maintenanceForm.control}
+                                        name="maintenanceEstimatedTime"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t(
+                                                        "maintenancePageTimeTitle"
+                                                    )}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        {...field}
+                                                        disabled={isSecurityFeatureDisabled()}
+                                                        placeholder={t(
+                                                            "maintenanceTime"
+                                                        )}
+                                                    />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t(
+                                                        "maintenanceEstimatedTimeDescription"
+                                                    )}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </div>
+                            )}
+                        </form>
+                    </Form>
+                </SettingsSectionForm>
+            </SettingsSectionBody>
+
+            <SettingsSectionFooter>
+                <Button
+                    type="submit"
+                    loading={maintenanceSaveLoading}
+                    disabled={maintenanceSaveLoading}
+                    form="maintenance-settings-form"
+                >
+                    {t("saveSettings")}
+                </Button>
+            </SettingsSectionFooter>
+        </SettingsSection>
+    );
+}
 
 export default function GeneralForm() {
     const params = useParams();
@@ -68,8 +425,6 @@ export default function GeneralForm() {
     const router = useRouter();
     const t = useTranslations();
     const [editDomainOpen, setEditDomainOpen] = useState(false);
-    const { isUnlocked } = useLicenseStatusContext();
-    const subscription = useSubscriptionStatusContext();
 
     const { env } = useEnvContext();
 
@@ -94,14 +449,6 @@ export default function GeneralForm() {
         baseDomain: string;
     } | null>(null);
 
-    // Check if security features are disabled due to licensing/subscription
-    const isSecurityFeatureDisabled = () => {
-        const isEnterpriseNotLicensed = build === "enterprise" && !isUnlocked();
-        const isSaasNotSubscribed =
-            build === "saas" && !subscription?.isSubscribed();
-        return isEnterpriseNotLicensed || isSaasNotSubscribed;
-    };
-
     const GeneralFormSchema = z
         .object({
             enabled: z.boolean(),
@@ -109,12 +456,7 @@ export default function GeneralForm() {
             name: z.string().min(1).max(255),
             niceId: z.string().min(1).max(255).optional(),
             domainId: z.string().optional(),
-            proxyPort: z.number().int().min(1).max(65535).optional(),
-            maintenanceModeEnabled: z.boolean().optional(),
-            maintenanceModeType: z.enum(["forced", "automatic"]).optional(),
-            maintenanceTitle: z.string().max(255).optional(),
-            maintenanceMessage: z.string().max(2000).optional(),
-            maintenanceEstimatedTime: z.string().max(100).optional()
+            proxyPort: z.number().int().min(1).max(65535).optional()
         })
         .refine(
             (data) => {
@@ -143,22 +485,11 @@ export default function GeneralForm() {
             niceId: resource.niceId,
             subdomain: resource.subdomain ? resource.subdomain : undefined,
             domainId: resource.domainId || undefined,
-            proxyPort: resource.proxyPort || undefined,
-            maintenanceModeEnabled: resource.maintenanceModeEnabled || false,
-            maintenanceModeType: resource.maintenanceModeType || "automatic",
-            maintenanceTitle:
-                resource.maintenanceTitle || "We'll be back soon!",
-            maintenanceMessage:
-                resource.maintenanceMessage ||
-                "We are currently performing scheduled maintenance. Please check back soon.",
-            maintenanceEstimatedTime: resource.maintenanceEstimatedTime || ""
+            proxyPort: resource.proxyPort || undefined
         },
         mode: "onChange"
     });
 
-    const isMaintenanceEnabled = form.watch("maintenanceModeEnabled");
-    const maintenanceModeType = form.watch("maintenanceModeType");
-
     const [, formAction, saveLoading] = useActionState(onSubmit, null);
 
     async function onSubmit() {
@@ -178,13 +509,7 @@ export default function GeneralForm() {
                         ? toASCII(data.subdomain)
                         : undefined,
                     domainId: data.domainId,
-                    proxyPort: data.proxyPort,
-                    maintenanceModeEnabled: data.maintenanceModeEnabled,
-                    maintenanceModeType: data.maintenanceModeType,
-                    maintenanceTitle: data.maintenanceTitle || null,
-                    maintenanceMessage: data.maintenanceMessage || null,
-                    maintenanceEstimatedTime:
-                        data.maintenanceEstimatedTime || null
+                    proxyPort: data.proxyPort
                 }
             )
             .catch((e) => {
@@ -208,12 +533,7 @@ export default function GeneralForm() {
                 subdomain: data.subdomain,
                 fullDomain: updated.fullDomain,
                 proxyPort: data.proxyPort,
-                domainId: data.domainId,
-                maintenanceModeEnabled: data.maintenanceModeEnabled,
-                maintenanceModeType: data.maintenanceModeType,
-                maintenanceTitle: data.maintenanceTitle || null,
-                maintenanceMessage: data.maintenanceMessage || null,
-                maintenanceEstimatedTime: data.maintenanceEstimatedTime || null
+                domainId: data.domainId
             });
 
             toast({
@@ -337,8 +657,11 @@ export default function GeneralForm() {
                                                             <Input
                                                                 type="number"
                                                                 value={
-                                                                    field.value !== undefined
-                                                                        ? String(field.value)
+                                                                    field.value !==
+                                                                    undefined
+                                                                        ? String(
+                                                                              field.value
+                                                                          )
                                                                         : ""
                                                                 }
                                                                 onChange={(e) =>
@@ -388,239 +711,6 @@ export default function GeneralForm() {
                                             </div>
                                         </div>
                                     )}
-
-                                    <PaidFeaturesAlert></PaidFeaturesAlert>
-                                    <FormField
-                                        control={form.control}
-                                        name="maintenanceModeEnabled"
-                                        render={({ field }) => {
-                                            const isDisabled =
-                                                isSecurityFeatureDisabled();
-
-                                            return (
-                                                <FormItem>
-                                                    <div className="flex items-center space-x-2">
-                                                        <FormControl>
-                                                            <TooltipProvider>
-                                                                <Tooltip>
-                                                                    <TooltipTrigger
-                                                                        asChild
-                                                                    >
-                                                                        <div className="flex items-center gap-2">
-                                                                            <SwitchInput
-                                                                                id="enable-maintenance"
-                                                                                checked={
-                                                                                    field.value
-                                                                                }
-                                                                                label={t(
-                                                                                    "enableMaintenanceMode"
-                                                                                )}
-                                                                                disabled={
-                                                                                    isDisabled
-                                                                                }
-                                                                                onCheckedChange={(
-                                                                                    val
-                                                                                ) => {
-                                                                                    if (
-                                                                                        !isDisabled
-                                                                                    ) {
-                                                                                        form.setValue(
-                                                                                            "maintenanceModeEnabled",
-                                                                                            val
-                                                                                        );
-                                                                                    }
-                                                                                }}
-                                                                            />
-                                                                        </div>
-                                                                    </TooltipTrigger>
-                                                                </Tooltip>
-                                                            </TooltipProvider>
-                                                        </FormControl>
-                                                    </div>
-                                                    <FormDescription>
-                                                        {t(
-                                                            "showMaintenancePage"
-                                                        )}
-                                                    </FormDescription>
-                                                    <FormMessage />
-                                                </FormItem>
-                                            );
-                                        }}
-                                    />
-
-                                    {isMaintenanceEnabled && (
-                                        <div className="space-y-4">
-                                            <FormField
-                                                control={form.control}
-                                                name="maintenanceModeType"
-                                                render={({ field }) => (
-                                                    <FormItem className="space-y-3">
-                                                        <FormLabel>
-                                                            {t(
-                                                                "maintenanceModeType"
-                                                            )}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <RadioGroup
-                                                                onValueChange={
-                                                                    field.onChange
-                                                                }
-                                                                defaultValue={
-                                                                    field.value
-                                                                }
-                                                                disabled={isSecurityFeatureDisabled()}
-                                                                className="flex flex-col space-y-1"
-                                                            >
-                                                                <FormItem className="flex items-start space-x-3 space-y-0">
-                                                                    <FormControl>
-                                                                        <RadioGroupItem value="automatic" />
-                                                                    </FormControl>
-                                                                    <div className="space-y-1 leading-none">
-                                                                        <FormLabel className="font-normal">
-                                                                            <strong>
-                                                                                {t(
-                                                                                    "automatic"
-                                                                                )}
-                                                                            </strong>{" "}
-                                                                            (
-                                                                            {t(
-                                                                                "recommended"
-                                                                            )}
-                                                                            )
-                                                                        </FormLabel>
-                                                                        <FormDescription>
-                                                                            {t(
-                                                                                "automaticModeDescription"
-                                                                            )}
-                                                                        </FormDescription>
-                                                                    </div>
-                                                                </FormItem>
-                                                                <FormItem className="flex items-start space-x-3 space-y-0">
-                                                                    <FormControl>
-                                                                        <RadioGroupItem value="forced" />
-                                                                    </FormControl>
-                                                                    <div className="space-y-1 leading-none">
-                                                                        <FormLabel className="font-normal">
-                                                                            <strong>
-                                                                                {t(
-                                                                                    "forced"
-                                                                                )}
-                                                                            </strong>
-                                                                        </FormLabel>
-                                                                        <FormDescription>
-                                                                            {t(
-                                                                                "forcedModeDescription"
-                                                                            )}
-                                                                        </FormDescription>
-                                                                    </div>
-                                                                </FormItem>
-                                                            </RadioGroup>
-                                                        </FormControl>
-                                                        <FormMessage />
-                                                    </FormItem>
-                                                )}
-                                            />
-
-                                            {maintenanceModeType ===
-                                                "forced" && (
-                                                <Alert>
-                                                    <AlertCircle className="h-4 w-4" />
-                                                    <AlertDescription>
-                                                        <strong>
-                                                            {t("warning:")}
-                                                        </strong>{" "}
-                                                        {t(
-                                                            "forcedeModeWarning"
-                                                        )}
-                                                    </AlertDescription>
-                                                </Alert>
-                                            )}
-
-                                            <FormField
-                                                control={form.control}
-                                                name="maintenanceTitle"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <FormLabel>
-                                                            {t("pageTitle")}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <Input
-                                                                {...field}
-                                                                disabled={isSecurityFeatureDisabled()}
-                                                                placeholder="We'll be back soon!"
-                                                            />
-                                                        </FormControl>
-                                                        <FormDescription>
-                                                            {t(
-                                                                "pageTitleDescription"
-                                                            )}
-                                                        </FormDescription>
-                                                        <FormMessage />
-                                                    </FormItem>
-                                                )}
-                                            />
-
-                                            <FormField
-                                                control={form.control}
-                                                name="maintenanceMessage"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <FormLabel>
-                                                            {t(
-                                                                "maintenancePageMessage"
-                                                            )}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <Textarea
-                                                                {...field}
-                                                                rows={4}
-                                                                disabled={isSecurityFeatureDisabled()}
-                                                                placeholder={t(
-                                                                    "maintenancePageMessagePlaceholder"
-                                                                )}
-                                                            />
-                                                        </FormControl>
-                                                        <FormDescription>
-                                                            {t(
-                                                                "maintenancePageMessageDescription"
-                                                            )}
-                                                        </FormDescription>
-                                                        <FormMessage />
-                                                    </FormItem>
-                                                )}
-                                            />
-
-                                            <FormField
-                                                control={form.control}
-                                                name="maintenanceEstimatedTime"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <FormLabel>
-                                                            {t(
-                                                                "maintenancePageTimeTitle"
-                                                            )}
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <Input
-                                                                {...field}
-                                                                disabled={isSecurityFeatureDisabled()}
-                                                                placeholder={t(
-                                                                    "maintenanceTime"
-                                                                )}
-                                                            />
-                                                        </FormControl>
-                                                        <FormDescription>
-                                                            {t(
-                                                                "maintenanceEstimatedTimeDescription"
-                                                            )}
-                                                        </FormDescription>
-                                                        <FormMessage />
-                                                    </FormItem>
-                                                )}
-                                            />
-                                        </div>
-                                    )}
                                 </form>
                             </Form>
                         </SettingsSectionForm>
@@ -637,6 +727,13 @@ export default function GeneralForm() {
                         </Button>
                     </SettingsSectionFooter>
                 </SettingsSection>
+
+                {build !== "oss" && (
+                    <MaintenanceSectionForm
+                        resource={resource}
+                        updateResource={updateResource}
+                    />
+                )}
             </SettingsContainer>
 
             <Credenza