mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-25 06:16:40 +00:00
unify subdomain validation schema to handle edge cases
This commit is contained in:
@@ -1,24 +1,19 @@
|
|||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
|
|
||||||
|
|
||||||
export const subdomainSchema = z
|
export const subdomainSchema = z
|
||||||
.string()
|
.string()
|
||||||
.regex(
|
.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"
|
"Invalid subdomain format"
|
||||||
)
|
)
|
||||||
.min(1, "Subdomain must be at least 1 character long")
|
.min(1, "Subdomain must be at least 1 character long")
|
||||||
.max(63, "Subdomain must not exceed 63 characters")
|
|
||||||
.transform((val) => val.toLowerCase());
|
.transform((val) => val.toLowerCase());
|
||||||
|
|
||||||
export const tlsNameSchema = z
|
export const tlsNameSchema = z
|
||||||
.string()
|
.string()
|
||||||
.regex(
|
.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"
|
"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());
|
||||||
|
|
||||||
|
|||||||
@@ -53,6 +53,7 @@ import {
|
|||||||
import DomainPicker from "@app/components/DomainPicker";
|
import DomainPicker from "@app/components/DomainPicker";
|
||||||
import { Globe } from "lucide-react";
|
import { Globe } from "lucide-react";
|
||||||
import { build } from "@server/build";
|
import { build } from "@server/build";
|
||||||
|
import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
|
||||||
|
|
||||||
export default function GeneralForm() {
|
export default function GeneralForm() {
|
||||||
const [formKey, setFormKey] = useState(0);
|
const [formKey, setFormKey] = useState(0);
|
||||||
@@ -454,18 +455,27 @@ export default function GeneralForm() {
|
|||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (selectedDomain) {
|
if (selectedDomain) {
|
||||||
setResourceFullDomain(
|
const sanitizedSubdomain = selectedDomain.subdomain
|
||||||
selectedDomain.fullDomain
|
? finalizeSubdomainSanitize(selectedDomain.subdomain)
|
||||||
);
|
: "";
|
||||||
form.setValue(
|
|
||||||
"domainId",
|
const sanitizedFullDomain = sanitizedSubdomain
|
||||||
selectedDomain.domainId
|
? `${sanitizedSubdomain}.${selectedDomain.fullDomain
|
||||||
);
|
.split(".")
|
||||||
form.setValue(
|
.slice(-2)
|
||||||
"subdomain",
|
.join(".")}`
|
||||||
selectedDomain.subdomain
|
: selectedDomain.fullDomain;
|
||||||
);
|
|
||||||
|
setResourceFullDomain(sanitizedFullDomain);
|
||||||
|
form.setValue("domainId", selectedDomain.domainId);
|
||||||
|
form.setValue("subdomain", sanitizedSubdomain);
|
||||||
|
|
||||||
setEditDomainOpen(false);
|
setEditDomainOpen(false);
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: "Domain sanitized",
|
||||||
|
description: `Final domain: ${sanitizedFullDomain}`,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -37,6 +37,12 @@ import { cn } from "@/lib/cn";
|
|||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { build } from "@server/build";
|
import { build } from "@server/build";
|
||||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||||
|
import {
|
||||||
|
sanitizeInputRaw,
|
||||||
|
finalizeSubdomainSanitize,
|
||||||
|
validateByDomainType,
|
||||||
|
isValidSubdomainStructure
|
||||||
|
} from "@/lib/subdomain-utils";
|
||||||
|
|
||||||
type OrganizationDomain = {
|
type OrganizationDomain = {
|
||||||
domainId: string;
|
domainId: string;
|
||||||
@@ -255,127 +261,56 @@ export default function DomainPicker2({
|
|||||||
|
|
||||||
const dropdownOptions = generateDropdownOptions();
|
const dropdownOptions = generateDropdownOptions();
|
||||||
|
|
||||||
const validateSubdomain = (
|
const finalizeSubdomain = (sub: string, base: DomainOption): string => {
|
||||||
subdomain: string,
|
const sanitized = finalizeSubdomainSanitize(sub);
|
||||||
baseDomain: DomainOption
|
|
||||||
): boolean => {
|
|
||||||
if (!baseDomain) return false;
|
|
||||||
|
|
||||||
if (baseDomain.type === "provided-search") {
|
if (!sanitized) {
|
||||||
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) {
|
|
||||||
toast({
|
toast({
|
||||||
title: "Invalid characters removed",
|
variant: "destructive",
|
||||||
description: `Only letters, numbers, and hyphens are allowed`,
|
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") {
|
if (selectedBaseDomain?.type === "organization") {
|
||||||
// Always update the domain, validation will show visual feedback
|
const fullDomain = raw
|
||||||
const fullDomain = sanitized
|
? `${raw}.${selectedBaseDomain.domain}`
|
||||||
? `${sanitized}.${selectedBaseDomain.domain}`
|
|
||||||
: selectedBaseDomain.domain;
|
: selectedBaseDomain.domain;
|
||||||
|
|
||||||
onDomainChange?.({
|
onDomainChange?.({
|
||||||
domainId: selectedBaseDomain.domainId!,
|
domainId: selectedBaseDomain.domainId!,
|
||||||
type: "organization",
|
type: "organization",
|
||||||
subdomain: sanitized || undefined,
|
subdomain: raw || undefined,
|
||||||
fullDomain,
|
fullDomain,
|
||||||
baseDomain: selectedBaseDomain.domain
|
baseDomain: selectedBaseDomain.domain
|
||||||
});
|
});
|
||||||
@@ -383,17 +318,7 @@ export default function DomainPicker2({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleProvidedDomainInputChange = (value: string) => {
|
const handleProvidedDomainInputChange = (value: string) => {
|
||||||
const sanitized = sanitizeSubdomain(value);
|
setUserInput(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
|
|
||||||
if (selectedProvidedDomain) {
|
if (selectedProvidedDomain) {
|
||||||
setSelectedProvidedDomain(null);
|
setSelectedProvidedDomain(null);
|
||||||
onDomainChange?.({
|
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) => {
|
const handleProvidedDomainSelect = (option: AvailableOption) => {
|
||||||
setSelectedProvidedDomain(option);
|
setSelectedProvidedDomain(option);
|
||||||
|
|
||||||
@@ -417,15 +374,19 @@ export default function DomainPicker2({
|
|||||||
domainId: option.domainId,
|
domainId: option.domainId,
|
||||||
domainNamespaceId: option.domainNamespaceId,
|
domainNamespaceId: option.domainNamespaceId,
|
||||||
type: "provided",
|
type: "provided",
|
||||||
subdomain: subdomain,
|
subdomain,
|
||||||
fullDomain: option.fullDomain,
|
fullDomain: option.fullDomain,
|
||||||
baseDomain: baseDomain
|
baseDomain
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const isSubdomainValid = selectedBaseDomain && subdomainInput
|
const isSubdomainValid = selectedBaseDomain && subdomainInput
|
||||||
? validateSubdomain(subdomainInput, selectedBaseDomain)
|
? validateByDomainType(subdomainInput, {
|
||||||
|
type: selectedBaseDomain.type === "provided-search" ? "provided-search" : "organization",
|
||||||
|
domainType: selectedBaseDomain.domainType
|
||||||
|
})
|
||||||
: true;
|
: true;
|
||||||
|
|
||||||
const showSubdomainInput =
|
const showSubdomainInput =
|
||||||
selectedBaseDomain &&
|
selectedBaseDomain &&
|
||||||
selectedBaseDomain.type === "organization" &&
|
selectedBaseDomain.type === "organization" &&
|
||||||
@@ -433,7 +394,7 @@ export default function DomainPicker2({
|
|||||||
const showProvidedDomainSearch =
|
const showProvidedDomainSearch =
|
||||||
selectedBaseDomain?.type === "provided-search";
|
selectedBaseDomain?.type === "provided-search";
|
||||||
|
|
||||||
const sortedAvailableOptions = availableOptions.sort((a, b) => {
|
const sortedAvailableOptions = [...availableOptions].sort((a, b) => {
|
||||||
const comparison = a.fullDomain.localeCompare(b.fullDomain);
|
const comparison = a.fullDomain.localeCompare(b.fullDomain);
|
||||||
return sortOrder === "asc" ? comparison : -comparison;
|
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">
|
<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>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{showSubdomainInput && !subdomainInput && (
|
{showSubdomainInput && !subdomainInput && (
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
{t("domainPickerEnterSubdomainOrLeaveBlank")}
|
{t("domainPickerEnterSubdomainOrLeaveBlank")}
|
||||||
|
|||||||
59
src/lib/subdomain-utils.ts
Normal file
59
src/lib/subdomain-utils.ts
Normal file
@@ -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));
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user