Merge pull request #86 from epochtalk/anonymous-user

Post Anonymous User

Author: akinsey

src/views/Posts.vue

@@ -126,7 +126,7 @@
       <div v-if="!post._deleted && !post.user.ignored" class="post-block-grid">
         <!-- Post Profile Section -->
         <div class="post-user">
-          <router-link :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id }}">
+          <router-link v-if="post.user.username" :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id }}">
             <div class="user-avatar" :class="defaultAvatarShape">
               <span v-if="post.user.online" class="online green" :data-balloon="post.user.username + ' is online'">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
@@ -141,10 +141,15 @@
             <router-link class="hide-mobile" :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }">
               <div class="original-poster" v-if="post.user.original_poster">OP</div>
               <div v-if="post.user.title" :title="('Title: ' + post.user.title)" class="user-activity"><span class="user-activity-value">{{post.user.title}}</span></div>
-              <div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Activity: <span class="user-activity-value">{{post.user.activity}}</span></div>
-              <div v-if="post.user.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit}}</span></div>
+              <div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Activity: <span class="user-activity-value">{{post.user.activity || 0}}</span></div>
+              <div v-if="post.user.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit || 0}}</span></div>
             </router-link>
           </router-link>
+          <div v-if="!post.user.username">
+            <div class="user-avatar" :class="defaultAvatarShape">
+              <img :src="post.avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
+            </div>
+          </div>
 
           <div class="user-trust" v-if="loggedIn && postData.data.thread.trust_visible">
             <trust-display :user="post.user" />
@@ -160,20 +165,23 @@
           <div class="show-mobile">
             <div class="post-title-mobile">
               <div class="post-title-user">
-                <span class="username" :data-balloon="post.user.role_name || 'User'"><router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
-                  <span v-html="post.user.username"></span>
-                </router-link></span>
+                <span class="username" :data-balloon="post.user.role_name || 'User'">
+                  <router-link v-if="post.user.username" :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
+                    <span v-html="post.user.username"></span>
+                  </router-link>
+                  <span v-if="!post.user.username">Anonymous</span>
+                </span>
                 <div :title="post.user.name" v-if="post.user.name" class="display-name">
                   <span>{{truncate(post.user.name, 33)}}</span>
                   <span class="hide-mobile">&nbsp;&mdash;&nbsp;</span>
                 </div>
-                <div :title="post.user.role_name || 'user'" class="user-role" :style="userRoleHighlight(post.user.highlight_color)">{{post.user.role_name || 'user'}}</div>
+                <div v-if="post.user.id != 0" :title="post.user.role_name || 'user'" class="user-role" :style="userRoleHighlight(post.user.highlight_color)">{{post.user.role_name || 'user'}}</div>
               </div>
-              <router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }" class="user-activity-mobile">
+              <router-link v-if="post.user.username" :to="{ path: '/profile/' + post.user.username.toLowerCase() }" class="user-activity-mobile">
                 <div class="original-poster" v-if="post.user.original_poster">OP</div>
                 <div v-if="post.user.title" :title="('Title: ' + post.user.title)" class="user-activity"><span class="user-activity-value">{{post.user.title}}</span></div>
-                <div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Activity: <span class="user-activity-value">{{post.user.activity}}</span></div>
-                <div v-if="post.user.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit}}</span></div>
+                <div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Activity: <span class="user-activity-value">{{post.user.activity || 0}}</span></div>
+                <div v-if="post.user.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit || 0}}</span></div>
               </router-link>
               <div class="timestamp">
                 <span>{{humanDate(post.created_at)}}</span>
@@ -191,14 +199,17 @@
           <!-- Post Title -->
           <div class="hide-mobile post-title">
             <div class="post-title-user">
-              <span class="username" :data-balloon="post.user.role_name || 'User'"><router-link :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }">
-                <span v-html="post.user.username"></span>
-              </router-link></span>
+              <span class="username" :data-balloon="post.user.role_name || 'User'">
+                <router-link v-if="post.user.username" :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }">
+                  <span v-html="post.user.username"></span>
+                </router-link>
+                <span v-if="!post.user.username">Anonymous</span>
+              </span>
               <div :title="post.user.name" v-if="post.user.name" class="display-name">
                 <span>{{truncate(post.user.name, 33)}}</span>
                 <span class="hide-mobile">&nbsp;&mdash;&nbsp;</span>
               </div>
-              <div :title="post.user.role_name || 'user'" class="user-role" :style="userRoleHighlight(post.user.highlight_color)">{{post.user.role_name || 'user'}}</div>
+              <div v-if="post.user.id != 0" :title="post.user.role_name || 'user'" class="user-role" :style="userRoleHighlight(post.user.highlight_color)">{{post.user.role_name || 'user'}}</div>
               <div class="timestamp">
                 <span>{{humanDate(post.created_at)}}</span>
                 <span v-if="showEditDate(post) && post.metadata?.edited_by_username">{{'&nbsp;&mdash;&nbsp;Edited ' + humanDate(post.updated_at) + ' by '}}</span><a v-if="showEditDate(post) && post.metadata?.edited_by_username" href="#">{{post.metadata.edited_by_username}}</a>
