standardize and fix branding on new resources auth pages

src/app/rdp/RdpClient.tsx

@@ -22,7 +22,8 @@ import {
     CardTitle,
     CardDescription
 } from "@app/components/ui/card";
-import Link from "next/link";
+import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
+import PoweredByPangolin from "@app/components/PoweredByPangolin";
 
 declare module "react" {
     namespace JSX {
@@ -60,10 +61,12 @@ const isIronError = (error: unknown): error is IronError => {
 
 export default function RdpClient({
     target,
-    error
+    error,
+    primaryColor
 }: {
     target: GetBrowserTargetResponse | null;
     error: string | null;
+    primaryColor?: string | null;
 }) {
     const STORAGE_KEY = "pangolin_rdp_credentials";
 
@@ -315,20 +318,8 @@ export default function RdpClient({
 
     if (error) {
         return (
-            <div>
-                <div className="text-center mb-2">
-                    <span className="text-sm text-muted-foreground">
-                        Powered by{" "}
-                        <Link
-                            href="https://pangolin.net/"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="underline"
-                        >
-                            Pangolin
-                        </Link>
-                    </span>
-                </div>
+            <BrandedAuthSurface primaryColor={primaryColor}>
+                <PoweredByPangolin />
                 <Card className="w-full">
                     <CardHeader>
                         <CardTitle>RDP</CardTitle>
@@ -337,27 +328,15 @@ export default function RdpClient({
                         <p className="text-destructive text-sm">{error}</p>
                     </CardContent>
                 </Card>
-            </div>
+            </BrandedAuthSurface>
         );
     }
 
     return (
         <>
             {showLogin && (
-                <div>
-                    <div className="text-center mb-2">
-                        <span className="text-sm text-muted-foreground">
-                            Powered by{" "}
-                            <Link
-                                href="https://pangolin.net/"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="underline"
-                            >
-                                Pangolin
-                            </Link>
-                        </span>
-                    </div>
+                <BrandedAuthSurface primaryColor={primaryColor}>
+                    <PoweredByPangolin />
                     <Card className="w-full">
                         <CardHeader>
                             <CardTitle>Sign in to Remote Desktop</CardTitle>
@@ -441,7 +420,7 @@ export default function RdpClient({
                             </div>
                         </CardContent>
                     </Card>
-                </div>
+                </BrandedAuthSurface>
             )}
 
             <div

src/app/rdp/page.tsx

@@ -1,5 +1,6 @@
 import { generateBrowserGatewayMetadata } from "@app/lib/browserGatewayMetadata";
 import { getBrowserTargetForRequest } from "@app/lib/getBrowserTargetForRequest";
+import { loadOrgLoginPageBranding } from "@app/lib/loadOrgLoginPageBranding";
 import RdpClient from "./RdpClient";
 import AuthFooter from "@app/components/AuthFooter";
 
@@ -12,12 +13,19 @@ export async function generateMetadata() {
 export default async function RdpPage() {
     const { target } = await getBrowserTargetForRequest();
     const error = target ? null : "No resource found for this domain";
+    const { primaryColor } = target
+        ? await loadOrgLoginPageBranding(target.orgId)
+        : { primaryColor: null };
 
     return (
         <div className="h-full flex flex-col">
             <div className="flex-1 flex md:items-center justify-center">
                 <div className="w-full max-w-md p-3">
-                    <RdpClient target={target} error={error} />
+                    <RdpClient
+                        target={target}
+                        error={error}
+                        primaryColor={primaryColor}
+                    />
                 </div>
             </div>
             <AuthFooter />