view devices for profile

messages/en-US.json

@@ -2128,5 +2128,20 @@
     "deviceAuthorize": "Authorize {applicationName}",
     "deviceConnected": "Device Connected!",
     "deviceAuthorizedMessage": "Your device is authorized to access your account.",
-    "pangolinCloud": "Pangolin Cloud"
+    "pangolinCloud": "Pangolin Cloud",
+    "viewDevices": "View Devices",
+    "viewDevicesDescription": "Manage your connected devices",
+    "noDevices": "No devices found",
+    "dateCreated": "Date Created",
+    "unnamedDevice": "Unnamed Device",
+    "deviceQuestionRemove": "Are you sure you want to delete this device?",
+    "deviceMessageRemove": "This action cannot be undone.",
+    "deviceDeleteConfirm": "Delete Device",
+    "deleteDevice": "Delete Device",
+    "errorLoadingDevices": "Error loading devices",
+    "failedToLoadDevices": "Failed to load devices",
+    "deviceDeleted": "Device deleted",
+    "deviceDeletedDescription": "The device has been successfully deleted.",
+    "errorDeletingDevice": "Error deleting device",
+    "failedToDeleteDevice": "Failed to delete device"
 }

server/routers/external.ts

@@ -758,11 +758,24 @@ authenticated.delete(
 //     createNewt
 // );
 
+// only for logged in user
 authenticated.put(
     "/olm",
     olm.createOlm
 );
 
+// only for logged in user
+authenticated.get(
+    "/olms",
+    olm.listOlms
+);
+
+// only for logged in user
+authenticated.delete(
+    "/olm/:olmId",
+    olm.deleteOlm
+);
+
 authenticated.put(
     "/idp/oidc",
     verifyUserIsServerAdmin,

server/routers/olm/deleteOlm.ts

@@ -0,0 +1,112 @@
+import { NextFunction, Request, Response } from "express";
+import { db } from "@server/db";
+import { olms, clients, clientSites } from "@server/db";
+import { eq } from "drizzle-orm";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import response from "@server/lib/response";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+import logger from "@server/logger";
+
+const deleteOlmParamsSchema = z
+    .object({
+        olmId: z.string()
+    })
+    .strict();
+
+export async function deleteOlm(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const userId = req.user?.userId;
+
+        if (!userId) {
+            return next(
+                createHttpError(HttpCode.UNAUTHORIZED, "User not authenticated")
+            );
+        }
+
+        const parsedParams = deleteOlmParamsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const { olmId } = parsedParams.data;
+
+        // Verify the OLM belongs to the current user
+        const [existingOlm] = await db
+            .select()
+            .from(olms)
+            .where(eq(olms.olmId, olmId))
+            .limit(1);
+
+        if (!existingOlm) {
+            return next(
+                createHttpError(
+                    HttpCode.NOT_FOUND,
+                    `Olm with ID ${olmId} not found`
+                )
+            );
+        }
+
+        if (existingOlm.userId !== userId) {
+            return next(
+                createHttpError(
+                    HttpCode.FORBIDDEN,
+                    "You do not have permission to delete this device"
+                )
+            );
+        }
+
+        // Delete associated clients and the OLM in a transaction
+        await db.transaction(async (trx) => {
+            // Find all clients associated with this OLM
+            const associatedClients = await trx
+                .select({ clientId: clients.clientId })
+                .from(clients)
+                .where(eq(clients.olmId, olmId));
+
+            // Delete client-site associations for each associated client
+            for (const client of associatedClients) {
+                await trx
+                    .delete(clientSites)
+                    .where(eq(clientSites.clientId, client.clientId));
+            }
+
+            // Delete all associated clients
+            if (associatedClients.length > 0) {
+                await trx
+                    .delete(clients)
+                    .where(eq(clients.olmId, olmId));
+            }
+
+            // Finally, delete the OLM itself
+            await trx.delete(olms).where(eq(olms.olmId, olmId));
+        });
+
+        return response(res, {
+            data: null,
+            success: true,
+            error: false,
+            message: "Device deleted successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(
+                HttpCode.INTERNAL_SERVER_ERROR,
+                "Failed to delete device"
+            )
+        );
+    }
+}
+

server/routers/olm/index.ts

@@ -2,4 +2,6 @@ export * from "./handleOlmRegisterMessage";
 export * from "./getOlmToken";
 export * from "./createOlm";
 export * from "./handleOlmRelayMessage";
-export * from "./handleOlmPingMessage";
+export * from "./handleOlmPingMessage";
+export * from "./listOlms";
+export * from "./deleteOlm";

server/routers/olm/listOlms.ts

@@ -0,0 +1,117 @@
+import { NextFunction, Request, Response } from "express";
+import { db } from "@server/db";
+import { olms } from "@server/db";
+import { eq, count, desc } from "drizzle-orm";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import response from "@server/lib/response";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+import logger from "@server/logger";
+
+const listOlmsSchema = z.object({
+    limit: z
+        .string()
+        .optional()
+        .default("1000")
+        .transform(Number)
+        .pipe(z.number().int().positive()),
+    offset: z
+        .string()
+        .optional()
+        .default("0")
+        .transform(Number)
+        .pipe(z.number().int().nonnegative())
+});
+
+export type ListOlmsResponse = {
+    olms: Array<{
+        olmId: string;
+        dateCreated: string;
+        version: string | null;
+        name: string | null;
+        clientId: number | null;
+        userId: string | null;
+    }>;
+    pagination: {
+        total: number;
+        limit: number;
+        offset: number;
+    };
+};
+
+export async function listOlms(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const userId = req.user?.userId;
+
+        if (!userId) {
+            return next(
+                createHttpError(HttpCode.UNAUTHORIZED, "User not authenticated")
+            );
+        }
+
+        const parsedQuery = listOlmsSchema.safeParse(req.query);
+        if (!parsedQuery.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedQuery.error).toString()
+                )
+            );
+        }
+
+        const { limit, offset } = parsedQuery.data;
+
+        // Get total count
+        const [totalCountResult] = await db
+            .select({ count: count() })
+            .from(olms)
+            .where(eq(olms.userId, userId));
+
+        const total = totalCountResult?.count || 0;
+
+        // Get OLMs for the current user
+        const userOlms = await db
+            .select({
+                olmId: olms.olmId,
+                dateCreated: olms.dateCreated,
+                version: olms.version,
+                name: olms.name,
+                clientId: olms.clientId,
+                userId: olms.userId
+            })
+            .from(olms)
+            .where(eq(olms.userId, userId))
+            .orderBy(desc(olms.dateCreated))
+            .limit(limit)
+            .offset(offset);
+
+        return response<ListOlmsResponse>(res, {
+            data: {
+                olms: userOlms,
+                pagination: {
+                    total,
+                    limit,
+                    offset
+                }
+            },
+            success: true,
+            error: false,
+            message: "OLMs retrieved successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(
+                HttpCode.INTERNAL_SERVER_ERROR,
+                "Failed to list OLMs"
+            )
+        );
+    }
+}
+

