Fix AvatarModal.vue

Thiritin · Feb 12, 2022 · ea83032 · ea83032
1 parent b04ab8e
commit ea83032
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/app/Http/Controllers/Profile/StoreAvatarController.php b/app/Http/Controllers/Profile/StoreAvatarController.php
@@ -4,10 +4,12 @@
 
 use App\Events\NewProfilePhotoEvent;
 use App\Http\Controllers\Controller;
+use Auth;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Redirect;
 use Illuminate\Support\Str;
 use Intervention\Image\Facades\Image;
+use Storage;
 
 class StoreAvatarController extends Controller
 {
@@ -26,13 +28,13 @@ public function __invoke(Request $request)
         ]);
         $image = $request->file('image');
         $image = Image::make($image)->crop($data['crop']['width'], $data['crop']['height'], $data['crop']['x'], $data['crop']['y'])->encode('webp', '100');
-        $path = Str::random(40).".webp";
-        \Storage::disk('avatars')->put($path, $image);
-        NewProfilePhotoEvent::dispatch(\Auth::user(), $path);
-        if (\Storage::disk('avatars')->exists(\Auth::user()->profile_photo_path)) {
-            \Storage::disk('avatars')->delete(\Auth::user()->profile_photo_path);
+        $path = Str::random(40) . ".webp";
+        Storage::disk('avatars')->put($path, $image);
+        NewProfilePhotoEvent::dispatch(Auth::user(), $path);
+        if (Storage::disk('avatars')->exists(Auth::user()->profile_photo_path)) {
+            Storage::disk('avatars')->delete(Auth::user()->profile_photo_path);
         }
         $request->user()->update(['profile_photo_path' => $path]);
-        return Redirect::route('profile.edit');
+        return Redirect::route('settings.profile');
     }
 }
diff --git a/resources/js/Layouts/SettingsLayout.vue b/resources/js/Layouts/SettingsLayout.vue
@@ -4,7 +4,6 @@
             <div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
                 <h1 class='text-3xl font-bold text-white'>{{ $trans('settings') }}</h1>
             </div>
-            <avatar-modal ref='avatarmodal' :file='file' :url='previewUrl'></avatar-modal>
         </template>
         <div class='bg-white rounded-lg shadow divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x'>
             <SettingsSidebarMenu :menu-items='settingsMenu'></SettingsSidebarMenu>

diff --git a/resources/js/Pages/Settings/Profile.vue b/resources/js/Pages/Settings/Profile.vue
@@ -1,5 +1,6 @@
 <template>
     <settings-layout>
+        <AvatarModal ref='avatarmodal' :file='file' :url='previewUrl'></AvatarModal>
         <form @submit.prevent>
             <div class='space-y-8 divide-y divide-gray-200 sm:space-y-5'>
                 <div>
@@ -101,6 +102,7 @@ import BaseInput from "@/Components/BaseInput";
 import BaseButton from "@/Components/BaseButton";
 import PrimaryButton from "@/Components/PrimaryButton";
 import BaseAlert from "@/Components/BaseAlert";
+import AvatarModal from "@/Profile/AvatarModal";
 
 export default {
     props: {
@@ -109,6 +111,7 @@ export default {
     },
 
     components: {
+        AvatarModal,
         BaseAlert,
         PrimaryButton,
         BaseButton,

diff --git a/resources/js/Profile/AvatarModal.vue b/resources/js/Profile/AvatarModal.vue
@@ -23,14 +23,15 @@
                                         <vue-cropper v-if="url != null" ref="cropper" :aspectRatio="1" :guides="false"
                                                      :rotatable="false" :scalable="false" :src="url" :zoomable="false"
                                                      alt="Source Image"
-                                                     @cropend="form.crop = $event.target.cropper.getData()"
-                                                     @ready="form.crop = $event.target.cropper.getData()"/>
+                                                     @cropend="avatarform.crop = $event.target.cropper.getData()"
+                                                     @ready="avatarform.crop = $event.target.cropper.getData()"/>
                                     </div>
                                 </div>
                             </div>
 
-                            <progress v-if="form.progress" :value="form.progress.percentage" class="w-full" max="100">
-                                {{ form.progress.percentage }}%
+                            <progress v-if="avatarform.progress" :value="avatarform.progress.percentage" class="w-full"
+                                      max="100">
+                                {{ avatarform.progress.percentage }}%
                             </progress>
 
                             <div class="mt-5 sm:mt-6 flex flex-row justify-end">
@@ -77,16 +78,16 @@ export default {
     },
     data() {
         return {
-            form: useForm({
+            avatarform: useForm({
                 image: null,
                 crop: null,
             })
         }
     },
     methods: {
         submit() {
-            this.form.image = this.file
-            this.form.transform((data) => ({
+            this.avatarform.image = this.file
+            this.avatarform.transform((data) => ({
                 ...data,
                 crop: {
                     x: Math.round(data.crop.x),

diff --git a/routes/web.php b/routes/web.php
@@ -58,13 +58,15 @@
         Route::post('password-reset', [PasswordResetController::class, 'store'])->name('password-reset.store');
     });
 
-    // E-Mail First Sign Up
+    // OIDC Frontchannel Logout
+    Route::get('frontchannel-logout', FrontChannelLogoutController::class)->middleware(['auth'])->name('frontchannel_logout');
+});
+
+// E-Mail First Sign Up
+Route::prefix('auth')->group(function () {
     Route::inertia('verify', 'Auth/VerifyEmail')->name('verification.notice')->middleware(['auth']);
     Route::get('verify/{id}/{hash}', VerifyEmailController::class)->middleware(['auth', 'signed'])->name('verification.verify');
     Route::post('resend', ResendVerificationEmailController::class)->middleware(['auth', 'throttle:6,1'])->name('verification.send');
-
-    // OIDC Frontchannel Logout
-    Route::get('frontchannel-logout', FrontChannelLogoutController::class)->middleware(['auth'])->name('frontchannel_logout');
 });
 
 Route::get('/', function () {