From 8f152bdf9f789473d05f182831b97cd87c590bb3 Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Sat, 15 Nov 2025 02:38:46 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8add=20primary=20color=20branding=20to?=
 =?UTF-8?q?=20the=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 messages/en-US.json                           |  1 +
 .../loginPage/upsertLoginPageBranding.ts      |  6 ++-
 src/components/AuthPageBrandingForm.tsx       | 43 ++++++++++++++++++-
 src/components/ResourceAuthPortal.tsx         |  7 ++-
 4 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index 2531350e..e43610f3 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1743,6 +1743,7 @@
     "authPageBrandingQuestionRemove": "Are you sure you want to remove the branding for Auth Pages ?",
     "authPageBrandingDeleteConfirm": "Confirm Delete Branding",
     "brandingLogoURL": "Logo URL",
+    "brandingPrimaryColor": "Primary Color",
     "brandingLogoWidth": "Width (px)",
     "brandingLogoHeight": "Height (px)",
     "brandingOrgTitle": "Title for Organization Auth Page",
diff --git a/server/private/routers/loginPage/upsertLoginPageBranding.ts b/server/private/routers/loginPage/upsertLoginPageBranding.ts
index 1f5908dc..495c15fc 100644
--- a/server/private/routers/loginPage/upsertLoginPageBranding.ts
+++ b/server/private/routers/loginPage/upsertLoginPageBranding.ts
@@ -43,7 +43,11 @@ const bodySchema = z
         resourceTitle: z.string(),
         resourceSubtitle: z.string().optional(),
         orgTitle: z.string().optional(),
-        orgSubtitle: z.string().optional()
+        orgSubtitle: z.string().optional(),
+        primaryColor: z
+            .string()
+            .regex(/^#([0-9a-f]{6}|[0-9a-f]{3})$/i)
+            .optional()
     })
     .strict();
 
diff --git a/src/components/AuthPageBrandingForm.tsx b/src/components/AuthPageBrandingForm.tsx
index 7460b067..580215fc 100644
--- a/src/components/AuthPageBrandingForm.tsx
+++ b/src/components/AuthPageBrandingForm.tsx
@@ -76,7 +76,11 @@ const AuthPageFormSchema = z.object({
     orgTitle: z.string().optional(),
     orgSubtitle: z.string().optional(),
     resourceTitle: z.string(),
-    resourceSubtitle: z.string().optional()
+    resourceSubtitle: z.string().optional(),
+    primaryColor: z
+        .string()
+        .regex(/^#([0-9a-f]{6}|[0-9a-f]{3})$/i)
+        .optional()
 });
 
 export default function AuthPageBrandingForm({
@@ -114,7 +118,8 @@ export default function AuthPageBrandingForm({
                 `Authenticate to access {{resourceName}}`,
             resourceSubtitle:
                 branding?.resourceSubtitle ??
-                `Choose your preferred authentication method for {{resourceName}}`
+                `Choose your preferred authentication method for {{resourceName}}`,
+            primaryColor: branding?.primaryColor ?? `#f36117` // default pangolin primary color
         }
     });
 
@@ -204,6 +209,40 @@ export default function AuthPageBrandingForm({
                                 id="auth-page-branding-form"
                                 className="flex flex-col gap-8 items-stretch"
                             >
+                                <FormField
+                                    control={form.control}
+                                    name="primaryColor"
+                                    render={({ field }) => (
+                                        <FormItem className="">
+                                            <FormLabel>
+                                                {t("brandingPrimaryColor")}
+                                            </FormLabel>
+
+                                            <div className="flex items-center gap-2">
+                                                <label
+                                                    className="size-8 rounded-sm"
+                                                    aria-hidden="true"
+                                                    style={{
+                                                        backgroundColor:
+                                                            field.value
+                                                    }}
+                                                >
+                                                    <input
+                                                        type="color"
+                                                        {...field}
+                                                        className="sr-only"
+                                                    />
+                                                </label>
+                                                <FormControl>
+                                                    <Input {...field} />
+                                                </FormControl>
+                                            </div>
+
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+
                                 <div className="grid md:grid-cols-5 gap-3 items-start">
                                     <FormField
                                         control={form.control}
diff --git a/src/components/ResourceAuthPortal.tsx b/src/components/ResourceAuthPortal.tsx
index 33e2292f..56acc967 100644
--- a/src/components/ResourceAuthPortal.tsx
+++ b/src/components/ResourceAuthPortal.tsx
@@ -390,7 +390,12 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
         : 100;
 
     return (
-        <div>
+        <div
+            style={{
+                // @ts-expect-error
+                "--primary": isUnlocked() ? props.branding?.primaryColor : null
+            }}
+        >
             {!accessDenied ? (
                 <div>
                     {isUnlocked() && build === "enterprise" ? (