refactor: update avatar upload component (#40)

Author: alexbarnsley

composer.lock

@@ -44,4 +44,9 @@
         'title'          => 'Logout Other Browser Sessions',
         'content'        => 'Please enter your password to confirm you would like to logout of your other browser sessions across all of your devices.',
     ],
+
+    'upload-avatar' => [
+        'upload_avatar' => 'Upload Avatar',
+        'delete_avatar' => 'Delete Avatar',
+    ],
 ];

resources/lang/en/forms.php

@@ -6,31 +6,12 @@
     class="relative flex flex-col {{ $alignment ?? 'items-center mb-4 md:items-start' }}"
 >
     <form wire:submit.prevent="store" id="livewire-form">
-        <div
-            style="background-image: url('{{ $this->user->photo }}')"
-            class="cursor-pointer bg-theme-secondary-200 inline-block bg-contain bg-center bg-no-repeat rounded {{ $dimensions ?? 'w-48 h-48' }}"
-            role="button"
-        >
-            <input
-                id="photo"
-                type="file"
-                class="absolute top-0 hidden block opacity-0 cursor-pointer"
-                wire:model="photo"
-                accept="image/jpg,image/jpeg,image/bmp,image/png"
-            />
-        </div>
-
-        <div x-show="isUploading" x-cloak>
-            <x-ark-loading-spinner />
-        </div>
-
-        <div
-            class="cursor-pointer flex items-center justify-center rounded absolute top-0 opacity-0 hover:opacity-90 transition-default bg-theme-secondary-900 {{ $dimensions ?? 'w-48 h-48' }}"
-            @click="select()"
-            role="button"
-        >
-            <div>@svg('upload', 'w-4 h-4 text-white')</div>
-        </div>
+        <x-ark-upload-image
+            :image="$this->user->photo"
+            :upload-text="__('fortify::forms.upload-avatar.upload_avatar')"
+            :delete-tooltip="__('fortify::forms.upload-avatar.delete_avatar')"
+            :dimensions="$dimensions"
+        />
     </form>
 
     @error('photo')

resources/views/profile/update-profile-photo-form.blade.php

@@ -5,19 +5,11 @@
 namespace ARKEcosystem\Fortify\Components;
 
 use ARKEcosystem\Fortify\Components\Concerns\InteractsWithUser;
-use Livewire\Component;
-use Livewire\WithFileUploads;
+use ARKEcosystem\UserInterface\Components\UploadImage;
 
-class UpdateProfilePhotoForm extends Component
+class UpdateProfilePhotoForm extends UploadImage
 {
     use InteractsWithUser;
-    use WithFileUploads;
-
-    public $alignment;
-
-    public $photo;
-
-    public $dimensions;
 
     /**
      * Render the component.
@@ -29,19 +21,21 @@ public function render()
         return view('ark-fortify::profile.update-profile-photo-form');
     }
 
-    public function updatedPhoto()
-    {
-        $this->store();
-    }
-
     public function store()
     {
         $this->validate([
-            'photo' => ['mimes:jpeg,png,bmp,jpg', 'max:2048'],
+            'photo' => $this->validators(),
         ]);
 
         $file = $this->photo->storePubliclyAs('uploads', $this->photo->hashName());
 
         $this->user->addMediaFromDisk($file)->toMediaCollection('photo');
+        $this->user->refresh();
+    }
+
+    public function delete()
+    {
+        $this->user->getFirstMedia('photo')->delete();
+        $this->user->refresh();
     }
 }