diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 59cb85a..20447bb 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -56,6 +56,7 @@ "device-activity": "Device activity", "deviceActivity": "Device activity", "directMembership": "Direct membership", + "disabled": "Disabled", "displayName": "Display name", "doCancel": "Cancel", "doDeny": "Deny", diff --git a/src/components/elements/table/members-table.tsx b/src/components/elements/table/members-table.tsx index 2cc9ee1..a763388 100644 --- a/src/components/elements/table/members-table.tsx +++ b/src/components/elements/table/members-table.tsx @@ -1,5 +1,6 @@ import { useTranslation } from "react-i18next"; import { TableRows } from "./table"; +import { Lock } from "lucide-react"; type Props = { rows: TableRows; @@ -15,29 +16,67 @@ const loading = ( const MembersTable: React.FC = ({ rows, isLoading }) => { const { t } = useTranslation(); + + const disabledInfo = ( + + + + ); + + function getNameOrUsername(item: { + name?: string; + username?: string; + }): string { + return item.name || item.username || ""; + } + + function isOrgAdmin(item: { email?: string; username?: string }) { + return ( + item.email?.startsWith("org-admin") || + item.username?.startsWith("org-admin") + ); + } + return (
{isLoading && loading} {!isLoading && ( <>
- {rows.map((item) => ( -
-
- {item["name"]} -
-
- {item["email"]} + {rows.map((item) => { + if (isOrgAdmin(item)) { + return ( +
+
+ {t("admin")} +
+
+ ); + } + return ( +
+
+ {getNameOrUsername(item)} +
+
+ {item["email"]} + {item["enabled"] === false && disabledInfo} +
+
{item["roles"]}
+
{item["action"]}
-
{item["roles"]}
-
{item["action"]}
-
- ))} + ); + })}
{rows.map((item) => { - const isOrgAdmin = item.email?.startsWith("org-admin"); + const isOrgAdmin = + item.email?.startsWith("org-admin") || + item.username?.startsWith("org-admin"); if (isOrgAdmin) { return ( @@ -46,8 +85,10 @@ const MembersTable: React.FC = ({ rows, isLoading }) => { {t("admin")} - - + @@ -58,17 +99,18 @@ const MembersTable: React.FC = ({ rows, isLoading }) => { return ( - diff --git a/src/pages/organizations/detail.tsx b/src/pages/organizations/detail.tsx index 9e995f1..7a62b92 100644 --- a/src/pages/organizations/detail.tsx +++ b/src/pages/organizations/detail.tsx @@ -94,7 +94,7 @@ export default function OrganizationDetail() { const totalMembers = members.length; const rows: TableRows = members.map((member) => ({ - email: member.email, + ...member, name: `${member.firstName || ""} ${member.lastName || ""}`.trim(), roles: , action: ,
-
- {item["name"]} +
+ {getNameOrUsername(item)}
-
+
{item["email"]} + {item["enabled"] === false && disabledInfo}
{item["roles"]} + {item["action"]}