Add button to remove user avatar

app/controllers/registrations_controller.rb

@@ -77,6 +77,13 @@ class RegistrationsController < Devise::RegistrationsController
     respond_with_navigational(resource){ redirect_to after_sign_out_path_for(resource_name) }
   end
 
+  def delete_avatar
+    user = User.find(current_user.id)
+    user.avatar.purge
+
+    render json: { success: true }, status: :ok
+  end
+
   def send_set_password_instructions
     user = User.find_by_email(params[:email])
     

app/javascript/components/UserProfile/DeleteAvatarButton.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+import ActionLink from '../common/ActionLink';
+import { DeleteIcon } from '../common/Icons';
+import buildRequestHeaders from '../../helpers/buildRequestHeaders';
+import Spinner from '../common/Spinner';
+
+interface Props {
+  deleteAvatarEndpoint: string;
+  authenticityToken: string;
+}
+
+const DeleteAvatarButton = ({ deleteAvatarEndpoint, authenticityToken }: Props) => {
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+    <ActionLink
+      icon={<DeleteIcon />}
+      onClick={async () => {
+        setIsDeleting(true);
+
+        try {
+          const response = await fetch(deleteAvatarEndpoint, {
+            method: 'DELETE',
+            headers: buildRequestHeaders(authenticityToken),
+          });
+
+          if (response.ok) {
+            location.reload();
+          } else {
+            throw new Error();
+          }
+        } catch {
+          setError(I18n.t('common.errors.unknown'));
+        }
+
+        setIsDeleting(false);
+        if (error) {
+          alert(error);
+        }
+      }
+    }>
+      { I18n.t('common.buttons.delete') }
+    </ActionLink>
+
+    { isDeleting && <Spinner /> }
+    </>
+  );
+}
+
+export default DeleteAvatarButton;

app/views/devise/registrations/edit.html.erb

@@ -33,6 +33,17 @@
     <p>
       <% if resource.avatar.attached? %>
         <%= image_tag url_for(resource.avatar), class: 'avatar', size: 48 %>
+
+        <%=
+          react_component(
+            'UserProfile/DeleteAvatarButton',
+            {
+              deleteAvatarEndpoint: delete_avatar_path,
+              authenticityToken: form_authenticity_token
+            }
+          )
+        %>
+
       <% else %>
         <%= image_tag current_user.gravatar_url, class: 'avatar', size: 48 %>
       <% end %>

config/routes.rb

@@ -46,6 +46,7 @@ Rails.application.routes.draw do
     
     devise_scope :user do
       get '/users/send_set_password_instructions', to: 'registrations#send_set_password_instructions', as: :send_set_password_instructions
+      delete '/users/delete_avatar', to: 'registrations#delete_avatar', as: :delete_avatar
     end
     
     resources :tenants, only: [:show, :update]