⚡️ Switch to fastify, improve security, add e2e tests for core apis

.drone.yml

@@ -4,7 +4,7 @@ name: default
 
 steps:
   - name: ✅ Test
-    image: node
+    image: mauriceo/nodejs-mongodb
     commands:
       - yarn install
       - yarn build

client/components/history/HistoryList.vue

@@ -3,7 +3,7 @@
     <div v-for="(video, index) in history" :key="index" class="history-entry">
       <nuxt-link :to="`/watch?v=${video.videoId}`" class="history-entry-thumbnail">
         <img
-          :src="video.videoDetails.videoThumbnails[3].url"
+          :src="imgProxyUrl + video.videoDetails.videoThumbnails[3].url"
           :alt="video.videoDetails.title"
           class="history-entry-thumbnail-img"
         />
@@ -48,6 +48,7 @@ import DeleteIcon from 'vue-material-design-icons/Delete.vue';
 import { useAxios } from '@/plugins/axiosPlugin';
 import { useAccessor } from '@/store';
 import BadgeButton from '@/components/buttons/BadgeButton.vue';
+import { useImgProxy } from '@/plugins/proxy';
 
 export default defineComponent({
   components: {
@@ -61,6 +62,7 @@ export default defineComponent({
   setup(_, { emit }) {
     const axios = useAxios();
     const accessor = useAccessor();
+    const imgProxy = useImgProxy();
 
     const humanizeDateString = (dateString: string): string => {
       const now = new Date();
@@ -70,13 +72,13 @@ export default defineComponent({
     };
     const deleteEntry = async (videoId: string) => {
       await axios
-        .delete(`${accessor.environment.apiUrl}user/history/${videoId}`)
+        .delete(`${accessor.environment.apiUrl}user/history/${videoId}`, { withCredentials: true })
         .then(() => {
           emit('refresh');
         })
         .catch(() => {
           accessor.messages.createMessage({
-            type: 'info',
+            type: 'error',
             title: 'Error deleting history entry',
             message: 'Try logging out and in again'
           });
@@ -85,7 +87,8 @@ export default defineComponent({
 
     return {
       humanizeDateString,
-      deleteEntry
+      deleteEntry,
+      imgProxyUrl: imgProxy.url
     };
   }
 });

client/components/list/ChannelEntry.vue

@@ -162,7 +162,7 @@ export default defineComponent({
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    align-items: left;
+    align-items: flex-start;
     z-index: 11;
 
     .title-container {

client/components/list/MixEntry.vue

@@ -135,7 +135,7 @@ export default defineComponent({
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    align-items: left;
+    align-items: flex-start;
     z-index: 11;
 
     .mix-entry-title {

client/components/list/MovieEntry.vue

@@ -113,7 +113,7 @@ export default defineComponent({
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    align-items: left;
+    align-items: flex-start;
     z-index: 11;
 
     .movie-entry-title {

client/components/list/PlaylistEntry.vue

@@ -174,7 +174,7 @@ export default defineComponent({
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    align-items: left;
+    align-items: flex-start;
     z-index: 11;
 
     .playlist-entry-title {

client/components/list/VideoEntry.vue

@@ -469,7 +469,7 @@ export default defineComponent({
     overflow: hidden;
     display: flex;
     flex-direction: row;
-    align-items: left;
+    align-items: flex-start;
     z-index: 11;
 
     .video-info-text {

client/components/message/MessageBox.vue

@@ -39,6 +39,7 @@
 <script lang="ts">
 import CloseIcon from 'vue-material-design-icons/Close.vue';
 import { computed, defineComponent, reactive, ref } from '@nuxtjs/composition-api';
+import { useAccessor } from '@/store';
 
 export default defineComponent({
   name: 'MessageBox',
@@ -51,6 +52,8 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const accessor = useAccessor();
+
     const dismissedRight = ref(false);
     const dismissedLeft = ref(false);
     const dismissTimeout = ref(null);
@@ -73,8 +76,8 @@ export default defineComponent({
       dismissedRight.value = true;
       swipeOpacity.value = 0;
       setTimeout(() => {
-        if (props.message && props.message.dismiss && typeof props.message.dismiss === 'function') {
-          props.message.dismiss();
+        if (props.message && props.message.id) {
+          accessor.messages.dismissMessage(props.message.id);
         }
       }, 600);
     };

client/pages/history.vue

@@ -145,7 +145,9 @@ export default defineComponent({
         const start = (currentPage.value - 1) * 30;
         const apiUrl = accessor.environment.apiUrl;
         await axios
-          .get(`${apiUrl}user/history?limit=${limit}&start=${start}${filterString}&sort=DESC`)
+          .get(`${apiUrl}user/history?limit=${limit}&start=${start}${filterString}&sort=DESC`, {
+            withCredentials: true
+          })
           .then((result: { data: any }) => {
             if (result) {
               history.value = result.data.videos;

client/pages/index.vue

@@ -83,7 +83,7 @@ export default defineComponent({
       displayedVideos.value = videos.value;
     };
 
-    const { fetch } = useFetch(async () => {
+    useFetch(async () => {
       const viewTubeApi = new ViewTubeApi(accessor.environment.apiUrl);
       await viewTubeApi.api
         .popular()
@@ -99,9 +99,8 @@ export default defineComponent({
           accessor.messages.createMessage({
             type: 'error',
             title: 'Error loading homepage',
-            message: 'Click to try again',
-            dismissDelay: 0,
-            clickAction: () => fetch()
+            message: 'Refresh the page to try again',
+            dismissDelay: 0
           });
         });
       if (userAuthenticated.value && accessor.settings.showHomeSubscriptions) {

client/pages/profile/index.vue

@@ -49,7 +49,10 @@
             <ChevronUpIcon class="chevron-icon" />
           </label>
           <div class="actions-details">
-            <BadgeButton class="action" :href="'/api/user/export'"
+            <BadgeButton
+              download
+              class="action"
+              :href="`${$accessor.environment.apiUrl}user/export`"
               ><ExportIcon />Export data</BadgeButton
             >
             <BadgeButton class="action" :click="onLogoutPopup" style="color: #ef4056"
@@ -122,7 +125,6 @@ import SettingsIcon from 'vue-material-design-icons/Cog.vue';
 import HistoryIcon from 'vue-material-design-icons/History.vue';
 import RestartOffIcon from 'vue-material-design-icons/RestartOff.vue';
 import {
-  computed,
   defineComponent,
   ref,
   useFetch,
@@ -137,6 +139,7 @@ import Spinner from '@/components/Spinner.vue';
 import HistoryList from '@/components/history/HistoryList.vue';
 import { useAccessor } from '@/store';
 import { useAxios } from '@/plugins/axiosPlugin';
+import { createComputed } from '@/plugins/computed';
 
 export default defineComponent({
   name: 'Profile',
@@ -174,7 +177,7 @@ export default defineComponent({
 
     originalUsername.value = accessor.user.username;
 
-    const hasHistory = computed(() => {
+    const hasHistory = createComputed(() => {
       if (profile.value && profile.value.videoHistory.length > 0) {
         return true;
       }
@@ -232,8 +235,8 @@ export default defineComponent({
         .catch(err => {
           if (
             err &&
-            err.response.data.error &&
-            err.response.data.error.match(/payload too large/i)
+            err.response.data.message &&
+            err.response.data.message.match(/.*too large.*/i)
           ) {
             accessor.messages.createMessage({
               type: 'error',
@@ -258,7 +261,7 @@ export default defineComponent({
     };
     const deleteProfileImage = () => {
       axios
-        .delete(`${accessor.environment.apiUrl}user/profile/image`)
+        .delete(`${accessor.environment.apiUrl}user/profile/image`, { withCredentials: true })
         .then(() => {
           accessor.messages.createMessage({
             type: 'info',
@@ -275,7 +278,7 @@ export default defineComponent({
           });
         });
     };
-    const deleteAccountValid = computed(() => {
+    const deleteAccountValid = createComputed(() => {
       return repeatedUsername.value.length > 0 && repeatedUsername.value === originalUsername.value;
     });
     const logout = () => {
@@ -297,7 +300,7 @@ export default defineComponent({
       if (accessor.user.isLoggedIn) {
         const apiUrl = accessor.environment.apiUrl;
         await axios
-          .get(`${apiUrl}user/profile/details`)
+          .get(`${apiUrl}user/profile/details`, { withCredentials: true })
           .then((result: { data: any }) => {
             if (result) {
               profile.value = result.data;

client/pages/results.vue

@@ -211,9 +211,8 @@ export default defineComponent({
           accessor.messages.createMessage({
             type: 'error',
             title: 'Search failed',
-            message: 'Click to try again',
-            dismissDelay: 0,
-            clickAction: () => fetch()
+            message: 'Refresh the page to try again',
+            dismissDelay: 0
           });
         }
       } else {

client/pages/watch.vue

@@ -254,7 +254,9 @@ export default defineComponent({
     });
 
     const isAutoplaying = createComputed(() => {
-      return isPlaylist.value || accessor.settings.autoplay || route.value.query.autoplay === 'true';
+      return (
+        isPlaylist.value || accessor.settings.autoplay || route.value.query.autoplay === 'true'
+      );
     });
 
     const recommendedVideos = createComputed(() => {
@@ -415,9 +417,8 @@ export default defineComponent({
             accessor.messages.createMessage({
               type: 'error',
               title: 'Error loading video',
-              message: 'Loading video information failed. Click to try again.',
-              dismissDelay: 0,
-              clickAction: () => fetch()
+              message: 'Loading video information failed. Refresh the page to try again.',
+              dismissDelay: 0
             });
           }
         })

client/store/environment.ts

@@ -1,13 +1,10 @@
 import { getterTree, mutationTree } from 'typed-vuex';
 
 export const state = () => ({
-  env: { apiUrl: '', vapidKey: '', nodeEnv: '', host: '', port: '', baseUrl: '' } as {
+  env: { apiUrl: '', vapidKey: '', nodeEnv: '', host: '', port: '' } as {
     apiUrl: string;
     vapidKey: string;
     nodeEnv: string;
-    host: string;
-    port: string | number;
-    baseUrl: string;
   }
 });
 
@@ -36,9 +33,6 @@ export const mutations = mutationTree(state, {
       apiUrl: string;
       vapidKey: string;
       nodeEnv: string;
-      host: string;
-      port: string | number;
-      baseUrl: string;
     }
   ) {
     state.env = env;

client/store/index.ts

@@ -21,13 +21,10 @@ export const actions = actionTree(
   {
     async nuxtServerInit(_vuexContext, nuxtContext: Context): Promise<void> {
       if (process.server) {
-        _vuexContext.commit('environment/setEnv', {
-          apiUrl: process.env.VIEWTUBE_API_URL,
+        nuxtContext.app.$accessor.environment.setEnv({
+          apiUrl: process.env.VIEWTUBE_API_URL || 'http://localhost:8066/api/',
           vapidKey: process.env.VIEWTUBE_PUBLIC_VAPID,
-          nodeEnv: process.env.NODE_ENV,
-          host: process.env.HOST || '192.168.178.21',
-          port: process.env.PORT || 8066,
-          baseUrl: process.env.BASE_URL
+          nodeEnv: process.env.NODE_ENV
         });
         await nuxtContext.app.$accessor.user.getUser();
       }

client/store/messages.ts

@@ -9,7 +9,6 @@ export const state = () => ({
       message: string;
       clickAction: string;
       dismissed: boolean;
-      dismiss: Function;
       dismissDelay: number;
     }
   ]
@@ -44,7 +43,6 @@ export const actions = actionTree(
         message,
         clickAction,
         dismissed: false,
-        dismiss: () => commit('dismissMessage', id),
         dismissDelay
       });
     }

jest.config.js

@@ -1,4 +1,15 @@
-module.exports = {
+/** @type {import('@jest/types').Config.InitialOptions} */
+const config = {
   preset: 'ts-jest',
-  testEnvironment: 'node'
+  testEnvironment: 'node',
+  verbose: true,
+  testMatch: ['**/test/**/*spec.ts'],
+  moduleNameMapper: {
+    '^server/(.*)$': '<rootDir>/server/$1',
+    '^test/(.*)$': '<rootDir>/test/$1'
+  },
+  setupFilesAfterEnv: ['<rootDir>/test/jest.setup.redis-mock.js'],
+  testPathIgnorePatterns: ['<rootDir>/dist/*']
 };
+
+module.exports = config;

nuxt.config.ts

@@ -10,15 +10,12 @@ const dartSass = {
 const config: NuxtConfig = {
   srcDir: './client',
 
-  env: {
-    apiUrl: process.env.VIEWTUBE_API_URL,
-    vapidKey: process.env.VIEWTUBE_PUBLIC_VAPID,
-    nodeEnv: process.env.NODE_ENV,
-    host: 'localhost',
-    port: '8066',
-    baseUrl: process.env.BASE_URL || 'http://localhost:8066'
+  server: {
+    port: 8066
   },
 
+  modern: true,
+
   head: {
     meta: [
       {