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

Fixes #3107

app/controllers/api/v1/profiles_controller.rb

@@ -13,6 +13,11 @@ class Api::V1::ProfilesController < Api::BaseController
     @user.update!(profile_params)
   end
 
+  def avatar
+    @user.avatar.attachment.destroy! if @user.avatar.attached?
+    head :ok
+  end
+
   def availability
     @user.account_users.find_by!(account_id: availability_params[:account_id]).update!(availability: availability_params[:availability])
   end

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]]);

config/routes.rb

@@ -166,10 +166,12 @@ Rails.application.routes.draw do
       end
 
       resource :profile, only: [:show, :update] do
+        delete :avatar, on: :collection
         member do
           post :availability
         end
       end
+
       resource :notification_subscriptions, only: [:create]
 
       namespace :widget do

spec/controllers/api/v1/profiles_controller_spec.rb

@@ -102,6 +102,32 @@ RSpec.describe 'Profile API', type: :request do
     end
   end
 
+  describe 'DELETE /api/v1/profile/avatar' do
+    let(:agent) { create(:user, password: 'Test123!', account: account, role: :agent) }
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        delete '/api/v1/profile/avatar'
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      before do
+        agent.avatar.attach(io: File.open(Rails.root.join('spec/assets/avatar.png')), filename: 'avatar.png', content_type: 'image/png')
+      end
+
+      it 'deletes the agent avatar' do
+        delete '/api/v1/profile/avatar',
+               headers: agent.create_new_auth_token,
+               as: :json
+
+        expect(response).to have_http_status(:success)
+      end
+    end
+  end
+
   describe 'POST /api/v1/profile/availability' do
     context 'when it is an unauthenticated user' do
       it 'returns unauthorized' do