pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-12 07:56:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into auth-providers

Browse Source
This commit is contained in:
miloschwartz
2025-04-13 14:49:02 -04:00
parent 480a5f648d 8b0c30f19f
commit 7556a59e11
66 changed files with 1874 additions and 2333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/[orgId]/page.tsx
View File

@@ -1,4 +1,3 @@
import ProfileIcon from "@app/components/ProfileIcon";
import { verifySession } from "@app/lib/auth/verifySession";
import UserProvider from "@app/providers/UserProvider";
import { cache } from "react";
@@ -8,6 +7,8 @@ import { internal } from "@app/lib/api";
import { AxiosResponse } from "axios";
import { authCookieHeader } from "@app/lib/api/cookies";
import { redirect } from "next/navigation";
import { Layout } from "@app/components/Layout";
import { orgNavItems } from "../navigation";
type OrgPageProps = {
params: Promise<{ orgId: string }>;
@@ -20,6 +21,10 @@ export default async function OrgPage(props: OrgPageProps) {
const getUser = cache(verifySession);
const user = await getUser();
if (!user) {
redirect("/");
}
let redirectToSettings = false;
let overview: GetOrgOverviewResponse | undefined;
try {
@@ -39,14 +44,11 @@ export default async function OrgPage(props: OrgPageProps) {
}
return (
<>
<div className="p-3">
{user && (
<UserProvider user={user}>
<ProfileIcon />
</UserProvider>
)}
<UserProvider user={user}>
<Layout
orgId={orgId}
navItems={orgNavItems}
>
{overview && (
<div className="w-full max-w-4xl mx-auto md:mt-32 mt-4">
<OrganizationLandingCard
@@ -65,7 +67,7 @@ export default async function OrgPage(props: OrgPageProps) {
/>
</div>
)}
</div>
</>
</Layout>
</UserProvider>
);
}

29
src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx
View File

@@ -1,29 +1,21 @@
"use client";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { SidebarSettings } from "@app/components/SidebarSettings";
type AccessPageHeaderAndNavProps = {
interface AccessPageHeaderAndNavProps {
children: React.ReactNode;
hasInvitations: boolean;
};
}
export default function AccessPageHeaderAndNav({
children,
hasInvitations
}: AccessPageHeaderAndNavProps) {
const sidebarNavItems = [
const navItems = [
{
title: "Users",
href: `/{orgId}/settings/access/users`,
children: hasInvitations
? [
{
title: "Invitations",
href: `/{orgId}/settings/access/invitations`
}
]
: []
href: `/{orgId}/settings/access/users`
},
{
title: "Roles",
@@ -31,6 +23,13 @@ export default function AccessPageHeaderAndNav({
}
];
if (hasInvitations) {
navItems.push({
title: "Invitations",
href: `/{orgId}/settings/access/invitations`
});
}
return (
<>
<SettingsSectionTitle
@@ -38,9 +37,9 @@ export default function AccessPageHeaderAndNav({
description="Invite users and add them to roles to manage access to your organization"
/>
<SidebarSettings sidebarNavItems={sidebarNavItems}>
<HorizontalTabs items={navItems}>
{children}
</SidebarSettings>
</HorizontalTabs>
</>
);
}

86
src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx
View File

@@ -2,21 +2,8 @@
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { DataTable } from "@app/components/ui/data-table";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@@ -27,70 +14,13 @@ export function InvitationsDataTable<TData, TValue>({
columns,
data
}: DataTableProps<TData, TValue>) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
}
});
return (
<div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow key={row.id}>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No invitations found.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
<DataTable
columns={columns}
data={data}
title="Invitations"
searchPlaceholder="Search invitations..."
searchColumn="email"
/>
);
}

17
src/app/[orgId]/settings/access/invitations/page.tsx
View File

@@ -8,6 +8,7 @@ import OrgProvider from "@app/providers/OrgProvider";
import UserProvider from "@app/providers/UserProvider";
import { verifySession } from "@app/lib/auth/verifySession";
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
type InvitationsPageProps = {
params: Promise<{ orgId: string }>;
@@ -72,13 +73,15 @@ export default async function InvitationsPage(props: InvitationsPageProps) {
return (
<>
<AccessPageHeaderAndNav hasInvitations={hasInvitations}>
<UserProvider user={user!}>
<OrgProvider org={org}>
<InvitationsTable invitations={invitationRows} />
</OrgProvider>
</UserProvider>
</AccessPageHeaderAndNav>
<SettingsSectionTitle
title="Open Invitations"
description="Manage your invitations to other users"
/>
<UserProvider user={user!}>
<OrgProvider org={org}>
<InvitationsTable invitations={invitationRows} />
</OrgProvider>
</UserProvider>
</>
);
}

146
src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
View File

@@ -2,149 +2,29 @@
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { Plus, Search } from "lucide-react";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { DataTable } from "@app/components/ui/data-table";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
addRole?: () => void;
createRole?: () => void;
}
export function RolesDataTable<TData, TValue>({
addRole,
columns,
data
data,
createRole
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
return (
<div>
<div className="flex items-center justify-between pb-4">
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search roles"
value={globalFilter ?? ""}
onChange={(e) =>
table.setGlobalFilter(String(e.target.value))
}
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addRole) {
addRole();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Add Role
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No roles. Create a role, then add users to
the it.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
<DataTable
columns={columns}
data={data}
title="Roles"
searchPlaceholder="Search roles..."
searchColumn="name"
onAdd={createRole}
addButtonText="Add Role"
/>
);
}

2
src/app/[orgId]/settings/access/roles/RolesTable.tsx
View File

@@ -131,7 +131,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
<RolesDataTable
columns={columns}
data={roles}
addRole={() => {
createRole={() => {
setIsCreateModalOpen(true);
}}
/>

13
src/app/[orgId]/settings/access/roles/page.tsx
View File

@@ -8,6 +8,7 @@ import { ListRolesResponse } from "@server/routers/role";
import RolesTable, { RoleRow } from "./RolesTable";
import { SidebarSettings } from "@app/components/SidebarSettings";
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
type RolesPageProps = {
params: Promise<{ orgId: string }>;
@@ -64,11 +65,13 @@ export default async function RolesPage(props: RolesPageProps) {
return (
<>
<AccessPageHeaderAndNav hasInvitations={hasInvitations}>
<OrgProvider org={org}>
<RolesTable roles={roleRows} />
</OrgProvider>
</AccessPageHeaderAndNav>
<SettingsSectionTitle
title="Manage Roles"
description="Configure roles to manage access to your organization"
/>
<OrgProvider org={org}>
<RolesTable roles={roleRows} />
</OrgProvider>
</>
);
}

144
src/app/[orgId]/settings/access/users/UsersDataTable.tsx
View File

@@ -2,29 +2,8 @@
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
import { DataTable } from "@app/components/ui/data-table";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@@ -33,118 +12,19 @@ interface DataTableProps<TData, TValue> {
}
export function UsersDataTable<TData, TValue>({
inviteUser,
columns,
data
data,
inviteUser
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
return (
<div>
<div className="flex items-center justify-between pb-4">
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search users"
value={globalFilter ?? ""}
onChange={(e) =>
table.setGlobalFilter(String(e.target.value))
}
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (inviteUser) {
inviteUser();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Invite User
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No Users. Invite one to share access to
resources.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
<DataTable
columns={columns}
data={data}
title="Users"
searchPlaceholder="Search users..."
searchColumn="email"
onAdd={inviteUser}
addButtonText="Invite User"
/>
);
}

39
src/app/[orgId]/settings/access/users/[userId]/layout.tsx
View File

@@ -2,19 +2,19 @@ import { internal } from "@app/lib/api";
import { AxiosResponse } from "axios";
import { redirect } from "next/navigation";
import { authCookieHeader } from "@app/lib/api/cookies";
import { SidebarSettings } from "@app/components/SidebarSettings";
import { GetOrgUserResponse } from "@server/routers/user";
import OrgUserProvider from "@app/providers/OrgUserProvider";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator
} from "@/components/ui/breadcrumb";
} from "@app/components/ui/breadcrumb";
import Link from "next/link";
import { cache } from "react";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
interface UserLayoutProps {
children: React.ReactNode;
@@ -40,7 +40,7 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
redirect(`/${params.orgId}/settings/sites`);
}
const sidebarNavItems = [
const navItems = [
{
title: "Access Controls",
href: "/{orgId}/settings/access/users/{userId}/access-controls"
@@ -49,33 +49,14 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
return (
<>
<SettingsSectionTitle
title={`${user?.email}`}
description="Manage the settings on this user"
/>
<OrgUserProvider orgUser={user}>
<div className="mb-4">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<Link href="../../">Users</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{user.email}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div className="space-y-0.5 mb-6">
<h2 className="text-2xl font-bold tracking-tight">
User {user?.email}
</h2>
<p className="text-muted-foreground">Manage user</p>
</div>
<SidebarSettings
sidebarNavItems={sidebarNavItems}
>
<HorizontalTabs items={navItems}>
{children}
</SidebarSettings>
</HorizontalTabs>
</OrgUserProvider>
</>
);

17
src/app/[orgId]/settings/access/users/page.tsx
View File

@@ -9,6 +9,7 @@ import OrgProvider from "@app/providers/OrgProvider";
import UserProvider from "@app/providers/UserProvider";
import { verifySession } from "@app/lib/auth/verifySession";
import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
type UsersPageProps = {
params: Promise<{ orgId: string }>;
@@ -78,13 +79,15 @@ export default async function UsersPage(props: UsersPageProps) {
return (
<>
<AccessPageHeaderAndNav hasInvitations={hasInvitations}>
<UserProvider user={user!}>
<OrgProvider org={org}>
<UsersTable users={userRows} />
</OrgProvider>
</UserProvider>
</AccessPageHeaderAndNav>
<SettingsSectionTitle
title="Manage Users"
description="Invite users and add them to roles to manage access to your organization"
/>
<UserProvider user={user!}>
<OrgProvider org={org}>
<UsersTable users={userRows} />
</OrgProvider>
</UserProvider>
</>
);
}

8
src/app/[orgId]/settings/general/layout.tsx
View File

@@ -1,7 +1,7 @@
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { SidebarSettings } from "@app/components/SidebarSettings";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import { verifySession } from "@app/lib/auth/verifySession";
import OrgProvider from "@app/providers/OrgProvider";
import OrgUserProvider from "@app/providers/OrgUserProvider";
@@ -57,7 +57,7 @@ export default async function GeneralSettingsPage({
redirect(`/${orgId}`);
}
const sidebarNavItems = [
const navItems = [
{
title: "General",
href: `/{orgId}/settings/general`,
@@ -73,9 +73,9 @@ export default async function GeneralSettingsPage({
description="Configure your organization's general settings"
/>
<SidebarSettings sidebarNavItems={sidebarNavItems}>
<HorizontalTabs items={navItems}>
{children}
</SidebarSettings>
</HorizontalTabs>
</OrgUserProvider>
</OrgProvider>
</>

60
src/app/[orgId]/settings/layout.tsx
View File

@@ -1,5 +1,4 @@
import { Metadata } from "next";
import { TopbarNav } from "@app/components/TopbarNav";
import {
Cog,
Combine,
@@ -8,7 +7,6 @@ import {
Users,
Waypoints
} from "lucide-react";
import { Header } from "@app/components/Header";
import { verifySession } from "@app/lib/auth/verifySession";
import { redirect } from "next/navigation";
import { internal } from "@app/lib/api";
@@ -18,14 +16,9 @@ import { authCookieHeader } from "@app/lib/api/cookies";
import { cache } from "react";
import { GetOrgUserResponse } from "@server/routers/user";
import UserProvider from "@app/providers/UserProvider";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator
} from "@app/components/ui/breadcrumb";
import Link from "next/link";
import { Layout } from "@app/components/Layout";
import { SidebarNavItem, SidebarNavProps } from "@app/components/SidebarNav";
import { orgNavItems } from "@app/app/navigation";
export const dynamic = "force-dynamic";
@@ -34,34 +27,6 @@ export const metadata: Metadata = {
description: ""
};
const topNavItems = [
{
title: "Sites",
href: "/{orgId}/settings/sites",
icon: <Combine className="h-4 w-4" />
},
{
title: "Resources",
href: "/{orgId}/settings/resources",
icon: <Waypoints className="h-4 w-4" />
},
{
title: "Users & Roles",
href: "/{orgId}/settings/access",
icon: <Users className="h-4 w-4" />
},
{
title: "Shareable Links",
href: "/{orgId}/settings/share-links",
icon: <LinkIcon className="h-4 w-4" />
},
{
title: "General",
href: "/{orgId}/settings/general",
icon: <Settings className="h-4 w-4" />
}
];
interface SettingsLayoutProps {
children: React.ReactNode;
params: Promise<{ orgId: string }>;
@@ -109,21 +74,10 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
} catch (e) {}
return (
<>
<div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b">
<div className="container mx-auto flex flex-col content-between">
<div className="my-4 px-3 md:px-0">
<UserProvider user={user}>
<Header orgId={params.orgId} orgs={orgs} />
</UserProvider>
</div>
<TopbarNav items={topNavItems} orgId={params.orgId} />
</div>
</div>
<div className="container mx-auto sm:px-0 px-3 pt-[155px]">
<UserProvider user={user}>
<Layout orgId={params.orgId} orgs={orgs} navItems={orgNavItems}>
{children}
</div>
</>
</Layout>
</UserProvider>
);
}

4
src/app/[orgId]/settings/resources/CreateResourceForm.tsx
View File

@@ -735,7 +735,7 @@ export default function CreateResourceForm({
{showSnippets && (
<div>
<div className="flex items-start space-x-4 mb-6 last:mb-0">
<div className="flex-grow">
<div className="grow">
<h3 className="text-lg font-semibold mb-3">
Traefik: Add Entrypoints
</h3>
@@ -749,7 +749,7 @@ export default function CreateResourceForm({
</div>
<div className="flex items-start space-x-4 mb-6 last:mb-0">
<div className="flex-grow">
<div className="grow">
<h3 className="text-lg font-semibold mb-3">
Gerbil: Expose Ports in
Docker Compose

150
src/app/[orgId]/settings/resources/ResourcesDataTable.tsx
View File

@@ -2,149 +2,29 @@
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table";
import { DataTable } from "@app/components/ui/data-table";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
interface ResourcesDataTableProps<TData, TValue> {
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
addResource?: () => void;
createResource?: () => void;
}
export function ResourcesDataTable<TData, TValue>({
addResource,
columns,
data
}: ResourcesDataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
data,
createResource
}: DataTableProps<TData, TValue>) {
return (
<div>
<div className="flex items-center justify-between pb-4">
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search resources"
value={globalFilter ?? ""}
onChange={(e) =>
table.setGlobalFilter(String(e.target.value))
}
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addResource) {
addResource();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Add Resource
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No resources. Create one to get started.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
<DataTable
columns={columns}
data={data}
title="Resources"
searchPlaceholder="Search resources..."
searchColumn="name"
onAdd={createResource}
addButtonText="Add Resource"
/>
);
}

2
src/app/[orgId]/settings/resources/ResourcesTable.tsx
View File

@@ -327,7 +327,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
<ResourcesDataTable
columns={columns}
data={resources}
addResource={() => {
createResource={() => {
setIsCreateModalOpen(true);
}}
/>

2
src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx
View File

@@ -569,7 +569,7 @@ export default function ReverseProxyTargets(props: {
<Button
type="submit"
variant="outlinePrimary"
className="mt-8"
className="mt-6"
>
Add Target
</Button>

34
src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
View File

@@ -7,7 +7,7 @@ import {
import { AxiosResponse } from "axios";
import { redirect } from "next/navigation";
import { authCookieHeader } from "@app/lib/api/cookies";
import { SidebarSettings } from "@app/components/SidebarSettings";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { GetOrgResponse } from "@server/routers/org";
import OrgProvider from "@app/providers/OrgProvider";
@@ -80,48 +80,30 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
redirect(`/${params.orgId}/settings/resources`);
}
const sidebarNavItems = [
const navItems = [
{
title: "General",
href: `/{orgId}/settings/resources/{resourceId}/general`
// icon: <Settings className="w-4 h-4" />,
},
{
title: "Connectivity",
href: `/{orgId}/settings/resources/{resourceId}/connectivity`
// icon: <Cloud className="w-4 h-4" />,
}
];
if (resource.http) {
sidebarNavItems.push({
navItems.push({
title: "Authentication",
href: `/{orgId}/settings/resources/{resourceId}/authentication`
// icon: <Shield className="w-4 h-4" />,
});
sidebarNavItems.push({
navItems.push({
title: "Rules",
href: `/{orgId}/settings/resources/{resourceId}/rules`
// icon: <Shield className="w-4 h-4" />,
});
}
return (
<>
<div className="mb-4">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<Link href="../">Resources</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{resource.name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<SettingsSectionTitle
title={`${resource?.name} Settings`}
description="Configure the settings on your resource"
@@ -129,10 +111,12 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
<OrgProvider org={org}>
<ResourceProvider resource={resource} authInfo={authInfo}>
<SidebarSettings sidebarNavItems={sidebarNavItems}>
<div className="space-y-6">
<ResourceInfoBox />
{children}
</SidebarSettings>
<HorizontalTabs items={navItems}>
{children}
</HorizontalTabs>
</div>
</ResourceProvider>
</OrgProvider>
</>

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

@@ -693,7 +693,7 @@ export default function ResourceRules(props: {
control={addRuleForm.control}
name="value"
render={({ field }) => (
<FormItem>
<FormItem className="space-y-0 mb-2">
<InfoPopup
text="Value"
info={
@@ -714,6 +714,7 @@ export default function ResourceRules(props: {
<Button
type="submit"
variant="outlinePrimary"
className="mb-2"
disabled={!rulesEnabled}
>
Add Rule

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

@@ -70,7 +70,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
return (
<>
<ResourcesSplashCard />
{/* <ResourcesSplashCard /> */}
<SettingsSectionTitle
title="Manage Resources"

150
src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
View File

@@ -2,149 +2,29 @@
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table";
import { DataTable } from "@app/components/ui/data-table";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
interface ShareLinksDataTableProps<TData, TValue> {
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
addShareLink?: () => void;
createShareLink?: () => void;
}
export function ShareLinksDataTable<TData, TValue>({
addShareLink,
columns,
data
}: ShareLinksDataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
data,
createShareLink
}: DataTableProps<TData, TValue>) {
return (
<div>
<div className="flex items-center justify-between pb-4">
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search links"
value={globalFilter ?? ""}
onChange={(e) =>
table.setGlobalFilter(String(e.target.value))
}
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addShareLink) {
addShareLink();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Create Share Link
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No links. Create one to get started.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
<DataTable
columns={columns}
data={data}
title="Share Links"
searchPlaceholder="Search share links..."
searchColumn="name"
onAdd={createShareLink}
addButtonText="Create Share Link"
/>
);
}

2
src/app/[orgId]/settings/share-links/ShareLinksTable.tsx
View File

@@ -306,7 +306,7 @@ export default function ShareLinksTable({
<ShareLinksDataTable
columns={columns}
data={rows}
addShareLink={() => {
createShareLink={() => {
setIsCreateModalOpen(true);
}}
/>

2
src/app/[orgId]/settings/share-links/page.tsx
View File

@@ -53,7 +53,7 @@ export default async function ShareLinksPage(props: ShareLinksPageProps) {
return (
<>
<ShareableLinksSplash />
{/* <ShareableLinksSplash /> */}
<SettingsSectionTitle
title="Manage Share Links"

146
src/app/[orgId]/settings/sites/SitesDataTable.tsx
View File

@@ -2,149 +2,29 @@
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search } from "lucide-react";
import { DataTable } from "@app/components/ui/data-table";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
addSite?: () => void;
createSite?: () => void;
}
export function SitesDataTable<TData, TValue>({
addSite,
columns,
data
data,
createSite
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters,
globalFilter
}
});
return (
<div>
<div className="flex items-center justify-between pb-4">
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search sites"
value={globalFilter ?? ""}
onChange={(e) =>
table.setGlobalFilter(String(e.target.value))
}
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addSite) {
addSite();
}
}}
>
<Plus className="mr-2 h-4 w-4" /> Add Site
</Button>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No sites. Create one to get started.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
<DataTable
columns={columns}
data={data}
title="Sites"
searchPlaceholder="Search sites..."
searchColumn="name"
onAdd={createSite}
addButtonText="Add Site"
/>
);
}

28
src/app/[orgId]/settings/sites/SitesTable.tsx
View File

@@ -47,7 +47,6 @@ type SitesTableProps = {
export default function SitesTable({ sites, orgId }: SitesTableProps) {
const router = useRouter();
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);
const [rows, setRows] = useState<SiteRow[]>(sites);
@@ -279,29 +278,8 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
}
];
async function test() {
const res = await api
.post("/auth/org/home-lab/idp/1/oidc/generate-url")
.then((res) => {
if (res.data.data.redirectUrl) {
window.location.href = res.data.data.redirectUrl;
}
});
}
return (
<>
<Button onClick={async () => await test()}>Test</Button>
<CreateSiteFormModal
open={isCreateModalOpen}
setOpen={setIsCreateModalOpen}
onCreate={(val) => {
setRows([val, ...rows]);
}}
orgId={orgId}
/>
{selectedSite && (
<ConfirmDeleteDialog
open={isDeleteModalOpen}
@@ -342,9 +320,9 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
<SitesDataTable
columns={columns}
data={rows}
addSite={() => {
router.push(`/${orgId}/settings/sites/create`);
}}
createSite={() =>
router.push(`/${orgId}/settings/sites/create`)
}
/>
</>
);

24
src/app/[orgId]/settings/sites/[niceId]/layout.tsx
View File

@@ -4,7 +4,7 @@ import { GetSiteResponse } from "@server/routers/site";
import { AxiosResponse } from "axios";
import { redirect } from "next/navigation";
import { authCookieHeader } from "@app/lib/api/cookies";
import { SidebarSettings } from "@app/components/SidebarSettings";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
@@ -38,7 +38,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
redirect(`/${params.orgId}/settings/sites`);
}
const sidebarNavItems = [
const navItems = [
{
title: "General",
href: "/{orgId}/settings/sites/{niceId}/general"
@@ -47,30 +47,16 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
return (
<>
<div className="mb-4 flex-row">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<Link href="../">Sites</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{site.name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<SettingsSectionTitle
title={`${site?.name} Settings`}
description="Configure the settings on your site"
/>
<SiteProvider site={site}>
<SidebarSettings sidebarNavItems={sidebarNavItems}>
<div className="space-y-6">
<SiteInfoCard />
{children}
</SidebarSettings>
<HorizontalTabs items={navItems}>{children}</HorizontalTabs>
</div>
</SiteProvider>
</>
);

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

@@ -502,20 +502,6 @@ WantedBy=default.target`
return (
<>
<div className="mb-4 flex-row">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<Link href="../">Sites</Link>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Site</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div className="flex justify-between">
<HeaderTitle
title="Create Site"

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

@@ -51,7 +51,7 @@ export default async function SitesPage(props: SitesPageProps) {
return (
<>
<SitesSplashCard />
{/* <SitesSplashCard /> */}
<SettingsSectionTitle
title="Manage Sites"

33
src/app/admin/layout.tsx
View File

@@ -1,7 +1,5 @@
import { Metadata } from "next";
import { TopbarNav } from "@app/components/TopbarNav";
import { Users } from "lucide-react";
import { Header } from "@app/components/Header";
import { verifySession } from "@app/lib/auth/verifySession";
import { redirect } from "next/navigation";
import { cache } from "react";
@@ -10,6 +8,8 @@ import { ListOrgsResponse } from "@server/routers/org";
import { internal } from "@app/lib/api";
import { AxiosResponse } from "axios";
import { authCookieHeader } from "@app/lib/api/cookies";
import { Layout } from "@app/components/Layout";
import { adminNavItems } from "../navigation";
export const dynamic = "force-dynamic";
@@ -18,19 +18,11 @@ export const metadata: Metadata = {
description: ""
};
const topNavItems = [
{
title: "All Users",
href: "/admin/users",
icon: <Users className="h-4 w-4" />
}
];
interface LayoutProps {
children: React.ReactNode;
}
export default async function SettingsLayout(props: LayoutProps) {
export default async function AdminLayout(props: LayoutProps) {
const getUser = cache(verifySession);
const user = await getUser();
@@ -51,21 +43,10 @@ export default async function SettingsLayout(props: LayoutProps) {
} catch (e) {}
return (
<>
<div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b">
<div className="container mx-auto flex flex-col content-between">
<div className="my-4 px-3 md:px-0">
<UserProvider user={user}>
<Header orgId={""} orgs={orgs} />
</UserProvider>
</div>
<TopbarNav items={topNavItems} />
</div>
</div>
<div className="container mx-auto sm:px-0 px-3 pt-[155px]">
<UserProvider user={user}>
<Layout orgs={orgs} navItems={adminNavItems}>
{props.children}
</div>
</>
</Layout>
</UserProvider>
);
}

131
src/app/admin/users/AdminUsersDataTable.tsx
View File

@@ -2,29 +2,8 @@
import {
ColumnDef,
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
} from "@tanstack/react-table";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Search } from "lucide-react";
import { DataTable } from "@app/components/ui/data-table";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@@ -35,107 +14,13 @@ export function UsersDataTable<TData, TValue>({
columns,
data
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
initialState: {
pagination: {
pageSize: 20,
pageIndex: 0
}
},
state: {
sorting,
columnFilters
}
});
return (
<div>
<div className="flex items-center justify-between pb-4">
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search server users"
value={
(table
.getColumn("email")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
</div>
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef
.header,
header.getContext()
)}
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
This server has no users.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>
</div>
<DataTable
columns={columns}
data={data}
title="Server Users"
searchPlaceholder="Search server users..."
searchColumn="email"
/>
);
}

10
src/app/auth/layout.tsx
View File

@@ -18,7 +18,7 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
const user = await getUser();
return (
<>
<div className="h-full flex flex-col">
{user && (
<UserProvider user={user}>
<div className="p-3">
@@ -27,9 +27,11 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
</UserProvider>
)}
<div className="w-full max-w-md mx-auto p-3 md:mt-32">
{children}
<div className="flex-1 flex items-center justify-center">
<div className="w-full max-w-md p-3">
{children}
</div>
</div>
</>
</div>
);
}

2
src/app/components/SupporterMessage.tsx
View File

@@ -30,7 +30,7 @@ export default function SupporterMessage({ tier }: { tier: string }) {
Pangolin
</span>
<Star className="w-3 h-3"/>
<div className="absolute left-1/2 transform -translate-x-1/2 -top-10 hidden group-hover:block text-primary text-sm rounded-md border-2 shadow-md px-4 py-2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
<div className="absolute left-1/2 transform -translate-x-1/2 -top-10 hidden group-hover:block text-primary text-sm rounded-md border shadow-md px-4 py-2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
Thank you for supporting Pangolin as a {tier}!
</div>
</div>

177
src/app/globals.css
View File

@@ -1,70 +1,119 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap");
@import 'tailwindcss';
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 20 0% 10%;
--card: 0 0% 100%;
--card-foreground: 20 0% 10%;
--popover: 0 0% 100%;
--popover-foreground: 20 0% 10%;
--primary: 24.6 95% 53.1%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--muted: 60 4.8% 85%;
--muted-foreground: 25 5.3% 44.7%;
--accent: 60 4.8% 90%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 80%;
--input: 20 5.9% 75%;
--ring: 24.6 95% 53.1%;
--radius: 0.75rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}
@custom-variant dark (&:is(.dark *));
.dark {
--background: 20 0% 10%;
--foreground: 60 9.1% 97.8%;
--card: 20 0% 10%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 0% 10%;
--popover-foreground: 60 9.1% 97.8%;
--primary: 20.5 90.2% 48.2%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 12 6.5% 15%;
--secondary-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 25%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 2.5% 15%;
--accent-foreground: 60 9.1% 97.8%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 12 6.5% 30%;
--input: 12 6.5% 35%;
--ring: 20.5 90.2% 48.2%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
:root {
--background: hsl(0 0% 98%);
--foreground: hsl(20 0% 10%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(20 0% 10%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(20 0% 10%);
--primary: hsl(24.6 95% 53.1%);
--primary-foreground: hsl(60 9.1% 97.8%);
--secondary: hsl(60 4.8% 95.9%);
--secondary-foreground: hsl(24 9.8% 10%);
--muted: hsl(60 4.8% 85%);
--muted-foreground: hsl(25 5.3% 44.7%);
--accent: hsl(60 4.8% 90%);
--accent-foreground: hsl(24 9.8% 10%);
--destructive: hsl(0 84.2% 60.2%);
--destructive-foreground: hsl(60 9.1% 97.8%);
--border: hsl(20 5.9% 90%);
--input: hsl(20 5.9% 75%);
--ring: hsl(24.6 95% 53.1%);
--radius: 0.50rem;
--chart-1: hsl(12 76% 61%);
--chart-2: hsl(173 58% 39%);
--chart-3: hsl(197 37% 24%);
--chart-4: hsl(43 74% 66%);
--chart-5: hsl(27 87% 67%);
}
.dark {
--background: hsl(20 0% 8%);
--foreground: hsl(60 9.1% 97.8%);
--card: hsl(20 0% 10%);
--card-foreground: hsl(60 9.1% 97.8%);
--popover: hsl(20 0% 10%);
--popover-foreground: hsl(60 9.1% 97.8%);
--primary: hsl(20.5 90.2% 48.2%);
--primary-foreground: hsl(60 9.1% 97.8%);
--secondary: hsl(12 6.5% 15%);
--secondary-foreground: hsl(60 9.1% 97.8%);
--muted: hsl(12 6.5% 25%);
--muted-foreground: hsl(24 5.4% 63.9%);
--accent: hsl(12 2.5% 15%);
--accent-foreground: hsl(60 9.1% 97.8%);
--destructive: hsl(0 72.2% 50.6%);
--destructive-foreground: hsl(60 9.1% 97.8%);
--border: hsl(12 6.5% 15%);
--input: hsl(12 6.5% 35%);
--ring: hsl(20.5 90.2% 48.2%);
--chart-1: hsl(220 70% 50%);
--chart-2: hsl(160 60% 45%);
--chart-3: hsl(30 80% 55%);
--chart-4: hsl(280 65% 60%);
--chart-5: hsl(340 75% 55%);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

75
src/app/layout.tsx
View File

@@ -1,6 +1,6 @@
import type { Metadata } from "next";
import "./globals.css";
import { Figtree, Inter } from "next/font/google";
import { Figtree, Inter, Red_Hat_Display, Red_Hat_Mono, Red_Hat_Text, Space_Grotesk } from "next/font/google";
import { Toaster } from "@/components/ui/toaster";
import { ThemeProvider } from "@app/providers/ThemeProvider";
import EnvProvider from "@app/providers/EnvProvider";
@@ -41,11 +41,9 @@ export default async function RootLayout({
supporterData.visible = res.data.data.visible;
supporterData.tier = res.data.data.tier;
const version = env.app.version;
return (
<html suppressHydrationWarning>
<body className={`${font.className} min-h-screen flex flex-col`}>
<body className={`${font.className} h-screen overflow-hidden`}>
<ThemeProvider
attribute="class"
defaultTheme="system"
@@ -55,72 +53,11 @@ export default async function RootLayout({
<EnvProvider env={pullEnv()}>
<SupportStatusProvider supporterStatus={supporterData}>
{/* Main content */}
<div className="flex-grow pb-3 md:pb-0">
{children}
</div>
{/* Footer */}
<footer className="hidden md:block w-full mt-12 py-3 mb-6 px-4">
<div className="container mx-auto flex flex-wrap justify-center items-center h-3 space-x-4 text-sm text-neutral-400 dark:text-neutral-600">
{supporterData?.tier ? (
<SupporterMessage
tier={supporterData.tier}
/>
) : (
<div className="flex items-center space-x-2 whitespace-nowrap">
<span>Pangolin</span>
</div>
)}
<Separator orientation="vertical" />
<a
href="https://fossorial.io/"
target="_blank"
rel="noopener noreferrer"
aria-label="Built by Fossorial"
className="flex items-center space-x-3 whitespace-nowrap"
>
<span>Fossorial</span>
<ExternalLink className="w-3 h-3" />
</a>
<Separator orientation="vertical" />
<a
href="https://github.com/fosrl/pangolin"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub"
className="flex items-center space-x-3 whitespace-nowrap"
>
<span>Open Source</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-3 h-3"
>
<path d="M12 0C5.37 0 0 5.373 0 12c0 5.303 3.438 9.8 8.207 11.385.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.385-1.333-1.755-1.333-1.755-1.09-.744.082-.73.082-.73 1.205.085 1.84 1.24 1.84 1.24 1.07 1.835 2.807 1.305 3.492.997.107-.775.42-1.305.763-1.605-2.665-.305-5.467-1.335-5.467-5.93 0-1.31.468-2.382 1.236-3.22-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23a11.52 11.52 0 013.006-.403c1.02.005 2.045.137 3.006.403 2.29-1.552 3.295-1.23 3.295-1.23.654 1.653.242 2.873.12 3.176.77.838 1.235 1.91 1.235 3.22 0 4.605-2.805 5.623-5.475 5.92.43.37.814 1.1.814 2.22v3.293c0 .32.217.693.825.576C20.565 21.795 24 17.298 24 12 24 5.373 18.627 0 12 0z" />
</svg>
</a>
<Separator orientation="vertical" />
<a
href="https://docs.fossorial.io/Pangolin/overview"
target="_blank"
rel="noopener noreferrer"
aria-label="Documentation"
className="flex items-center space-x-3 whitespace-nowrap"
>
<span>Documentation</span>
<BookOpenText className="w-3 h-3" />
</a>
{version && (
<>
<Separator orientation="vertical" />
<div className="whitespace-nowrap">
v{version}
</div>
</>
)}
<div className="h-full flex flex-col">
<div className="flex-1 overflow-auto">
{children}
</div>
</footer>
</div>
</SupportStatusProvider>
</EnvProvider>
<Toaster />

64
src/app/navigation.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { SidebarNavItem } from "@app/components/SidebarNav";
import {
Home,
Settings,
Users,
Link as LinkIcon,
Waypoints,
Combine
} from "lucide-react";
export const rootNavItems: SidebarNavItem[] = [
{
title: "Home",
href: "/"
// icon: <Home className="h-4 w-4" />
}
];
export const orgNavItems: SidebarNavItem[] = [
{
title: "Sites",
href: "/{orgId}/settings/sites"
// icon: <Combine className="h-4 w-4" />
},
{
title: "Resources",
href: "/{orgId}/settings/resources"
// icon: <Waypoints className="h-4 w-4" />
},
{
title: "Access Control",
href: "/{orgId}/settings/access",
// icon: <Users className="h-4 w-4" />,
autoExpand: true,
children: [
{
title: "Users",
href: "/{orgId}/settings/access/users"
},
{
title: "Roles",
href: "/{orgId}/settings/access/roles"
}
]
},
{
title: "Shareable Links",
href: "/{orgId}/settings/share-links"
// icon: <LinkIcon className="h-4 w-4" />
},
{
title: "Settings",
href: "/{orgId}/settings/general"
// icon: <Settings className="h-4 w-4" />
}
];
export const adminNavItems: SidebarNavItem[] = [
{
title: "All Users",
href: "/admin/users"
// icon: <Users className="h-4 w-4" />
}
];

25
src/app/page.tsx
View File

@@ -1,17 +1,16 @@
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import ProfileIcon from "@app/components/ProfileIcon";
import { verifySession } from "@app/lib/auth/verifySession";
import UserProvider from "@app/providers/UserProvider";
import { ListOrgsResponse } from "@server/routers/org";
import { AxiosResponse } from "axios";
import { ArrowUpRight } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { cache } from "react";
import OrganizationLanding from "./components/OrganizationLanding";
import { pullEnv } from "@app/lib/pullEnv";
import { cleanRedirect } from "@app/lib/cleanRedirect";
import { Layout } from "@app/components/Layout";
import { rootNavItems } from "./navigation";
export const dynamic = "force-dynamic";
@@ -71,16 +70,12 @@ export default async function Page(props: {
}
return (
<>
<div className="p-3">
{user && (
<UserProvider user={user}>
<div>
<ProfileIcon />
</div>
</UserProvider>
)}
<UserProvider user={user}>
<Layout
orgs={orgs}
navItems={rootNavItems}
showBreadcrumbs={false}
>
<div className="w-full max-w-md mx-auto md:mt-32 mt-4">
<OrganizationLanding
disableCreateOrg={env.flags.disableUserCreateOrg && !user.serverAdmin}
@@ -90,7 +85,7 @@ export default async function Page(props: {
}))}
/>
</div>
</div>
</>
</Layout>
</UserProvider>
);
}

26
src/app/setup/layout.tsx
View File

@@ -1,3 +1,4 @@
import { Layout } from "@app/components/Layout";
import ProfileIcon from "@app/components/ProfileIcon";
import { verifySession } from "@app/lib/auth/verifySession";
import { pullEnv } from "@app/lib/pullEnv";
@@ -5,6 +6,7 @@ import UserProvider from "@app/providers/UserProvider";
import { Metadata } from "next";
import { redirect } from "next/navigation";
import { cache } from "react";
import { rootNavItems } from "../navigation";
export const metadata: Metadata = {
title: `Setup - Pangolin`,
@@ -27,27 +29,19 @@ export default async function SetupLayout({
redirect("/?redirect=/setup");
}
if (
!(!env.flags.disableUserCreateOrg || user.serverAdmin)
) {
if (!(!env.flags.disableUserCreateOrg || user.serverAdmin)) {
redirect("/");
}
return (
<>
<div className="p-3">
{user && (
<UserProvider user={user}>
<div>
<ProfileIcon />
</div>
</UserProvider>
)}
<div className="w-full max-w-2xl mx-auto md:mt-32 mt-4">
{children}
</div>
</div>
<UserProvider user={user}>
<Layout navItems={rootNavItems} showBreadcrumbs={false}>
<div className="w-full max-w-2xl mx-auto md:mt-32 mt-4">
{children}
</div>
</Layout>
</UserProvider>
</>
);
}