app/Http/Controllers/Gallery/UserController.php

@@ -13,6 +13,7 @@ use App\User;
 use App\UserActivity;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Mail;
 use Symfony\Component\HttpFoundation\Request;
@@ -39,6 +40,25 @@ class UserController extends Controller
         return redirect(route('userSettings'));
     }
 
+    public function followUser($idOrAlias)
+    {
+        $user = $this->loadUserProfilePage($idOrAlias);
+
+        $isFollowing = $this->getUser()->following()->where('following_user_id', $user->id)->count() > 0;
+        if (!$isFollowing)
+        {
+            $this->getUser()->following()->attach(
+                $user->id,
+                [
+                    'created_at' => new \DateTime(),
+                    'updated_at' => new \DateTime()
+                ]
+            );
+        }
+
+        return response()->json(true);
+    }
+
     public function resetEmailChangeState(Request $request)
     {
         $user = $this->getUser();
@@ -128,12 +148,24 @@ class UserController extends Controller
 
         $daysInMonth = $this->getDaysInMonths();
 
+        // Only logged-in users can follow other users (and if it's not their own page!)
+        $canFollow = !$this->getUser()->isAnonymous() && $this->getUser()->id != $user->id;
+        $isFollowing = false;
+
+        if ($canFollow)
+        {
+            // Is the current user following this user?
+            $isFollowing = $this->getUser()->following()->where('following_user_id', $user->id)->count() > 0;
+        }
+
         return Theme::render('gallery.user_profile', [
             'active_tab' => $request->get('tab'),
             'activity_taken' => $this->constructActivityGrid($activity['taken']),
             'activity_uploaded' => $this->constructActivityGrid($activity['uploaded']),
             'albums' => $albums,
             'cameras' => $cameras,
+            'can_follow' => $canFollow,
+            'is_following' => $isFollowing,
             'month_days' => $daysInMonth,
             'user' => $user
         ]);
@@ -179,6 +211,19 @@ class UserController extends Controller
         return response()->json($result);
     }
 
+    public function unFollowUser($idOrAlias)
+    {
+        $user = $this->loadUserProfilePage($idOrAlias);
+
+        $isFollowing = $this->getUser()->following()->where('following_user_id', $user->id)->count() > 0;
+        if ($isFollowing)
+        {
+            $this->getUser()->following()->detach($user->id);
+        }
+
+        return response()->json(true);
+    }
+
     private function constructActivityGrid(Collection $collection)
     {
         $results = [];

app/User.php

@@ -62,6 +62,23 @@ class User extends Authenticatable
         ]);
     }
 
+    public function followers()
+    {
+        return $this->belongsToMany(User::class, 'user_followers', 'following_user_id', 'user_id');
+    }
+
+    public function following()
+    {
+        return $this->belongsToMany(User::class, 'user_followers', 'user_id', 'following_user_id');
+    }
+
+    public function followUrl()
+    {
+        return route('followUser', [
+            'idOrAlias' => (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id)
+        ]);
+    }
+
     public function groups()
     {
         return $this->belongsToMany(Group::class, 'user_groups');
@@ -83,4 +100,11 @@ class User extends Authenticatable
     {
         return trim(!empty($this->profile_alias) ? $this->profile_alias : $this->name);
     }
+
+    public function unFollowUrl()
+    {
+        return route('unFollowUser', [
+            'idOrAlias' => (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id)
+        ]);
+    }
 }

database/migrations/2018_10_10_130100_create_user_followers_table.php

@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateUserFollowersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('user_followers', function (Blueprint $table) {
+            $table->unsignedInteger('user_id');
+            $table->unsignedInteger('following_user_id');
+            $table->timestamps();
+
+            $table->foreign('user_id')
+                ->references('id')->on('users')
+                ->onDelete('cascade');
+
+            $table->foreign('following_user_id')
+                ->references('id')->on('users')
+                ->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('user_followers');
+    }
+}

public/js/blue-twilight.js

@@ -41610,6 +41610,101 @@ function PhotoViewModel(urls) {
         }
     };
 }
