feat: adds support for last logged in auth method field

frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx

@@ -0,0 +1,23 @@
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+  lastLoggedInAuthMethod: string;
+};
+
+export const LastLoginSection = ({ lastLoggedInAuthMethod }: Props) => (
+  <div className="">
+    <div className="mb-2 flex items-center gap-2 border-b border-mineshaft-600 pb-1">
+      <div className="font-medium">Last Login Details</div>
+    </div>
+    <div className="flex items-center gap-2 text-sm">
+      <div className="rounded bg-mineshaft-700 p-1 px-2">
+        <FontAwesomeIcon icon={faEnvelope} />
+      </div>
+      <div className="flex flex-col">
+        <div className="text-sm font-medium">Authentication Method</div>
+        <div className="text-sm">{lastLoggedInAuthMethod}</div>
+      </div>
+    </div>
+  </div>
+);

frontend/src/components/organization/LastLoginSection/index.tsx

@@ -0,0 +1 @@
+export { LastLoginSection } from "./LastLoginSection";

frontend/src/components/v2/Badge/Badge.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { cva, VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";
 
@@ -24,13 +25,16 @@ const badgeVariants = cva(
 
 export type BadgeProps = VariantProps<typeof badgeVariants> & IProps;
 
-export const Badge = ({ children, className, variant, ...props }: BadgeProps) => {
-  return (
-    <div
-      className={twMerge(badgeVariants({ variant: variant || "primary" }), className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  ({ children, className, variant, ...props }, ref) => {
+    return (
+      <div
+        className={twMerge(badgeVariants({ variant: variant || "primary" }), className)}
+        {...props}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  }
+);

frontend/src/hooks/api/identities/types.ts

@@ -41,6 +41,7 @@ export type IdentityMembershipOrg = {
   id: string;
   identity: Identity;
   organization: string;
+  lastLoggedInAuthMethod?: IdentityAuthMethod;
   metadata: { key: string; value: string; id: string }[];
   role: "admin" | "member" | "viewer" | "no-access" | "custom";
   customRole?: TOrgRole;

frontend/src/hooks/api/users/types.ts

@@ -68,6 +68,7 @@ export type OrgUser = {
   deniedPermissions: any[];
   roleId: string;
   isActive: boolean;
+  lastLoggedInAuthMethod?: AuthMethod;
 };
 
 export type TProjectMembership = {

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -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 && (

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -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")}>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx

@@ -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">

frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx

@@ -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>