From 51e96c0ccfc283d55f0ddd028d4653ba62fa7952 Mon Sep 17 00:00:00 2001
From: Tagaishi <Tagaishi@hotmail.ch>
Date: Thu, 7 Dec 2023 18:15:07 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Use=20gravatar=20with=20user=20emai?=
 =?UTF-8?q?l=20(#1688)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Use gravatar with user email
---
 src/components/layout/header/AvatarMenu.tsx | 132 +++++++++++---------
 1 file changed, 74 insertions(+), 58 deletions(-)

diff --git a/src/components/layout/header/AvatarMenu.tsx b/src/components/layout/header/AvatarMenu.tsx
index e0ea38d011f..f9d6b4d0de4 100644
--- 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,66 +27,64 @@ 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>
   );
 };
 
@@ -93,12 +92,29 @@ 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>
     );