feat(profile): add avatar reset functionality and clean up profile form

This commit is contained in:
2026-03-29 15:25:24 +02:00
parent a3964eb047
commit 9b77da154b
4 changed files with 62 additions and 34 deletions

View File

@@ -8,7 +8,7 @@ import { revalidatePath } from "next/cache";
import { db } from "@/lib/db";
import { DEFAULT_THEME_ID } from "@/lib/constants";
import { requireCurrentUser } from "@/lib/session";
import { normalizeUsername, safeUrl, sanitizeOptionalPlainText, sanitizePlainText } from "@/lib/sanitize";
import { normalizeUsername, sanitizeOptionalPlainText, sanitizePlainText } from "@/lib/sanitize";
import { profileSchema } from "@/lib/validators/profile";
export type ActionResult = {
@@ -81,12 +81,7 @@ export async function updateProfileAction(formData: FormData): Promise<ActionRes
const currentUsername = user.profile?.username;
const existingAvatarUrl = user.profile?.avatarUrl ?? null;
const avatarFile = formData.get("avatarFile");
const rawAvatarUrl = String(formData.get("avatarUrl") ?? "");
const sanitizedAvatarUrl = rawAvatarUrl.startsWith(AVATAR_WEB_PREFIX)
? rawAvatarUrl
: (safeUrl(rawAvatarUrl) ?? "");
let nextAvatarUrl = sanitizedAvatarUrl;
let nextAvatarUrl = existingAvatarUrl ?? "";
let uploadedAvatarUrl: string | null = null;
if (avatarFile instanceof File && avatarFile.size > 0) {
@@ -165,3 +160,36 @@ export async function updateProfileAction(formData: FormData): Promise<ActionRes
return { success: false, message: "Could not update profile" };
}
}
export async function resetAvatarAction(): Promise<ActionResult> {
const user = await requireCurrentUser();
const currentUsername = user.profile?.username;
const existingAvatarUrl = user.profile?.avatarUrl ?? null;
if (!user.profile) {
return { success: false, message: "Profile not found" };
}
if (!existingAvatarUrl) {
return { success: true, message: "Avatar is already empty" };
}
try {
await db.profile.update({
where: { userId: user.id },
data: { avatarUrl: null }
});
await deleteOldUploadedAvatar(existingAvatarUrl);
if (currentUsername) {
revalidatePath(`/u/${currentUsername}`);
}
revalidatePath("/dashboard");
revalidatePath("/dashboard/profile");
return { success: true, message: "Avatar reset" };
} catch {
return { success: false, message: "Could not reset avatar" };
}
}

View File

@@ -26,7 +26,6 @@ export default async function DashboardProfilePage() {
username: profile?.username ?? "",
displayName: profile?.displayName ?? "",
bio: profile?.bio ?? "",
avatarUrl: profile?.avatarUrl ?? "",
themeId: profile?.themeId ?? DEFAULT_THEME_ID,
isPublic: profile?.isPublic ?? true
}}

View File

@@ -1,7 +1,7 @@
"use client";
import { FormEvent, useState, useTransition } from "react";
import { updateProfileAction } from "@/actions/profile";
import { resetAvatarAction, updateProfileAction } from "@/actions/profile";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
@@ -18,7 +18,6 @@ type ProfileFormProps = {
username: string;
displayName: string;
bio: string;
avatarUrl: string;
themeId: string;
isPublic: boolean;
};
@@ -33,11 +32,23 @@ export function ProfileForm({ initialValues, themes }: ProfileFormProps) {
const [username, setUsername] = useState(initialValues.username);
const [displayName, setDisplayName] = useState(initialValues.displayName);
const [bio, setBio] = useState(initialValues.bio);
const [avatarUrl, setAvatarUrl] = useState(initialValues.avatarUrl);
const [avatarFile, setAvatarFile] = useState<File | null>(null);
const [themeId, setThemeId] = useState(initialValues.themeId);
const [isPublic, setIsPublic] = useState(initialValues.isPublic);
function handleResetAvatar() {
setMessage(null);
startTransition(async () => {
const result = await resetAvatarAction();
setMessage(result.message);
setIsError(!result.success);
if (result.success) {
setAvatarFile(null);
}
});
}
function onSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
setMessage(null);
@@ -46,7 +57,6 @@ export function ProfileForm({ initialValues, themes }: ProfileFormProps) {
formData.set("username", username);
formData.set("displayName", displayName);
formData.set("bio", bio);
formData.set("avatarUrl", avatarUrl);
if (avatarFile) {
formData.set("avatarFile", avatarFile);
}
@@ -103,16 +113,17 @@ export function ProfileForm({ initialValues, themes }: ProfileFormProps) {
onChange={(event) => setAvatarFile(event.target.files?.[0] ?? null)}
/>
</label>
<label className="space-y-2 text-sm">
<span className="form-label">Avatar URL</span>
<Input
type="url"
placeholder="https://..."
value={avatarUrl}
onChange={(event) => setAvatarUrl(event.target.value)}
/>
</label>
<div style={{ marginTop: 16, marginBottom: 20 }}>
<Button
type="button"
variant="secondary"
className="dashboard-action min-h-11 px-5"
disabled={isPending}
onClick={handleResetAvatar}
>
Reset avatar
</Button>
</div>
<label className="space-y-2 text-sm">
<span className="form-label">Theme</span>

View File

@@ -17,18 +17,8 @@ export const profileSchema = z.object({
if (!value) {
return true;
}
if (value.startsWith("/uploads/avatars/")) {
return true;
}
try {
const url = new URL(value);
return url.protocol === "http:" || url.protocol === "https:";
} catch {
return false;
}
}, "Avatar must be a valid URL or uploaded file path")
return value.startsWith("/uploads/avatars/");
}, "Avatar must be an uploaded file path")
.optional()
.or(z.literal("")),
themeId: z.string().trim().min(1),