✨apply branding to org auth page

src/app/auth/(private)/org/page.tsx

@@ -9,7 +9,10 @@ import { LoginFormIDP } from "@app/components/LoginForm";
 import { ListOrgIdpsResponse } from "@server/routers/orgIdp/types";
 import { build } from "@server/build";
 import { headers } from "next/headers";
-import { LoadLoginPageResponse } from "@server/routers/loginPage/types";
+import {
+    LoadLoginPageBrandingResponse,
+    LoadLoginPageResponse
+} from "@server/routers/loginPage/types";
 import IdpLoginButtons from "@app/components/private/IdpLoginButtons";
 import {
     Card,
@@ -26,6 +29,7 @@ import ValidateSessionTransferToken from "@app/components/private/ValidateSessio
 import { GetOrgTierResponse } from "@server/routers/billing/types";
 import { TierId } from "@server/lib/billing/tiers";
 import { getCachedSubscription } from "@app/lib/api/getCachedSubscription";
+import { replacePlaceholder } from "@app/lib/replacePlaceholder";
 
 export const dynamic = "force-dynamic";
 
@@ -33,7 +37,6 @@ export default async function OrgAuthPage(props: {
     params: Promise<{}>;
     searchParams: Promise<{ token?: string }>;
 }) {
-    const params = await props.params;
     const searchParams = await props.searchParams;
 
     const env = pullEnv();
@@ -122,12 +125,10 @@ export default async function OrgAuthPage(props: {
 
     let loginIdps: LoginFormIDP[] = [];
     if (build === "saas") {
-        const idpsRes = await cache(
-            async () =>
-                await priv.get<AxiosResponse<ListOrgIdpsResponse>>(
-                    `/org/${loginPage!.orgId}/idp`
-                )
-        )();
+        const idpsRes = await priv.get<AxiosResponse<ListOrgIdpsResponse>>(
+            `/org/${loginPage.orgId}/idp`
+        );
+
         loginIdps = idpsRes.data.data.idps.map((idp) => ({
             idpId: idp.idpId,
             name: idp.name,
@@ -135,6 +136,16 @@ export default async function OrgAuthPage(props: {
         })) as LoginFormIDP[];
     }
 
+    let branding: LoadLoginPageBrandingResponse | null = null;
+    try {
+        const res = await priv.get<
+            AxiosResponse<LoadLoginPageBrandingResponse>
+        >(`/login-page-branding?orgId=${loginPage.orgId}`);
+        if (res.status === 200) {
+            branding = res.data.data;
+        }
+    } catch (error) {}
+
     return (
         <div>
             <div className="text-center mb-2">
@@ -152,11 +163,30 @@ export default async function OrgAuthPage(props: {
             </div>
             <Card className="shadow-md w-full max-w-md">
                 <CardHeader>
-                    <CardTitle>{t("orgAuthSignInTitle")}</CardTitle>
+                    {branding?.logoUrl && (
+                        <div className="flex flex-row items-center justify-center mb-3">
+                            <img
+                                src={branding.logoUrl}
+                                height={branding.logoHeight}
+                                width={branding.logoWidth}
+                            />
+                        </div>
+                    )}
+                    <CardTitle>
+                        {branding?.orgTitle
+                            ? replacePlaceholder(branding.orgTitle, {
+                                  orgName: branding.orgName
+                              })
+                            : t("orgAuthSignInTitle")}
+                    </CardTitle>
                     <CardDescription>
-                        {loginIdps.length > 0
-                            ? t("orgAuthChooseIdpDescription")
-                            : ""}
+                        {branding?.orgSubtitle
+                            ? replacePlaceholder(branding.orgSubtitle, {
+                                  orgName: branding.orgName
+                              })
+                            : loginIdps.length > 0
+                              ? t("orgAuthChooseIdpDescription")
+                              : ""}
                     </CardDescription>
                 </CardHeader>
                 <CardContent>

src/components/ResourceAuthPortal.tsx

@@ -48,6 +48,7 @@ import { useTranslations } from "next-intl";
 import { build } from "@server/build";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import type { GetLoginPageBrandingResponse } from "@server/routers/loginPage/types";
+import { replacePlaceholder } from "@app/lib/replacePlaceholder";
 
 const pinSchema = z.object({
     pin: z
@@ -329,24 +330,6 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
         }
     }
 
-    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 (
             build !== "oss" &&
@@ -399,7 +382,7 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
     return (
         <div
             style={{
-                // @ts-expect-error
+                // @ts-expect-error CSS variable
                 "--primary": isUnlocked() ? props.branding?.primaryColor : null
             }}
         >

src/lib/replacePlaceholder.ts

@@ -0,0 +1,17 @@
+export 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;
+}