Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-01-22 07:22:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Use gravatar with user email (#1688)

Browse Source 
* ✨ Use gravatar with user email
This commit is contained in:
Tagaishi
2023-12-07 18:15:07 +01:00
committed by GitHub
parent d6af6af0b6
commit 51e96c0ccf
1 changed files with 74 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/layout/header/AvatarMenu.tsx
View File

@@ -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.Dropdown>
</Menu>
</UnstyledButton>
</>
<Menu.Item component={Link} href="/manage" icon={<IconHomeShare size="1rem" />}>
{t('actions.avatar.manage')}
</Menu.Item>
<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>
);