feat(settings): adiciona opção de remover foto de perfil

- Adiciona endpoint DELETE em /api/profile/avatar
- Mostra dois botões ao hover: câmera (upload) e lixeira (remover)
- Lixeira só aparece quando há uma foto definida

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
rever-tecnologia 2025-12-15 11:17:22 -03:00
parent 4bbd3fda24
commit 4e2dd7f77e
2 changed files with 73 additions and 9 deletions

View file

@ -1,6 +1,7 @@
/**
* API de Upload de Avatar
* API de Avatar
* POST - Faz upload de uma nova foto de perfil
* DELETE - Remove a foto de perfil (volta ao padrão)
*/
import { NextRequest, NextResponse } from "next/server"
@ -86,3 +87,27 @@ export async function POST(request: NextRequest) {
return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 })
}
}
export async function DELETE() {
try {
const session = await getServerSession()
if (!session?.user?.id) {
return NextResponse.json({ error: "Não autorizado" }, { status: 401 })
}
// Remove a imagem do usuário (volta ao padrão)
await prisma.authUser.update({
where: { id: session.user.id },
data: { image: null },
})
return NextResponse.json({
success: true,
message: "Foto removida com sucesso",
})
} catch (error) {
console.error("[profile/avatar] Erro ao remover:", error)
return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 })
}
}

View file

@ -22,6 +22,7 @@ import {
Clock,
Camera,
Loader2,
Trash2,
} from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
@ -384,6 +385,30 @@ function ProfileEditCard({
}
}
async function handleRemoveAvatar() {
if (!localAvatarUrl) return
setIsUploadingAvatar(true)
try {
const res = await fetch("/api/profile/avatar", {
method: "DELETE",
})
if (!res.ok) {
const data = await res.json().catch(() => ({ error: "Erro ao remover foto" }))
throw new Error(data.error || "Erro ao remover foto")
}
setLocalAvatarUrl(null)
toast.success("Foto removida com sucesso!")
} catch (error) {
console.error("Erro ao remover foto:", error)
toast.error(error instanceof Error ? error.message : "Erro ao remover foto")
} finally {
setIsUploadingAvatar(false)
}
}
const hasChanges = useMemo(() => {
const nameChanged = editName.trim() !== name
const emailChanged = editEmail.trim().toLowerCase() !== email.toLowerCase()
@ -465,18 +490,32 @@ function ProfileEditCard({
onChange={handleAvatarUpload}
className="hidden"
/>
<button
type="button"
className="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100 disabled:cursor-not-allowed"
onClick={() => fileInputRef.current?.click()}
disabled={isUploadingAvatar}
>
<div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
{isUploadingAvatar ? (
<Loader2 className="size-5 text-white animate-spin" />
) : (
<Camera className="size-5 text-white" />
)}
<div className="flex items-center gap-2">
<button
type="button"
className="flex items-center justify-center size-8 rounded-full bg-white/20 hover:bg-white/30 transition-colors"
onClick={() => fileInputRef.current?.click()}
title="Alterar foto"
>
<Camera className="size-4 text-white" />
</button>
{localAvatarUrl && (
<button
type="button"
className="flex items-center justify-center size-8 rounded-full bg-red-500/80 hover:bg-red-500 transition-colors"
onClick={handleRemoveAvatar}
title="Remover foto"
>
<Trash2 className="size-4 text-white" />
</button>
)}
</div>
)}
</div>
</div>
<div className="flex-1 pb-1">
<CardTitle className="text-lg font-semibold text-neutral-900">{name || "Usuário"}</CardTitle>