src/components/ProfileIcon.tsx

@@ -14,7 +14,7 @@ import {
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
-import { Laptop, LogOut, Moon, Sun } from "lucide-react";
+import { Laptop, LogOut, Moon, Sun, Smartphone } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -23,6 +23,7 @@ import Disable2FaForm from "./Disable2FaForm";
 import SecurityKeyForm from "./SecurityKeyForm";
 import Enable2FaDialog from "./Enable2FaDialog";
 import ChangePasswordDialog from "./ChangePasswordDialog";
+import ViewDevicesDialog from "./ViewDevicesDialog";
 import SupporterStatus from "./SupporterStatus";
 import { UserType } from "@server/types/UserTypes";
 import LocaleSwitcher from "@app/components/LocaleSwitcher";
@@ -43,6 +44,7 @@ export default function ProfileIcon() {
     const [openDisable2fa, setOpenDisable2fa] = useState(false);
     const [openSecurityKey, setOpenSecurityKey] = useState(false);
     const [openChangePassword, setOpenChangePassword] = useState(false);
+    const [openViewDevices, setOpenViewDevices] = useState(false);
 
     const t = useTranslations();
 
@@ -84,6 +86,10 @@ export default function ProfileIcon() {
                 open={openChangePassword} 
                 setOpen={setOpenChangePassword} 
             />
+            <ViewDevicesDialog 
+                open={openViewDevices} 
+                setOpen={setOpenViewDevices} 
+            />
 
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -146,6 +152,13 @@ export default function ProfileIcon() {
                             <DropdownMenuSeparator />
                         </>
                     )}
+                    <DropdownMenuItem
+                        onClick={() => setOpenViewDevices(true)}
+                    >
+                        <Smartphone className="mr-2 h-4 w-4" />
+                        <span>{t("viewDevices") || "View Devices"}</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
                     <DropdownMenuLabel>{t("theme")}</DropdownMenuLabel>
                     {(["light", "dark", "system"] as const).map(
                         (themeOption) => (

src/components/ViewDevicesDialog.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import { useTranslations } from "next-intl";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+import { ListOlmsResponse } from "@server/routers/olm";
+import { ResponseT } from "@server/types/Response";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from "@app/components/ui/table";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { RefreshCw } from "lucide-react";
+import moment from "moment";
+
+type ViewDevicesDialogProps = {
+    open: boolean;
+    setOpen: (val: boolean) => void;
+};
+
+type Device = {
+    olmId: string;
+    dateCreated: string;
+    version: string | null;
+    name: string | null;
+    clientId: number | null;
+    userId: string | null;
+};
+
+export default function ViewDevicesDialog({ open, setOpen }: ViewDevicesDialogProps) {
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    
+    const [devices, setDevices] = useState<Device[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [selectedDevice, setSelectedDevice] = useState<Device | null>(null);
+
+    const fetchDevices = async () => {
+        setLoading(true);
+        try {
+            const res = await api.get<ResponseT<ListOlmsResponse>>("/olms");
+            if (res.data.success && res.data.data) {
+                setDevices(res.data.data.olms);
+            }
+        } catch (error: any) {
+            console.error("Error fetching devices:", error);
+            toast({
+                variant: "destructive",
+                title: t("errorLoadingDevices") || "Error loading devices",
+                description: formatAxiosError(error, t("failedToLoadDevices") || "Failed to load devices")
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (open) {
+            fetchDevices();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+
+    const deleteDevice = async (olmId: string) => {
+        try {
+            await api.delete(`/olm/${olmId}`);
+            toast({
+                title: t("deviceDeleted") || "Device deleted",
+                description: t("deviceDeletedDescription") || "The device has been successfully deleted."
+            });
+            setDevices(devices.filter(d => d.olmId !== olmId));
+            setIsDeleteModalOpen(false);
+            setSelectedDevice(null);
+        } catch (error: any) {
+            console.error("Error deleting device:", error);
+            toast({
+                variant: "destructive",
+                title: t("errorDeletingDevice") || "Error deleting device",
+                description: formatAxiosError(error, t("failedToDeleteDevice") || "Failed to delete device")
+            });
+        }
+    };
+
+    function reset() {
+        setDevices([]);
+        setSelectedDevice(null);
+        setIsDeleteModalOpen(false);
+    }
+
+    return (
+        <>
+            <Credenza
+                open={open}
+                onOpenChange={(val) => {
+                    setOpen(val);
+                    if (!val) {
+                        reset();
+                    }
+                }}
+            >
+                <CredenzaContent className="max-w-4xl">
+                    <CredenzaHeader>
+                        <CredenzaTitle>
+                            {t("viewDevices") || "View Devices"}
+                        </CredenzaTitle>
+                        <CredenzaDescription>
+                            {t("viewDevicesDescription") || "Manage your connected devices"}
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        {loading ? (
+                            <div className="flex items-center justify-center py-8">
+                                <RefreshCw className="h-6 w-6 animate-spin" />
+                            </div>
+                        ) : devices.length === 0 ? (
+                            <div className="text-center py-8 text-muted-foreground">
+                                {t("noDevices") || "No 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.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={() => {
+                                                            setSelectedDevice(device);
+                                                            setIsDeleteModalOpen(true);
+                                                        }}
+                                                    >
+                                                        {t("delete") || "Delete"}
+                                                    </Button>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </div>
+                        )}
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">{t("close") || "Close"}</Button>
+                        </CredenzaClose>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+
+            {selectedDevice && (
+                <ConfirmDeleteDialog
+                    open={isDeleteModalOpen}
+                    setOpen={(val) => {
+                        setIsDeleteModalOpen(val);
+                        if (!val) {
+                            setSelectedDevice(null);
+                        }
+                    }}
+                    dialog={
+                        <div>
+                            <p>{t("deviceQuestionRemove") || "Are you sure you want to delete this device?"}</p>
+                            <p>{t("deviceMessageRemove") || "This action cannot be undone."}</p>
+                        </div>
+                    }
+                    buttonText={t("deviceDeleteConfirm") || "Delete Device"}
+                    onConfirm={async () => deleteDevice(selectedDevice.olmId)}
+                    string={selectedDevice.name || selectedDevice.olmId}
+                    title={t("deleteDevice") || "Delete Device"}
+                />
+            )}
+        </>
+    );
+}
+