feat: Ability to remove user profile picture (#3156)

Fixes #3107

app/javascript/dashboard/api/auth.js

@@ -166,4 +166,8 @@ export default {
       profile: { ...availabilityData },
     });
   },
+
+  deleteAvatar() {
+    return axios.delete(endPoints('deleteAvatar').url);
+  },
 };

app/javascript/dashboard/api/endPoints.js

@@ -36,6 +36,10 @@ const endPoints = {
     },
     params: { omniauth_token: '' },
   },
+
+  deleteAvatar: {
+    url: '/api/v1/profile/avatar',
+  },
 };
 
 export default page => {

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -3,6 +3,9 @@
     "LINK": "Profile Settings",
     "TITLE": "Profile Settings",
     "BTN_TEXT": "Update Profile",
+    "DELETE_AVATAR": "Delete Avatar",
+    "AVATAR_DELETE_SUCCESS": "Avatar has been deleted successfully",
+    "AVATAR_DELETE_FAILED": "There is an error while deleting avatar, please try again",
     "UPDATE_SUCCESS": "Your profile has been updated successfully",
     "PASSWORD_UPDATE_SUCCESS": "Your password has been changed successfully",
     "AFTER_EMAIL_CHANGED": "Your profile has been updated successfully, please login again as your login credentials are changed",
@@ -69,7 +72,11 @@
       },
       "AVAILABILITY": {
         "LABEL": "Availability",
-        "STATUSES_LIST": ["Online", "Busy", "Offline"]
+        "STATUSES_LIST": [
+          "Online",
+          "Busy",
+          "Offline"
+        ]
       },
       "EMAIL": {
         "LABEL": "Your email address",
@@ -196,4 +203,4 @@
       "FORWARD_SLASH_KEY": "/"
     }
   }
-}
+}

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -14,6 +14,17 @@
             :src="avatarUrl"
             @change="handleImageUpload"
           />
+          <div v-if="showDeleteButton" class="avatar-delete-btn">
+            <woot-button
+              type="button"
+              color-scheme="alert"
+              variant="hollow"
+              size="small"
+              @click="deleteAvatar"
+            >
+              {{ $t('PROFILE_SETTINGS.DELETE_AVATAR') }}
+            </woot-button>
+          </div>
           <label :class="{ error: $v.name.$error }">
             {{ $t('PROFILE_SETTINGS.FORM.NAME.LABEL') }}
             <input
@@ -177,6 +188,19 @@ export default {
       this.avatarFile = file;
       this.avatarUrl = url;
     },
+    async deleteAvatar() {
+      try {
+        await this.$store.dispatch('deleteAvatar');
+        this.avatarUrl = '';
+        this.avatarFile = '';
+        this.showAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_SUCCESS'));
+      } catch (error) {
+        this.showAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_FAILED'));
+      }
+    },
+    showDeleteButton() {
+      return this.avatarUrl && !this.avatarUrl.includes('www.gravatar.com');
+    },
   },
 };
 </script>

app/javascript/dashboard/store/modules/auth.js

@@ -121,6 +121,15 @@ export const actions = {
     }
   },
 
+  deleteAvatar: async ({ commit }) => {
+    try {
+      await authAPI.deleteAvatar();
+      commit(types.default.SET_CURRENT_USER);
+    } catch (error) {
+      // Ignore error
+    }
+  },
+
   updateUISettings: async ({ commit }, params) => {
     try {
       commit(types.default.SET_CURRENT_USER_UI_SETTINGS, params);

app/javascript/dashboard/store/modules/specs/auth/actions.spec.js

@@ -63,7 +63,7 @@ describe('#actions', () => {
       });
       await actions.updateAvailability(
         { commit, dispatch },
-        { availability: 'offline', account_id: 1 },
+        { availability: 'offline', account_id: 1 }
       );
       expect(setUser).toHaveBeenCalledTimes(1);
       expect(commit.mock.calls).toEqual([[types.default.SET_CURRENT_USER]]);