+
+/**
+ * This model is used by gallery/user_profile.blade.php, to handle a user's profile.
+ * @constructor
+ */
+function UserViewModel(urls)
+{
+    this.el = '#user-app';
+
+    this.data = {
+        feed_items: [],
+        is_loading: true,
+        selected_view: 'profile',
+        user_id: 0
+    };
+
+    this.computed = {
+        isFeed: function() {
+            return this.selected_view === 'feed';
+        },
+        isProfile: function() {
+            return this.selected_view === 'profile';
+        }
+    };
+
+    this.methods = {
+        followUser: function(e)
+        {
+            $.post(urls.follow_user_url, '', function(data)
+            {
+                window.location.reload(true);
+            });
+
+            e.preventDefault();
+            return false;
+        },
+        loadFeedItems: function(e)
+        {
+            var self = this;
+
+            $.get(urls.feed_url, function (data)
+            {
+                for (var i = 0; i < data.length; i++)
+                {
+                    // User name
+                    if (data[i].params.user_name && data[i].params.user_url)
+                    {
+                        data[i].description = data[i].description
+                            .replace(
+                                ':user_name',
+                                '<a href="' + data[i].params.user_url + '">' + data[i].params.user_name + '</a>'
+                            );
+                    }
+
+                    // Photo name
+                    if (data[i].params.photo_name && data[i].params.photo_url)
+                    {
+                        data[i].description = data[i].description
+                            .replace(
+                                ':photo_name',
+                                '<a href="' + data[i].params.photo_url + '">' + data[i].params.photo_name + '</a>'
+                            );
+                    }
+                }
+
+                self.feed_items = data;
+                self.is_loading = false;
+            });
+        },
+        switchToFeed: function(e) {
+            this.selected_view = 'feed';
+            history.pushState('', '', urls.current_url + '?tab=feed');
+
+            e.preventDefault();
+            return false;
+        },
+        switchToProfile: function(e) {
+            this.selected_view = 'profile';
+            history.pushState('', '', urls.current_url + '?tab=profile');
+
+            e.preventDefault();
+            return false;
+        },
+        unFollowUser: function(e)
+        {
+            $.post(urls.unfollow_user_url, '', function(data)
+            {
+                window.location.reload(true);
+            });
+
+            e.preventDefault();
+            return false;
+        }
+    };
+}
 function StorageLocationViewModel()
 {
     this.el = '#storage-options';

resources/assets/js/gallery.js

@@ -86,7 +86,8 @@ function UserViewModel(urls)
     this.data = {
         feed_items: [],
         is_loading: true,
-        selected_view: 'profile'
+        selected_view: 'profile',
+        user_id: 0
     };
 
     this.computed = {
@@ -99,6 +100,16 @@ function UserViewModel(urls)
     };
 
     this.methods = {
+        followUser: function(e)
+        {
+            $.post(urls.follow_user_url, '', function(data)
+            {
+                window.location.reload(true);
+            });
+
+            e.preventDefault();
+            return false;
+        },
         loadFeedItems: function(e)
         {
             var self = this;
@@ -134,14 +145,24 @@ function UserViewModel(urls)
         },
         switchToFeed: function(e) {
             this.selected_view = 'feed';
-            history.pushState('data to be passed', 'Title of the page', urls.current_url + '?tab=feed');
+            history.pushState('', '', urls.current_url + '?tab=feed');
 
             e.preventDefault();
             return false;
         },
         switchToProfile: function(e) {
             this.selected_view = 'profile';
-            history.pushState('data to be passed', 'Title of the page', urls.current_url + '?tab=profile');
+            history.pushState('', '', urls.current_url + '?tab=profile');
+
+            e.preventDefault();
+            return false;
+        },
+        unFollowUser: function(e)
+        {
+            $.post(urls.unfollow_user_url, '', function(data)
+            {
+                window.location.reload(true);
+            });
 
             e.preventDefault();
             return false;

resources/lang/en/gallery.php

@@ -96,8 +96,12 @@ return [
         'albums' => 'Albums by :user_name',
         'cameras' => 'Cameras',
         'feed_tab' => 'Activity',
+        'follow_button' => 'Follow',
+        'following_button' => 'Following',
         'no_albums_p1' => 'No Photo Albums',
         'no_albums_p2' => ':user_name has not created any albums yet.',
+        'no_feed_activity_p1' => 'No Activity',
+        'no_feed_activity_p2' => 'There is no activity to show for :user_name.',
         'profile_tab' => 'Profile'
     ],
     'user_settings' => [

resources/views/themes/base/gallery/user_profile.blade.php

@@ -14,6 +14,13 @@
             </div>
 
             <div class="col-sm-8 col-md-9 col-xl-10">
+                @if ($can_follow)
+                    @if ($is_following)
+                        <a class="pull-right btn btn-lg btn-outline-primary" href="#" v-on:click="unFollowUser"><i class="fa fa-check fa-fw"></i> @lang('gallery.user_profile.following_button')</a>
+                    @else
+                        <a class="pull-right btn btn-lg btn-primary" href="#" v-on:click="followUser">@lang('gallery.user_profile.follow_button')</a>
+                    @endif
+                @endif
                 <h1>{{ $user->name }}</h1>
                 @if (!empty($user->profile_alias))
                     <h2 class="text-muted">{{ $user->profile_alias }}</h2>
@@ -124,6 +131,10 @@
                         </div>
                     </div>
                 </div>
+                <div class="text-center" v-if="feed_items.length == 0">
+                    <h4 class="text-danger"><b>@lang('gallery.user_profile.no_feed_activity_p1')</b></h4>
+                    <p>@lang('gallery.user_profile.no_feed_activity_p2', ['user_name' => $user->name])</p>
+                </div>
             </div>
         </div>
     </div>
@@ -133,10 +144,13 @@
     <script type="text/javascript">
         var viewModel = new UserViewModel({
             current_url: '{{ url()->current() }}',
-            feed_url: '{{ \App\User::currentOrAnonymous()->feedJsonUrl() }}'
+            feed_url: '{{ $user->feedJsonUrl() }}',
+            follow_user_url: '{{ $user->followUrl() }}',
+            unfollow_user_url: '{{ $user->unFollowUrl() }}'
         });
 
         var app = new Vue(viewModel);
+        app.user_id = '{{ $user->id }}';
         app.loadFeedItems();
 
         @if ($active_tab == 'feed')

routes/web.php

@@ -143,6 +143,12 @@ Route::get('label/{labelAlias}', 'Gallery\LabelController@show')
 Route::get('u/{idOrAlias}/feed.json', 'Gallery\UserController@showFeedJson')
     ->name('viewUserFeedJson')
     ->where('idOrAlias', '.*');
+Route::post('u/{idOrAlias}/follow', 'Gallery\UserController@followUser', ['middleware' => 'auth'])
+    ->name('followUser')
+    ->where('idOrAlias', '.*');
+Route::post('u/{idOrAlias}/unfollow', 'Gallery\UserController@unFollowUser', ['middleware' => 'auth'])
+    ->name('unFollowUser')
+    ->where('idOrAlias', '.*');
 Route::get('u/{idOrAlias}', 'Gallery\UserController@show')
     ->name('viewUser')
     ->where('idOrAlias', '.*');