Merge pull request #2229 from danielepintore/canary

feat(dashboard): generate user fallback avatar using user email and allow user to choose default avatar

Author: Siumauricio

apps/dokploy/components/dashboard/settings/profile/profile-form.tsx

@@ -1,3 +1,4 @@
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Switch } from "@/components/ui/switch";
-import { generateSHA256Hash } from "@/lib/utils";
+import { generateSHA256Hash, getFallbackAvatarInitials } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2, User } from "lucide-react";
@@ -257,6 +258,24 @@ export const ProfileForm = () => {
 																value={field.value}
 																className="flex flex-row flex-wrap gap-2 max-xl:justify-center"
 															>
+																<FormItem key="no-avatar">
+																	<FormLabel className="[&:has([data-state=checked])>.default-avatar]:border-primary [&:has([data-state=checked])>.default-avatar]:border-1 [&:has([data-state=checked])>.default-avatar]:p-px cursor-pointer">
+																		<FormControl>
+																			<RadioGroupItem
+																				value=""
+																				className="sr-only"
+																			/>
+																		</FormControl>
+
+																		<Avatar className="default-avatar h-12 w-12 rounded-full border hover:p-px hover:border-primary transition-transform">
+																			<AvatarFallback className="rounded-lg">
+																				{getFallbackAvatarInitials(
+																					data?.user?.name,
+																				)}
+																			</AvatarFallback>
+																		</Avatar>
+																	</FormLabel>
+																</FormItem>
 																{availableAvatars.map((image) => (
 																	<FormItem key={image}>
 																		<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px cursor-pointer">

apps/dokploy/components/layouts/user-nav.tsx

@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/select";
 import { authClient } from "@/lib/auth-client";
 import { Languages } from "@/lib/languages";
+import { getFallbackAvatarInitials } from "@/lib/utils";
 import { api } from "@/utils/api";
 import useLocale from "@/utils/hooks/use-locale";
 import { ModeToggle } from "../ui/modeToggle";
@@ -46,7 +47,9 @@ export const UserNav = () => {
 							src={data?.user?.image || ""}
 							alt={data?.user?.image || ""}
 						/>
-						<AvatarFallback className="rounded-lg">CN</AvatarFallback>
+						<AvatarFallback className="rounded-lg">
+							{getFallbackAvatarInitials(data?.user?.name)}
+						</AvatarFallback>
 					</Avatar>
 					<div className="grid flex-1 text-left text-sm leading-tight">
 						<span className="truncate font-semibold">Account</span>

apps/dokploy/lib/utils.ts

@@ -27,3 +27,14 @@ export function formatTimestamp(timestamp: string | number) {
 		return "Fecha inválida";
 	}
 }
+
+export function getFallbackAvatarInitials(
+	fullName: string | undefined,
+): string {
+	if (typeof fullName === "undefined" || fullName === "") return "CN";
+	const [name = "", surname = ""] = fullName.split(" ");
+	if (surname === "") {
+		return name.substring(0, 2).toUpperCase();
+	}
+	return (name.charAt(0) + surname.charAt(0)).toUpperCase();
+}