Bugfix in avatar management

This commit is contained in:
grimsi
2024-09-14 17:52:52 +02:00
parent 3d77a6b871
commit 110eb3dd5a
3 changed files with 11 additions and 10 deletions
@@ -10,7 +10,7 @@ import UserUpdateDto from "Frontend/generated/de/grimsi/gameyfin/users/dto/UserU
import {UserEndpoint} from "Frontend/generated/endpoints";
import {SmallInfoField} from "Frontend/components/general/SmallInfoField";
import {toast} from "sonner";
import FileUpload from "Frontend/components/general/FileUpload";
import AvatarUpload from "Frontend/components/general/AvatarUpload";
export default function ProfileManagement() {
const [configSaved, setConfigSaved] = useState(false);
@@ -90,13 +90,12 @@ export default function ProfileManagement() {
</div>
</div>
<div className="flex flex-row flex-1 justify-between gap-8">
<div className="flex flex-col basis-1/4 items-center">
<Section title="Avatar"></Section>
<div className="flex flex-row flex-1 justify-between gap-16">
<div className="flex flex-col basis-1/4 mt-8 items-center">
<Avatar showFallback
src={`/images/avatar?username=${auth.state.user?.username}`}
className="size-40 m-4"></Avatar>
<FileUpload upload="/avatar/upload" clear="/avatar/delete" accept="image/*"/>
<AvatarUpload upload="/avatar/upload" remove="/avatar/delete" accept="image/*"/>
</div>
<div className="flex flex-col flex-grow">
@@ -4,7 +4,7 @@ import {Button, Input, Tooltip} from "@nextui-org/react";
import {useState} from "react";
import {Trash} from "@phosphor-icons/react";
export default function FileUpload({upload, clear, accept}: { upload: string, clear: string, accept: string }) {
export default function AvatarUpload({upload, remove, accept}: { upload: string, remove: string, accept: string }) {
const [avatar, setAvatar] = useState<any>();
@@ -29,7 +29,7 @@ export default function FileUpload({upload, clear, accept}: { upload: string, cl
const result = await response.text();
if (response.ok) {
toast.success("Avatar updated");
window.location.reload();
} else {
toast.error("Error uploading avatar", {description: result});
}
@@ -40,7 +40,7 @@ export default function FileUpload({upload, clear, accept}: { upload: string, cl
async function removeAvatar() {
try {
const response = await fetch(clear, {
const response = await fetch(remove, {
headers: {
"X-CSRF-Token": getCsrfToken()
},
@@ -51,7 +51,7 @@ export default function FileUpload({upload, clear, accept}: { upload: string, cl
const result = await response.text();
if (response.ok) {
toast.success("Avatar removed");
window.location.reload();
} else {
toast.error("Error removing avatar", {description: result});
}
@@ -64,7 +64,7 @@ export default function FileUpload({upload, clear, accept}: { upload: string, cl
<div className="flex flex-col gap-2">
<div className="flex flex-row gap-2">
<Input type="file" accept={accept} onChange={onFileSelected}/>
<Button onClick={uploadAvatar} color="success">Upload</Button>
<Button onClick={uploadAvatar} isDisabled={avatar == null} color="success">Upload</Button>
<Tooltip content="Remove your current avatar">
<Button onClick={removeAvatar} isIconOnly color="danger"><Trash/></Button>
</Tooltip>
@@ -78,6 +78,8 @@ class UserService(
fun deleteAvatar(username: String) {
val user = userByUsername(username)
if (user.avatar == null) return
avatarStore.unsetContent(user.avatar)
user.avatar = null