calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-28 22:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

add banners

Browse Source
This commit is contained in:
miloschwartz
2025-12-18 17:47:54 -05:00
parent d8b662496b
commit fc924f707c
12 changed files with 373 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
messages/en-US.json
View File

@@ -51,6 +51,9 @@
"siteQuestionRemove": "Are you sure you want to remove the site from the organization?",
"siteManageSites": "Manage Sites",
"siteDescription": "Create and manage sites to enable connectivity to private networks",
"sitesBannerTitle": "Connect Any Network",
"sitesBannerDescription": "A site is a connection to a remote network that allows Pangolin to provide access to resources, whether public or private, to users anywhere. Install the site network connector (Newt) anywhere you can run a binary or container to establish the connection.",
"sitesBannerButtonText": "Install Site",
"siteCreate": "Create Site",
"siteCreateDescription2": "Follow the steps below to create and connect a new site",
"siteCreateDescription": "Create a new site to start connecting resources",
@@ -147,8 +150,12 @@
"shareErrorSelectResource": "Please select a resource",
"proxyResourceTitle": "Manage Public Resources",
"proxyResourceDescription": "Create and manage resources that are publicly accessible through a web browser",
"proxyResourcesBannerTitle": "Web-based Public Access",
"proxyResourcesBannerDescription": "Public resources are HTTPS or TCP/UDP proxies accessible to anyone on the internet through a web browser. Unlike private resources, they do not require client-side software and can include identity and context-aware access policies.",
"clientResourceTitle": "Manage Private Resources",
"clientResourceDescription": "Create and manage resources that are only accessible through a connected client",
"privateResourcesBannerTitle": "Zero-Trust Private Access",
"privateResourcesBannerDescription": "Private resources use zero-trust security, ensuring users and machines can only access resources you explicitly grant. Connect user devices or machine clients to access these resources over a secure virtual private network.",
"resourcesSearch": "Search resources...",
"resourceAdd": "Add Resource",
"resourceErrorDelte": "Error deleting resource",
@@ -1944,8 +1951,15 @@
"beta": "Beta",
"manageUserDevices": "User Devices",
"manageUserDevicesDescription": "View and manage devices that users use to privately connect to resources",
"downloadClientBannerTitle": "Download Pangolin Client",
"downloadClientBannerDescription": "Download the Pangolin client for your system to connect to the Pangolin network and access resources privately",
"manageMachineClients": "Manage Machine Clients",
"manageMachineClientsDescription": "Create and manage clients that servers and systems use to privately connect to resources",
"machineClientsBannerTitle": "Servers & Automated Systems",
"machineClientsBannerDescription": "Machine clients are for servers and automated systems that are not associated with a specific user. They authenticate with an ID and secret, and can run with Pangolin CLI, Olm CLI, or Olm as a container.",
"machineClientsBannerPangolinCLI": "Pangolin CLI",
"machineClientsBannerOlmCLI": "Olm CLI",
"machineClientsBannerOlmContainer": "Olm Container",
"clientsTableUserClients": "User",
"clientsTableMachineClients": "Machine",
"licenseTableValidUntil": "Valid Until",

3
src/app/[orgId]/settings/clients/machine/page.tsx
View File

@@ -1,6 +1,7 @@
import type { ClientRow } from "@app/components/MachineClientsTable";
import MachineClientsTable from "@app/components/MachineClientsTable";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import MachineClientsBanner from "@app/components/MachineClientsBanner";
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import { ListClientsResponse } from "@server/routers/client";
@@ -71,6 +72,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
description={t("manageMachineClientsDescription")}
/>
<MachineClientsBanner orgId={params.orgId} />
<MachineClientsTable
machineClients={machineClientRows}
orgId={params.orgId}

3
src/app/[orgId]/settings/resources/client/page.tsx
View File

