Merge branch 'develop' of https://github.com/bluewave-labs/checkmate into feat/customcss-status-page

# Conflicts:
#	server/src/api/routes/statusPageRoute.ts

client/src/Hooks/useStatusPageForm.ts

@@ -31,6 +31,7 @@ export const useStatusPageForm = ({
 		const defaults: StatusPageFormData = {
 			companyName: data?.companyName || "",
 			url: data?.url || generateDefaultUrl(),
+			customDomain: data?.customDomain ?? null,
 			timezone: resolveTimezone(data?.timezone),
 			type: data?.type || ["uptime"],
 			color: data?.color || "#13715B",

client/src/Pages/StatusPage/Create/index.tsx

@@ -151,6 +151,11 @@ const CreateStatusPage = () => {
 		fd.append("isPublished", String(data.isPublished));
 		if (data.companyName) fd.append("companyName", data.companyName);
 		if (data.url) fd.append("url", data.url);
+		if (data.customDomain !== undefined && data.customDomain !== null) {
+			fd.append("customDomain", data.customDomain);
+		} else {
+			fd.append("customDomain", "");
+		}
 		if (data.timezone) fd.append("timezone", data.timezone);
 		if (data.color) fd.append("color", data.color);
 		fd.append("showCharts", String(data.showCharts));
@@ -285,6 +290,27 @@ const CreateStatusPage = () => {
 									/>
 								)}
 							/>
+							<Controller
+								name="customDomain"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value ?? ""}
+										fieldLabel={t(
+											"pages.statusPages.form.basicInfo.option.customDomain.label"
+										)}
+										placeholder={t(
+											"pages.statusPages.form.basicInfo.option.customDomain.placeholder"
+										)}
+										helperText={
+											fieldState.error?.message ||
+											t("pages.statusPages.form.basicInfo.option.customDomain.helper")
+										}
+										error={!!fieldState.error}
+									/>
+								)}
+							/>
 						</Stack>
 					}
 				/>

client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx

