Merge pull request #587 from pixelfed/frontend-ui-refactor

Frontend ui refactor

app/Http/Controllers/AccountController.php

@@ -203,6 +203,16 @@ class AccountController extends Controller
           'filter_type'     => 'mute',
         ]);
 
+        $pid = $user->id;
+        Cache::remember("user:filter:list:$pid", 1440, function() use($pid) {
+          $private = Profile::whereIsPrivate(true)->where('id', '!=', $pid)->pluck('id');
+          $filters = UserFilter::whereUserId($pid)
+                    ->whereFilterableType('App\Profile')
+                    ->whereIn('filter_type', ['mute', 'block'])
+                    ->pluck('filterable_id')->toArray();
+          return array_merge($private->toArray(), $filters);
+        });
+
         return redirect()->back();
     }
 
@@ -224,6 +234,9 @@ class AccountController extends Controller
         switch ($type) {
           case 'user':
             $profile = Profile::findOrFail($item);
+            if ($profile->id == $user->id) {
+                return abort(403);
+            }
             $class = get_class($profile);
             $filterable['id'] = $profile->id;
             $filterable['type'] = $class;
@@ -244,6 +257,15 @@ class AccountController extends Controller
           'filter_type'     => 'block',
         ]);
 
+        $pid = $user->id;
+        Cache::remember("user:filter:list:$pid", 1440, function() use($pid) {
+          $private = Profile::whereIsPrivate(true)->where('id', '!=', $pid)->pluck('id');
+          $filters = UserFilter::whereUserId($pid)
+                    ->whereFilterableType('App\Profile')
+                    ->whereIn('filter_type', ['mute', 'block'])
+                    ->pluck('filterable_id')->toArray();
+          return array_merge($private->toArray(), $filters);
+        });
         return redirect()->back();
     }
 

app/Http/Controllers/StatusController.php

@@ -133,8 +133,11 @@ class StatusController extends Controller
         if ($status->profile_id === Auth::user()->profile->id || Auth::user()->is_admin == true) {
             StatusDelete::dispatch($status);
         }
-
-        return redirect(Auth::user()->url());
+        if($request->wantsJson()) {
+            return response()->json(['Status successfully deleted.']);
+        } else {
+            return redirect(Auth::user()->url());
+        }
     }
 
     public function storeShare(Request $request)

app/Jobs/StatusPipeline/StatusDelete.php