@@ -1538,9 +1549,6 @@ ad-viewer {
         color: $base-font-color;
         font-size: $font-size-sm;
         font-weight: 600;
-        &:hover {
-          color: $color-primary;
-        }
       }
 
       .user-role {
@@ -1605,9 +1613,6 @@ ad-viewer {
         margin-right: 0.25rem;
         color: $base-font-color;
         font-weight: 600;
-        &:hover {
-          color: $color-primary;
-        }
       }
 
       .user-role {

src/views/Threads.vue

@@ -132,9 +132,10 @@
             <div class="started-by">
               Started by
               <span v-if="thread.user.deleted">deleted</span>
-              <router-link v-if="!thread.user.deleted" :to="{ path: '/profile/' + thread?.user?.username.toLowerCase(), query: { id: thread?.user?.id } }">
+              <router-link v-if="!thread.user.deleted && thread.user.username" :to="{ path: '/profile/' + thread?.user?.username.toLowerCase(), query: { id: thread?.user?.id } }">
                 <span v-html="thread.user.username"></span>
               </router-link>
+              <span v-if="!thread.user.username">Anonymous</span>
               <span> on {{humanDate(thread.created_at)}}</span>
             </div>
           </td>
@@ -146,17 +147,22 @@
 
           <td class="last-post">
             <span v-if="thread.last_deleted">deleted</span>
-            <router-link v-if="!thread.last_deleted" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase(), query: { id: thread.last_post_user_id } }"><img class="avatar-small" :class="defaultAvatarShape" :src="thread.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" /></router-link>
-            <router-link v-if="!thread.last_deleted" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase(), query: { id: thread.last_post_user_id } }">
+            <router-link v-if="!thread.last_deleted && thread.last_post_username" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase(), query: { id: thread.last_post_user_id } }">
+              <img class="avatar-small" :class="defaultAvatarShape" :src="thread.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
+            </router-link>
+            <router-link v-if="!thread.last_deleted && thread.last_post_username" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase(), query: { id: thread.last_post_user_id } }">
               <span v-html="thread.last_post_username"></span>
-            </router-link> posted on
+            </router-link> 
+            <img v-if="!thread.last_deleted && !thread.last_post_username" class="avatar-small" :class="defaultAvatarShape" :src="thread.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
+            <span v-if="!thread.last_deleted && !thread.last_post_username">Anonymous</span>
+            posted on 
             <router-link :to="{ name: 'Posts', params: { threadSlug: thread.slug }, query: { start: thread.last_post_position }, hash: '#' + thread.last_post_id }"><span>{{humanDate(thread.last_post_created_at)}}</span>.</router-link>
             <router-link v-if="thread.has_new_post" :to="{ name: 'Posts', params: { threadSlug: thread.slug, start: thread.latest_unread_position}, hash: '#' + thread.latest_unread_post_id }">(Last unread post)</router-link>
           </td>
         </tr>
 
         <tr class="threads-data" v-for="thread in threadData.data.normal" :key="thread.id">
-          <td class="subject" v-if="thread.user.username">
+          <td class="subject">
             <div class="title">
               <div class="thread-state">
                 <svg class="is-unread" v-if="thread.has_new_post" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" data-balloon="Unread">
@@ -185,9 +191,10 @@
             <div class="started-by">
               Started by
               <span v-if="thread.user.deleted">deleted</span>
-              <router-link v-if="!thread.user.deleted" :to="{ path: '/profile/' + thread.user.username.toLowerCase(), query: { id: thread.user.id } }">
+              <router-link v-if="!thread.user.deleted && thread.user.username" :to="{ path: '/profile/' + thread.user.username.toLowerCase(), query: { id: thread.user.id } }">
                 <span v-html="thread.user.username"></span>
               </router-link>
+              <span v-if="!thread.user.username">Anonymous</span>
               <span> on {{ humanDate(thread.created_at)}}</span>
             </div>
 
@@ -196,16 +203,25 @@
             </div>
           </td>
 
-          <td class="views-replies" v-if="thread.user.username">
+          <td class="views-replies">
             <span class="replies">{{ thread.is_proxy ? thread.post_count.toLocaleString() : (thread.post_count - 1).toLocaleString() || 0 }}</span>
             <span class="views">{{ thread.view_count.toLocaleString() || 0 }}</span>
-
           </td>
 
-          <td class="last-post" v-if="thread.user.username">
+          <td class="last-post">
             <span v-if="thread.last_deleted">deleted</span>
-            <router-link v-if="!thread.last_deleted" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase(), query: { id: thread.last_post_user_id } }"><img class="avatar-small" :class="defaultAvatar" :src="thread.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" /></router-link>
-            <router-link v-if="!thread.last_deleted" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase(), query: { id: thread.last_post_user_id } }"><span v-html="thread.last_post_username"></span></router-link> posted on <router-link :to="{ name: 'Posts', params: { threadSlug: thread.slug }, query: { start: thread.last_post_position }, hash: '#' + thread.last_post_id }"><span>{{humanDate(thread.last_post_created_at)}}</span>.</router-link>
+            <router-link v-if="!thread.last_deleted && thread.last_post_username" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase(), query: { id: thread.last_post_user_id } }">
+              <img class="avatar-small" :class="defaultAvatar" :src="thread.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
+            </router-link>
+            <router-link v-if="!thread.last_deleted && thread.last_post_username" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase(), query: { id: thread.last_post_user_id } }">
+              <span v-html="thread.last_post_username"></span>
+            </router-link> 
+            <img v-if="!thread.last_deleted && !thread.last_post_username" class="avatar-small" :class="defaultAvatar" :src="thread.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
+            <span v-if="!thread.last_deleted && !thread.last_post_username">Anonymous</span>
+            posted on 
+              <router-link :to="{ name: 'Posts', params: { threadSlug: thread.slug }, query: { start: thread.last_post_position }, hash: '#' + thread.last_post_id }">
+                <span>{{humanDate(thread.last_post_created_at)}}</span>.
+              </router-link>
             <router-link v-if="thread.has_new_post" :to="{ name: 'Posts', params: { threadSlug: thread.slug }, query: { start: thread.latest_unread_position }, hash: '#' + thread.latest_unread_post_id }">(Last unread post)</router-link>
           </td>
           <td class="show-mobile">