unify subdomain validation schema to handle edge cases

server/lib/schemas.ts

@@ -1,24 +1,19 @@
 import { z } from "zod";
 
-
 export const subdomainSchema = z
     .string()
     .regex(
-        /^[a-z0-9](?:[a-z0-9-]*[a-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")
-    .max(63, "Subdomain must not exceed 63 characters")
     .transform((val) => val.toLowerCase());
 
 export const tlsNameSchema = z
     .string()
     .regex(
-        /^([a-z0-9](?:[a-z0-9-]*[a-z0-9])?)(\.[a-z0-9](?:[a-z0-9-]*[a-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"
-    ).max(253, "Domain must not exceed 253 characters")
-  .refine((val) => {
-    const labels = val.split('.');
-    return labels.every((label) => label.length <= 63);
-  }, "Each part of the domain must not exceed 63 characters")
-    .transform((val) => val.toLowerCase());
+    )
+    .transform((val) => val.toLowerCase());
+

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);
@@ -454,18 +455,27 @@ 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.fullDomain
+                                                .split(".")
+                                                .slice(-2)
+                                                .join(".")}`
+                                            : selectedDomain.fullDomain;
+
+                                        setResourceFullDomain(sanitizedFullDomain);
+                                        form.setValue("domainId", selectedDomain.domainId);
+                                        form.setValue("subdomain", sanitizedSubdomain);
+
                                         setEditDomainOpen(false);
+
+                                        toast({
+                                            title: "Domain sanitized",
+                                            description: `Final domain: ${sanitizedFullDomain}`,
+                                        });
                                     }
                                 }}
                             >

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,127 +261,56 @@ 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 subdomain === "" || (
-                /^[a-zA-Z0-9-]+$/.test(subdomain) &&
-                isValidSubdomainStructure(subdomain)
-            );
-        }
-
-        if (baseDomain.type === "organization") {
-            if (baseDomain.domainType === "cname") {
-                return subdomain === "";
-            } else if (baseDomain.domainType === "ns" || baseDomain.domainType === "wildcard") {
-                // NS and wildcard domains support multi-level subdomains with dots and hyphens
-                return subdomain === "" || (
-                    /^[a-zA-Z0-9-]+$/.test(subdomain) &&
-                    isValidSubdomainStructure(subdomain)
-                );
-            }
-        }
-
-        return false;
-    };
-
-    const sanitizeSubdomain = (input: string): string => {
-        if (!input) return "";
-        return input
-            .toLowerCase()
-            .replace(/[^a-z0-9-]/g, "");
-    };
-
-    const isValidSubdomainStructure = (subdomain: string): boolean => {
-        if (!subdomain) return true;
-
-        // Check for consecutive hyphens
-        if (/--/.test(subdomain)) return false;
-
-        // Check if starts or ends with hyphen
-        if (/^-|-$/.test(subdomain)) return false;
-
-        return true;
-    };
-
-    // Handle base domain selection
-    const handleBaseDomainSelect = (option: DomainOption) => {
-        let sub = subdomainInput;
-
-        if (sub) {
-            const sanitized = sanitizeSubdomain(sub);
-            if (sub !== sanitized) {
-                toast({
-                    title: "Invalid subdomain",
-                    description: `"${sub}" was corrected to "${sanitized}"`,
-                });
-                sub = sanitized;
-                setSubdomainInput(sanitized);
-            }
-
-            if (sanitized && !validateSubdomain(sanitized, option)) {
-                toast({
-                    variant: "destructive",
-                    title: "Invalid subdomain",
-                    description: `"${sanitized}" is not valid for ${option.domain}. Subdomain labels cannot start or end with hyphens.`,
-                });
-                sub = "";
-                setSubdomainInput("");
-            }
-        }
-
-        setSelectedBaseDomain(option);
-        setOpen(false);
-
-        if (option.domainType === "cname") {
-            sub = "";
-            setSubdomainInput("");
-        }
-
-        if (option.type === "provided-search") {
-            setUserInput("");
-            setAvailableOptions([]);
-            setSelectedProvidedDomain(null);
-        }
-
-        const fullDomain = sub ? `${sub}.${option.domain}` : option.domain;
-
-        onDomainChange?.({
-            domainId: option.domainId || "",
-            type: option.type === "provided-search" ? "provided" : "organization",
-            subdomain: sub || undefined,
-            fullDomain,
-            baseDomain: option.domain
-        });
-    };
-
-
-    const handleSubdomainChange = (value: string) => {
-        const sanitized = sanitizeSubdomain(value);
-        setSubdomainInput(sanitized);
-
-        // Only show toast for truly invalid characters, not structure issues
-        if (value !== sanitized) {
+        if (!sanitized) {
             toast({
-                title: "Invalid characters removed",
-                description: `Only letters, numbers, and hyphens are allowed`,
+                variant: "destructive",
+                title: "Invalid subdomain",
+                description: `The input "${sub}" was removed because it's not valid.`,
+            });
+            return "";
+        }
+
+        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 "";
+        }
+
+        if (sub !== sanitized) {
+            toast({
+                title: "Subdomain sanitized",
+                description: `"${sub}" was corrected to "${sanitized}"`,
             });
         }
 
+        return sanitized;
+    };
+
+    const handleSubdomainChange = (value: string) => {
+        const raw = sanitizeInputRaw(value);
+        setSubdomainInput(raw);
+        setSelectedProvidedDomain(null);
+
         if (selectedBaseDomain?.type === "organization") {
-            // Always update the domain, validation will show visual feedback
-            const fullDomain = sanitized
-                ? `${sanitized}.${selectedBaseDomain.domain}`
+            const fullDomain = raw
+                ? `${raw}.${selectedBaseDomain.domain}`
                 : selectedBaseDomain.domain;
 
             onDomainChange?.({
                 domainId: selectedBaseDomain.domainId!,
                 type: "organization",
-                subdomain: sanitized || undefined,
+                subdomain: raw || undefined,
                 fullDomain,
                 baseDomain: selectedBaseDomain.domain
             });
@@ -383,17 +318,7 @@ export default function DomainPicker2({
     };
 
     const handleProvidedDomainInputChange = (value: string) => {
-        const sanitized = sanitizeSubdomain(value);
-        setUserInput(sanitized);
-
-        if (value !== sanitized) {
-            toast({
-                title: "Invalid characters removed",
-                description: `Only letters, numbers, hyphens, and dots are allowed`,
-            });
-        }
-
-        // Clear selected domain when user types
+        setUserInput(value);
         if (selectedProvidedDomain) {
             setSelectedProvidedDomain(null);
             onDomainChange?.({
@@ -406,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);
 
@@ -417,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 && subdomainInput
-        ? validateSubdomain(subdomainInput, selectedBaseDomain)
+        ? validateByDomainType(subdomainInput, {
+            type: selectedBaseDomain.type === "provided-search" ? "provided-search" : "organization",
+            domainType: selectedBaseDomain.domainType
+        })
         : true;
+
     const showSubdomainInput =
         selectedBaseDomain &&
         selectedBaseDomain.type === "organization" &&
@@ -433,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;
     });
@@ -482,11 +443,12 @@ export default function DomainPicker2({
                             }
                         }}
                     />
-                    {showSubdomainInput && subdomainInput && !isSubdomainValid && (
+                    {showSubdomainInput && subdomainInput && !isValidSubdomainStructure(subdomainInput) && (
                         <p className="text-sm text-red-500">
-                            Invalid format. Subdomain cannot start/end with hyphens or dots, and cannot have consecutive dots or hyphens.
+                            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")}

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));
+};
+
+
+