feat: change user profile picture (#38)

* wip

* feat: finish profile picture editing

* chore: biome

* build: pnpm install

* fix: use @backend not test

* chore: remove unused import

* fix: get userId from server session for security

Author: lorenzocorallo

package.json

@@ -16,7 +16,7 @@
     "@base-ui/react": "^1.3.0",
     "@better-auth/passkey": "^1.5.5",
     "@hookform/resolvers": "^3.9.1",
-    "@polinetwork/backend": "^0.15.19",
+    "@polinetwork/backend": "^0.16.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-table": "^8.21.2",

pnpm-lock.yaml

@@ -1,11 +1,10 @@
-import { Calendar, CircleAlert, KeyIcon, UserIcon } from "lucide-react"
+import { Calendar, CircleAlert, KeyIcon } from "lucide-react"
 import { headers } from "next/headers"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { auth } from "@/lib/auth"
-import { getInitials } from "@/lib/utils"
 import { getServerSession } from "@/server/auth"
 import { DeletePasskey } from "./delete-passkey"
 import { NewPasskeyButton } from "./passkey-button"
+import { ProfilePic } from "./profile-pic"
 import { SetName } from "./set-name"
 import { Telegram } from "./telegram"
 
@@ -25,12 +24,7 @@ export default async function Account() {
     <main className="container mx-auto px-4 py-8">
       <h2 className="text-accent-foreground mb-4 text-3xl font-bold">Account</h2>
       <div className="flex gap-4 mb-12">
-        <Avatar className="h-32 w-32 rounded-lg after:rounded-lg">
-          {user.image && <AvatarImage src={user.image} alt={`propic of ${user.name}`} />}
-          <AvatarFallback className="rounded-lg text-3xl">
-            {user.name ? getInitials(user.name) : <UserIcon size={48} />}
-          </AvatarFallback>
-        </Avatar>
+        <ProfilePic user={user} />
 
         <div className="flex flex-col gap-2">
           <div className="flex items-center gap-2">

src/app/dashboard/(active)/account/page.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import type { User } from "better-auth"
+import { Pencil, Upload, UserIcon, X } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { forwardRef, useRef } from "react"
+import { toast } from "sonner"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { auth, useSession } from "@/lib/auth"
+import { getInitials } from "@/lib/utils"
+import { updateProfilePic } from "@/server/actions/users"
+
+type Props = {
+  user: User
+}
+
+export function ProfilePic({ user }: Props) {
+  const uploadRef = useRef<HTMLInputElement>(null)
+  const router = useRouter()
+  const { refetch } = useSession()
+
+  async function handleRemove() {
+    const ok = confirm("Are you sure you want to reset your profile picture?")
+    if (!ok) return
+
+    const r = await auth.updateUser({ image: null })
+    if (r.error) {
+      toast.error("There was an error")
+      console.error(r.error)
+      return
+    }
+
+    toast.success("Profile picture removed successfully'")
+    await refetch()
+    router.refresh()
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <Avatar className="h-32 w-32 rounded-full relative group peer">
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <div className="absolute top-0 left-0 w-full h-full group-hover:opacity-100 opacity-0 bg-background/70 backdrop-blur-[1px] transition-all cursor-pointer z-10 grid place-content-center duration-100">
+              <Pencil size={32} />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={() => uploadRef.current?.click()}>
+              <Upload /> Upload
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={handleRemove} variant="destructive" disabled={!user.image}>
+              <X /> Remove
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <UploadProfilePicture ref={uploadRef} />
+
+        <AvatarImage src={user.image || undefined} alt={`propic of ${user.name}`} />
+        <AvatarFallback className="rounded-full text-3xl text-foreground">
+          {user.name ? getInitials(user.name) : <UserIcon size={48} />}
+        </AvatarFallback>
+      </Avatar>
+      <p className="peer-hover:opacity-100 opacity-0 text-xs">Max 1MB</p>
+    </div>
+  )
+}
+
+const UploadProfilePicture = forwardRef<HTMLInputElement>((_, ref) => {
+  const router = useRouter()
+  const { refetch } = useSession()
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files
+    if (files && files.length > 0) {
+      const selectedFile = files[0]
+      if (!selectedFile) return
+
+      if (selectedFile.size > 1024 * 1024) {
+        toast.error("The image must be no larger than 1 MB")
+        return
+      }
+
+      if (selectedFile.type !== "image/png" && selectedFile.type !== "image/jpeg") {
+        toast.error("The image must be jpeg or png")
+        return
+      }
+
+      const { success } = await updateProfilePic(selectedFile)
+      if (success) toast.success("Image changed successfully!")
+      else toast.error("There was an error, try again")
+      await refetch()
+      router.refresh()
+    }
+  }
+  return (
+    <input
+      className="hidden"
+      type="file"
+      ref={ref}
+      onChange={handleFileChange}
+      multiple={false}
+      accept="image/png,image/jpeg"
+      maxLength={1024 * 1024}
+    />
+  )
+})

src/app/dashboard/(active)/account/profile-pic.tsx

@@ -1,13 +1,11 @@
 import { Suspense } from "react"
 import { ErrorBoundary } from "react-error-boundary"
 import { Spinner } from "@/components/spinner"
-import { wait } from "@/lib/utils"
 import { getAzureMembers } from "@/server/actions/azure"
 import { AssocTable } from "./table"
 
 export default async function AssocMembers() {
   const members = await getAzureMembers()
-  // await wait(120_000)
 
   return (
     <div className="container p-8">

src/app/dashboard/(active)/azure/members/page.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { Copy, Pen } from "lucide-react"
+import { Copy } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
 import { Badge } from "@/components/ui/badge"

src/app/dashboard/(active)/telegram/groups/group-row.tsx

@@ -19,7 +19,7 @@ import {
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { useSession } from "@/lib/auth"
 import { delUserRole } from "@/server/actions/users"
-import type { ApiOutput, TgUser, TgUserRole } from "@/server/trpc/types"
+import type { TgUser, TgUserRole } from "@/server/trpc/types"
 
 const ARRAY_USER_ROLES = [
   USER_ROLE.ADMIN,

src/app/dashboard/(active)/telegram/user-details/remove-role.tsx

@@ -1,8 +1,8 @@
 "use client"
-import { LogOutIcon, Settings2 } from "lucide-react"
+import { LogOutIcon, Settings2, UserIcon } from "lucide-react"
 import Link from "next/link"
 import { redirect } from "next/navigation"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -24,8 +24,9 @@ export function RightNav() {
         render={
           <Button variant="ghost" size="icon" className="rounded-full">
             <Avatar size="lg">
-              <AvatarFallback className="text-foreground text-base">
-                {data.user.name ? getInitials(data.user.name) : data.user.email.slice(0, 2)}
+              <AvatarImage src={data.user.image || undefined} alt={`propic of ${data.user.name}`} />
+              <AvatarFallback className="rounded-full text-base text-foreground">
+                {data.user.name ? getInitials(data.user.name) : <UserIcon className="size-5" />}
               </AvatarFallback>
             </Avatar>
           </Button>

src/components/admin-header/right-nav.tsx

@@ -1,9 +1,19 @@
 "use server"
-import { requireRole } from "../auth"
+import { getServerSession, requireRole } from "../auth"
 import { trpc } from "../trpc"
 import type { ApiOutput, TgUserRole } from "../trpc/types"
 import { getUserGrant } from "./grants"
 
+export async function updateProfilePic(file: File) {
+  const session = await getServerSession()
+  if (!session.data) return { success: false }
+
+  const fd = new FormData()
+  fd.set("userId", session.data.user.id)
+  fd.set("image", file)
+  return await trpc.auth.updateProfilePic.mutate(fd)
+}
+
 export async function getUserInfo(userId: number) {
   return (await trpc.tg.users.get.query({ userId })).user ?? null
 }

src/server/actions/users.ts

@@ -1,16 +1,28 @@
 import "server-only"
 
 import { type AppRouter, TRPC_PATH } from "@polinetwork/backend"
-import { createTRPCClient, httpBatchLink } from "@trpc/client"
+import { createTRPCClient, httpBatchLink, httpLink, isNonJsonSerializable, splitLink } from "@trpc/client"
 import SuperJSON from "superjson"
 import { env } from "@/env"
 
 const url = env.BACKEND_URL + TRPC_PATH
 export const trpc = createTRPCClient<AppRouter>({
   links: [
-    httpBatchLink({
-      url,
-      transformer: SuperJSON,
+    splitLink({
+      condition: (op) => isNonJsonSerializable(op.input),
+      true: httpLink({
+        url,
+        transformer: {
+          // request - convert data before sending to the tRPC server
+          serialize: (data) => data,
+          // response - convert the tRPC response before using it in client
+          deserialize: (data) => SuperJSON.deserialize(data), // or your other transformer
+        },
+      }),
+      false: httpBatchLink({
+        url,
+        transformer: SuperJSON, // or your other transformer
+      }),
     }),
   ],
 })