✨ Use gravatar with user email (#1688)

* ✨ Use gravatar with user email
ajnart · Dec 7, 2023 · 51e96c0 · 51e96c0
1 parent d6af6af
commit 51e96c0
Showing 1 changed file with 74 additions and 58 deletions.
diff --git a/src/components/layout/header/AvatarMenu.tsx b/src/components/layout/header/AvatarMenu.tsx
@@ -8,6 +8,7 @@ import {
   IconSun,
   IconUserCog,
 } from '@tabler/icons-react';
+import { createHash } from 'crypto';
 import { User } from 'next-auth';
 import { signOut, useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
@@ -26,79 +27,94 @@ export const AvatarMenu = () => {
   const defaultBoardHref = useBoardLink('/board');
 
   return (
-    <>
-      <UnstyledButton>
-        <Menu width={256}>
-          <Menu.Target>
-            <CurrentUserAvatar user={sessionData?.user ?? null} />
-          </Menu.Target>
-          <Menu.Dropdown>
-            <Menu.Item
-              closeMenuOnClick={false}
-              icon={<Icon size="1rem" />}
-              onClick={toggleColorScheme}
-            >
-              {t('actions.avatar.switchTheme')}
-            </Menu.Item>
-            {sessionData?.user && (
-              <>
-                <Menu.Item
-                  component={Link}
-                  passHref
-                  href="/user/preferences"
-                  icon={<IconUserCog size="1rem" />}
-                >
-                  {t('actions.avatar.preferences')}
-                </Menu.Item>
-                <Menu.Item
-                  component={Link}
-                  href={defaultBoardHref}
-                  icon={<IconDashboard size="1rem" />}
-                >
-                  {t('actions.avatar.defaultBoard')}
-                </Menu.Item>
-                <Menu.Item component={Link} href="/manage" icon={<IconHomeShare size="1rem" />}>
-                  {t('actions.avatar.manage')}
-                </Menu.Item>
-                <Menu.Divider />
-              </>
-            )}
-            {sessionData?.user ? (
+    <UnstyledButton>
+      <Menu width={256}>
+        <Menu.Target>
+          <CurrentUserAvatar user={sessionData?.user ?? null} />
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            closeMenuOnClick={false}
+            icon={<Icon size="1rem" />}
+            onClick={toggleColorScheme}
+          >
+            {t('actions.avatar.switchTheme')}
+          </Menu.Item>
+          {sessionData?.user && (
+            <>
               <Menu.Item
-                icon={<IconLogout size="1rem" />}
-                color="red"
-                onClick={() =>
-                  signOut({
-                    redirect: false,
-                  }).then(() => window.location.reload())
-                }
+                component={Link}
+                passHref
+                href="/user/preferences"
+                icon={<IconUserCog size="1rem" />}
               >
-                {t('actions.avatar.logout', {
-                  username: sessionData.user.name,
-                })}
+                {t('actions.avatar.preferences')}
               </Menu.Item>
-            ) : (
-              <Menu.Item icon={<IconLogin size="1rem" />} component={Link} href="/auth/login">
-                {t('actions.avatar.login')}
+              <Menu.Item
+                component={Link}
+                href={defaultBoardHref}
+                icon={<IconDashboard size="1rem" />}
+              >
+                {t('actions.avatar.defaultBoard')}
+              </Menu.Item>
+              <Menu.Item component={Link} href="/manage" icon={<IconHomeShare size="1rem" />}>
+                {t('actions.avatar.manage')}
               </Menu.Item>
-            )}
-          </Menu.Dropdown>
-        </Menu>
-      </UnstyledButton>
-    </>
+              <Menu.Divider />
+            </>
+          )}
+          {sessionData?.user ? (
+            <Menu.Item
+              icon={<IconLogout size="1rem" />}
+              color="red"
+              onClick={() =>
+                signOut({
+                  redirect: false,
+                }).then(() => window.location.reload())
+              }
+            >
+              {t('actions.avatar.logout', {
+                username: sessionData.user.name,
+              })}
+            </Menu.Item>
+          ) : (
+            <Menu.Item icon={<IconLogin size="1rem" />} component={Link} href="/auth/login">
+              {t('actions.avatar.login')}
+            </Menu.Item>
+          )}
+        </Menu.Dropdown>
+      </Menu>
+    </UnstyledButton>
   );
 };
 
 type CurrentUserAvatarProps = {
   user: User | null;
 };
 
+const getGravatar = (email?: string | undefined | null) => {
+  if (!email) return null;
+  const emailHash = createHash('sha256').update(email.trim().toLowerCase()).digest('hex');
+  return `https://gravatar.com/avatar/${emailHash}?d=null`;
+};
+
 const CurrentUserAvatar = forwardRef<HTMLDivElement, CurrentUserAvatarProps>(
   ({ user, ...others }, ref) => {
     const { primaryColor } = useMantineTheme();
-    if (!user) return <Avatar ref={ref} {...others} />;
+    const { fn } = useMantineTheme();
+    const border = fn.variant({ variant: 'default' }).border;
+
+    if (!user)
+      return <Avatar ref={ref} styles={{ root: { border: `1px solid ${border}` } }} {...others} />;
+
     return (
-      <Avatar ref={ref} color={primaryColor} {...others}>
+      <Avatar
+        ref={ref}
+        color={primaryColor}
+        src={getGravatar(user.email)}
+        styles={{ root: { border: `1px solid ${border}` } }}
+        {...others}
+      >
         {user.name?.slice(0, 2).toUpperCase()}
       </Avatar>
     );