Merge branch 'Pallavikumarimdb-Fix/domain-picker-issue' into dev

2026-02-01 23:59:09 +00:00 · 2025-08-30 15:24:15 -07:00
parent e659f0e75d d9a4f20fe6
commit 9e646ba385
4 changed files with 180 additions and 107 deletions
--- a/server/lib/schemas.ts
+++ b/server/lib/schemas.ts
@@ -3,7 +3,7 @@ import { z } from "zod";
 export const subdomainSchema = z
    .string()
    .regex(
-        /^(?!:\/\/)([a-zA-Z0-9-_]+\.)*[a-zA-Z0-9-_]+$/,
+        /^(?!:\/\/)([a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)*[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/,
        "Invalid subdomain format"
    )
    .min(1, "Subdomain must be at least 1 character long")
@@ -12,7 +12,8 @@ export const subdomainSchema = z
 export const tlsNameSchema = z
    .string()
    .regex(
-        /^(?!:\/\/)([a-zA-Z0-9-_]+\.)*[a-zA-Z0-9-_]+$|^$/,
+        /^(?!:\/\/)([a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)*[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$|^$/,
        "Invalid subdomain format"
    )
-    .transform((val) => val.toLowerCase());
+    .transform((val) => val.toLowerCase());
+
--- a/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
@@ -53,6 +53,7 @@ import {
 import DomainPicker from "@app/components/DomainPicker";
 import { Globe } from "lucide-react";
 import { build } from "@server/build";
+import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";

 export default function GeneralForm() {
    const [formKey, setFormKey] = useState(0);
@@ -85,6 +86,7 @@ export default function GeneralForm() {
        domainId: string;
        subdomain?: string;
        fullDomain: string;
+        baseDomain: string;
    } | null>(null);

    const GeneralFormSchema = z
@@ -441,7 +443,8 @@ export default function GeneralForm() {
                                    const selected = {
                                        domainId: res.domainId,
                                        subdomain: res.subdomain,
-                                        fullDomain: res.fullDomain
+                                        fullDomain: res.fullDomain,
+                                        baseDomain: res.baseDomain
                                    };
                                    setSelectedDomain(selected);
                                }}
@@ -454,18 +457,24 @@ export default function GeneralForm() {
                            <Button
                                onClick={() => {
                                    if (selectedDomain) {
-                                        setResourceFullDomain(
-                                            selectedDomain.fullDomain
-                                        );
-                                        form.setValue(
-                                            "domainId",
-                                            selectedDomain.domainId
-                                        );
-                                        form.setValue(
-                                            "subdomain",
-                                            selectedDomain.subdomain
-                                        );
+                                        const sanitizedSubdomain = selectedDomain.subdomain
+                                            ? finalizeSubdomainSanitize(selectedDomain.subdomain)
+                                            : "";
+
+                                        const sanitizedFullDomain = sanitizedSubdomain
+                                            ? `${sanitizedSubdomain}.${selectedDomain.baseDomain}`
+                                            : selectedDomain.baseDomain;
+
+                                        setResourceFullDomain(sanitizedFullDomain);
+                                        form.setValue("domainId", selectedDomain.domainId);
+                                        form.setValue("subdomain", sanitizedSubdomain);
+
                                        setEditDomainOpen(false);
+
+                                        toast({
+                                            title: "Domain sanitized",
+                                            description: `Final domain: ${sanitizedFullDomain}`,
+                                        });
                                    }
                                }}
                            >
--- a/src/components/DomainPicker.tsx
+++ b/src/components/DomainPicker.tsx
@@ -37,6 +37,12 @@ import { cn } from "@/lib/cn";
 import { useTranslations } from "next-intl";
 import { build } from "@server/build";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+    sanitizeInputRaw,
+    finalizeSubdomainSanitize,
+    validateByDomainType,
+    isValidSubdomainStructure
+} from "@/lib/subdomain-utils";

 type OrganizationDomain = {
    domainId: string;
@@ -255,108 +261,64 @@ export default function DomainPicker2({

    const dropdownOptions = generateDropdownOptions();

-    const validateSubdomain = (
-        subdomain: string,
-        baseDomain: DomainOption
-    ): boolean => {
-        if (!baseDomain) return false;
+    const finalizeSubdomain = (sub: string, base: DomainOption): string => {
+        const sanitized = finalizeSubdomainSanitize(sub);

-        if (baseDomain.type === "provided-search") {
-            return /^[a-zA-Z0-9-]+$/.test(subdomain);
+        if (!sanitized) {
+            toast({
+                variant: "destructive",
+                title: "Invalid subdomain",
+                description: `The input "${sub}" was removed because it's not valid.`,
+            });
+            return "";
        }

-        if (baseDomain.type === "organization") {
-            if (baseDomain.domainType === "cname") {
-                return subdomain === "";
-            } else if (baseDomain.domainType === "ns") {
-                return /^[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/.test(subdomain);
-            } else if (baseDomain.domainType === "wildcard") {
-                return /^[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/.test(subdomain);
-            }
+        const ok = validateByDomainType(sanitized, {
+            type: base.type === "provided-search" ? "provided-search" : "organization",
+            domainType: base.domainType
+        });
+
+        if (!ok) {
+            toast({
+                variant: "destructive",
+                title: "Invalid subdomain",
+                description: `"${sub}" could not be made valid for ${base.domain}.`,
+            });
+            return "";
        }

-        return false;
-    };
-
-    // Handle base domain selection
-    const handleBaseDomainSelect = (option: DomainOption) => {
-        setSelectedBaseDomain(option);
-        setOpen(false);
-
-        if (option.domainType === "cname") {
-            setSubdomainInput("");
-        }
-
-        if (option.type === "provided-search") {
-            setUserInput("");
-            setAvailableOptions([]);
-            setSelectedProvidedDomain(null);
-            onDomainChange?.({
-                domainId: option.domainId!,
-                type: "organization",
-                subdomain: undefined,
-                fullDomain: option.domain,
-                baseDomain: option.domain
+        if (sub !== sanitized) {
+            toast({
+                title: "Subdomain sanitized",
+                description: `"${sub}" was corrected to "${sanitized}"`,
            });
        }

-        if (option.type === "organization") {
-            if (option.domainType === "cname") {
-                onDomainChange?.({
-                    domainId: option.domainId!,
-                    type: "organization",
-                    subdomain: undefined,
-                    fullDomain: option.domain,
-                    baseDomain: option.domain
-                });
-            } else {
-                onDomainChange?.({
-                    domainId: option.domainId!,
-                    type: "organization",
-                    subdomain: undefined,
-                    fullDomain: option.domain,
-                    baseDomain: option.domain
-                });
-            }
-        }
+        return sanitized;
    };

    const handleSubdomainChange = (value: string) => {
-        const validInput = value.replace(/[^a-zA-Z0-9.-]/g, "");
-        setSubdomainInput(validInput);
-
+        const raw = sanitizeInputRaw(value);
+        setSubdomainInput(raw);
        setSelectedProvidedDomain(null);

-        if (selectedBaseDomain && selectedBaseDomain.type === "organization") {
-            const isValid = validateSubdomain(validInput, selectedBaseDomain);
-            if (isValid) {
-                const fullDomain = validInput
-                    ? `${validInput}.${selectedBaseDomain.domain}`
-                    : selectedBaseDomain.domain;
-                onDomainChange?.({
-                    domainId: selectedBaseDomain.domainId!,
-                    type: "organization",
-                    subdomain: validInput || undefined,
-                    fullDomain: fullDomain,
-                    baseDomain: selectedBaseDomain.domain
-                });
-            } else if (validInput === "") {
-                onDomainChange?.({
-                    domainId: selectedBaseDomain.domainId!,
-                    type: "organization",
-                    subdomain: undefined,
-                    fullDomain: selectedBaseDomain.domain,
-                    baseDomain: selectedBaseDomain.domain
-                });
-            }
+        if (selectedBaseDomain?.type === "organization") {
+            const fullDomain = raw
+                ? `${raw}.${selectedBaseDomain.domain}`
+                : selectedBaseDomain.domain;
+
+            onDomainChange?.({
+                domainId: selectedBaseDomain.domainId!,
+                type: "organization",
+                subdomain: raw || undefined,
+                fullDomain,
+                baseDomain: selectedBaseDomain.domain
+            });
        }
    };

    const handleProvidedDomainInputChange = (value: string) => {
-        const validInput = value.replace(/[^a-zA-Z0-9.-]/g, "");
-        setUserInput(validInput);
-
-        // Clear selected domain when user types
+        setUserInput(value);
        if (selectedProvidedDomain) {
            setSelectedProvidedDomain(null);
            onDomainChange?.({
@@ -369,6 +331,38 @@ export default function DomainPicker2({
        }
    };

+    const handleBaseDomainSelect = (option: DomainOption) => {
+        let sub = subdomainInput;
+
+        sub = finalizeSubdomain(sub, option);
+        setSubdomainInput(sub);
+
+        if (option.type === "provided-search") {
+            setUserInput("");
+            setAvailableOptions([]);
+            setSelectedProvidedDomain(null);
+        }
+
+        setSelectedBaseDomain(option);
+        setOpen(false);
+
+        if (option.domainType === "cname") {
+            sub = "";
+            setSubdomainInput("");
+        }
+
+        const fullDomain = sub ? `${sub}.${option.domain}` : option.domain;
+
+        onDomainChange?.({
+            domainId: option.domainId || "",
+            domainNamespaceId: option.domainNamespaceId,
+            type: option.type === "provided-search" ? "provided" : "organization",
+            subdomain: sub || undefined,
+            fullDomain,
+            baseDomain: option.domain
+        });
+    };
+
    const handleProvidedDomainSelect = (option: AvailableOption) => {
        setSelectedProvidedDomain(option);

@@ -380,15 +374,19 @@ export default function DomainPicker2({
            domainId: option.domainId,
            domainNamespaceId: option.domainNamespaceId,
            type: "provided",
-            subdomain: subdomain,
+            subdomain,
            fullDomain: option.fullDomain,
-            baseDomain: baseDomain
+            baseDomain
        });
    };

-    const isSubdomainValid = selectedBaseDomain
-        ? validateSubdomain(subdomainInput, selectedBaseDomain)
+    const isSubdomainValid = selectedBaseDomain && subdomainInput
+        ? validateByDomainType(subdomainInput, {
+            type: selectedBaseDomain.type === "provided-search" ? "provided-search" : "organization",
+            domainType: selectedBaseDomain.domainType
+        })
        : true;
+
    const showSubdomainInput =
        selectedBaseDomain &&
        selectedBaseDomain.type === "organization" &&
@@ -396,7 +394,7 @@ export default function DomainPicker2({
    const showProvidedDomainSearch =
        selectedBaseDomain?.type === "provided-search";

-    const sortedAvailableOptions = availableOptions.sort((a, b) => {
+    const sortedAvailableOptions = [...availableOptions].sort((a, b) => {
        const comparison = a.fullDomain.localeCompare(b.fullDomain);
        return sortOrder === "asc" ? comparison : -comparison;
    });
@@ -434,8 +432,8 @@ export default function DomainPicker2({
                        }
                        className={cn(
                            !isSubdomainValid &&
-                                subdomainInput &&
-                                "border-red-500"
+                            subdomainInput &&
+                            "border-red-500 focus:border-red-500"
                        )}
                        onChange={(e) => {
                            if (showProvidedDomainSearch) {
@@ -445,6 +443,12 @@ export default function DomainPicker2({
                            }
                        }}
                    />
+                    {showSubdomainInput && subdomainInput && !isValidSubdomainStructure(subdomainInput) && (
+                        <p className="text-sm text-red-500">
+                            This subdomain contains invalid characters or structure. It will be sanitized automatically when you save.
+                        </p>
+                    )}
+
                    {showSubdomainInput && !subdomainInput && (
                        <p className="text-sm text-muted-foreground">
                            {t("domainPickerEnterSubdomainOrLeaveBlank")}
--- a/src/lib/subdomain-utils.ts
+++ b/src/lib/subdomain-utils.ts
@@ -0,0 +1,59 @@
+
+export type DomainType = "organization" | "provided" | "provided-search";
+
+export const SINGLE_LABEL_RE = /^[a-z0-9-]+$/i; // provided-search (no dots)
+export const MULTI_LABEL_RE = /^[a-z0-9-]+(\.[a-z0-9-]+)*$/i; // ns/wildcard
+export const SINGLE_LABEL_STRICT_RE = /^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i; // start/end alnum
+
+
+export function sanitizeInputRaw(input: string): string {
+  if (!input) return "";
+  return input.toLowerCase().replace(/[^a-z0-9.-]/g, "");
+}
+
+export function finalizeSubdomainSanitize(input: string): string {
+  if (!input) return "";
+  return input
+    .toLowerCase()
+    .replace(/[^a-z0-9.-]/g, "")   // allow only valid chars
+    .replace(/\.{2,}/g, ".")       // collapse multiple dots
+    .replace(/^-+|-+$/g, "")       // strip leading/trailing hyphens
+    .replace(/^\.+|\.+$/g, "");    // strip leading/trailing dots
+}
+
+
+
+
+export function validateByDomainType(subdomain: string, domainType: { type: "provided-search" | "organization"; domainType?: "ns" | "cname" | "wildcard" } ): boolean {
+  if (!domainType) return false;
+
+  if (domainType.type === "provided-search") {
+    return SINGLE_LABEL_RE.test(subdomain);
+  }
+
+  if (domainType.type === "organization") {
+    if (domainType.domainType === "cname") {
+      return subdomain === "";
+    } else if (domainType.domainType === "ns" || domainType.domainType === "wildcard") {
+      if (subdomain === "") return true;
+      if (!MULTI_LABEL_RE.test(subdomain)) return false;
+      const labels = subdomain.split(".");
+      return labels.every(l => l.length >= 1 && l.length <= 63 && SINGLE_LABEL_RE.test(l));
+    }
+  }
+  return false;
+}
+
+
+
+export const isValidSubdomainStructure = (input: string): boolean => {
+  const regex = /^(?!-)([a-zA-Z0-9-]{1,63})(?<!-)$/;
+
+  if (!input) return false;
+  if (input.includes("..")) return false;
+
+  return input.split(".").every(label => regex.test(label));
+};
+
+
+