feat: adds support for last logged in auth method field

This commit is contained in:
=
2025-08-06 11:57:43 +05:30
parent 59cffe8cfb
commit 4dcd3ed06c
28 changed files with 366 additions and 134 deletions
@@ -7,6 +7,7 @@ import {
faEdit,
faEllipsisV,
faFilter,
faInfoCircle,
faMagnifyingGlass,
faServer,
faTrash
@@ -16,6 +17,7 @@ import { useNavigate } from "@tanstack/react-router";
import { twMerge } from "tailwind-merge";
import { createNotification } from "@app/components/notifications";
import { LastLoginSection } from "@app/components/organization/LastLoginSection";
import { OrgPermissionCan } from "@app/components/permissions";
import {
DropdownMenu,
@@ -40,6 +42,7 @@ import {
Td,
Th,
THead,
Tooltip,
Tr
} from "@app/components/v2";
import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
@@ -284,112 +287,129 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
<TBody>
{isPending && <TableSkeleton columns={3} innerKey="org-identities" />}
{!isPending &&
data?.identities?.map(({ identity: { id, name }, role, customRole }) => {
return (
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
key={`identity-${id}`}
onClick={() =>
navigate({
to: "/organization/identities/$identityId",
params: {
identityId: id
}
})
}
>
<Td>{name}</Td>
<Td>
<OrgPermissionCan
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => {
return (
<Select
value={role === "custom" ? (customRole?.slug as string) : role}
isDisabled={!isAllowed}
className="h-8 w-48 bg-mineshaft-700"
position="popper"
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={(selectedRole) =>
handleChangeRole({
identityId: id,
role: selectedRole
})
}
>
{(roles || []).map(({ slug, name: roleName }) => (
<SelectItem value={slug} key={`owner-option-${slug}`}>
{roleName}
</SelectItem>
))}
</Select>
);
}}
</OrgPermissionCan>
</Td>
<Td>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton
ariaLabel="Options"
className="w-6"
colorSchema="secondary"
variant="plain"
data?.identities?.map(
({ identity: { id, name }, role, customRole, lastLoggedInAuthMethod }) => {
return (
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
key={`identity-${id}`}
onClick={() =>
navigate({
to: "/organization/identities/$identityId",
params: {
identityId: id
}
})
}
>
<Td className="group">
{name}
{lastLoggedInAuthMethod && (
<Tooltip
className="min-w-52 max-w-96"
content={
<LastLoginSection lastLoggedInAuthMethod={lastLoggedInAuthMethod} />
}
>
<FontAwesomeIcon icon={faEllipsisV} />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent sideOffset={2} align="end">
<OrgPermissionCan
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faEdit} />}
onClick={(e) => {
e.stopPropagation();
navigate({
to: "/organization/identities/$identityId",
params: {
identityId: id
}
});
}}
<FontAwesomeIcon
icon={faInfoCircle}
className="ml-2 text-mineshaft-400 opacity-0 transition-all group-hover:opacity-100"
/>
</Tooltip>
)}
</Td>
<Td>
<OrgPermissionCan
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => {
return (
<Select
value={role === "custom" ? (customRole?.slug as string) : role}
isDisabled={!isAllowed}
>
Edit Identity
</DropdownMenuItem>
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionIdentityActions.Delete}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("deleteIdentity", {
className="h-8 w-48 bg-mineshaft-700"
position="popper"
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={(selectedRole) =>
handleChangeRole({
identityId: id,
name
});
}}
isDisabled={!isAllowed}
icon={<FontAwesomeIcon icon={faTrash} />}
role: selectedRole
})
}
>
Delete Identity
</DropdownMenuItem>
)}
</OrgPermissionCan>
</DropdownMenuContent>
</DropdownMenu>
</Td>
</Tr>
);
})}
{(roles || []).map(({ slug, name: roleName }) => (
<SelectItem value={slug} key={`owner-option-${slug}`}>
{roleName}
</SelectItem>
))}
</Select>
);
}}
</OrgPermissionCan>
</Td>
<Td>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton
ariaLabel="Options"
className="w-6"
colorSchema="secondary"
variant="plain"
>
<FontAwesomeIcon icon={faEllipsisV} />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent sideOffset={2} align="end">
<OrgPermissionCan
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faEdit} />}
onClick={(e) => {
e.stopPropagation();
navigate({
to: "/organization/identities/$identityId",
params: {
identityId: id
}
});
}}
isDisabled={!isAllowed}
>
Edit Identity
</DropdownMenuItem>
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionIdentityActions.Delete}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("deleteIdentity", {
identityId: id,
name
});
}}
isDisabled={!isAllowed}
icon={<FontAwesomeIcon icon={faTrash} />}
>
Delete Identity
</DropdownMenuItem>
)}
</OrgPermissionCan>
</DropdownMenuContent>
</DropdownMenu>
</Td>
</Tr>
);
}
)}
</TBody>
</Table>
{!isPending && data && totalCount > 0 && (
@@ -7,6 +7,7 @@ import {
faEdit,
faEllipsisV,
faFilter,
faInfoCircle,
faMagnifyingGlass,
faSearch,
faUsers,
@@ -19,6 +20,7 @@ import { useNavigate } from "@tanstack/react-router";
import { twMerge } from "tailwind-merge";
import { createNotification } from "@app/components/notifications";
import { LastLoginSection } from "@app/components/organization/LastLoginSection";
import { OrgPermissionCan } from "@app/components/permissions";
import {
Badge,
@@ -471,7 +473,16 @@ export const OrgMembersTable = ({
{isLoading && <TableSkeleton columns={5} innerKey="org-members" />}
{!isLoading &&
filteredMembersPage.map(
({ user: u, inviteEmail, role, roleId, id: orgMembershipId, status, isActive }) => {
({
user: u,
inviteEmail,
role,
roleId,
id: orgMembershipId,
status,
isActive,
lastLoggedInAuthMethod
}) => {
const name =
u && u.firstName ? `${u.firstName} ${u.lastName ?? ""}`.trim() : null;
const email = u?.email || inviteEmail;
@@ -504,7 +515,9 @@ export const OrgMembersTable = ({
}}
/>
</Td>
<Td className={twMerge("max-w-0", isActive ? "" : "text-mineshaft-400")}>
<Td
className={twMerge("group max-w-0", isActive ? "" : "text-mineshaft-400")}
>
<div className="flex items-center">
<p className="truncate">
{name ?? <span className="text-mineshaft-400">Not Set</span>}
@@ -517,6 +530,19 @@ export const OrgMembersTable = ({
</Tooltip>
</Badge>
)}
{lastLoggedInAuthMethod && (
<Tooltip
className="min-w-52 max-w-96"
content={
<LastLoginSection lastLoggedInAuthMethod={lastLoggedInAuthMethod} />
}
>
<FontAwesomeIcon
icon={faInfoCircle}
className="ml-2 text-mineshaft-400 opacity-0 transition-all group-hover:opacity-100"
/>
</Tooltip>
)}
</div>
</Td>
<Td className={twMerge("max-w-0", isActive ? "" : "text-mineshaft-400")}>
@@ -138,6 +138,10 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
<p className="text-sm font-semibold text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{data.identity.name}</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Last Login Auth Method</p>
<p className="text-sm text-mineshaft-300">{data.lastLoggedInAuthMethod || "-"}</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Delete Protection</p>
<p className="text-sm text-mineshaft-300">
@@ -159,6 +159,14 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
</p>
</div>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Last Login Auth Method</p>
<div className="group flex align-top">
<p className="break-all text-sm text-mineshaft-300">
{membership.lastLoggedInAuthMethod || "-"}
</p>
</div>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
<p className="text-sm text-mineshaft-300">{roleName ?? "-"}</p>