feat: Add custom account row label component

Author: CrawlerCode

packages/dev/src/app/(payload)/admin/importMap.js

@@ -1,7 +1,9 @@
+import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
 import { SignInWithAuthjsButton as SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
 import { default as default_2c1e1c35da30a80d88551f9fcc61be66 } from 'src/payload/components/Greeting'
 
 export const importMap = {
+  "payload-authjs/components#AccountRowLabel": AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e,
   "payload-authjs/components#SignInWithAuthjsButton": SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e,
   "/Greeting#default": default_2c1e1c35da30a80d88551f9fcc61be66
 }

packages/payload-authjs/src/components/AccountRowLabel.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useRowLabel } from "@payloadcms/ui";
+import type { Account } from "../authjs/types";
+
+export const AccountRowLabel = () => {
+  const { data: account } = useRowLabel<Account>();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem",
+      }}
+    >
+      <img
+        loading="lazy"
+        src={`https://authjs.dev/img/providers/${account.provider}.svg`}
+        alt="Provider"
+        style={{
+          width: "1.5rem",
+          height: "1.5rem",
+        }}
+      />
+      <strong>{account.provider}</strong> ({account.providerAccountId})
+    </div>
+  );
+};

packages/payload-authjs/src/components/index.ts

@@ -1 +1,2 @@
+export { AccountRowLabel } from "./AccountRowLabel";
 export { SignInWithAuthjsButton } from "./SignInWithAuthjsButton";

packages/payload-authjs/src/payload/collection/fields/accounts.ts

@@ -27,6 +27,9 @@ export const accountsField: Field = {
   ],
   admin: {
     initCollapsed: true,
+    components: {
+      RowLabel: "payload-authjs/components#AccountRowLabel",
+    },
   },
   access: {
     create: () => false,