feat(users): add libravatar / gravatar support (#4277)

Co-authored-by: HeapReaper <kelivn@heapreaper.nl>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

apps/nextjs/src/components/access/access-settings.tsx

@@ -26,6 +26,7 @@ interface UserAccessPermission<TPermission extends string> {
   user: {
     name: string | null;
     image: string | null;
+    email: string | null;
     id: string;
   };
 }
@@ -66,6 +67,7 @@ interface Props<TPermission extends string> {
       id: string;
       name: string | null;
       image: string | null;
+      email: string | null;
     } | null;
   };
   translate: (key: TPermission) => string;

apps/nextjs/src/components/access/user-access-form.tsx

@@ -21,6 +21,7 @@ export interface FormProps<TPermission extends string> {
       id: string;
       name: string | null;
       image: string | null;
+      email: string | null;
     } | null;
   };
   accessQueryData: AccessQueryData<TPermission>;
@@ -118,6 +119,7 @@ interface UserItemContentProps {
     id: string;
     name: string | null;
     image: string | null;
+    email: string | null;
   };
 }
 

apps/nextjs/src/components/access/user-select-modal.tsx

@@ -13,7 +13,7 @@ import { UserAvatar } from "@homarr/ui";
 interface InnerProps {
   presentUserIds: string[];
   excludeExternalProviders?: boolean;
-  onSelect: (props: { id: string; name: string; image: string }) => void | Promise<void>;
+  onSelect: (props: { id: string; name: string; image: string; email: string | null }) => void | Promise<void>;
   confirmLabel?: string;
 }
 
@@ -36,6 +36,7 @@ export const UserSelectModal = createModal<InnerProps>(({ actions, innerProps })
       id: currentUser.id,
       name: currentUser.name ?? "",
       image: currentUser.image ?? "",
+      email: currentUser.email ?? null,
     });
 
     setLoading(false);

apps/nextjs/src/components/board/items/actions/test/mocks/board-mock.ts

@@ -34,6 +34,7 @@ export class BoardMockBuilder {
         id: createId(),
         image: null,
         name: "User",
+        email: null,
       },
       groupPermissions: [],
       userPermissions: [],

apps/nextjs/src/components/user-avatar.tsx

@@ -3,17 +3,21 @@ import type { MantineSize } from "@mantine/core";
 import { auth } from "@homarr/auth/next";
 import { UserAvatar } from "@homarr/ui";
 
-interface UserAvatarProps {
+interface CurrentUserAvatarProps {
   size: MantineSize;
 }
 
-export const CurrentUserAvatar = async ({ size }: UserAvatarProps) => {
+export const CurrentUserAvatar = async ({ size }: CurrentUserAvatarProps) => {
   const currentSession = await auth();
 
-  const user = {
-    name: currentSession?.user.name ?? null,
-    image: currentSession?.user.image ?? null,
-  };
-
-  return <UserAvatar user={user} size={size} />;
+  return (
+    <UserAvatar
+      user={{
+        name: currentSession?.user.name ?? null,
+        image: currentSession?.user.image ?? null,
+        email: currentSession?.user.email ?? null,
+      }}
+      size={size}
+    />
+  );
 };