fix: adding user avatar editing

site/resources/views/layouts/guest.blade.php

@@ -21,18 +21,6 @@
 @section('page-content')
 <section class="signup-wrapper signin-wrapper ptb-120">
     <div class="container">
-        {{--
-        <div class="row align-items-center gutter-0">
-            <div class="col-xl-6 offset-xl-3 col-lg-12 ">
-                <div class="signin-content">
-                    <div class="mb-6">
-                        <h2 class="mb-2">Sign in with your existing account</h2>
-                        <p class="normal">Welcome back! Please enter your credentials to sign in.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        --}}
         <div class="row">
             <div class="col-xl-6 offset-xl-3 col-lg-12">
                 <div class="authbox">

site/resources/views/layouts/master.blade.php

@@ -38,5 +38,6 @@
         <script src="{{ config('app.static_asset_url') }}/v3/dist/vendor/js/jquery.custom-file-input.js"></script>
         @livewireScriptConfig
         @vite(['resources/js/app.js'])
+        @yield('additional_footers')
     </body>
 </html>

site/resources/views/livewire/artist/avatar.blade.php

@@ -0,0 +1,42 @@
+<form wire:submit.prevent="save">
+    @if($avatar)
+        <div
+            class="d-flex flex-column justify-content-center"
+            wire:ignore
+            x-data="{
+                setUp() {
+                    const cropper = new Cropper(document.getElementById('avatar'), {
+                        aspectRatio: 1/1,
+                        autoCropArea: 1,
+                        viewMode: 1,
+                        crop (event) {
+                            @this.set('x', event.detail.x)
+                            @this.set('y', event.detail.y)
+                            @this.set('width', event.detail.width)
+                            @this.set('height', event.detail.height)
+                        }
+                    })
+                }
+            }"
+            x-init="setUp"
+        >
+            <div class="d-flex justify-content-center text-center mt-4 mb-4">
+                <img id="avatar" src="{{ $avatar->temporaryUrl() }}" style="width: 100%; max-width: 100%;">
+            </div>
+            <div class="d-flex justify-content-end text-end mt-4 mb-4">
+                <button type="submit" class="btn btn-gradient btn-small">
+                    <span>Save Avatar</span>
+                </button>
+            </div>
+        </div>
+    @else
+        <div class="mb-2 mx-2">
+            <label for="avatar" style="width: 100%;">
+                <img src="{{ auth()->user()->artists()->first()->avatar() }}" style="width: 100%; max-width: 100%;">
+            </label>
+        </div>
+        <div class="mb-2 mx-2">
+            <input type="file" name="avatar" id="avatar" class="sr-only" wire:model="avatar">
+        </div>
+    @endif
+</form>

site/resources/views/partials/nav/head.blade.php

@@ -51,12 +51,12 @@
                 --}}
                 @if (!Auth::user())
                     <li class="wallet-button"> <a href="/login" class="btn btn-gradient btn-small">
-                        <span><i class="ri-account-circle-line"></i>Join In</span></a>
+                        <span><i class="ri-user-add-line"></i>Join In</span></a>
                     </li>
                 @else
                 <li class="avatar-info"> <a href="#"><img
-                    @if (Auth::user() && Auth::user()->artists->first())
-                        src="{{ Vite::asset(Auth::user()->artists->first()->avatar ?? 'resources/img/default_avatars/default_avatar_male.svg') }}"
+                    @if (Auth::user() && Auth::user()->artists->first() && Auth::user()->artists->first()->avatar)
+                        src="{{ Auth::user()->artists->first()->avatar() }}"
                     @else
                         src="{{ Vite::asset('resources/img/default_avatars/default_avatar_male.svg') }}"
                     @endif

site/resources/views/profile/edit.blade.php

@@ -1,3 +1,11 @@
+@section('additional_headers')
+    @parent
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" integrity="sha512-hvNR0F/e2J7zPPfLC9auFe3/SE0yG4aJCOd/qxew74NN7eyiSKjr7xJJMu1Jy2wf7FXITpWS1E/RY8yzuXN7VA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+@endsection
+@section('additional_footers')
+    @parent
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js" integrity="sha512-9KkIqdfN7ipEW6B6k+Aq20PV31bjODg4AA52W+tYtAE0jE0kMx49bjJ3FgvS56wzmyfMUHbQ4Km2b7l9+Y/+Eg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+@endsection
 <x-app-layout>
     <x-slot name="header">
         <h2 class="">
@@ -7,7 +15,7 @@
 
     <section class="signup-wrapper signin-wrapper ptb-4">
         <div class="container">
-            <div class="row d-flex-row d-flex align-content-stretch flex-wrap">
+            <div class="row d-flex-row d-flex align-content-stretch flex-wrap mb-4">
                 <div class="col-xl-5 col-lg-12 authbox">
                     @include('profile.partials.update-profile-information-form')
                 </div>
@@ -15,6 +23,12 @@
                     @include('profile.partials.update-password-form')
                 </div>
             </div>
+            <div class="row d-flex-row d-flex align-content-stretch flex-wrap mb-4">
+                <div class="col-xl-5 col-lg-12 authbox">
+                    @include('profile.partials.update-avatar-form')
+                </div>
+            </div>
         </div>
     </section>
 </x-app-layout>
+

site/resources/views/profile/partials/update-avatar-form.blade.php

@@ -0,0 +1,15 @@
+<div class="row mt-4 gutter-2">
+    <div class="col">
+        <div class="signin-content">
+            <div class="mb-6">
+                <h2 class="mb-2">{{ __('Update Your Artist Avatar') }}</h2>
+                <p class="normal">{{ __('This avatar will be used on the artist gallery and artist profile page.') }}</p>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row mt-0 gutter-2">
+    <div class="col">
+        <livewire:artist.avatar />
+    </div>
+</div>