pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-15 09:26:40 +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

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>