From 00236c746b2f7d76ec61af6c3c1bc532a3bacde6 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 23 Apr 2026 16:08:52 +0330
Subject: [PATCH] Add default profile button

---
 .../profile/index/ProfilePictureModal.vue     |  71 ++++++++++++------
 frontend/public/img/default-avatar.jpeg       | Bin 0 -> 2294 bytes
 2 files changed, 46 insertions(+), 25 deletions(-)
 create mode 100644 frontend/public/img/default-avatar.jpeg

diff --git a/frontend/components/profile/index/ProfilePictureModal.vue b/frontend/components/profile/index/ProfilePictureModal.vue
index d9af18d..48eed3b 100644
--- a/frontend/components/profile/index/ProfilePictureModal.vue
+++ b/frontend/components/profile/index/ProfilePictureModal.vue
@@ -12,7 +12,7 @@ type Props = {
 };
 
 type Emits = {
-    "update:modelValue": [value: File];
+    "update:modelValue": [value: File | null];
     "update:isShow": [value: boolean];
 };
 
@@ -59,8 +59,7 @@ const { isPending: updateAccountIsPending } = useUpdateAccount();
 // computed
 
 const currentProfile = computed({
-    get: () =>
-        !!modelValue.value ? URL.createObjectURL(modelValue.value) : null,
+    get: () => (!!modelValue.value ? URL.createObjectURL(modelValue.value) : null),
     set: (value: File) => emit("update:modelValue", value),
 });
 
@@ -81,6 +80,15 @@ onFileDialogChange((files: any) => {
     emit("update:modelValue", file);
     resetFileDialog();
 });
+
+const resetAvatarFile = async () => {
+    const response = await fetch("/img/default-avatar.jpeg");
+    const blob = await response.blob();
+    const file = new File([blob], "default-avatar.jpeg", { type: blob.type });
+
+    emit("update:modelValue", file);
+    resetFileDialog();
+};
 </script>
 
 <template>
@@ -92,19 +100,17 @@ onFileDialogChange((files: any) => {
         contectClass="w-full max-lg:container lg:!w-[30vw]"
     >
         <template #trigger>
-            <button
-                class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
-            >
-                <Icon name="bi:pencil" class="**:fill-slate-100" size="12" />
+            <button class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0">
+                <Icon
+                    name="bi:pencil"
+                    class="**:fill-slate-100"
+                    size="12"
+                />
             </button>
         </template>
         <template #content>
-            <div
-                class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
-            >
-                <div
-                    class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]"
-                >
+            <div class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4">
+                <div class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]">
                     <button
                         v-for="(avatar, index) in avatars"
                         :key="index"
@@ -143,18 +149,33 @@ onFileDialogChange((files: any) => {
                         class="!size-24 lg:!size-32"
                         iconClass="!text-xl lg:!text-2xl"
                     />
-                    <Button
-                        class="rounded-full w-[8rem]"
-                        @click="openFileDialog"
-                        :loading="updateAccountIsPending"
-                        size="md"
-                    >
-                        <Icon
-                            v-if="updateAccountIsPending"
-                            name="svg-spinners:3-dots-bounce"
-                        />
-                        <span v-else>آپلود عکس شما</span>
-                    </Button>
+                    <div class="flex items-center gap-4">
+                        <Button
+                            class="rounded-full w-[8rem] bg-red-500"
+                            @click="resetAvatarFile"
+                            :loading="updateAccountIsPending"
+                            size="md"
+                        >
+                            <Icon
+                                v-if="updateAccountIsPending"
+                                name="bi:trash"
+                            />
+                            <span v-else>حذف عکس</span>
+                        </Button>
+
+                        <Button
+                            class="rounded-full w-[8rem]"
+                            @click="openFileDialog"
+                            :loading="updateAccountIsPending"
+                            size="md"
+                        >
+                            <Icon
+                                v-if="updateAccountIsPending"
+                                name="svg-spinners:3-dots-bounce"
+                            />
+                            <span v-else>آپلود عکس شما</span>
+                        </Button>
+                    </div>
                 </div>
             </div>
         </template>
diff --git a/frontend/public/img/default-avatar.jpeg b/frontend/public/img/default-avatar.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..fa94b0585c08535398f557fdbec6ddc6b40f8e69
GIT binary patch
literal 2294
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
EH_dUM<^TWy

literal 0
HcmV?d00001