@@ -1,6 +1,7 @@
import type { InternalResourceRow } from "@app/components/ClientResourcesTable";
import ClientResourcesTable from "@app/components/ClientResourcesTable";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import PrivateResourcesBanner from "@app/components/PrivateResourcesBanner";
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import { getCachedOrg } from "@app/lib/api/getCachedOrg";
@@ -81,6 +82,8 @@ export default async function ClientResourcesPage(
description={t("clientResourceDescription")}
/>
<PrivateResourcesBanner orgId={params.orgId} />
<OrgProvider org={org}>
<ClientResourcesTable
internalResources={internalResourceRows}

3
src/app/[orgId]/settings/resources/proxy/page.tsx
View File

@@ -1,6 +1,7 @@
import type { ResourceRow } from "@app/components/ProxyResourcesTable";
import ProxyResourcesTable from "@app/components/ProxyResourcesTable";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import ProxyResourcesBanner from "@app/components/ProxyResourcesBanner";
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import OrgProvider from "@app/providers/OrgProvider";
@@ -97,6 +98,8 @@ export default async function ProxyResourcesPage(
description={t("proxyResourceDescription")}
/>
<ProxyResourcesBanner />
<OrgProvider org={org}>
<ProxyResourcesTable
resources={resourceRows}

3
src/app/[orgId]/settings/sites/page.tsx
View File

@@ -4,6 +4,7 @@ import { ListSitesResponse } from "@server/routers/site";
import { AxiosResponse } from "axios";
import SitesTable, { SiteRow } from "../../../../components/SitesTable";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import SitesBanner from "@app/components/SitesBanner";
import SitesSplashCard from "../../../../components/SitesSplashCard";
import { getTranslations } from "next-intl/server";
@@ -67,6 +68,8 @@ export default async function SitesPage(props: SitesPageProps) {
description={t("siteDescription")}
/>
<SitesBanner />
<SitesTable sites={siteRows} orgId={params.orgId} />
</>
);

69
src/components/ClientDownloadBanner.tsx Normal file
View File

@@ -0,0 +1,69 @@
"use client";
import React from "react";
import { Button } from "@app/components/ui/button";
import { Download } from "lucide-react";
import { FaApple, FaWindows, FaLinux } from "react-icons/fa";
import { useTranslations } from "next-intl";
import Link from "next/link";
import DismissableBanner from "./DismissableBanner";
export const ClientDownloadBanner = () => {
const t = useTranslations();
return (
<DismissableBanner
storageKey="client-download-banner-dismissed"
version={1}
title={t("downloadClientBannerTitle")}
titleIcon={<Download className="w-5 h-5 text-primary" />}
description={t("downloadClientBannerDescription")}
>
<Link
href="https://pangolin.net/downloads/mac"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant="outline"
size="sm"
className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
>
<FaApple className="w-4 h-4" />
Mac
</Button>
</Link>
<Link
href="https://pangolin.net/downloads/windows"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant="outline"
size="sm"
className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
>
<FaWindows className="w-4 h-4" />
Windows
</Button>
</Link>
<Link
href="https://pangolin.net/downloads/linux"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant="outline"
size="sm"
className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
>
<FaLinux className="w-4 h-4" />
Linux
</Button>
</Link>
</DismissableBanner>
);
};
export default ClientDownloadBanner;

98
src/components/DismissableBanner.tsx Normal file
View File

@@ -0,0 +1,98 @@
"use client";
import React, { useState, useEffect, type ReactNode } from "react";
import { Card, CardContent } from "@app/components/ui/card";
import { X } from "lucide-react";
import { useTranslations } from "next-intl";
type DismissableBannerProps = {
storageKey: string;
version: number;
title: string;
titleIcon: ReactNode;
description: string;
children?: ReactNode;
};
export const DismissableBanner = ({
storageKey,
version,
title,
titleIcon,
description,
children
}: DismissableBannerProps) => {
const [isDismissed, setIsDismissed] = useState(true);
const t = useTranslations();
useEffect(() => {
const dismissedData = localStorage.getItem(storageKey);
if (dismissedData) {
try {
const parsed = JSON.parse(dismissedData);
// If version matches, use the dismissed state
if (parsed.version === version) {
setIsDismissed(parsed.dismissed);
} else {
// Version changed, show the banner again
setIsDismissed(false);
}
} catch {
// If parsing fails, check for old format (just "true" string)
if (dismissedData === "true") {
// Old format, show banner again for new version
setIsDismissed(false);
} else {
setIsDismissed(true);
}
}
} else {
setIsDismissed(false);
}
}, [storageKey, version]);
const handleDismiss = () => {
setIsDismissed(true);
localStorage.setItem(
storageKey,
JSON.stringify({ dismissed: true, version })
);
};
if (isDismissed) {
return null;
}
return (
<Card className="mb-6 relative border-primary/30 bg-gradient-to-br from-primary/10 via-background to-background overflow-hidden">
<button
onClick={handleDismiss}
className="absolute top-3 right-3 z-10 p-1.5 rounded-md hover:bg-background/80 transition-colors"
aria-label={t("dismiss")}
>
<X className="w-4 h-4 text-muted-foreground" />
</button>
<CardContent className="p-6">
<div className="flex flex-col lg:flex-row lg:items-center gap-6">
<div className="flex-1 space-y-2 min-w-0">
<h3 className="text-lg font-semibold flex items-center gap-2">
{titleIcon}
{title}
</h3>
<p className="text-sm text-muted-foreground max-w-4xl">
{description}
</p>
</div>
{children && (
<div className="flex flex-wrap gap-3 lg:flex-shrink-0 lg:justify-end">
{children}
</div>
)}
</div>
</CardContent>
</Card>
);
};
export default DismissableBanner;

60
src/components/MachineClientsBanner.tsx Normal file
View File

@@ -0,0 +1,60 @@
"use client";
import React from "react";
import { Button } from "@app/components/ui/button";
import { Server, Terminal, Container } from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import DismissableBanner from "./DismissableBanner";
type MachineClientsBannerProps = {
orgId: string;
};
export const MachineClientsBanner = ({
orgId
}: MachineClientsBannerProps) => {
const t = useTranslations();
return (
<DismissableBanner
storageKey="machine-clients-banner-dismissed"
version={1}
title={t("machineClientsBannerTitle")}
titleIcon={<Server className="w-5 h-5 text-primary" />}
description={t("machineClientsBannerDescription")}
>
<Link
href="https://docs.pangolin.net/manage/clients/install-client#pangolin-cli-linux"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant="outline"
size="sm"
className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
>
<Terminal className="w-4 h-4" />
{t("machineClientsBannerPangolinCLI")}
</Button>
</Link>
<Link
href="https://docs.pangolin.net/manage/clients/install-client#docker"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant="outline"
size="sm"
className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
>
<Container className="w-4 h-4" />
{t("machineClientsBannerOlmContainer")}
</Button>
</Link>
</DismissableBanner>
);
};
export default MachineClientsBanner;

54
src/components/PrivateResourcesBanner.tsx Normal file
View File

@@ -0,0 +1,54 @@
"use client";
import React from "react";
import { Button } from "@app/components/ui/button";
import { Shield, ArrowRight, Laptop, Server } from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import DismissableBanner from "./DismissableBanner";
type PrivateResourcesBannerProps = {
orgId: string;
};
export const PrivateResourcesBanner = ({
orgId
}: PrivateResourcesBannerProps) => {
const t = useTranslations();
return (
<DismissableBanner
storageKey="private-resources-banner-dismissed"
version={1}
title={t("privateResourcesBannerTitle")}
titleIcon={<Shield className="w-5 h-5 text-primary" />}
description={t("privateResourcesBannerDescription")}
>
<Link href={`/${orgId}/settings/clients/user`}>
<Button
variant="outline"
size="sm"
className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
>
<Laptop className="w-4 h-4" />
{t("sidebarUserDevices")}
<ArrowRight className="w-4 h-4" />
</Button>
</Link>
<Link href={`/${orgId}/settings/clients/machine`}>
<Button
variant="outline"
size="sm"
className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
>
<Server className="w-4 h-4" />
{t("sidebarMachineClients")}
<ArrowRight className="w-4 h-4" />
</Button>
</Link>
</DismissableBanner>
);
};
export default PrivateResourcesBanner;

23
src/components/ProxyResourcesBanner.tsx Normal file
View File

@@ -0,0 +1,23 @@
"use client";
import React from "react";
import { Globe } from "lucide-react";
import { useTranslations } from "next-intl";
import DismissableBanner from "./DismissableBanner";
export const ProxyResourcesBanner = () => {
const t = useTranslations();
return (
<DismissableBanner
storageKey="proxy-resources-banner-dismissed"
version={1}
title={t("proxyResourcesBannerTitle")}
titleIcon={<Globe className="w-5 h-5 text-primary" />}
description={t("proxyResourcesBannerDescription")}
/>
);
};
export default ProxyResourcesBanner;

40
src/components/SitesBanner.tsx Normal file
View File

@@ -0,0 +1,40 @@
"use client";
import React from "react";
import { Button } from "@app/components/ui/button";
import { Plug, ArrowRight } from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import DismissableBanner from "./DismissableBanner";
export const SitesBanner = () => {
const t = useTranslations();
return (
<DismissableBanner
storageKey="sites-banner-dismissed"
version={1}
title={t("sitesBannerTitle")}
titleIcon={<Plug className="w-5 h-5 text-primary" />}
description={t("sitesBannerDescription")}
>
<Link
href="https://docs.pangolin.net/manage/sites/install-site"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant="outline"
size="sm"
className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
>
{t("sitesBannerButtonText")}
<ArrowRight className="w-4 h-4" />
</Button>
</Link>
</DismissableBanner>
);
};
export default SitesBanner;

3
src/components/UserDevicesTable.tsx
View File

@@ -25,6 +25,7 @@ import { useRouter } from "next/navigation";
import { useMemo, useState, useTransition } from "react";
import { Badge } from "./ui/badge";
import { InfoPopup } from "./ui/info-popup";
import ClientDownloadBanner from "./ClientDownloadBanner";
export type ClientRow = {
id: number;
@@ -413,6 +414,8 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
/>
)}
<ClientDownloadBanner />
<DataTable
columns={columns}
data={userClients || []}