Update dependencies - server-migration

.tool-versions

@@ -1,3 +1,3 @@
-elixir 1.11.4-otp-23
-erlang 23.3.4.1
-nodejs 16.15.0
+elixir 1.18.2-otp-27
+erlang 27.2.4
+nodejs 22.14.0

Dockerfile

@@ -1,5 +1,5 @@
 # build stage
-FROM node:16-alpine as build-stage
+FROM node:22-alpine as build-stage
 ENV JQ_VERSION=1.6
 RUN wget --no-check-certificate https://github.com/stedolan/jq/releases/download/jq-${JQ_VERSION}/jq-linux64 -O /tmp/jq-linux64
 RUN cp /tmp/jq-linux64 /usr/bin/jq

data/nginx-vue/conf.d/default.conf

@@ -0,0 +1,44 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    error_page 404 =200 /index.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
+    #
+    #location ~ \.php$ {
+    #    proxy_pass   http://127.0.0.1;
+    #}
+
+    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+    #
+    #location ~ \.php$ {
+    #    root           html;
+    #    fastcgi_pass   127.0.0.1:9000;
+    #    fastcgi_index  index.php;
+    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
+    #    include        fastcgi_params;
+    #}
+
+    # deny access to .htaccess files, if Apache's document root
+    # concurs with nginx's one
+    #
+    #location ~ /\.ht {
+    #    deny  all;
+    #}
+}

docker-compose.yml

@@ -4,43 +4,7 @@ services:
     build: .
     ports:
       - "80:80"
-    links:
-      - epochtalk
-    environment:
-      BASE_URL: "http://localhost:8080"
-  epochtalk:
-    image: quay.io/epochtalk/epochtalk:ui-refactor-2020
-    ports:
-      - "8080:8080"
-      - "23958:23958"
-    depends_on:
-      - redis
-      - postgres
-      - epoch
-    links:
-      - redis
-      - postgres
     env_file:
-      - epochtalk-docker.env
-  epoch:
-    image: quay.io/epochtalk/epoch:v1.14.0
-    depends_on:
-      - postgres
-    links:
-      - postgres
-    environment:
-      MIX_ENV: prod
-      DATABASE_USER: docker
-      DATABASE_PASSWORD: docker
-      DATABASE_NAME: epochtalk
-      DATABASE_HOST: postgres
-  redis:
-    image: redis:4.0.1
-    user: redis
-  postgres:
-    image: postgres:11.1
-    environment:
-      POSTGRES_USER: docker
-      POSTGRES_PASSWORD: docker
+      - epochtalk-vue.env
     volumes:
-      - ./db:/var/lib/postgresql/data
+      - ./data/nginx-vue/conf.d:/etc/nginx/conf.d

example.env

@@ -1,2 +1,8 @@
+# When adding a new env variable,
+# make sure to add an entry to:
+# src/config.json (dev)
+# and
+# src/docker-config.json (prod)
 VUE_APP_BACKEND_URL=http://localhost:4000
 VUE_APP_OLD_BACKEND_URL=http://localhost:8080
+VUE_APP_API_KEY=ABC123

package.json

@@ -19,34 +19,34 @@
     "url": "git://github.com/epochtalk/epochtalk-vue"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.0",
-    "@vueform/multiselect": "^2.6.2",
-    "axios": "^1.4.0",
-    "core-js": "^3.32.0",
-    "dayjs": "^1.11.8",
-    "emittery": "^1.0.1",
-    "jquery": "^3.7.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@vueform/multiselect": "^2.6.11",
+    "axios": "^1.8.1",
+    "core-js": "^3.40.0",
+    "dayjs": "^1.11.13",
+    "emittery": "^1.1.0",
+    "jquery": "^3.7.1",
     "nestable": "https://github.com/epochtalk/Nestable.git",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
-    "phoenix": "^1.7.7",
-    "sass": "^1.64.1",
+    "phoenix": "^1.7.20",
+    "sass": "1.77.6",
     "slugify": "^1.6.6",
-    "socketcluster-client": "^17.1.1",
-    "swrv": "^1.0.3",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.2",
+    "socketcluster-client": "^19.2.3",
+    "swrv": "^1.1.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.21.8",
+    "@babel/eslint-parser": "^7.26.8",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/compiler-sfc": "^3.5.13",
     "eslint": "^8.46.0",
-    "eslint-plugin-vue": "^9.14.1",
-    "sass-loader": "^13.3.1"
+    "eslint-plugin-vue": "^9.32.0",
+    "sass-loader": "^16.0.5"
   },
   "eslintConfig": {
     "root": true,

public/index.html

@@ -5,18 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="/favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Bitcoin Forum</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but Bitcoin Forum doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <div id="modals"></div>
     <!-- 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,13 +11,15 @@ 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
 })
 
 const $auth = localStorageCache(0, 'app').get('auth')
 const initUser = $auth ? $auth.data : undefined
 if (initUser) { $axios2.defaults.headers.common['Authorization'] = `BEARER ${initUser.token}` }
