Add change skin card to profile

resources/views/cards/changeskin.blade.php

@@ -0,0 +1,67 @@
+
+@push('styles')
+    <style>
+        #skinPreview {
+            width: 250px;
+            image-rendering: crisp-edges; /* Firefox */
+            image-rendering: pixelated; /* Chrome and Safari */
+        }
+    </style>
+@endpush
+
+
+@push('footer-scripts')
+    <script>
+        const skinInput = document.getElementById('skin');
+
+        skinInput.addEventListener('change', function () {
+            if (!skinInput.files || !skinInput.files[0]) {
+                return;
+            }
+
+            const file = skinInput.files[0];
+
+            if (file.name !== undefined && file.name !== '') {
+                document.getElementById('skinLabel').innerText = file.name;
+            }
+
+            const reader = new FileReader();
+
+            reader.onload = function (e) {
+                const preview = document.getElementById('skinPreview');
+                preview.src = e.currentTarget.result;
+                preview.classList.remove('d-none');
+            };
+
+            reader.readAsDataURL(skinInput.files[0]);
+        });
+    </script>
+@endpush
+
+
+<form action="{{ route('skin-api.update') }}" method="POST" enctype="multipart/form-data">
+    @csrf
+
+    <div class="mb-3">
+        <label for="skin"></label>       
+        <img src="{{ route('skin-api.api.show', auth()->user()->name) }}" alt="{{ trans('skin-api::messages.skin') }}" id="skinPreview" class="mt-3 img-fluid mx-auto d-block">
+    </div>  
+
+    <div class="mb-3">
+        <div class="custom-file">
+            <label class="form-label" for="skin" data-browse="{{ trans('messages.actions.browse') }}" id="skinLabel">
+                {{ trans('messages.actions.choose_file') }}
+            </label>
+            <input type="file" class="form-control @error('skin') is-invalid @enderror" id="skin" name="skin" accept=".png" required>
+
+            @error('skin')
+                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
+            @enderror
+        </div>
+    </div>
+
+    <button type="submit" class="btn btn-primary">
+        {{ trans('messages.actions.save') }}
+    </button>
+
+</form>

routes/web.php

@@ -16,6 +16,5 @@
 
 Route::middleware('auth')->group(function () {
     Route::get('/', 'SkinApiController@index')->name('home');
-
     Route::post('/update', 'SkinApiController@update')->name('update');
 });

src/Cards/ChangeSkinViewCard.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Azuriom\Plugin\SkinApi\Cards; 
+
+use Azuriom\Extensions\Plugin\UserProfileCardComposer;
+
+class ChangeSkinViewCard extends UserProfileCardComposer
+{
+    /**
+ *      * Get the cards to add to the user profile.
+ *           * Each card should contains:
+ *                * - 'name' : The name of the card
+ *                     * - 'view' : The view (Ex: shop::giftcards.index).
+ *                          */
+
+    public function getCards(): array
+    {
+        $skinUrl = "";
+        return [
+            [
+                'name' => trans('skin-api::messages.change'),
+                'view' => 'skin-api::cards.changeskin',
+            ],
+        ];
+    }
+}
+

src/Controllers/SkinApiController.php

@@ -33,4 +33,5 @@ public function update(Request $request)
 
         return redirect()->back()->with('success', trans('skin-api::messages.updated'));
     }
+
 }

src/Providers/SkinApiServiceProvider.php

@@ -6,7 +6,9 @@
 use Azuriom\Models\Permission;
 use Azuriom\Models\User;
 use Azuriom\Plugin\SkinApi\SkinAPI;
+use Illuminate\Support\Facades\View;
 use Illuminate\Support\Facades\Storage;
+use Azuriom\Plugin\SkinApi\Cards\ChangeSkinViewCard;
 
 class SkinApiServiceProvider extends BasePluginServiceProvider
 {
@@ -61,6 +63,8 @@ public function boot()
         $this->registerAdminNavigation();
 
         $this->registerUserNavigation();
+
+        View::composer('profile.index', ChangeSkinViewCard::class);
     }
 
     /**