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

Merge branch 'dev' into feat/device-approvals

Browse Source
This commit is contained in:
Fred KISSIE
2026-01-14 23:08:12 +01:00
parent ce123a7f1a 5f184e9e5e
commit cbf184342b
78 changed files with 2815 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AuthPageBrandingForm.tsx
View File

@@ -118,6 +118,7 @@ export default function AuthPageBrandingForm({
const brandingData = form.getValues();
if (!isValid || !isPaidUser) return;
try {
const updateRes = await api.put(
`/org/${orgId}/login-page-branding`,
@@ -289,7 +290,8 @@ export default function AuthPageBrandingForm({
</div>
</div>
{build === "saas" && (
{build === "saas" ||
env.env.flags.useOrgOnlyIdp ? (
<>
<div className="mt-3 mb-6">
<SettingsSectionTitle>
@@ -343,7 +345,7 @@ export default function AuthPageBrandingForm({
/>
</div>
</>
)}
) : null}
<div className="mt-3 mb-6">
<SettingsSectionTitle>

5
src/components/ConfirmDeleteDialog.tsx
View File

@@ -63,6 +63,8 @@ export default function ConfirmDeleteDialog({
}
});
const isConfirmed = form.watch("string") === string;
async function onSubmit() {
try {
await onConfirm();
@@ -139,7 +141,8 @@ export default function ConfirmDeleteDialog({
type="submit"
form="confirm-delete-form"
loading={loading}
disabled={loading}
disabled={loading || !isConfirmed}
className={!isConfirmed && !loading ? "opacity-50" : ""}
>
{buttonText}
</Button>

47
src/components/DashboardLoginForm.tsx
View File

@@ -17,17 +17,26 @@ import { cleanRedirect } from "@app/lib/cleanRedirect";
import BrandingLogo from "@app/components/BrandingLogo";
import { useTranslations } from "next-intl";
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import Link from "next/link";
import { Button } from "./ui/button";
import { ArrowRight } from "lucide-react";
type DashboardLoginFormProps = {
redirect?: string;
idps?: LoginFormIDP[];
forceLogin?: boolean;
showOrgLogin?: boolean;
searchParams?: {
[key: string]: string | string[] | undefined;
};
};
export default function DashboardLoginForm({
redirect,
idps,
forceLogin
forceLogin,
showOrgLogin,
searchParams
}: DashboardLoginFormProps) {
const router = useRouter();
const { env } = useEnvContext();
@@ -35,6 +44,9 @@ export default function DashboardLoginForm({
const { isUnlocked } = useLicenseStatusContext();
function getSubtitle() {
if (forceLogin) {
return t("loginRequiredForDevice");
}
if (isUnlocked() && env.branding?.loginPage?.subtitleText) {
return env.branding.loginPage.subtitleText;
}
@@ -57,6 +69,22 @@ export default function DashboardLoginForm({
<div className="text-center space-y-1 pt-3">
<p className="text-muted-foreground">{getSubtitle()}</p>
</div>
{showOrgLogin && (
<div className="space-y-2 mt-4">
<Link
href={`/auth/org${buildQueryString(searchParams || {})}`}
className="underline"
>
<Button
variant="secondary"
className="w-full gap-2"
>
{t("orgAuthSignInToOrg")}
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
)}
</CardHeader>
<CardContent className="pt-6">
<LoginForm
@@ -76,3 +104,20 @@ export default function DashboardLoginForm({
</Card>
);
}
function buildQueryString(searchParams: {
[key: string]: string | string[] | undefined;
}): string {
const params = new URLSearchParams();
const redirect = searchParams.redirect;
const forceLogin = searchParams.forceLogin;
if (redirect && typeof redirect === "string") {
params.set("redirect", redirect);
}
if (forceLogin && typeof forceLogin === "string") {
params.set("forceLogin", forceLogin);
}
const queryString = params.toString();
return queryString ? `?${queryString}` : "";
}

4
src/components/DeviceLoginForm.tsx
View File

@@ -85,8 +85,6 @@ export default function DeviceLoginForm({
data.code = data.code.slice(0, 4) + "-" + data.code.slice(4);
}
await new Promise((resolve) => setTimeout(resolve, 300));
// First check - get metadata
const res = await api.post(
"/device-web-auth/verify?forceLogin=true",
@@ -117,8 +115,6 @@ export default function DeviceLoginForm({
setLoading(true);
try {
await new Promise((resolve) => setTimeout(resolve, 300));
// Final verify
await api.post("/device-web-auth/verify", {
code: code,

9
src/components/LoginForm.tsx
View File

@@ -409,15 +409,6 @@ export default function LoginForm({
return (
<div className="space-y-4">
{forceLogin && (
<Alert variant="neutral">
<AlertDescription className="flex items-center gap-2">
<LockIcon className="w-4 h-4" />
{t("loginRequiredForDevice")}
</AlertDescription>
</Alert>
)}
{showSecurityKeyPrompt && (
<Alert>
<FingerprintIcon className="w-5 h-5 mr-2" />

211
src/components/MachineClientsTable.tsx
View File

@@ -12,7 +12,12 @@ import {
import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
import {
ArrowRight,
ArrowUpDown,
MoreHorizontal,
CircleSlash
} from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useRouter } from "next/navigation";
@@ -35,6 +40,8 @@ export type ClientRow = {
userEmail: string | null;
niceId: string;
agent: string | null;
archived?: boolean;
blocked?: boolean;
approvalState: "approved" | "pending" | "denied";
};
@@ -52,6 +59,7 @@ export default function MachineClientsTable({
const t = useTranslations();
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
null
);
@@ -97,6 +105,76 @@ export default function MachineClientsTable({
});
};
const archiveClient = (clientId: number) => {
api.post(`/client/${clientId}/archive`)
.catch((e) => {
console.error("Error archiving client", e);
toast({
variant: "destructive",
title: "Error archiving client",
description: formatAxiosError(e, "Error archiving client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
const unarchiveClient = (clientId: number) => {
api.post(`/client/${clientId}/unarchive`)
.catch((e) => {
console.error("Error unarchiving client", e);
toast({
variant: "destructive",
title: "Error unarchiving client",
description: formatAxiosError(e, "Error unarchiving client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
const blockClient = (clientId: number) => {
api.post(`/client/${clientId}/block`)
.catch((e) => {
console.error("Error blocking client", e);
toast({
variant: "destructive",
title: "Error blocking client",
description: formatAxiosError(e, "Error blocking client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
setIsBlockModalOpen(false);
setSelectedClient(null);
});
});
};
const unblockClient = (clientId: number) => {
api.post(`/client/${clientId}/unblock`)
.catch((e) => {
console.error("Error unblocking client", e);
toast({
variant: "destructive",
title: "Error unblocking client",
description: formatAxiosError(e, "Error unblocking client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
// Check if there are any rows without userIds in the current view's data
const hasRowsWithoutUserId = useMemo(() => {
return machineClients.some((client) => !client.userId) ?? false;
@@ -122,6 +200,28 @@ export default function MachineClientsTable({
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const r = row.original;
return (
<div className="flex items-center gap-2">
<span>{r.name}</span>
{r.archived && (
<Badge variant="secondary">
{t("archived")}
</Badge>
)}
{r.blocked && (
<Badge
variant="destructive"
className="flex items-center gap-1"
>
<CircleSlash className="h-3 w-3" />
{t("blocked")}
</Badge>
)}
</div>
);
}
},
{
@@ -301,14 +401,37 @@ export default function MachineClientsTable({
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{/* <Link */}
{/* className="block w-full" */}
{/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
{/* > */}
{/* <DropdownMenuItem> */}
{/* View settings */}
{/* </DropdownMenuItem> */}
{/* </Link> */}
<DropdownMenuItem
onClick={() => {
if (clientRow.archived) {
unarchiveClient(clientRow.id);
} else {
archiveClient(clientRow.id);
}
}}
>
<span>
{clientRow.archived
? "Unarchive"
: "Archive"}
</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
if (clientRow.blocked) {
unblockClient(clientRow.id);
} else {
setSelectedClient(clientRow);
setIsBlockModalOpen(true);
}
}}
>
<span>
{clientRow.blocked
? "Unblock"
: "Block"}
</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
@@ -359,6 +482,27 @@ export default function MachineClientsTable({
title="Delete Client"
/>
)}
{selectedClient && (
<ConfirmDeleteDialog
open={isBlockModalOpen}
setOpen={(val) => {
setIsBlockModalOpen(val);
if (!val) {
setSelectedClient(null);
}
}}
dialog={
<div className="space-y-2">
<p>{t("blockClientQuestion")}</p>
<p>{t("blockClientMessage")}</p>
</div>
}
buttonText={t("blockClientConfirm")}
onConfirm={async () => blockClient(selectedClient!.id)}
string={selectedClient.name}
title={t("blockClient")}
/>
)}
<DataTable
columns={columns}
@@ -377,6 +521,55 @@ export default function MachineClientsTable({
columnVisibility={defaultMachineColumnVisibility}
stickyLeftColumn="name"
stickyRightColumn="actions"
filters={[
{
id: "status",
label: t("status") || "Status",
multiSelect: true,
displayMode: "calculated",
options: [
{
id: "active",
label: t("active") || "Active",
value: "active"
},
{
id: "archived",
label: t("archived") || "Archived",
value: "archived"
},
{
id: "blocked",
label: t("blocked") || "Blocked",
value: "blocked"
}
],
filterFn: (
row: ClientRow,
selectedValues: (string | number | boolean)[]
) => {
if (selectedValues.length === 0) return true;
const rowArchived = row.archived || false;
const rowBlocked = row.blocked || false;
const isActive = !rowArchived && !rowBlocked;
if (selectedValues.includes("active") && isActive)
return true;
if (
selectedValues.includes("archived") &&
rowArchived
)
return true;
if (
selectedValues.includes("blocked") &&
rowBlocked
)
return true;
return false;
},
defaultValues: ["active"] // Default to showing active clients
}
]}
/>
</>
);

35
src/components/PermissionsSelectBox.tsx
View File

@@ -103,6 +103,10 @@ function getActionsCategories(root: boolean) {
Client: {
[t("actionCreateClient")]: "createClient",
[t("actionDeleteClient")]: "deleteClient",
[t("actionArchiveClient")]: "archiveClient",
[t("actionUnarchiveClient")]: "unarchiveClient",
[t("actionBlockClient")]: "blockClient",
[t("actionUnblockClient")]: "unblockClient",
[t("actionUpdateClient")]: "updateClient",
[t("actionListClients")]: "listClients",
[t("actionGetClient")]: "getClient"
@@ -114,6 +118,16 @@ function getActionsCategories(root: boolean) {
}
};
if (root || build === "saas" || env.flags.useOrgOnlyIdp) {
actionsByCategory["Identity Provider (IDP)"] = {
[t("actionCreateIdp")]: "createIdp",
[t("actionUpdateIdp")]: "updateIdp",
[t("actionDeleteIdp")]: "deleteIdp",
[t("actionListIdps")]: "listIdps",
[t("actionGetIdp")]: "getIdp"
};
}
if (root) {
actionsByCategory["Organization"] = {
[t("actionListOrgs")]: "listOrgs",
@@ -128,24 +142,21 @@ function getActionsCategories(root: boolean) {
...actionsByCategory["Organization"]
};
actionsByCategory["Identity Provider (IDP)"] = {
[t("actionCreateIdp")]: "createIdp",
[t("actionUpdateIdp")]: "updateIdp",
[t("actionDeleteIdp")]: "deleteIdp",
[t("actionListIdps")]: "listIdps",
[t("actionGetIdp")]: "getIdp",
[t("actionCreateIdpOrg")]: "createIdpOrg",
[t("actionDeleteIdpOrg")]: "deleteIdpOrg",
[t("actionListIdpOrgs")]: "listIdpOrgs",
[t("actionUpdateIdpOrg")]: "updateIdpOrg"
};
actionsByCategory["Identity Provider (IDP)"][t("actionCreateIdpOrg")] =
"createIdpOrg";
actionsByCategory["Identity Provider (IDP)"][t("actionDeleteIdpOrg")] =
"deleteIdpOrg";
actionsByCategory["Identity Provider (IDP)"][t("actionListIdpOrgs")] =
"listIdpOrgs";
actionsByCategory["Identity Provider (IDP)"][t("actionUpdateIdpOrg")] =
"updateIdpOrg";
actionsByCategory["User"] = {
[t("actionUpdateUser")]: "updateUser",
[t("actionGetUser")]: "getUser"
};
if (build == "saas") {
if (build === "saas") {
actionsByCategory["SAAS"] = {
["Send Usage Notification Email"]: "sendUsageNotification"
};

226
src/components/UserDevicesTable.tsx
View File

@@ -16,7 +16,8 @@ import {
ArrowRight,
ArrowUpDown,
ArrowUpRight,
MoreHorizontal
MoreHorizontal,
CircleSlash
} from "lucide-react";
import { useTranslations } from "next-intl";
import Link from "next/link";
@@ -45,6 +46,8 @@ export type ClientRow = {
niceId: string;
agent: string | null;
approvalState: "approved" | "pending" | "denied";
archived?: boolean;
blocked?: boolean;
};
type ClientTableProps = {
@@ -57,6 +60,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
const t = useTranslations();
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
null
);
@@ -103,6 +107,76 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
});
};
const archiveClient = (clientId: number) => {
api.post(`/client/${clientId}/archive`)
.catch((e) => {
console.error("Error archiving client", e);
toast({
variant: "destructive",
title: "Error archiving client",
description: formatAxiosError(e, "Error archiving client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
const unarchiveClient = (clientId: number) => {
api.post(`/client/${clientId}/unarchive`)
.catch((e) => {
console.error("Error unarchiving client", e);
toast({
variant: "destructive",
title: "Error unarchiving client",
description: formatAxiosError(e, "Error unarchiving client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
const blockClient = (clientId: number) => {
api.post(`/client/${clientId}/block`)
.catch((e) => {
console.error("Error blocking client", e);
toast({
variant: "destructive",
title: "Error blocking client",
description: formatAxiosError(e, "Error blocking client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
setIsBlockModalOpen(false);
setSelectedClient(null);
});
});
};
const unblockClient = (clientId: number) => {
api.post(`/client/${clientId}/unblock`)
.catch((e) => {
console.error("Error unblocking client", e);
toast({
variant: "destructive",
title: "Error unblocking client",
description: formatAxiosError(e, "Error unblocking client")
});
})
.then(() => {
startTransition(() => {
router.refresh();
});
});
};
// Check if there are any rows without userIds in the current view's data
const hasRowsWithoutUserId = useMemo(() => {
return userClients.some((client) => !client.userId);
@@ -128,6 +202,28 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const r = row.original;
return (
<div className="flex items-center gap-2">
<span>{r.name}</span>
{r.archived && (
<Badge variant="secondary">
{t("archived")}
</Badge>
)}
{r.blocked && (
<Badge
variant="destructive"
className="flex items-center gap-1"
>
<CircleSlash className="h-3 w-3" />
{t("blocked")}
</Badge>
)}
</div>
);
}
},
{
@@ -351,7 +447,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
header: () => <span className="p-3"></span>,
cell: ({ row }) => {
const clientRow = row.original;
return !clientRow.userId ? (
return (
<div className="flex items-center gap-2 justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -361,34 +457,62 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{/* <Link */}
{/* className="block w-full" */}
{/* href={`/${clientRow.orgId}/settings/sites/${clientRow.nice}`} */}
{/* > */}
{/* <DropdownMenuItem> */}
{/* View settings */}
{/* </DropdownMenuItem> */}
{/* </Link> */}
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
setIsDeleteModalOpen(true);
if (clientRow.archived) {
unarchiveClient(clientRow.id);
} else {
archiveClient(clientRow.id);
}
}}
>
<span className="text-red-500">Delete</span>
<span>
{clientRow.archived
? "Unarchive"
: "Archive"}
</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
if (clientRow.blocked) {
unblockClient(clientRow.id);
} else {
setSelectedClient(clientRow);
setIsBlockModalOpen(true);
}
}}
>
<span>
{clientRow.blocked
? "Unblock"
: "Block"}
</span>
</DropdownMenuItem>
{!clientRow.userId && (
// Machine client - also show delete option
<DropdownMenuItem
onClick={() => {
setSelectedClient(clientRow);
setIsDeleteModalOpen(true);
}}
>
<span className="text-red-500">
Delete
</span>
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
<Link
href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
>
<Button variant={"outline"}>
Edit
View
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</Link>
</div>
) : null;
);
}
});
@@ -397,7 +521,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
return (
<>
{selectedClient && (
{selectedClient && !selectedClient.userId && (
<ConfirmDeleteDialog
open={isDeleteModalOpen}
setOpen={(val) => {
@@ -416,6 +540,27 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
title="Delete Client"
/>
)}
{selectedClient && (
<ConfirmDeleteDialog
open={isBlockModalOpen}
setOpen={(val) => {
setIsBlockModalOpen(val);
if (!val) {
setSelectedClient(null);
}
}}
dialog={
<div className="space-y-2">
<p>{t("blockClientQuestion")}</p>
<p>{t("blockClientMessage")}</p>
</div>
}
buttonText={t("blockClientConfirm")}
onConfirm={async () => blockClient(selectedClient!.id)}
string={selectedClient.name}
title={t("blockClient")}
/>
)}
<ClientDownloadBanner />
@@ -432,6 +577,55 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
columnVisibility={defaultUserColumnVisibility}
stickyLeftColumn="name"
stickyRightColumn="actions"
filters={[
{
id: "status",
label: t("status") || "Status",
multiSelect: true,
displayMode: "calculated",
options: [
{
id: "active",
label: t("active") || "Active",
value: "active"
},
{
id: "archived",
label: t("archived") || "Archived",
value: "archived"
},
{
id: "blocked",
label: t("blocked") || "Blocked",
value: "blocked"
}
],
filterFn: (
row: ClientRow,
selectedValues: (string | number | boolean)[]
) => {
if (selectedValues.length === 0) return true;
const rowArchived = row.archived || false;
const rowBlocked = row.blocked || false;
const isActive = !rowArchived && !rowBlocked;
if (selectedValues.includes("active") && isActive)
return true;
if (
selectedValues.includes("archived") &&
rowArchived
)
return true;
if (
selectedValues.includes("blocked") &&
rowBlocked
)
return true;
return false;
},
defaultValues: ["active"] // Default to showing active clients
}
]}
/>
</>
);

210
src/components/ViewDevicesDialog.tsx
View File

@@ -27,6 +27,7 @@ import {
TableHeader,
TableRow
} from "@app/components/ui/table";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@app/components/ui/tabs";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { Loader2, RefreshCw } from "lucide-react";
import moment from "moment";
@@ -44,6 +45,7 @@ type Device = {
name: string | null;
clientId: number | null;
userId: string | null;
archived: boolean;
};
export default function ViewDevicesDialog({
@@ -57,8 +59,9 @@ export default function ViewDevicesDialog({
const [devices, setDevices] = useState<Device[]>([]);
const [loading, setLoading] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isArchiveModalOpen, setIsArchiveModalOpen] = useState(false);
const [selectedDevice, setSelectedDevice] = useState<Device | null>(null);
const [activeTab, setActiveTab] = useState<"available" | "archived">("available");
const fetchDevices = async () => {
setLoading(true);
@@ -90,26 +93,59 @@ export default function ViewDevicesDialog({
}
}, [open]);
const deleteDevice = async (olmId: string) => {
const archiveDevice = async (olmId: string) => {
try {
await api.delete(`/user/${user?.userId}/olm/${olmId}`);
await api.post(`/user/${user?.userId}/olm/${olmId}/archive`);
toast({
title: t("deviceDeleted") || "Device deleted",
title: t("deviceArchived") || "Device archived",
description:
t("deviceDeletedDescription") ||
"The device has been successfully deleted."
t("deviceArchivedDescription") ||
"The device has been successfully archived."
});
setDevices(devices.filter((d) => d.olmId !== olmId));
setIsDeleteModalOpen(false);
// Update the device's archived status in the local state
setDevices(
devices.map((d) =>
d.olmId === olmId ? { ...d, archived: true } : d
)
);
setIsArchiveModalOpen(false);
setSelectedDevice(null);
} catch (error: any) {
console.error("Error deleting device:", error);
console.error("Error archiving device:", error);
toast({
variant: "destructive",
title: t("errorDeletingDevice") || "Error deleting device",
title: t("errorArchivingDevice"),
description: formatAxiosError(
error,
t("failedToDeleteDevice") || "Failed to delete device"
t("failedToArchiveDevice")
)
});
}
};
const unarchiveDevice = async (olmId: string) => {
try {
await api.post(`/user/${user?.userId}/olm/${olmId}/unarchive`);
toast({
title: t("deviceUnarchived") || "Device unarchived",
description:
t("deviceUnarchivedDescription") ||
"The device has been successfully unarchived."
});
// Update the device's archived status in the local state
setDevices(
devices.map((d) =>
d.olmId === olmId ? { ...d, archived: false } : d
)
);
} catch (error: any) {
console.error("Error unarchiving device:", error);
toast({
variant: "destructive",
title: t("errorUnarchivingDevice") || "Error unarchiving device",
description: formatAxiosError(
error,
t("failedToUnarchiveDevice") || "Failed to unarchive device"
)
});
}
@@ -118,7 +154,7 @@ export default function ViewDevicesDialog({
function reset() {
setDevices([]);
setSelectedDevice(null);
setIsDeleteModalOpen(false);
setIsArchiveModalOpen(false);
}
return (
@@ -147,9 +183,40 @@ export default function ViewDevicesDialog({
<div className="flex items-center justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin" />
</div>
) : devices.length === 0 ? (
) : (
<Tabs
value={activeTab}
onValueChange={(value) =>
setActiveTab(value as "available" | "archived")
}
className="w-full"
>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="available">
{t("available") || "Available"} (
{
devices.filter(
(d) => !d.archived
).length
}
)
</TabsTrigger>
<TabsTrigger value="archived">
{t("archived") || "Archived"} (
{
devices.filter(
(d) => d.archived
).length
}
)
</TabsTrigger>
</TabsList>
<TabsContent value="available" className="mt-4">
{devices.filter((d) => !d.archived)
.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
{t("noDevices") || "No devices found"}
{t("noDevices") ||
"No devices found"}
</div>
) : (
<div className="rounded-md border">
@@ -164,22 +231,33 @@ export default function ViewDevicesDialog({
"Date Created"}
</TableHead>
<TableHead>
{t("actions") || "Actions"}
{t("actions") ||
"Actions"}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{devices.map((device) => (
<TableRow key={device.olmId}>
{devices
.filter(
(d) => !d.archived
)
.map((device) => (
<TableRow
key={device.olmId}
>
<TableCell className="font-medium">
{device.name ||
t("unnamedDevice") ||
t(
"unnamedDevice"
) ||
"Unnamed Device"}
</TableCell>
<TableCell>
{moment(
device.dateCreated
).format("lll")}
).format(
"lll"
)}
</TableCell>
<TableCell>
<Button
@@ -188,13 +266,15 @@ export default function ViewDevicesDialog({
setSelectedDevice(
device
);
setIsDeleteModalOpen(
setIsArchiveModalOpen(
true
);
}}
>
{t("delete") ||
"Delete"}
{t(
"archive"
) ||
"Archive"}
</Button>
</TableCell>
</TableRow>
@@ -202,6 +282,74 @@ export default function ViewDevicesDialog({
</TableBody>
</Table>
</div>
)}
</TabsContent>
<TabsContent value="archived" className="mt-4">
{devices.filter((d) => d.archived)
.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
{t("noArchivedDevices") ||
"No archived devices found"}
</div>
) : (
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead className="pl-3">
{t("name") || "Name"}
</TableHead>
<TableHead>
{t("dateCreated") ||
"Date Created"}
</TableHead>
<TableHead>
{t("actions") ||
"Actions"}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{devices
.filter(
(d) => d.archived
)
.map((device) => (
<TableRow
key={device.olmId}
>
<TableCell className="font-medium">
{device.name ||
t(
"unnamedDevice"
) ||
"Unnamed Device"}
</TableCell>
<TableCell>
{moment(
device.dateCreated
).format(
"lll"
)}
</TableCell>
<TableCell>
<Button
variant="outline"
onClick={() => {
unarchiveDevice(device.olmId);
}}
>
{t("unarchive") || "Unarchive"}
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
</TabsContent>
</Tabs>
)}
</CredenzaBody>
<CredenzaFooter>
@@ -216,9 +364,9 @@ export default function ViewDevicesDialog({
{selectedDevice && (
<ConfirmDeleteDialog
open={isDeleteModalOpen}
open={isArchiveModalOpen}
setOpen={(val) => {
setIsDeleteModalOpen(val);
setIsArchiveModalOpen(val);
if (!val) {
setSelectedDevice(null);
}
@@ -226,19 +374,19 @@ export default function ViewDevicesDialog({
dialog={
<div className="space-y-2">
<p>
{t("deviceQuestionRemove") ||
"Are you sure you want to delete this device?"}
{t("deviceQuestionArchive") ||
"Are you sure you want to archive this device?"}
</p>
<p>
{t("deviceMessageRemove") ||
"This action cannot be undone."}
{t("deviceMessageArchive") ||
"The device will be archived and removed from your active devices list."}
</p>
</div>
}
buttonText={t("deviceDeleteConfirm") || "Delete Device"}
onConfirm={async () => deleteDevice(selectedDevice.olmId)}
buttonText={t("deviceArchiveConfirm") || "Archive Device"}
onConfirm={async () => archiveDevice(selectedDevice.olmId)}
string={selectedDevice.name || selectedDevice.olmId}
title={t("deleteDevice") || "Delete Device"}
title={t("archiveDevice") || "Archive Device"}
/>
)}
</>

2
src/components/private/SplashImage.tsx
View File

@@ -21,7 +21,7 @@ export default function SplashImage({ children }: SplashImageProps) {
if (!env.branding.background_image_path) {
return false;
}
const pathsPrefixes = ["/auth/login", "/auth/signup", "/auth/resource"];
const pathsPrefixes = ["/auth/login", "/auth/signup", "/auth/resource", "/auth/org"];
for (const prefix of pathsPrefixes) {
if (pathname.startsWith(prefix)) {
return true;

10
src/components/private/ValidateSessionTransferToken.tsx
View File

@@ -50,9 +50,13 @@ export default function ValidateSessionTransferToken(
}
if (doRedirect) {
// add redirect param to dashboardUrl if provided
const fullUrl = `${env.app.dashboardUrl}${props.redirect || ""}`;
router.push(fullUrl);
if (props.redirect && props.redirect.startsWith("http")) {
router.push(props.redirect);
} else {
// add redirect param to dashboardUrl if provided
const fullUrl = `${env.app.dashboardUrl}${props.redirect || ""}`;
router.push(fullUrl);
}
}
}

175
src/components/ui/data-table.tsx
View File

@@ -33,7 +33,7 @@ import { Button } from "@app/components/ui/button";
import { useEffect, useMemo, useRef, useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search, RefreshCw, Columns } from "lucide-react";
import { Plus, Search, RefreshCw, Columns, Filter } from "lucide-react";
import {
Card,
CardContent,
@@ -140,6 +140,22 @@ type TabFilter = {
filterFn: (row: any) => boolean;
};
type FilterOption = {
id: string;
label: string;
value: string | number | boolean;
};
type DataTableFilter = {
id: string;
label: string;
options: FilterOption[];
multiSelect?: boolean;
filterFn: (row: any, selectedValues: (string | number | boolean)[]) => boolean;
defaultValues?: (string | number | boolean)[];
displayMode?: "label" | "calculated"; // How to display the filter button text
};
type DataTableProps<TData, TValue> = {
columns: ExtendedColumnDef<TData, TValue>[];
data: TData[];
@@ -156,6 +172,8 @@ type DataTableProps<TData, TValue> = {
};
tabs?: TabFilter[];
defaultTab?: string;
filters?: DataTableFilter[];
filterDisplayMode?: "label" | "calculated"; // Global filter display mode (can be overridden per filter)
persistPageSize?: boolean | string;
defaultPageSize?: number;
columnVisibility?: Record<string, boolean>;
@@ -178,6 +196,8 @@ export function DataTable<TData, TValue>({
defaultSort,
tabs,
defaultTab,
filters,
filterDisplayMode = "label",
persistPageSize = false,
defaultPageSize = 20,
columnVisibility: defaultColumnVisibility,
@@ -235,6 +255,15 @@ export function DataTable<TData, TValue>({
const [activeTab, setActiveTab] = useState<string>(
defaultTab || tabs?.[0]?.id || ""
);
const [activeFilters, setActiveFilters] = useState<Record<string, (string | number | boolean)[]>>(
() => {
const initial: Record<string, (string | number | boolean)[]> = {};
filters?.forEach((filter) => {
initial[filter.id] = filter.defaultValues || [];
});
return initial;
}
);
// Track initial values to avoid storing defaults on first render
const initialPageSize = useRef(pageSize);
@@ -242,19 +271,32 @@ export function DataTable<TData, TValue>({
const hasUserChangedPageSize = useRef(false);
const hasUserChangedColumnVisibility = useRef(false);
// Apply tab filter to data
// Apply tab and custom filters to data
const filteredData = useMemo(() => {
if (!tabs || activeTab === "") {
return data;
let result = data;
// Apply tab filter
if (tabs && activeTab !== "") {
const activeTabFilter = tabs.find((tab) => tab.id === activeTab);
if (activeTabFilter) {
result = result.filter(activeTabFilter.filterFn);
}
}
const activeTabFilter = tabs.find((tab) => tab.id === activeTab);
if (!activeTabFilter) {
return data;
// Apply custom filters
if (filters && filters.length > 0) {
filters.forEach((filter) => {
const selectedValues = activeFilters[filter.id] || [];
if (selectedValues.length > 0) {
result = result.filter((row) =>
filter.filterFn(row, selectedValues)
);
}
});
}
return data.filter(activeTabFilter.filterFn);
}, [data, tabs, activeTab]);
return result;
}, [data, tabs, activeTab, filters, activeFilters]);
const table = useReactTable({
data: filteredData,
@@ -318,6 +360,64 @@ export function DataTable<TData, TValue>({
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
};
const handleFilterChange = (
filterId: string,
optionValue: string | number | boolean,
checked: boolean
) => {
setActiveFilters((prev) => {
const currentValues = prev[filterId] || [];
const filter = filters?.find((f) => f.id === filterId);
if (!filter) return prev;
let newValues: (string | number | boolean)[];
if (filter.multiSelect) {
// Multi-select: add or remove the value
if (checked) {
newValues = [...currentValues, optionValue];
} else {
newValues = currentValues.filter((v) => v !== optionValue);
}
} else {
// Single-select: replace the value
newValues = checked ? [optionValue] : [];
}
return {
...prev,
[filterId]: newValues
};
});
// Reset to first page when changing filters
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
};
// Calculate display text for a filter based on selected values
const getFilterDisplayText = (filter: DataTableFilter): string => {
const selectedValues = activeFilters[filter.id] || [];
if (selectedValues.length === 0) {
return filter.label;
}
const selectedOptions = filter.options.filter((option) =>
selectedValues.includes(option.value)
);
if (selectedOptions.length === 0) {
return filter.label;
}
if (selectedOptions.length === 1) {
return selectedOptions[0].label;
}
// Multiple selections: always join with "and"
return selectedOptions.map((opt) => opt.label).join(" and ");
};
// Enhanced pagination component that updates our local state
const handlePageSizeChange = (newPageSize: number) => {
hasUserChangedPageSize.current = true;
@@ -387,6 +487,63 @@ export function DataTable<TData, TValue>({
/>
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
</div>
{filters && filters.length > 0 && (
<div className="flex gap-2">
{filters.map((filter) => {
const selectedValues = activeFilters[filter.id] || [];
const hasActiveFilters = selectedValues.length > 0;
const displayMode = filter.displayMode || filterDisplayMode;
const displayText = displayMode === "calculated"
? getFilterDisplayText(filter)
: filter.label;
return (
<DropdownMenu key={filter.id}>
<DropdownMenuTrigger asChild>
<Button
variant={"outline"}
size="sm"
className="h-9"
>
<Filter className="h-4 w-4 mr-2" />
{displayText}
{displayMode === "label" && hasActiveFilters && (
<span className="ml-2 bg-muted text-foreground rounded-full px-2 py-0.5 text-xs">
{selectedValues.length}
</span>
)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48">
<DropdownMenuLabel>
{filter.label}
</DropdownMenuLabel>
<DropdownMenuSeparator />
{filter.options.map((option) => {
const isChecked = selectedValues.includes(option.value);
return (
<DropdownMenuCheckboxItem
key={option.id}
checked={isChecked}
onCheckedChange={(checked) =>
handleFilterChange(
filter.id,
option.value,
checked
)
}
onSelect={(e) => e.preventDefault()}
>
{option.label}
</DropdownMenuCheckboxItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
);
})}
</div>
)}
{tabs && tabs.length > 0 && (
<Tabs
value={activeTab}