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/app/[locale]/layout.tsx

@@ -106,6 +106,7 @@ export default async function Layout(props: {
             forceDisableStatus: serverSettings.board.forceDisableStatus,
           },
           search: { defaultSearchEngineId: serverSettings.search.defaultSearchEngineId },
+          user: { enableGravatar: serverSettings.user.enableGravatar },
         }}
         {...innerProps}
       />

apps/nextjs/src/app/[locale]/manage/settings/_components/user-settings-form.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Switch } from "@mantine/core";
+
+import type { ServerSettings } from "@homarr/server-settings";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CommonSettingsForm } from "./common-form";
+
+export const UserSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["user"] }) => {
+  const tUser = useScopedI18n("management.page.settings.section.user");
+
+  return (
+    <CommonSettingsForm settingKey="user" defaultValues={defaultValues}>
+      {(form) => (
+        <>
+          <Switch
+            {...form.getInputProps("enableGravatar", { type: "checkbox" })}
+            label={tUser("enableGravatar.label")}
+            description={tUser("enableGravatar.description")}
+          />
+        </>
+      )}
+    </CommonSettingsForm>
+  );
+};

apps/nextjs/src/app/[locale]/manage/settings/page.tsx

@@ -12,6 +12,7 @@ import { AppearanceSettingsForm } from "./_components/appearance-settings-form";
 import { BoardSettingsForm } from "./_components/board-settings-form";
 import { CultureSettingsForm } from "./_components/culture-settings-form";
 import { SearchSettingsForm } from "./_components/search-settings-form";
+import { UserSettingsForm } from "./_components/user-settings-form";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
@@ -42,6 +43,10 @@ export default async function SettingsPage() {
           <Title order={2}>{tSettings("section.board.title")}</Title>
           <BoardSettingsForm defaultValues={serverSettings.board} />
         </Stack>
+        <Stack>
+          <Title order={2}>{tSettings("section.user.title")}</Title>
+          <UserSettingsForm defaultValues={serverSettings.user} />
+        </Stack>
         <Stack>
           <Title order={2}>{tSettings("section.search.title")}</Title>
           <SearchSettingsForm defaultValues={serverSettings.search} />

apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx

@@ -200,7 +200,10 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
         <Stepper.Step label={t("step.review.label")} allowStepSelect={false} allowStepClick={false}>
           <Card p="xl" shadow="md" withBorder>
             <Stack maw={300} align="center" mx="auto">
-              <UserAvatar size="xl" user={{ name: generalForm.values.username, image: null }} />
+              <UserAvatar
+                size="xl"
+                user={{ name: generalForm.values.username, email: generalForm.values.email ?? null, image: null }}
+              />
               <Text tt="uppercase" fw="bolder" size="xl">
                 {generalForm.values.username}
               </Text>

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx

@@ -44,7 +44,7 @@ export default async function GroupsDetailPage(props: GroupsDetailPageProps) {
       <Card>
         {group.owner ? (
           <Group>
-            <UserAvatar user={{ name: group.owner.name, image: group.owner.image }} size={"lg"} />
+            <UserAvatar user={group.owner} size={"lg"} />
             <Stack align={"start"} gap={3}>
               <Text fw={"bold"}>{group.owner.name}</Text>
               <Text>{group.owner.email}</Text>

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}
+    />
+  );
 };