From 3e24d37d74a08dfa6272a930eb3fcf655f8a6362 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 11 Sep 2025 09:19:23 -0500
Subject: [PATCH] use badges and camera name label component

---
 web/src/views/settings/AuthenticationView.tsx | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/web/src/views/settings/AuthenticationView.tsx b/web/src/views/settings/AuthenticationView.tsx
index 9f5f7866e..c093a7c10 100644
--- a/web/src/views/settings/AuthenticationView.tsx
+++ b/web/src/views/settings/AuthenticationView.tsx
@@ -36,6 +36,7 @@ import EditRoleCamerasDialog from "@/components/overlay/EditRoleCamerasDialog";
 import { useTranslation } from "react-i18next";
 import DeleteRoleDialog from "@/components/overlay/DeleteRoleDialog";
 import { Separator } from "@/components/ui/separator";
+import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
 
 export default function AuthenticationView() {
   const { t } = useTranslation("views/settings");
@@ -607,12 +608,22 @@ export default function AuthenticationView() {
                           {roleData.name}
                         </TableCell>
                         <TableCell>
-                          {roleData.cameras.length > 0 ? (
-                            roleData.cameras.join(", ")
+                          {roleData.cameras.length > 5 ? (
+                            <Badge variant="outline" className="text-xs">
+                              {roleData.cameras.length} cameras
+                            </Badge>
                           ) : (
-                            <span className="text-muted-foreground">
-                              {t("menu.live.allCameras", { ns: "common" })}
-                            </span>
+                            <div className="flex flex-wrap gap-1">
+                              {roleData.cameras.map((camera) => (
+                                <Badge variant="outline" className="text-xs">
+                                  <CameraNameLabel
+                                    key={camera}
+                                    camera={camera}
+                                    className="text-xs smart-capitalize"
+                                  />
+                                </Badge>
+                              ))}
+                            </div>
                           )}
                         </TableCell>
                         <TableCell className="text-right">