@@ -8,7 +8,8 @@ import { Settings, ExternalLink } from "lucide-react";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { PUBLIC_STATUS_PAGE_PREFIX, type StatusPage } from "@/Types/StatusPage";
+import { type StatusPage } from "@/Types/StatusPage";
+import { getStatusPagePublicUrl } from "@/Utils/statusPageUrl";
 
 interface HeaderStatusPageControlsProps {
 	isAdmin: boolean;
@@ -50,7 +51,7 @@ export const HeaderStatusPageControls = ({
 						<Typography
 							onClick={() => {
 								window.open(
-									`${PUBLIC_STATUS_PAGE_PREFIX}/${statusPage.url}`,
+									getStatusPagePublicUrl(statusPage),
 									"_blank",
 									"noopener,noreferrer"
 								);

client/src/Pages/StatusPage/Status/index.tsx

@@ -15,6 +15,11 @@ import {
 	type StatusPageResponse,
 	type StatusPageTheme,
 } from "@/Types/StatusPage";
+import {
+	buildStatusPageApiPath,
+	getStatusPagePublicUrl,
+	isCustomDomainHost,
+} from "@/Utils/statusPageUrl";
 import { HeaderStatusPageControls } from "@/Pages/StatusPage/Status/Components/HeaderStatusPageControls";
 import { StatusPageThemeProvider } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
 import {
@@ -68,9 +73,14 @@ const StatusPageView = () => {
 	const isAdmin = useIsAdmin();
 	const location = useLocation();
 
-	const isPublic = location.pathname.startsWith(PUBLIC_STATUS_PAGE_PREFIX);
+	const onCustomDomainHost = isCustomDomainHost();
+	const isPublic =
+		onCustomDomainHost || location.pathname.startsWith(PUBLIC_STATUS_PAGE_PREFIX);
 
-	const apiUrl = url ? `/status-page/${url}?type=uptime&type=infrastructure` : null;
+	const apiUrl = buildStatusPageApiPath({
+		url,
+		useCustomDomain: onCustomDomainHost,
+	});
 
 	const { data, isLoading, error } = useGet<StatusPageResponse>(
 		apiUrl,
@@ -131,7 +141,7 @@ const StatusPageView = () => {
 		);
 	}
 
-	const publicUrl = `${window.location.origin}${PUBLIC_STATUS_PAGE_PREFIX}/${statusPage.url}`;
+	const publicUrl = getStatusPagePublicUrl(statusPage);
 	return (
 		<BasePage
 			loading={isLoading}

client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx

@@ -11,7 +11,9 @@ import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 
-import { PUBLIC_STATUS_PAGE_PREFIX, type StatusPage } from "@/Types/StatusPage";
+import { getStatusPagePublicPath, getStatusPagePublicUrl } from "@/Utils/statusPageUrl";
+
+import { type StatusPage } from "@/Types/StatusPage";
 
 interface StatusPagesTableProps {
 	data: StatusPage[];
@@ -53,8 +55,7 @@ export const StatusPagesTable = ({
 	const handleUrlClick = (e: React.MouseEvent, row: StatusPage) => {
 		if (row.isPublished) {
 			e.stopPropagation();
-			const url = `${PUBLIC_STATUS_PAGE_PREFIX}/${row.url}`;
-			window.open(url, "_blank", "noopener,noreferrer");
+			window.open(getStatusPagePublicUrl(row), "_blank", "noopener,noreferrer");
 		}
 	};
 
@@ -70,7 +71,9 @@ export const StatusPagesTable = ({
 				content: t("pages.statusPages.table.headers.url"),
 				render: (row) => {
 					const content = row.isPublished
-						? `/${row.url}`
+						? row.customDomain
+							? getStatusPagePublicPath(row)
+							: `/${row.url}`
 						: t("pages.statusPages.table.unpublished");
 					return (
 						<Stack

client/src/Routes/index.tsx

@@ -54,8 +54,24 @@ import Logs from "@/Pages/Logs";
 import { ProtectedRoute, RoleProtectedRoute } from "@/Components/routing/RouteProtected";
 
 import CreateMonitor from "@/Pages/CreateMonitor";
+import { isCustomDomainHost } from "@/Utils/statusPageUrl";
 
 const Routes = () => {
+	if (isCustomDomainHost()) {
+		return (
+			<LibRoutes>
+				<Route
+					path="/"
+					element={<Status />}
+				/>
+				<Route
+					path="*"
+					element={<Status />}
+				/>
+			</LibRoutes>
+		);
+	}
+
 	return (
 		<LibRoutes>
 			<Route

client/src/Types/StatusPage.ts

@@ -47,6 +47,7 @@ export interface StatusPage {
 	type: MonitorDisplayType[];
 	companyName: string;
 	url: string;
+	customDomain?: string | null;
 	timezone?: string;
 	color: string;
 	monitors: string[];

client/src/Utils/statusPageUrl.ts

@@ -0,0 +1,89 @@
+import { PUBLIC_STATUS_PAGE_PREFIX, type StatusPage } from "@/Types/StatusPage";
+
+const CLIENT_HOST = import.meta.env.VITE_APP_CLIENT_HOST as string | undefined;
+
+const getClientOriginProtocol = (): string => {
+	const source =
+		CLIENT_HOST || (typeof window !== "undefined" ? window.location.origin : undefined);
+	if (!source) {
+		return "https:";
+	}
+
+	try {
+		return new URL(source).protocol;
+	} catch {
+		return "https:";
+	}
+};
+
+const buildCustomDomainOrigin = (customDomain: string): string =>
+	`${getClientOriginProtocol()}//${customDomain}`;
+
+export const getAppHostname = (): string | null => {
+	const source =
+		CLIENT_HOST || (typeof window !== "undefined" ? window.location.origin : undefined);
+	if (!source) {
+		return null;
+	}
+
+	try {
+		return new URL(source).hostname.toLowerCase();
+	} catch {
+		return null;
+	}
+};
+
+export const isCustomDomainHost = (): boolean => {
+	if (typeof window === "undefined") {
+		return false;
+	}
+
+	const appHostname = getAppHostname();
+	if (!appHostname) {
+		return false;
+	}
+
+	return window.location.hostname.toLowerCase() !== appHostname;
+};
+
+export const getStatusPagePublicPath = (
+	statusPage: Pick<StatusPage, "url" | "customDomain">
+): string => {
+	if (statusPage.customDomain) {
+		return buildCustomDomainOrigin(statusPage.customDomain);
+	}
+
+	return `${PUBLIC_STATUS_PAGE_PREFIX}/${statusPage.url}`;
+};
+
+export const getStatusPagePublicUrl = (
+	statusPage: Pick<StatusPage, "url" | "customDomain">
+): string => {
+	if (statusPage.customDomain) {
+		return buildCustomDomainOrigin(statusPage.customDomain);
+	}
+
+	if (typeof window !== "undefined") {
+		return `${window.location.origin}${PUBLIC_STATUS_PAGE_PREFIX}/${statusPage.url}`;
+	}
+
+	return `${PUBLIC_STATUS_PAGE_PREFIX}/${statusPage.url}`;
+};
+
+export const buildStatusPageApiPath = (options: {
+	url?: string;
+	useCustomDomain?: boolean;
+}): string | null => {
+	const query = "type=uptime&type=infrastructure";
+
+	if (options.useCustomDomain && typeof window !== "undefined") {
+		const domain = encodeURIComponent(window.location.hostname);
+		return `/status-page/resolve?domain=${domain}&${query}`;
+	}
+
+	if (options.url) {
+		return `/status-page/${options.url}?${query}`;
+	}
+
+	return null;
+};

client/src/Validation/statusPage.ts

@@ -9,6 +9,23 @@ import { STATUS_PAGE_THEMES, STATUS_PAGE_THEME_MODES } from "@/Types/StatusPage"
 // field definitions.
 export const statusPageStepRegistry = z.registry<{ step: number }>();
 
+const statusPageHostnameRegex =
+	/^(?=.{1,253}$)([a-zA-Z0-9_](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,63}$/;
+
+const normalizeCustomDomainInput = (raw: string | null): string | null => {
+	if (raw === null) {
+		return null;
+	}
+
+	const trimmed = raw.trim().toLowerCase();
+	if (!trimmed) {
+		return null;
+	}
+
+	const withoutScheme = trimmed.replace(/^https?:\/\//, "");
+	return withoutScheme.split("/")[0]?.split(":")[0] ?? null;
+};
+
 export const statusPageSchema = z.object({
 	companyName: z
 		.string()
@@ -22,6 +39,12 @@ export const statusPageSchema = z.object({
 			/^[a-z0-9-]+$/,
 			"URL can only contain lowercase letters, numbers, and hyphens"
 		),
+	customDomain: z
+		.union([z.string(), z.null()])
+		.transform(normalizeCustomDomainInput)
+		.refine((domain) => domain === null || statusPageHostnameRegex.test(domain), {
+			message: "Enter a valid domain name (e.g. status.example.com)",
+		}),
 	timezone: z.string().optional(),
 	type: z
 		.array(z.enum(["uptime", "infrastructure"]))

client/src/locales/en.json

@@ -1509,6 +1509,11 @@
 						"url": {
 							"label": "Your status page address",
 							"placeholder": "my-status-page"
+						},
+						"customDomain": {
+							"label": "Custom domain",
+							"placeholder": "status.example.com",
+							"helper": "Optional. Point a DNS record to this Checkmate instance to serve the status page at your own domain."
 						}
 					}
 				},