mirror of
https://github.com/fosrl/pangolin.git
synced 2026-06-10 17:43:15 +00:00
standardize and fix branding on new resources auth pages
This commit is contained in:
miloschwartz
@@ -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
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -20,6 +20,8 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
||||
import type { SignSshKeyResponse } from "@server/routers/ssh/types";
|
||||
import { useTranslations } from "next-intl";
|
||||
import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
|
||||
import PoweredByPangolin from "@app/components/PoweredByPangolin";
|
||||
|
||||
type AuthTab = "password" | "privateKey";
|
||||
|
||||
@@ -40,12 +42,14 @@ export default function SshClient({
|
||||
target,
|
||||
error,
|
||||
signedKeyData,
|
||||
privateKey: signedPrivateKey
|
||||
privateKey: signedPrivateKey,
|
||||
primaryColor
|
||||
}: {
|
||||
target: GetBrowserTargetResponse | null;
|
||||
error: string | null;
|
||||
signedKeyData?: SignSshKeyResponse | null;
|
||||
privateKey?: string | null;
|
||||
primaryColor?: string | null;
|
||||
}) {
|
||||
const STORAGE_KEY = "pangolin_ssh_credentials";
|
||||
|
||||
@@ -377,20 +381,8 @@ export default function SshClient({
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div>
|
||||
<div className="text-center mb-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("sshPoweredBy")}{" "}
|
||||
<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>{t("sshTitle")}</CardTitle>
|
||||
@@ -399,27 +391,15 @@ export default function SshClient({
|
||||
<p className="text-destructive text-sm">{error}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</BrandedAuthSurface>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{!connected && (
|
||||
<div>
|
||||
<div className="text-center mb-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("sshPoweredBy")}{" "}
|
||||
<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>{t("sshSignInTitle")}</CardTitle>
|
||||
@@ -496,10 +476,10 @@ export default function SshClient({
|
||||
href="https://docs.pangolin.net/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline inline-flex items-center gap-1"
|
||||
className="text-primary hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
{t("sshLearnMore")}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
</p>
|
||||
<Field
|
||||
@@ -573,7 +553,7 @@ export default function SshClient({
|
||||
</HorizontalTabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</BrandedAuthSurface>
|
||||
)}
|
||||
|
||||
{connected && (
|
||||
|
||||
@@ -2,6 +2,7 @@ import { headers } from "next/headers";
|
||||
import { priv } from "@app/lib/api";
|
||||
import { generateBrowserGatewayMetadata } from "@app/lib/browserGatewayMetadata";
|
||||
import { getBrowserTargetForRequest } from "@app/lib/getBrowserTargetForRequest";
|
||||
import { loadOrgLoginPageBranding } from "@app/lib/loadOrgLoginPageBranding";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { GetBrowserTargetResponse } from "@server/routers/browserGatewayTarget";
|
||||
import SshClient from "./SshClient";
|
||||
@@ -154,6 +155,10 @@ export default async function SshPage() {
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
@@ -163,6 +168,7 @@ export default async function SshPage() {
|
||||
error={error}
|
||||
signedKeyData={signedKeyData}
|
||||
privateKey={privateKey}
|
||||
primaryColor={primaryColor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,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";
|
||||
|
||||
type FormState = {
|
||||
password: string;
|
||||
@@ -21,10 +22,12 @@ type FormState = {
|
||||
|
||||
export default function VncClient({
|
||||
target,
|
||||
error
|
||||
error,
|
||||
primaryColor
|
||||
}: {
|
||||
target: GetBrowserTargetResponse | null;
|
||||
error: string | null;
|
||||
primaryColor?: string | null;
|
||||
}) {
|
||||
const STORAGE_KEY = "pangolin_vnc_credentials";
|
||||
|
||||
@@ -152,20 +155,8 @@ export default function VncClient({
|
||||
|
||||
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>VNC</CardTitle>
|
||||
@@ -174,27 +165,15 @@ export default function VncClient({
|
||||
<p className="text-destructive text-sm">{error}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</BrandedAuthSurface>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{!connected && (
|
||||
<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>VNC</CardTitle>
|
||||
@@ -224,7 +203,7 @@ export default function VncClient({
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</BrandedAuthSurface>
|
||||
)}
|
||||
|
||||
<div
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { generateBrowserGatewayMetadata } from "@app/lib/browserGatewayMetadata";
|
||||
import { getBrowserTargetForRequest } from "@app/lib/getBrowserTargetForRequest";
|
||||
import { loadOrgLoginPageBranding } from "@app/lib/loadOrgLoginPageBranding";
|
||||
import VncClient from "./VncClient";
|
||||
import AuthFooter from "@app/components/AuthFooter";
|
||||
|
||||
@@ -12,12 +13,19 @@ export async function generateMetadata() {
|
||||
export default async function VncPage() {
|
||||
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">
|
||||
<VncClient target={target} error={error} />
|
||||
<VncClient
|
||||
target={target}
|
||||
error={error}
|
||||
primaryColor={primaryColor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<AuthFooter />
|
||||
|
||||
26
src/components/BrandedAuthSurface.tsx
Normal file
26
src/components/BrandedAuthSurface.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
|
||||
|
||||
type BrandedAuthSurfaceProps = {
|
||||
primaryColor?: string | null;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function BrandedAuthSurface({
|
||||
primaryColor,
|
||||
children
|
||||
}: BrandedAuthSurfaceProps) {
|
||||
const { isUnlocked } = useLicenseStatusContext();
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
// @ts-expect-error CSS variable
|
||||
"--primary": isUnlocked() ? primaryColor : null
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -14,9 +14,10 @@ import {
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { replacePlaceholder } from "@app/lib/replacePlaceholder";
|
||||
import PoweredByPangolin from "@app/components/PoweredByPangolin";
|
||||
import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { pullEnv } from "@app/lib/pullEnv";
|
||||
import { build } from "@server/build";
|
||||
|
||||
type OrgLoginPageProps = {
|
||||
loginPage: LoadLoginPageResponse | undefined;
|
||||
@@ -52,22 +53,8 @@ export default async function OrgLoginPage({
|
||||
const env = pullEnv();
|
||||
const t = await getTranslations();
|
||||
return (
|
||||
<div>
|
||||
{build !== "enterprise" || !env.branding.hidePoweredBy ? (
|
||||
<div className="text-center mb-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("poweredBy")}{" "}
|
||||
<Link
|
||||
href="https://pangolin.net/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
{env.branding.appName || "Pangolin"}
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
<BrandedAuthSurface primaryColor={branding?.primaryColor ?? null}>
|
||||
<PoweredByPangolin />
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
{branding?.logoUrl && (
|
||||
@@ -127,6 +114,6 @@ export default async function OrgLoginPage({
|
||||
{t("loginBack")}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</BrandedAuthSurface>
|
||||
);
|
||||
}
|
||||
|
||||
53
src/components/PoweredByPangolin.tsx
Normal file
53
src/components/PoweredByPangolin.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { build } from "@server/build";
|
||||
|
||||
function PoweredByLabel({ brandName }: { brandName: string }) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<div className="text-center mb-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("poweredBy")}{" "}
|
||||
{brandName === "Pangolin" ? (
|
||||
<Link
|
||||
href="https://pangolin.net/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
Pangolin
|
||||
</Link>
|
||||
) : (
|
||||
brandName
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PoweredByPangolin() {
|
||||
const { env } = useEnvContext();
|
||||
const { isUnlocked } = useLicenseStatusContext();
|
||||
|
||||
if (isUnlocked() && build === "enterprise") {
|
||||
if (
|
||||
env.branding.resourceAuthPage?.hidePoweredBy ||
|
||||
env.branding.hidePoweredBy
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<PoweredByLabel
|
||||
brandName={env.branding.appName || "Pangolin"}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <PoweredByLabel brandName="Pangolin" />;
|
||||
}
|
||||
@@ -41,8 +41,9 @@ import {
|
||||
} from "@app/actions/server";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import Link from "next/link";
|
||||
import BrandingLogo from "@app/components/BrandingLogo";
|
||||
import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
|
||||
import PoweredByPangolin from "@app/components/PoweredByPangolin";
|
||||
import { useSupporterStatusContext } from "@app/hooks/useSupporterStatusContext";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { build } from "@server/build";
|
||||
@@ -366,57 +367,20 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
: 100;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
// @ts-expect-error CSS variable
|
||||
"--primary": isUnlocked() ? props.branding?.primaryColor : null
|
||||
}}
|
||||
>
|
||||
<BrandedAuthSurface primaryColor={props.branding?.primaryColor}>
|
||||
{!accessDenied ? (
|
||||
<div>
|
||||
{isUnlocked() && build === "enterprise" ? (
|
||||
!env.branding.resourceAuthPage?.hidePoweredBy &&
|
||||
!env.branding.hidePoweredBy && (
|
||||
<div className="text-center mb-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("poweredBy")}{" "}
|
||||
<Link
|
||||
href="https://pangolin.net/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
{env.branding.appName || "Pangolin"}
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="text-center mb-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("poweredBy")}{" "}
|
||||
<Link
|
||||
href="https://pangolin.net/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
Pangolin
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<PoweredByPangolin />
|
||||
<Card>
|
||||
<CardHeader>
|
||||
{isUnlocked() &&
|
||||
build !== "oss" &&
|
||||
(env.branding?.resourceAuthPage?.showLogo ||
|
||||
props.branding) && (
|
||||
props.branding?.logoUrl && (
|
||||
<div className="flex flex-row items-center justify-center mb-3">
|
||||
<BrandingLogo
|
||||
height={logoHeight}
|
||||
width={logoWidth}
|
||||
logoPath={props.branding?.logoUrl}
|
||||
logoPath={props.branding.logoUrl}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -790,6 +754,6 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
|
||||
) : (
|
||||
<ResourceAccessDenied />
|
||||
)}
|
||||
</div>
|
||||
</BrandedAuthSurface>
|
||||
);
|
||||
}
|
||||
|
||||
31
src/lib/loadOrgLoginPageBranding.ts
Normal file
31
src/lib/loadOrgLoginPageBranding.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { priv } from "@app/lib/api";
|
||||
import { isOrgSubscribed } from "@app/lib/api/isOrgSubscribed";
|
||||
import { build } from "@server/build";
|
||||
import { LoadLoginPageBrandingResponse } from "@server/routers/loginPage/types";
|
||||
import { AxiosResponse } from "axios";
|
||||
|
||||
export async function loadOrgLoginPageBranding(orgId: string): Promise<{
|
||||
primaryColor: string | null;
|
||||
}> {
|
||||
if (build === "oss") {
|
||||
return { primaryColor: null };
|
||||
}
|
||||
|
||||
const subscribed = await isOrgSubscribed(orgId);
|
||||
if (!subscribed) {
|
||||
return { primaryColor: null };
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await priv.get<
|
||||
AxiosResponse<LoadLoginPageBrandingResponse>
|
||||
>(`/login-page-branding?orgId=${orgId}`);
|
||||
if (res.status === 200) {
|
||||
return { primaryColor: res.data.data.primaryColor ?? null };
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
||||
return { primaryColor: null };
|
||||
}
|
||||
Reference in New Issue
Block a user