feat: Add custom account row label component

CrawlerCode · CrawlerCode · commit 89ce1a75159f · 2025-02-18T23:04:16.000+01:00
diff --git a/packages/dev/src/app/(payload)/admin/importMap.js b/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
 }
diff --git a/packages/payload-authjs/src/components/AccountRowLabel.tsx b/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>
+  );
+};
diff --git a/packages/payload-authjs/src/components/index.ts b/packages/payload-authjs/src/components/index.ts
@@ -1 +1,2 @@
+export { AccountRowLabel } from "./AccountRowLabel";
 export { SignInWithAuthjsButton } from "./SignInWithAuthjsButton";
diff --git a/packages/payload-authjs/src/payload/collection/fields/accounts.ts b/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,

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,9 @@`
	`1`	`+import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'`
`1`	`2`	`import { SignInWithAuthjsButton as SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'`
`2`	`3`	`import { default as default_2c1e1c35da30a80d88551f9fcc61be66 } from 'src/payload/components/Greeting'`
`3`	`4`
`4`	`5`	`export const importMap = {`
	`6`	`+ "payload-authjs/components#AccountRowLabel": AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e,`
`5`	`7`	`"payload-authjs/components#SignInWithAuthjsButton": SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e,`
`6`	`8`	`"/Greeting#default": default_2c1e1c35da30a80d88551f9fcc61be66`
`7`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
	`1`	`+export { AccountRowLabel } from "./AccountRowLabel";`
`1`	`2`	`export { SignInWithAuthjsButton } from "./SignInWithAuthjsButton";`