feat: Ability to remove inbox avatar (#2885)

* Delete inbox avatar

1) New API endpoint added for deleting inbox avatar.
2) Delete avatar button in the inbox settings page.

Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue

@@ -1,16 +1,31 @@
 <template>
-  <label>
-    <span v-if="label">{{ label }}</span>
+  <div>
+    <label>
+      <span v-if="label">{{ label }}</span>
+    </label>
     <woot-thumbnail v-if="src" size="80px" :src="src" />
-    <input
-      id="file"
-      ref="file"
-      type="file"
-      accept="image/*"
-      @change="handleImageUpload"
-    />
-    <slot></slot>
-  </label>
+    <div v-if="src && deleteAvatar" class="avatar-delete-btn">
+      <woot-button
+        color-scheme="alert"
+        variant="hollow"
+        size="tiny"
+        @click="onAvatarDelete"
+        >{{
+          this.$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT')
+        }}</woot-button
+      >
+    </div>
+    <label>
+      <input
+        id="file"
+        ref="file"
+        type="file"
+        accept="image/*"
+        @change="handleImageUpload"
+      />
+      <slot></slot>
+    </label>
+  </div>
 </template>
 
 <script>
@@ -24,6 +39,10 @@ export default {
       type: String,
       default: '',
     },
+    deleteAvatar: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {},
   methods: {
@@ -35,6 +54,17 @@ export default {
         url: URL.createObjectURL(file),
       });
     },
+    onAvatarDelete() {
+      this.$refs.file.value = null;
+      this.$emit('onAvatarDelete');
+    },
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.avatar-delete-btn {
+  margin-top: var(--space-smaller);
+  margin-bottom: var(--space-smaller);
+}
+</style>