feat: implement gravatar (#1107)

docs/admin/overview.mdx

@@ -30,7 +30,8 @@ All options for the Admin panel are defined in your base Payload config file.
 | `indexHTML`          | Optionally replace the entirety of the `index.html` file used by the Admin panel. Reference the [base index.html file](https://github.com/payloadcms/payload/blob/master/src/admin/index.html) to ensure your replacement has the appropriate HTML elements. |
 | `css`                | Absolute path to a stylesheet that you can use to override / customize the Admin panel styling. [More](/docs/admin/customizing-css). |
 | `scss`               | Absolute path to a Sass variables / mixins stylesheet meant to override Payload styles to make for an easy re-skinning of the Admin panel. [More](/docs/admin/customizing-css#overriding-scss-variables). |
-| `dateFormat`         | Global date format that will be used for all dates in the Admin panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used.
+| `dateFormat`         | Global date format that will be used for all dates in the Admin panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used. |
+| `avatar`             | Set account profile picture. Options: `gravatar`, `default` or a custom React component. |
 | `components`         | Component overrides that affect the entirety of the Admin panel. [More](/docs/admin/components) |
 | `webpack`            | Customize the Webpack config that's used to generate the Admin panel. [More](/docs/admin/webpack) |
 

package.json

@@ -127,6 +127,7 @@
     "json-schema-to-typescript": "^11.0.2",
     "jsonwebtoken": "^8.5.1",
     "jwt-decode": "^3.1.2",
+    "md5": "^2.3.0",
     "method-override": "^3.0.0",
     "micro-memoize": "^4.0.9",
     "mini-css-extract-plugin": "1.3.3",

src/admin/components/graphics/Account/Gravatar.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import md5 from 'md5';
+import qs from 'qs';
+import { useAuth } from '../../utilities/Auth';
+
+const Gravatar: React.FC = () => {
+  const { user } = useAuth();
+
+  const hash = md5(user.email.trim().toLowerCase());
+
+  const query = qs.stringify({
+    s: 50,
+    r: 'g',
+    default: 'mp',
+  });
+
+  return (
+    <img
+      className="gravatar-account"
+      style={{ borderRadius: '50%' }}
+      src={`https://www.gravatar.com/avatar/${hash}?${query}`}
+      alt="yas"
+      width={25}
+      height={25}
+    />
+  );
+};
+
+export default Gravatar;

src/admin/components/graphics/Account/index.tsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { useAuth } from '../../utilities/Auth';
+import { useConfig } from '../../utilities/Config';
+import Gravatar from './Gravatar';
 
 const css = `
   .graphic-account .circle1 {
@@ -10,7 +13,7 @@ const css = `
   }
 `;
 
-const Account: React.FC = () => (
+const Default: React.FC = () => (
   <svg
     className="graphic-account"
     width="25"
@@ -39,4 +42,28 @@ const Account: React.FC = () => (
   </svg>
 );
 
+const Account = () => {
+  const {
+    admin: { avatar: Avatar },
+  } = useConfig();
+  const { user } = useAuth();
+
+  if (!user.email || Avatar === 'default') return <Default />;
+  if (Avatar === 'gravatar') return <Gravatar />;
+  if (Avatar) return <Avatar />;
+  return <Default />;
+};
+
 export default Account;
+
+function isClassComponent(component) {
+  return typeof component === 'function' && !!component.prototype.isReactComponent;
+}
+
+function isFunctionComponent(component) {
+  return typeof component === 'function' && String(component).includes('return React.createElement');
+}
+
+function isReactComponent(component) {
+  return isClassComponent(component) || isFunctionComponent(component);
+}

src/config/defaults.ts

@@ -17,6 +17,7 @@ export const defaults: Config = {
     },
     disable: false,
     indexHTML: path.resolve(__dirname, '../admin/index.html'),
+    avatar: 'default',
     components: {},
     css: path.resolve(__dirname, '../admin/scss/custom.css'),
     dateFormat: 'MMMM do yyyy, h:mm a',

src/config/schema.ts

@@ -56,6 +56,11 @@ export default joi.object({
     indexHTML: joi.string(),
     css: joi.string(),
     dateFormat: joi.string(),
+    avatar: joi.alternatives()
+      .try(
+        joi.string(),
+        component,
+      ),
     components: joi.object()
       .keys({
         routes: joi.array()

src/config/types.ts

@@ -119,6 +119,7 @@ export type Config = {
     indexHTML?: string;
     css?: string
     dateFormat?: string
+    avatar?: 'default' | 'gravatar' | React.ComponentType<any>,
     components?: {
       routes?: AdminRoute[]
       providers?: React.ComponentType<{ children: React.ReactNode }>[]

yarn.lock

@@ -3865,6 +3865,11 @@ chardet@^0.7.0:
   resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+charenc@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
+
 check-more-types@2.24.0:
   version "2.24.0"
   resolved "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
@@ -4509,6 +4514,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+crypt@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
+
 crypto-random-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
@@ -6982,7 +6992,7 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-buffer@^1.1.5, is-buffer@^1.1.6:
+is-buffer@^1.1.5, is-buffer@^1.1.6, is-buffer@~1.1.6:
   version "1.1.6"
   resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
@@ -8380,6 +8390,15 @@ md5-file@^5.0.0:
   resolved "https://registry.npmjs.org/md5-file/-/md5-file-5.0.0.tgz#e519f631feca9c39e7f9ea1780b63c4745012e20"
   integrity sha512-xbEFXCYVWrSx/gEKS1VPlg84h/4L20znVIulKw6kMfmBUAZNAnF00eczz9ICMl+/hjQGo5KSXRxbL/47X3rmMw==
 
+md5@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
+  integrity sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==
+  dependencies:
+    charenc "0.0.2"
+    crypt "0.0.2"
+    is-buffer "~1.1.6"
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"