calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-03 08:39:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ apply auth branding to resource auth page

Browse Source
This commit is contained in:
Fred KISSIE
2025-11-13 03:24:47 +01:00
parent 228481444f
commit 4beed9d464
5 changed files with 99 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
server/private/routers/loginPage/upsertLoginPageBranding.ts
View File

@@ -38,8 +38,8 @@ const paramsSchema = z
const bodySchema = z
.object({
logoUrl: z.string().url(),
logoWidth: z.number().min(1),
logoHeight: z.number().min(1),
logoWidth: z.coerce.number().min(1),
logoHeight: z.coerce.number().min(1),
title: z.string(),
subtitle: z.string().optional(),
resourceTitle: z.string(),

23
src/app/auth/resource/[resourceGuid]/page.tsx
View File

@@ -19,7 +19,10 @@ import { ListOrgIdpsResponse } from "@server/routers/orgIdp/types";
import AutoLoginHandler from "@app/components/AutoLoginHandler";
import { build } from "@server/build";
import { headers } from "next/headers";
import { GetLoginPageResponse } from "@server/routers/loginPage/types";
import {
GetLoginPageBrandingResponse,
GetLoginPageResponse
} from "@server/routers/loginPage/types";
import { GetOrgTierResponse } from "@server/routers/billing/types";
import { TierId } from "@server/lib/billing/tiers";
import { CheckOrgUserAccessResponse } from "@server/routers/org";
@@ -261,6 +264,23 @@ export default async function ResourceAuthPage(props: {
}
}
let loginPageBranding: Omit<
GetLoginPageBrandingResponse,
"loginPageBrandingId"
> | null = null;
try {
const res = await internal.get<
AxiosResponse<GetLoginPageBrandingResponse>
>(
`/org/${authInfo.orgId}/login-page-branding`,
await authCookieHeader()
);
if (res.status === 200) {
const { loginPageBrandingId, ...rest } = res.data.data;
loginPageBranding = rest;
}
} catch (error) {}
return (
<>
{userIsUnauthorized && isSSOOnly ? (
@@ -283,6 +303,7 @@ export default async function ResourceAuthPage(props: {
redirect={redirectUrl}
idps={loginIdps}
orgId={build === "saas" ? authInfo.orgId : undefined}
branding={loginPageBranding}
/>
</div>
)}

10
src/components/AuthPageBrandingForm.tsx
View File

@@ -69,8 +69,8 @@ const AuthPageFormSchema = z.object({
message: "Invalid logo URL, must be a valid image URL"
}
),
logoWidth: z.number().min(1),
logoHeight: z.number().min(1),
logoWidth: z.coerce.number().min(1),
logoHeight: z.coerce.number().min(1),
title: z.string(),
subtitle: z.string().optional(),
resourceTitle: z.string(),
@@ -102,8 +102,8 @@ export default function AuthPageBrandingForm({
resolver: zodResolver(AuthPageFormSchema),
defaultValues: {
logoUrl: branding?.logoUrl ?? "",
logoWidth: branding?.logoWidth ?? 500,
logoHeight: branding?.logoHeight ?? 500,
logoWidth: branding?.logoWidth ?? 100,
logoHeight: branding?.logoHeight ?? 100,
title: branding?.title ?? `Log in to {{orgName}}`,
subtitle: branding?.subtitle ?? `Log in to {{orgName}}`,
resourceTitle:
@@ -240,7 +240,7 @@ export default function AuthPageBrandingForm({
<FormField
control={form.control}
name="logoWidth"
name="logoHeight"
render={({ field }) => (
<FormItem className="grow">
<FormLabel>

12
src/components/BrandingLogo.tsx
View File

@@ -7,6 +7,7 @@ import Image from "next/image";
import { useEffect, useState } from "react";
type BrandingLogoProps = {
logoPath?: string;
width: number;
height: number;
};
@@ -38,16 +39,17 @@ export default function BrandingLogo(props: BrandingLogoProps) {
if (isUnlocked() && env.branding.logo?.darkPath) {
return env.branding.logo.darkPath;
}
return "/logo/word_mark_white.png";
return "/logo/word_mark_white.png";
}
const path = getPath();
setPath(path);
}, [theme, env]);
setPath(props.logoPath ?? getPath());
}, [theme, env, props.logoPath]);
const Component = props.logoPath ? "img" : Image;
return (
path && (
<Image
<Component
src={path}
alt="Logo"
width={props.width}

75
src/components/ResourceAuthPortal.tsx
View File

@@ -23,7 +23,7 @@ import {
FormLabel,
FormMessage
} from "@/components/ui/form";
import { LockIcon, Binary, Key, User, Send, AtSign } from "lucide-react";
import { LockIcon, Binary, Key, User, Send, AtSign, Regex } from "lucide-react";
import {
InputOTP,
InputOTPGroup,
@@ -88,6 +88,15 @@ type ResourceAuthPortalProps = {
redirect: string;
idps?: LoginFormIDP[];
orgId?: string;
branding?: {
title: string;
logoUrl: string;
logoWidth: number;
logoHeight: number;
subtitle: string | null;
resourceTitle: string;
resourceSubtitle: string | null;
} | null;
};
export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
@@ -104,7 +113,7 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
return colLength;
};
const [numMethods, setNumMethods] = useState(getNumMethods());
const [numMethods] = useState(() => getNumMethods());
const [passwordError, setPasswordError] = useState<string | null>(null);
const [pincodeError, setPincodeError] = useState<string | null>(null);
@@ -309,13 +318,37 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
}
}
function getTitle() {
function replacePlaceholder(
stringWithPlaceholder: string,
data: Record<string, string>
) {
let newString = stringWithPlaceholder;
const keys = Object.keys(data);
for (const key of keys) {
newString = newString.replace(
new RegExp(`{{${key}}}`, "gm"),
data[key]
);
}
return newString;
}
function getTitle(resourceName: string) {
if (
isUnlocked() &&
build !== "oss" &&
env.branding.resourceAuthPage?.titleText
(!!env.branding.resourceAuthPage?.titleText ||
!!props.branding?.resourceTitle)
) {
return env.branding.resourceAuthPage.titleText;
if (props.branding?.resourceTitle) {
return replacePlaceholder(props.branding?.resourceTitle, {
resourceName
});
}
return env.branding.resourceAuthPage?.titleText;
}
return t("authenticationRequired");
}
@@ -324,10 +357,16 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
if (
isUnlocked() &&
build !== "oss" &&
env.branding.resourceAuthPage?.subtitleText
(env.branding.resourceAuthPage?.subtitleText ||
props.branding?.resourceSubtitle)
) {
return env.branding.resourceAuthPage.subtitleText
.split("{{resourceName}}")
if (props.branding?.resourceSubtitle) {
return replacePlaceholder(props.branding?.resourceSubtitle, {
resourceName
});
}
return env.branding.resourceAuthPage?.subtitleText
?.split("{{resourceName}}")
.join(resourceName);
}
return numMethods > 1
@@ -335,8 +374,16 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
: t("authenticationRequest", { name: resourceName });
}
const logoWidth = isUnlocked() ? env.branding.logo?.authPage?.width || 100 : 100;
const logoHeight = isUnlocked() ? env.branding.logo?.authPage?.height || 100 : 100;
const logoWidth = isUnlocked()
? (props.branding?.logoWidth ??
env.branding.logo?.authPage?.width ??
100)
: 100;
const logoHeight = isUnlocked()
? (props.branding?.logoHeight ??
env.branding.logo?.authPage?.height ??
100)
: 100;
return (
<div>
@@ -377,15 +424,19 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
<CardHeader>
{isUnlocked() &&
build !== "oss" &&
env.branding?.resourceAuthPage?.showLogo && (
(env.branding?.resourceAuthPage?.showLogo ||
props.branding) && (
<div className="flex flex-row items-center justify-center mb-3">
<BrandingLogo
height={logoHeight}
width={logoWidth}
logoPath={props.branding?.logoUrl}
/>
</div>
)}
<CardTitle>{getTitle()}</CardTitle>
<CardTitle>
{getTitle(props.resource.name)}
</CardTitle>
<CardDescription>
{getSubtitle(props.resource.name)}
</CardDescription>