app/User.php

@@ -75,7 +75,7 @@ class User extends Authenticatable
     public function followUrl()
     {
         return route('followUser', [
-            'idOrAlias' => (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id)
+            'idOrAlias' => $this->profileAliasForUrl()
         ]);
     }
 
@@ -89,10 +89,15 @@ class User extends Authenticatable
         return $this->id == -1 && $this->name == 'Anonymous';
     }
 
+    public function profileAliasForUrl()
+    {
+        return (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id);
+    }
+
     public function profileUrl()
     {
         return route('viewUser', [
-            'idOrAlias' => (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id)
+            'idOrAlias' => $this->profileAliasForUrl()
         ]);
     }
 
@@ -104,7 +109,7 @@ class User extends Authenticatable
     public function unFollowUrl()
     {
         return route('unFollowUser', [
-            'idOrAlias' => (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id)
+            'idOrAlias' => $this->profileAliasForUrl()
         ]);
     }
 }

resources/assets/js/gallery.js

@@ -1,3 +1,47 @@
+/**
+ * This model is used by gallery/explore_users.blade.php, to handle following/unfollowing users profiles.
+ * @constructor
+ */
+function ExploreUsersViewModel(urls)
+{
+    this.el = '#explore-users-app';
+
+    this.data = {
+    };
+
+    this.computed = {
+    };
+
+    this.methods = {
+        followUser: function(e)
+        {
+            var userIDToFollow = $(e.target).data('user-id');
+            var urlToPost = urls.follow_user_url.replace('/-1/', '/' + userIDToFollow + '/');
+
+            $.post(urlToPost, '', function(data)
+            {
+                window.location.reload(true);
+            });
+
+            e.preventDefault();
+            return false;
+        },
+        unFollowUser: function(e)
+        {
+            var userIDToUnfollow = $(e.target).data('user-id');
+            var urlToPost = urls.unfollow_user_url.replace('/-1/', '/' + userIDToUnfollow + '/');
+
+            $.post(urlToPost, '', function(data)
+            {
+                window.location.reload(true);
+            });
+
+            e.preventDefault();
+            return false;
+        }
+    };
+}
+
 /**
  * This model is used by gallery/photo.blade.php, to handle comments and individual photo actions.
  * @constructor

resources/lang/en/gallery.php

@@ -19,7 +19,8 @@ return [
         'follow_button' => 'Follow',
         'following_button' => 'Following',
         'intro_p1' => 'The users listed below have registered on this site and enabled their public profile.',
-        'intro_p2' => 'Click a name to view their profile, or click the Follow button to follow them and see their activity in your activity feed.',
+        'intro_p2' => 'Click a name to view their profile',
+        'intro_p2_logged_in' => ', or click the Follow button to follow them and see their activity in your activity feed',
         'title' => 'Explore Photographers'
     ],
     'file_name' => 'File name:',

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

@@ -7,13 +7,15 @@
 @endsection
 
 @section('content')
-    <div class="container" id="user-app">
+    <div class="container" id="explore-users-app">
         <div class="row">
             <div class="col">
                 @if ($users->count() > 0)
                     <h1>@yield('title')</h1>
                     <p class="mb-1">@lang('gallery.explore_users.intro_p1')</p>
-                    <p>@lang('gallery.explore_users.intro_p2')</p>
+                    <p>
+                        @lang('gallery.explore_users.intro_p2')@if (!Auth::guest())@lang('gallery.explore_users.intro_p2_logged_in')@endif.
+                    </p>
                     <hr class="mt-4 mb-4"/>
 
                     @foreach ($users as $user)
@@ -22,11 +24,11 @@
                                 <img src="{{ Theme::gravatarUrl($user->email, 64) }}" title="{{ $user->name }}" class="rounded">
                             </div>
                             <div class="col-sm-9 col-md-10 col-xl-11">
-                                @if ($user->id != Auth::user()->id)
+                                @if (!Auth::guest() && $user->id != Auth::user()->id)
                                     @if (in_array($user->id, $users_following))
-                                        <button class="btn btn-outline-primary pull-right"><i class="fa fa-fw fa-check"></i> @lang('gallery.explore_users.following_button')</button>
+                                        <button class="btn btn-outline-primary pull-right" data-user-id="{{ $user->profileAliasForUrl() }}" v-on:click="unFollowUser"><i class="fa fa-fw fa-check"></i> @lang('gallery.explore_users.following_button')</button>
                                     @else
-                                        <button class="btn btn-primary pull-right">@lang('gallery.explore_users.follow_button')</button>
+                                        <button class="btn btn-primary pull-right" data-user-id="{{ $user->profileAliasForUrl() }}" v-on:click="followUser">@lang('gallery.explore_users.follow_button')</button>
                                     @endif
                                 @endif
                                 <h2 class="h3"><a href="{{ $user->profileUrl() }}">{{ $user->name }}</a></h2>
@@ -61,14 +63,11 @@
 
 @push('scripts')
     <script type="text/javascript">
-        var viewModel = new UserViewModel({
+        var viewModel = new ExploreUsersViewModel({
-            current_url: '{{ url()->current() }}',
+            'follow_user_url': '{{ route('followUser', [-1]) }}',
-            feed_url: '{{ $user->feedJsonUrl() }}',
+            'unfollow_user_url': '{{ route('unFollowUser', [-1]) }}'
-            follow_user_url: '{{ $user->followUrl() }}',
-            unfollow_user_url: '{{ $user->unFollowUrl() }}'
         });
 
         var app = new Vue(viewModel);
-        app.user_id = '{{ Auth::user()->id }}';
     </script>
 @endpush