Merge branch 'proxy' into server-migration

public/index.html

@@ -16,7 +16,7 @@
     <!-- built files will be auto injected -->
     <script id="config-remote" async>
       window.configScript = document.createElement('script')
-      window.configScript.src = '<%= process.env.VUE_APP_BACKEND_URL%>/config.js'
+      window.configScript.src = '<%= process.env.VUE_APP_BACKEND_URL || "$VUE_APP_BACKEND_URL"%>/config.js'
       window.configScript.type = 'text/javascript'
 
       // Try to append config from backend

src/api/index.js

@@ -11,7 +11,7 @@ export const $axios = axios.create({
 })
 export const $axios2 = axios.create({
   baseURL: process.env.VUE_APP_BACKEND_URL || config.VUE_APP_BACKEND_URL,
-  timeout: 3000,
+  timeout: 15000,
   crossDomain: true
 })
 
@@ -208,7 +208,7 @@ export const usersApi = {
   memberSearch: params => $http('/api/search/users', { params }),
   lookup: (username, params) => $http(`/api/users/lookup/${username}`, { params }),
   update: (userId, data) => $http(`/api/users/${userId}`, { method: 'PUT', data }),
-  find: username => $http2(`/api/users/${username}`),
+  find: id => $http2(`/api/users/byid?id=${id}`),
   delete: userId => $http(`/api/users/${userId}`, { method: 'DELETE' }),
   deactivate: userId => $http(`/api/users/${userId}/deactivate`, { method: 'POST' }),
   reactivate: userId => $http(`/api/users/${userId}/reactivate`, { method: 'POST' }),

src/components/layout/HeaderComponent.vue

@@ -84,10 +84,15 @@
           <!-- Login Section -->
           <ul class="signed-out" v-if="!loggedIn">
             <li>
-              <a href="" @click.prevent="showRegister = true">REGISTER</a>
+              <!-- <a href="" @click.prevent="showRegister = true" disabled="true">REGISTER</a> -->
+              <span>REGISTER</span>
             </li>
             <li>
-              <a href="" id="login-link" @click.prevent="showLogin = true">LOGIN</a>
+              <!-- <a href="" id="login-link" @click.prevent="showLogin = true" disabled="true">LOGIN</a> -->
+              <span>LOGIN</span>
+            </li>
+            <li>
+              <a href="https://forms.clickup.com/57751/f/1rcq-791/HNWSBPWCDSRMDMS9TF" target="_blank">REPORT A BUG</a>
             </li>
           </ul>
 
@@ -659,11 +664,16 @@ header {
           cursor: pointer;
         }
         &.signed-out li { padding-left: 1.25rem; }
-        &.signed-out li a {
+        &.signed-out li a, &.signed-out li span {
           display: table-cell;
           height: inherit;
           vertical-align: middle;
         }
+        li span {
+          cursor: not-allowed;
+          color: $secondary-font-color;
+          font-size: $header-login-font-size;
+        }
         li a {
           color: $header-login-font-color;
           font-size: $header-login-font-size;

src/components/threads/RecentThreads.vue

@@ -52,7 +52,7 @@
             <router-link v-if="thread?.board" class="thread-board" :title="decode(thread.board.name)" :to="{ name: 'Threads', params: { boardSlug: thread.board.slug } }" onclick="event.stopPropagation()"><span v-html="decode(thread.board.name)"></span></router-link>
             by
             <span v-if="thread.deleted">deleted</span>
-            <router-link onclick="event.stopPropagation()" v-if="!thread.deleted" :to="{ path: '/profile/' + thread?.user?.username.toLowerCase() }">{{thread?.user?.username}}</router-link>
+            <router-link onclick="event.stopPropagation()" v-if="!thread.deleted" :to="{ path: '/profile/' + thread?.user?.username.toLowerCase(), query: { id: thread?.user?.id } }">{{thread?.user?.username}}</router-link>
           </div>
           <div class="last-reply">
             <div>{{humanDate(thread?.post?.created_at)}}</div>

src/components/users/RankDisplay.vue

@@ -16,7 +16,8 @@ export default {
     const init = u => {
       const rankMap = u.metadata.ranks
       const metricToRankMaps = u.metadata.rank_metric_maps
-      let ranks = Object.keys(metricToRankMaps).reduce((mappedRanks, metricName) => {
+      if (metricToRankMaps) {
+        let ranks = Object.keys(metricToRankMaps).reduce((mappedRanks, metricName) => {
         let rank = -1
         for (let i = 0; i < metricToRankMaps[metricName].length; i++) {
           if (u[metricName] >= metricToRankMaps[metricName][i]) rank = i
@@ -31,6 +32,7 @@ export default {
 
       if (lowestRankNumber >= 0) v.userRank = rankMap[lowestRankNumber].name
       else v.userRank = ''
+      } else v.userRank = ''
     }
 
     init(v.user)

src/components/users/UserPosts.vue

@@ -115,6 +115,7 @@ export default {
     next(vm => {
       const params = {
         username: to.params.username,
+        id: to.query.id,
         limit: localStoragePrefs().data.posts_per_page,
         page: to.query.page || 1,
         field: to.query.field,
@@ -131,6 +132,7 @@ export default {
   beforeRouteUpdate(to, from, next) {
     const params = {
       username: to.params.username,
+      id: to.query.id,
       limit: localStoragePrefs().data.posts_per_page,
       page: to.query.page || 1,
       field: to.query.field,
@@ -158,6 +160,7 @@ export default {
     const refresh = () => {
       const params = {
         username: $route.params.username,
+        id: $route.query.id,
         limit: v.prefs.posts_per_page,
         page: $route.query.page || 1,
         field: $route.query.field,
@@ -169,8 +172,8 @@ export default {
 
     const toggleThreads = threads => {
       const params = { ...$route.params, saveScrollPos: true }
-      if (threads) $router.replace({ name: $route.name, params: params, query: { threads }})
-      else $router.replace({ name: $route.name, params: params })
+      if (threads) $router.replace({ name: $route.name, params: params, query: { threads: threads, id: $route.query.id }})
+      else $router.replace({ name: $route.name, params: params, query: { id: $route.query.id }})
       v.threads = threads
     }
 

src/composables/stores/prefs.js

@@ -8,8 +8,8 @@ const AUTH_KEY = 'auth'
 
 const appCache = localStorageCache(0, 'app')
 const emtpyPrefs = {
-  posts_per_page: 25,
-  threads_per_page: 25,
+  posts_per_page: 10,
+  threads_per_page: 10,
   timezone_offset: {
     sign: '',
     hours: '',

src/composables/utils/boardUtils.js

@@ -6,6 +6,7 @@ const buildLastPostData = data => {
     last_post_created_at: data.last_post_created_at,
     last_post_position: data.last_post_position,
     last_post_username: data.last_post_username,
+    last_post_user_id: data.last_post_user_id,
     last_post_avatar: data.last_post_avatar,
     last_thread_id: data.last_thread_id,
     last_thread_slug: data.last_thread_slug,

src/views/Boards.vue

@@ -3,8 +3,10 @@
     <recent-threads v-if="boardData && boardData.data && boardData.data.threads" :threads="boardData.data.threads"></recent-threads>
 
     <div v-if="!loggedIn" class="dashboard-actions">
-      <a href="" class="button" @click.prevent="showRegister = true">Create an Account</a>
-      <a href="" class="button" @click.prevent="showLogin = true">Log In</a>
+      <!-- <a href="" class="button" @click.prevent="showRegister = true">Create an Account</a> -->
+      <a href="" class="button disabled" @click.stop.prevent="">Create an Account</a>
+      <!-- <a href="" class="button" @click.prevent="showLogin = true">Log In</a> -->
+      <a href="" class="button disabled" @click.stop.prevent="">Log In</a>
     </div>
     <div v-if="loggedIn" class="dashboard-actions">
       <router-link :to="{ name: 'Watchlist' }" class="button">Watchlist</router-link>
@@ -67,7 +69,7 @@
                   <div v-if="board.last_post_username">
                     <span v-if="board.user_deleted || board.post_deleted">deleted</span>
                     <img v-if="!board.user_deleted && !board.post_deleted" class="avatar-small" :class="defaultAvatarShape" :src="board.last_post_avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
-                    <router-link v-if="!board.user_deleted && !board.post_deleted" :to="{ path: '/profile/' + board.last_post_username.toLowerCase() }">{{board.last_post_username}}</router-link> posted in
+                    <router-link v-if="!board.user_deleted && !board.post_deleted" :to="{ path: '/profile/' + board.last_post_username.toLowerCase(), query: { id: board.last_post_user_id }}">{{board.last_post_username}}</router-link> posted in
                     <span v-if="board.last_thread_title">
                       <router-link :to="{ name: 'Posts', params: { threadSlug: board.last_thread_slug }, query: { start: board.last_post_position} }">
                         <span v-html="board.last_thread_title"></span>
@@ -350,6 +352,7 @@ img.avatar-small {
     margin: 0 1rem;
     min-width: 160px;
     &:last-child { margin-left: 0; }
+    &.disabled { cursor: not-allowed; }
   }
 
   @include break-mobile-sm {

src/views/Posts.vue

@@ -123,19 +123,19 @@
       <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() }">
+          <router-link :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">
                   <title></title>
                   <circle cx="24" cy="24" r="16" />
                 </svg>
               </span>
-              <router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
+              <router-link :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }">
                 <img :src="post.avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
               </router-link>
             </div>
-            <router-link class="hide-mobile" :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
+            <router-link :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }" class="hide-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.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit}}</span></div>
@@ -166,7 +166,7 @@
                 </div>
                 <div :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 :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }" 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.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit}}</span></div>
@@ -188,7 +188,7 @@
           <!-- 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() }">
+              <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>
               <div :title="post.user.name" v-if="post.user.name" class="display-name">

src/views/Profile.vue

@@ -37,20 +37,24 @@
         <div class="profile-user-name-role">
           <h1>{{user.username}}</h1>
           <span class="username-screen" v-html="user.name"></span>
-          <span class="user-role" :style="{ 'background-color': user.role_highlight_color ? user.role_highlight_color : 'grey' }" v-html="user.role_name"></span>
-          <span class="user-rank">
+          <span class="user-role" :style="{ 'background-color': user.position_color ? user.position_color : 'grey' }" v-html="user.position"></span>
+          <span v-if="user.title" class="user-rank">
+            {{user.title}}
             <rank-display v-if="user.metadata" :user="user" />
           </span>
         </div>
 
         <div class="profile-user-activity">
           <div class="user-activity-stat" v-if="user.activity > -1">Activity: <span class="value">{{user.activity}}</span>
+          </div><br />
+          <div class="user-activity-stat" v-if="user.merit">
+            Merit: <span class="value">{{user.merit}}</span>
           </div>
            <trust-display v-if="loggedIn" :username="user.username" />
         </div>
 
         <div class="user-profile-position">
-          <span v-html="user.position"></span>
+          <!-- <span v-html="user.position"></span> -->
           <span v-html="user.status"></span>
         </div>
 
@@ -71,8 +75,8 @@
             <span class="stat-text">{{ user.post_count || 0 }}</span>
             <span class="label">Posts</span>
           </div>
-          <div class="stats">
-            <span class="label">Last Seen </span>
+          <div v-if="user.last_active" class="stats">
+            <span class="label">Last Active </span>
             <span class="stat-text-sm">{{ humanDate(user.last_active, true) }}</span>
           </div>
           <div class="stats">
@@ -200,21 +204,21 @@ export default {
   props: [ 'username', 'saveScrollPos' ],
   components: { TrustDisplay, RankDisplay, UpdateSignatureModal, UpdatePasswordModal, UpdateAvatarModal, UpdateEmailModal, DeleteAccountModal, DeactivateReactivateModal, UpdateProfileModal, QuickMessageModal, ManageBansModal, ModerationNotesModal },
   beforeRouteEnter(to, from, next) {
-    usersApi.find(to.params.username).then(u => next(vm => {
+    usersApi.find(to.query.id).then(u => next(vm => {
       vm.user = u
       isOnline(u.id, (e, d) => vm.userOnline = d.online)
     }))
   },
   beforeRouteUpdate(to, from, next) {
-    usersApi.find(to.params.username).then(u => {
+    usersApi.find(to.query.id).then(u => {
       this.user = u
       isOnline(u.id, (e, d) => this.userOnline = d.online)
     })
     next()
   },
   setup(props) {
     /* Template Methods */
-    const refreshUser = () => usersApi.find(v.user.username).then(u => v.user = u)
+    const refreshUser = () => usersApi.find(v.user.id).then(u => v.user = u)
     const redirectHome = () => $router.replace('/')
 
     const banExpiration = () => {