+$axios2.defaults.headers.common['api-key'] = process.env.VUE_APP_API_KEY || config.VUE_APP_API_KEY
+
 /* provided methods */
 const $http = (path, opts, handleErrors) => {
   opts = opts || {}
@@ -208,7 +210,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/assets/scss/_variables.scss

@@ -44,7 +44,7 @@ $font-size-tiny:  0.6375rem;
     $color-brightness: brightness($color);
     $light-text-brightness: brightness($light);
     $dark-text-brightness: brightness($dark);
-    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+    @return if(math.abs($color-brightness - $light-text-brightness) > math.abs($color-brightness - $dark-text-brightness), $light, $dark);
   }
 }
 @import '~@/assets/scss/_default-variables.scss';

src/components/admin/settings/AdManager.vue

@@ -95,9 +95,11 @@
         <section class="ads-container">
           <table class="striped ads-table full-width">
             <thead>
-              <th>Number</th>
-              <th>Display</th>
-              <th>Actions</th>
+              <tr>
+                <th>Number</th>
+                <th>Display</th>
+                <th>Actions</th>
+              </tr>
             </thead>
             <tbody>
               <tr v-for="(ad, index) in ads" :key="ad.id">
@@ -181,10 +183,12 @@
       <section class="factoids-container full-width">
         <table class="striped ads-table full-width">
           <thead>
-            <th>Number</th>
-            <th>Display</th>
-            <th>Enabled</th>
-            <th>Actions</th>
+            <tr>
+              <th>Number</th>
+              <th>Display</th>
+              <th>Enabled</th>
+              <th>Actions</th>
+            </tr>
           </thead>
           <tbody>
             <tr v-for="(factoid, index) in factoids" :key="factoid.id">

src/components/layout/HeaderComponent.vue

@@ -75,7 +75,7 @@
           <h1 :class="{ 'hide-mobile': adminMode }">
             <router-link to="/" v-if="logo"><img :src="logo" id="logo" /></router-link>
             <router-link id="logo-text" to="/">
-              {{decode(title)}}
+              Bitcoin Forum
             </router-link>
             <span>&nbsp;{{decode(revision)}}</span>
           </h1>
@@ -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/layout/Pagination.vue

@@ -40,7 +40,7 @@ export default {
       if (query.page === 1 || !query.page) delete query.page
       if (query.start) delete query.start
       if (props.page !== v.currentPage) {
-        $router.replace({ name: $route.name, params: params, query: query })
+        $router.push({ name: $route.name, params: params, query: query })
       }
     }
 

src/components/modals/profile/ManageBans.vue

@@ -7,30 +7,32 @@
         <!-- Manage Bans -->
         <label class="bold">User Information</label>
         <table v-if="userCopy.username" class="striped" width="100%">
-          <tr>
-            <td>Username</td>
-            <td>{{ userCopy.username }}</td>
-          </tr>
-          <tr>
-            <td>Email</td>
-            <td>{{ userCopy.email }}</td>
-          </tr>
-          <tr>
-            <td>Register Date</td>
-            <td>{{ humanDate(userCopy.created_at) }}</td>
-          </tr>
-          <tr v-if="userCopy.ban_expiration">
-            <td>Global Ban Expiration (UTC)</td>
-            <td>{{ humanDate(dayjs.utc(userCopy.ban_expiration), true) }}</td>
-          </tr>
-          <tr v-if="userCopy?.banned_board_names?.length">
-            <td>Banned From Boards</td>
-            <td>
-              <span v-for="(boardName, i) in userCopy.banned_board_names" :key="i">
-                {{ boardName }}<span v-if="(i + 1) !== userCopy.banned_board_names.length">, </span>
-              </span>
-            </td>
-          </tr>
+          <tbody>
+            <tr>
+              <td>Username</td>
+              <td>{{ userCopy.username }}</td>
+            </tr>
+            <tr>
+              <td>Email</td>
+              <td>{{ userCopy.email }}</td>
+            </tr>
+            <tr>
+              <td>Register Date</td>
+              <td>{{ humanDate(userCopy.created_at) }}</td>
+            </tr>
+            <tr v-if="userCopy.ban_expiration">
+              <td>Global Ban Expiration (UTC)</td>
+              <td>{{ humanDate(dayjs.utc(userCopy.ban_expiration), true) }}</td>
+            </tr>
+            <tr v-if="userCopy?.banned_board_names?.length">
+              <td>Banned From Boards</td>
+              <td>
+                <span v-for="(boardName, i) in userCopy.banned_board_names" :key="i">
+                  {{ boardName }}<span v-if="(i + 1) !== userCopy.banned_board_names.length">, </span>
+                </span>
+              </td>
+            </tr>
+          </tbody>
         </table>
         <div v-if="!userCopy.username">
           <Multiselect ref="focusInput" v-model="userToBan.value" v-bind="userToBan" />

src/components/threads/RecentThreads.vue

@@ -14,11 +14,11 @@
         </a>
       </div>
       <transition>
-        <div>
-          <div v-if="!threads && collapsedCats.indexOf(recentThreadsId) < 0" class="centered-text">
+        <div v-if="collapsedCats.indexOf(recentThreadsId) < 0">
+          <div v-if="!threads" class="centered-text">
             <h5>No recently updated threads available</h5>
           </div>
-          <div class="threads-container" v-if="threads && collapsedCats.indexOf(recentThreadsId) < 0">
+          <div class="threads-container" v-if="threads">
             <!-- Thread listing -->
             <div class="threads-data threads-recent" v-for="thread in threads" :key="thread.id">
               <div class="states">
@@ -62,7 +62,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>