feat: Customize login page with logo, brand name, and tagline

apps/dokploy/components/dashboard/settings/whitelabel-form.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { ImageIcon, Loader2 } from "lucide-react";
+import { useTranslation } from "next-i18next";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+
+const whitelabelSchema = z.object({
+	whitelabelLogoUrl: z.string().url("Geçerli bir URL girin").optional().nullable(),
+	whitelabelBrandName: z.string().optional().nullable(),
+	whitelabelTagline: z.string().optional().nullable(),
+});
+
+type WhitelabelForm = z.infer<typeof whitelabelSchema>;
+
+export const WhitelabelForm = () => {
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: settings, refetch, isLoading } = api.settings.getWebServerSettings.useQuery(undefined, {
+		enabled: !isCloud,
+	});
+	const { mutateAsync, isError, error, isLoading: isUpdating } = api.settings.updateWhitelabel.useMutation();
+	const { t } = useTranslation("settings");
+
+	const form = useForm<WhitelabelForm>({
+		resolver: zodResolver(whitelabelSchema),
+		defaultValues: {
+			whitelabelLogoUrl: null,
+			whitelabelBrandName: null,
+			whitelabelTagline: null,
+		},
+	});
+
+	useEffect(() => {
+		if (settings) {
+			form.reset({
+				whitelabelLogoUrl: settings.whitelabelLogoUrl || null,
+				whitelabelBrandName: settings.whitelabelBrandName || null,
+				whitelabelTagline: settings.whitelabelTagline || null,
+			});
+		}
+	}, [settings, form]);
+
+	const onSubmit = async (data: WhitelabelForm) => {
+		try {
+			await mutateAsync({
+				whitelabelLogoUrl: data.whitelabelLogoUrl || null,
+				whitelabelBrandName: data.whitelabelBrandName || null,
+				whitelabelTagline: data.whitelabelTagline || null,
+			});
+			toast.success(t("settings.whitelabel.success"));
+			await refetch();
+		} catch (error) {
+			toast.error(t("settings.whitelabel.error"));
+		}
+	};
+
+	if (isCloud) {
+		return (
+			<div className="w-full">
+				<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
+					<div className="rounded-xl bg-background shadow-md">
+						<CardHeader>
+							<CardTitle className="text-xl flex flex-row gap-2">
+								<ImageIcon className="size-6 text-muted-foreground self-center" />
+								{t("settings.whitelabel.title")}
+							</CardTitle>
+							<CardDescription>
+								{t("settings.whitelabel.description")}
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="space-y-2 py-8 border-t">
+							<AlertBlock type="info">
+								Whitelabel özelliği sadece self-hosted kurulumlarda kullanılabilir.
+							</AlertBlock>
+						</CardContent>
+					</div>
+				</Card>
+			</div>
+		);
+	}
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-5xl mx-auto">
+				<div className="rounded-xl bg-background shadow-md">
+					<CardHeader>
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<ImageIcon className="size-6 text-muted-foreground self-center" />
+							{t("settings.whitelabel.title")}
+						</CardTitle>
+						<CardDescription>
+							{t("settings.whitelabel.description")}
+						</CardDescription>
+					</CardHeader>
+
+					<CardContent className="space-y-2 py-8 border-t">
+						{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[35vh]">
+								<span>{t("settings.common.loading")}</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : (
+							<Form {...form}>
+								<form
+									onSubmit={form.handleSubmit(onSubmit)}
+									className="space-y-6"
+								>
+									<FormField
+										control={form.control}
+										name="whitelabelLogoUrl"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>
+													{t("settings.whitelabel.logoUrl")}
+												</FormLabel>
+												<FormControl>
+													<Input
+														placeholder="https://example.com/logo.png"
+														{...field}
+														value={field.value || ""}
+													/>
+												</FormControl>
+												<FormDescription>
+													{t("settings.whitelabel.logoUrlDescription")}
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={form.control}
+										name="whitelabelBrandName"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>
+													{t("settings.whitelabel.brandName")}
+												</FormLabel>
+												<FormControl>
+													<Input
+														placeholder="Şirket Adı"
+														{...field}
+														value={field.value || ""}
+													/>
+												</FormControl>
+												<FormDescription>
+													{t("settings.whitelabel.brandNameDescription")}
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={form.control}
+										name="whitelabelTagline"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>
+													{t("settings.whitelabel.tagline")}
+												</FormLabel>
+												<FormControl>
+													<Input
+														placeholder="Sloganınız"
+														{...field}
+														value={field.value || ""}
+													/>
+												</FormControl>
+												<FormDescription>
+													{t("settings.whitelabel.taglineDescription")}
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<div className="flex justify-end">
+										<Button
+											type="submit"
+											isLoading={isUpdating}
+											disabled={isUpdating}
+										>
+											{t("settings.common.save")}
+										</Button>
+									</div>
+								</form>
+							</Form>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
+};

apps/dokploy/components/layouts/onboarding-layout.tsx

@@ -4,11 +4,20 @@ import { cn } from "@/lib/utils";
 import { GithubIcon } from "../icons/data-tools-icons";
 import { Logo } from "../shared/logo";
 import { Button } from "../ui/button";
+import { api } from "@/utils/api";
 
 interface Props {
 	children: React.ReactNode;
 }
 export const OnboardingLayout = ({ children }: Props) => {
+	const { data: settings } = api.settings.getWebServerSettings.useQuery(undefined, {
+		refetchOnWindowFocus: false,
+	});
+
+	const brandName = settings?.whitelabelBrandName || "Dokploy";
+	const tagline = settings?.whitelabelTagline || "The Open Source alternative to Netlify, Vercel, Heroku.";
+	const logoUrl = settings?.whitelabelLogoUrl;
+
 	return (
 		<div className="container relative min-h-svh flex-col items-center justify-center flex lg:max-w-none lg:grid lg:grid-cols-2 lg:px-0 w-full">
 			<div className="relative hidden h-full flex-col  p-10 text-primary dark:border-r lg:flex">
@@ -17,14 +26,13 @@ export const OnboardingLayout = ({ children }: Props) => {
 					href="https://dokploy.com"
 					className="relative z-20 flex items-center text-lg font-medium gap-4  text-primary"
 				>
-					<Logo className="size-10" />
-					Dokploy
+					<Logo className="size-10" logoUrl={logoUrl || undefined} />
+					{brandName}
 				</Link>
 				<div className="relative z-20 mt-auto">
 					<blockquote className="space-y-2">
 						<p className="text-lg text-primary">
-							&ldquo;The Open Source alternative to Netlify, Vercel,
-							Heroku.&rdquo;
+							&ldquo;{tagline}&rdquo;
 						</p>
 					</blockquote>
 				</div>

apps/dokploy/components/layouts/side.tsx

@@ -18,6 +18,7 @@ import {
 	Forward,
 	GalleryVerticalEnd,
 	GitBranch,
+	ImageIcon,
 	KeyRound,
 	Loader2,
 	type LucideIcon,
@@ -396,6 +397,15 @@ const MENU: Menu = {
 			// Only enabled for admins in cloud environments
 			isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && isCloud),
 		},
+		{
+			isSingle: true,
+			title: "Whitelabel",
+			url: "/dashboard/settings/whitelabel",
+			icon: ImageIcon,
+			// Only enabled for admins in non-cloud environments
+			isEnabled: ({ auth, isCloud }) =>
+				!!((auth?.role === "owner" || auth?.role === "admin") && !isCloud),
+		},
 	],
 
 	help: [

apps/dokploy/pages/dashboard/settings/whitelabel.tsx

@@ -0,0 +1,78 @@
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import type { GetServerSidePropsContext } from "next";
+import type { ReactElement } from "react";
+import superjson from "superjson";
+import { WhitelabelForm } from "@/components/dashboard/settings/whitelabel-form";
+import { DashboardLayout } from "@/components/layouts/dashboard-layout";
+import { appRouter } from "@/server/api/root";
+import { validateRequest } from "@dokploy/server/lib/auth";
+import { getLocale, serverSideTranslations } from "@/utils/i18n";
+import { IS_CLOUD } from "@dokploy/server";
+
+const Page = () => {
+	return (
+		<div className="w-full">
+			<WhitelabelForm />
+		</div>
+	);
+};
+
+export default Page;
+
+Page.getLayout = (page: ReactElement) => {
+	return <DashboardLayout metaName="Whitelabel">{page}</DashboardLayout>;
+};
+
+export async function getServerSideProps(
+	ctx: GetServerSidePropsContext,
+) {
+	const { req, res } = ctx;
+	const locale = await getLocale(req.cookies);
+
+	if (IS_CLOUD) {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/dashboard/projects",
+			},
+		};
+	}
+
+	const { user, session } = await validateRequest(ctx.req);
+	if (!user) {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/",
+			},
+		};
+	}
+	if (user.role === "member") {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/dashboard/settings/profile",
+			},
+		};
+	}
+
+	const helpers = createServerSideHelpers({
+		router: appRouter,
+		ctx: {
+			req: req as any,
+			res: res as any,
+			db: null as any,
+			session: session as any,
+			user: user as any,
+		},
+		transformer: superjson,
+	});
+	await helpers.settings.getWebServerSettings.prefetch();
+
+	return {
+		props: {
+			trpcState: helpers.dehydrate(),
+			...(await serverSideTranslations(locale, ["settings"])),
+		},
+	};
+};