payload-zitadel-plugin 0.2.17 → 0.2.19

package/README.md

@@ -12,7 +12,7 @@ Thus the user collection in PayloadCMS becomes just a shadow of the information
 ## Install
 
 ```shell
-pnpm add payload-zitadel-plugin@0.2.17
+pnpm add payload-zitadel-plugin@0.2.19
 ```
 
 ## Configuration

package/dist/components/Avatar.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
-import { ServerProps } from 'payload';
-export declare const Avatar: ({ user }: ServerProps) => React.JSX.Element;
+export declare const Avatar: ({ active }: {
+    active: boolean;
+}) => React.JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AAGnC,eAAO,MAAM,MAAM,aAAY,WAAW,sBAwBE,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,eAAO,MAAM,MAAM,eAAc;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,sBAkBnD,CAAA"}

package/dist/components/Avatar.js

@@ -1,27 +1,25 @@
+'use client';
 import * as React from 'react';
 import { DefaultAccountIcon } from '@payloadcms/ui/graphics/Account/Default';
-export const Avatar = ({ user })=>user?.image ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", null, `
-                            .avatar {
-                                position: relative;
-                                height: 2rem;
-                                width: 2rem;
-                            }
-                            
-                            .avatar:hover {
-                                filter: brightness(.8);
-                            }
-                            
-                            .avatar img {
-                                border-radius: 100%;
-                            }
-                        `), /*#__PURE__*/ React.createElement("div", {
-        className: "avatar"
-    }, /*#__PURE__*/ React.createElement("img", {
+import { usePayloadAPI } from '@payloadcms/ui';
+export const Avatar = ({ active })=>{
+    const { data } = usePayloadAPI('/api/users/me')[0];
+    const { user } = data;
+    return user?.image ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", null, 'zitadel-avatar:hover { filter: brightness(1.2); }'), /*#__PURE__*/ React.createElement("img", {
+        className: "zitadel-avatar",
         src: user.image,
+        height: 25,
+        width: 25,
         alt: "Profile Picture",
-        sizes: "2rem 2rem"
-    }))) : /*#__PURE__*/ React.createElement(DefaultAccountIcon, {
-        active: false
+        style: {
+            borderRadius: '100%',
+            ...active ? {
+                filter: 'brightness(.8)'
+            } : {}
+        }
+    })) : /*#__PURE__*/ React.createElement(DefaultAccountIcon, {
+        active: active
     });
+};
 
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\nimport {DefaultAccountIcon} from '@payloadcms/ui/graphics/Account/Default'\nimport {ServerProps} from 'payload'\n\n\nexport const Avatar = ({user}: ServerProps) =>\n    user?.image ?\n        <>\n            <style>\n                {`\n                            .avatar {\n                                position: relative;\n                                height: 2rem;\n                                width: 2rem;\n                            }\n                            \n                            .avatar:hover {\n                                filter: brightness(.8);\n                            }\n                            \n                            .avatar img {\n                                border-radius: 100%;\n                            }\n                        `}\n            </style>\n            <div className=\"avatar\">\n                <img src={user.image} alt=\"Profile Picture\" sizes=\"2rem 2rem\"/>\n            </div>\n        </> :\n        <DefaultAccountIcon active={false}/>\n\n\n"],"names":["React","DefaultAccountIcon","Avatar","user","image","style","div","className","img","src","alt","sizes","active"],"mappings":"AAAA,YAAYA,WAAW,QAAO;AAC9B,SAAQC,kBAAkB,QAAO,0CAAyC;AAI1E,OAAO,MAAMC,SAAS,CAAC,EAACC,IAAI,EAAc,GACtCA,MAAMC,sBACF,wDACI,oBAACC,eACI,CAAC;;;;;;;;;;;;;;wBAcM,CAAC,iBAEb,oBAACC;QAAIC,WAAU;qBACX,oBAACC;QAAIC,KAAKN,KAAKC,KAAK;QAAEM,KAAI;QAAkBC,OAAM;yBAG1D,oBAACV;QAAmBW,QAAQ;OAAQ"}
+{"version":3,"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport {DefaultAccountIcon} from '@payloadcms/ui/graphics/Account/Default'\nimport {usePayloadAPI} from '@payloadcms/ui'\nimport {ZitadelUser} from '../types.js'\n\nexport const Avatar = ({active}: { active: boolean }) => {\n\n    const {data} = usePayloadAPI('/api/users/me')[0]\n\n    const {user} = data as { user: ZitadelUser }\n\n    return (\n        user?.image ?\n            <>\n                <style>{'zitadel-avatar:hover { filter: brightness(1.2); }'}</style>\n                <img className=\"zitadel-avatar\" src={user.image} height={25} width={25} alt=\"Profile Picture\" style={{\n                    borderRadius: '100%',\n                    ...(active ? {filter: 'brightness(.8)'} : {})\n                }}/>\n            </> :\n            <DefaultAccountIcon active={active}/>\n    )\n\n}\n"],"names":["React","DefaultAccountIcon","usePayloadAPI","Avatar","active","data","user","image","style","img","className","src","height","width","alt","borderRadius","filter"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAO;AAC9B,SAAQC,kBAAkB,QAAO,0CAAyC;AAC1E,SAAQC,aAAa,QAAO,iBAAgB;AAG5C,OAAO,MAAMC,SAAS,CAAC,EAACC,MAAM,EAAsB;IAEhD,MAAM,EAACC,IAAI,EAAC,GAAGH,cAAc,gBAAgB,CAAC,EAAE;IAEhD,MAAM,EAACI,IAAI,EAAC,GAAGD;IAEf,OACIC,MAAMC,sBACF,wDACI,oBAACC,eAAO,oEACR,oBAACC;QAAIC,WAAU;QAAiBC,KAAKL,KAAKC,KAAK;QAAEK,QAAQ;QAAIC,OAAO;QAAIC,KAAI;QAAkBN,OAAO;YACjGO,cAAc;YACd,GAAIX,SAAS;gBAACY,QAAQ;YAAgB,IAAI,CAAC,CAAC;QAChD;wBAEJ,oBAACf;QAAmBG,QAAQA;;AAGxC,EAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-zitadel-plugin",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "plugin for Payload CMS, which enables authentication via Zitadel IdP",
   "type": "module",
   "license": "MIT",