@@ -38,15 +38,12 @@ class StatusDelete implements ShouldQueue
     public function handle()
     {
         $status = $this->status;
+
         $this->unlinkRemoveMedia($status);
     }
 
     public function unlinkRemoveMedia($status)
     {
-        if ($status->media()->count() == 0) {
-            return;
-        }
-
         foreach ($status->media as $media) {
             $thumbnail = storage_path("app/{$media->thumbnail_path}");
             $photo = storage_path("app/{$media->media_path}");

app/Util/Media/Image.php

@@ -112,7 +112,9 @@ class Image
         try {
             $img = Intervention::make($file)->orientate();
             if($thumbnail) {
-                $img->crop($aspect['width'], $aspect['height']);
+                $img->resize($aspect['width'], $aspect['height'], function ($constraint) {
+                    $constraint->aspectRatio();
+                });
             } else {
                 $metadata = $img->exif();
                 $img->resize($aspect['width'], $aspect['height'], function ($constraint) {

resources/assets/js/components.js

@@ -114,4 +114,9 @@ $(document).ready(function() {
   $(function () {
     $('[data-toggle="tooltip"]').tooltip()
   });
-});
+});
+
+const warningTitleCSS = 'color:red; font-size:60px; font-weight: bold; -webkit-text-stroke: 1px black;';
+const warningDescCSS = 'font-size: 18px;';
+console.log('%cStop!', warningTitleCSS);
+console.log("%cThis is a browser feature intended for developers. If someone told you to copy and paste something here to enable a Pixelfed feature or \"hack\" someone's account, it is a scam and will give them access to your Pixelfed account.", warningDescCSS);

resources/assets/js/components/PostComments.vue

@@ -37,6 +37,7 @@
             <b-dropdown-item class="font-weight-bold" :href="comment.account.url">Profile</b-dropdown-item>
             <b-dropdown-divider></b-dropdown-divider>
             <b-dropdown-item class="font-weight-bold" :href="'/i/report?type=post&id='+comment.id">Report</b-dropdown-item>
+            <b-dropdown-item class="font-weight-bold" v-on:click="deleteComment(comment.id, index)" v-if="comment.account.id == user.id">Delete</b-dropdown-item>
           </b-dropdown>
         </span>
       </p>
@@ -47,7 +48,7 @@
 
 <script>
 export default {
-    props: ['post-id', 'post-username'],
+    props: ['post-id', 'post-username', 'user'],
     data() {
         return {
             results: {},
@@ -67,6 +68,16 @@ export default {
       embed(e) {
           pixelfed.embed.build(e);
       },
+      deleteComment(id, i) {
+        axios.post('/i/delete', {
+          type: 'comment',
+          item: id
+        }).then(res => {
+          this.results.splice(i, 1);
+        }).catch(err => {
+          swal('Something went wrong!', 'Please try again later', 'error');
+        });
+      },
       l(e) {
         let len = e.length;
         if(len < 10) { return e; } 

resources/assets/js/components/PostComponent.vue

@@ -201,7 +201,7 @@
                   <span class="font-weight-bold pr-1">{{statusUsername}}</span>
                   <span class="comment-text"></span>
                 </p>
-                <post-comments :post-id="statusId" :post-username="statusUsername"></post-comments>
+                <post-comments :user="this.user" :post-id="statusId" :post-username="statusUsername"></post-comments>
               </div>
             </div>
             <div class="card-body flex-grow-0 py-1">
@@ -266,7 +266,7 @@
 pixelfed.postComponent = {};
 pixelfed.presenter = {
   show: {
-    image: function(container, media) { console.log(234);
+    image: function(container, media) {
       let wrapper = $('<div>');
       wrapper.addClass(media[0]['filter_class']);
       let el = $('<img>');
@@ -345,9 +345,7 @@ export default {
       },
       showMuteBlock() {
         let sid = this.status.account.id;
-        console.log('sid :' + sid);
         let uid = this.user.id;
-        console.log('uid :' + uid);
         if(sid != uid) {
           $('.post-actions').removeClass('d-none');
         }

resources/views/settings/home.blade.php

@@ -38,10 +38,10 @@
     <div class="form-group row">
       <label for="bio" class="col-sm-3 col-form-label font-weight-bold text-right">Bio</label>
       <div class="col-sm-9">
-        <textarea class="form-control" id="bio" name="bio" placeholder="Add a bio here" rows="2">{{Auth::user()->profile->bio}}</textarea>
-        <small class="form-text text-muted">
-          Max length: {{config('pixelfed.max_bio_length')}} characters.
-        </small>
+        <textarea class="form-control" id="bio" name="bio" placeholder="Add a bio here" rows="2" data-max-length="{{config('pixelfed.max_bio_length')}}">{{Auth::user()->profile->bio}}</textarea>
+        <p class="form-text">
+          <span class="bio-counter float-right small text-muted">0/{{config('pixelfed.max_bio_length')}}</span>
+        </p>
       </div>
     </div>
     <div class="pt-5">
@@ -112,6 +112,25 @@
     swal.close();
   });
 
+  $('#bio').on('change keyup paste', function(e) {
+    let el = $(this);
+    let len = el.val().length;
+    let limit = el.data('max-length');
+
+    if(len > 100) {
+      el.attr('rows', '4');
+    }
+
+    let val = len + ' / ' + limit;
+
+    if(len > limit) {
+      let diff = len - limit;
+      val = '<span class="text-danger">-' + diff + '</span> / ' + limit;
+    }
+
+    $('.bio-counter').html(val);
+  });
+
   $(document).on('click', '.change-profile-photo', function(e) {
     e.preventDefault();
     var content = $('<ul>').addClass('list-group');

resources/views/status/reply.blade.php

@@ -26,7 +26,19 @@
             <div class="media-body">
               <h5 class="mt-0 font-weight-bold">{{$status->profile->username}}</h5>
               <p class="mb-1">{!! $status->rendered !!}</p>
-              <p class="mb-0"><a href="{{$status->url()}}" class="text-muted">{{$status->created_at->diffForHumans()}}</a></p>
+              <div class="mb-0">
+                <a href="{{$status->url()}}" class="text-muted">
+                  {{$status->created_at->diffForHumans()}}
+                </a>
+                @if(Auth::check() && $status->profile_id == Auth::user()->profile->id)
+                <form class="float-right" method="POST" action="/i/delete">
+                  @csrf
+                  <input type="hidden" name="item" value="{{$status->id}}">
+                  <input type="hidden" name="type" value="status">
+                  <button class="btn btn-outline-danger small font-weight-bold btn-sm py-1">Delete</button>
+                </form>
+                @endif
+              </div>
             </div>
           </div>
         </div>

routes/web.php

@@ -111,15 +111,15 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
         Route::redirect('/', '/settings/home');
         Route::get('home', 'SettingsController@home')
         ->name('settings');
-        Route::post('home', 'SettingsController@homeUpdate')->middleware('throttle:25,1440');
+        Route::post('home', 'SettingsController@homeUpdate')->middleware('throttle:250,1440');
         Route::get('avatar', 'SettingsController@avatar')->name('settings.avatar');
-        Route::post('avatar', 'AvatarController@store')->middleware('throttle:5,1440');
+        Route::post('avatar', 'AvatarController@store')->middleware('throttle:50,1440');
         Route::get('password', 'SettingsController@password')->name('settings.password')->middleware('dangerzone');
         Route::post('password', 'SettingsController@passwordUpdate')->middleware(['throttle:2,1440','dangerzone']);
         Route::get('email', 'SettingsController@email')->name('settings.email');
         Route::get('notifications', 'SettingsController@notifications')->name('settings.notifications');
         Route::get('privacy', 'SettingsController@privacy')->name('settings.privacy');
-        Route::post('privacy', 'SettingsController@privacyStore')->middleware('throttle:50,1440');
+        Route::post('privacy', 'SettingsController@privacyStore')->middleware('throttle:250,1440');
         Route::get('privacy/muted-users', 'SettingsController@mutedUsers')->name('settings.privacy.muted-users');
         Route::post('privacy/muted-users', 'SettingsController@mutedUsersUpdate')->middleware('throttle:100,1440');
         Route::get('privacy/blocked-users', 'SettingsController@blockedUsers')->name('settings.privacy.blocked-users');