lint fix.

client/src/components/files.vue

@@ -9,8 +9,7 @@
         <i :class="fileIcon(item)" />
         <p>{{ item.name }}</p>
         <p class="file-size">{{ fileSize(item.size) }}</p>
-        <i v-if="item.type !== 'dir'" class="fas fa-download download"
+        <i v-if="item.type !== 'dir'" class="fas fa-download download" @click="() => download(item)" />
-        @click="() => download(item)" />
       </div>
     </div>
     <div class="transfer-area">
@@ -18,29 +17,51 @@
         <p v-if="downloads.length > 0">{{ $t('files.downloads') }}</p>
         <div v-for="download in downloads" :key="download.id" class="transfers-list-item">
           <div class="transfer-info">
-            <i class="fas transfer-status" :class="{ 'fa-arrows-rotate': download.status !== 'completed', 'fa-check': download.status === 'completed' }"></i>
+            <i
+              class="fas transfer-status"
+              :class="{
+                'fa-arrows-rotate': download.status !== 'completed',
+                'fa-check': download.status === 'completed',
+              }"
+            ></i>
             <p>{{ download.name }}</p>
-            <p class="file-size">{{ Math.min(100, Math.round(download.progress / download.size * 100))}}%</p>
+            <p class="file-size">{{ Math.min(100, Math.round((download.progress / download.size) * 100)) }}%</p>
             <i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(download)"></i>
           </div>
-          <progress class="transfer-progress" :aria-label="download.name + ' progress'" :value="download.progress"
+          <progress
-          :max="download.size"></progress>
+            class="transfer-progress"
+            :aria-label="download.name + ' progress'"
+            :value="download.progress"
+            :max="download.size"
+          ></progress>
         </div>
-        <p v-if="uploads.length > 0">{{ $t('files.uploads' )}}</p>
+        <p v-if="uploads.length > 0">{{ $t('files.uploads') }}</p>
         <div v-for="upload in uploads" :key="upload.id" class="transfers-list-item">
           <div class="transfer-info">
-            <i class="fas transfer-status" :class="{ 'fa-arrows-rotate': upload.status !== 'completed', 'fa-check': upload.status === 'completed' }"></i>
+            <i
+              class="fas transfer-status"
+              :class="{ 'fa-arrows-rotate': upload.status !== 'completed', 'fa-check': upload.status === 'completed' }"
+            ></i>
             <p>{{ upload.name }}</p>
-            <p class="file-size">{{ Math.min(100, Math.round(upload.progress / upload.size * 100))}}%</p>
+            <p class="file-size">{{ Math.min(100, Math.round((upload.progress / upload.size) * 100)) }}%</p>
             <i class="fas fa-xmark remove-transfer" @click="() => removeTransfer(upload)"></i>
           </div>
-          <progress class="transfer-progress" :aria-label="upload.name + ' progress'" :value="upload.progress"
+          <progress
-          :max="upload.size"></progress>
+            class="transfer-progress"
+            :aria-label="upload.name + ' progress'"
+            :value="upload.progress"
+            :max="upload.size"
+          ></progress>
         </div>
       </div>
-      <div class="upload-area" :class="{ 'upload-area-drag': uploadAreaDrag }"
+      <div
-      @dragover.prevent="() => uploadAreaDrag = true" @dragleave.prevent="() => uploadAreaDrag = false"
+        class="upload-area"
-      @drop.prevent="(e) => upload(e.dataTransfer)" @click="openFileBrowser">
+        :class="{ 'upload-area-drag': uploadAreaDrag }"
+        @dragover.prevent="() => (uploadAreaDrag = true)"
+        @dragleave.prevent="() => (uploadAreaDrag = false)"
+        @drop.prevent="(e) => upload(e.dataTransfer)"
+        @click="openFileBrowser"
+      >
         <i class="fas fa-file-arrow-up" />
         <p>{{ $t('files.upload_here') }}</p>
       </div>
@@ -94,12 +115,13 @@
 
     .files-list-item {
       padding: 0.5em;
-      border-bottom: 2px solid rgba($color: #fff, $alpha: 0.10);
+      border-bottom: 2px solid rgba($color: #fff, $alpha: 0.1);
       display: flex;
       flex-direction: row;
     }
 
-    .file-icon, .transfer-status {
+    .file-icon,
+    .transfer-status {
       width: 14px;
       margin-right: 0.5em;
     }
@@ -115,10 +137,12 @@
     .file-size {
       margin-left: auto;
       margin-right: 0.5em;
-      color: rgba($color: #fff, $alpha: 0.40);
+      color: rgba($color: #fff, $alpha: 0.4);
     }
 
-    .refresh:hover, .download:hover, .remove-transfer:hover {
+    .refresh:hover,
+    .download:hover,
+    .remove-transfer:hover {
       cursor: pointer;
     }
 
@@ -186,8 +210,9 @@
       cursor: pointer;
     }
 
-    .upload-area-drag, .upload-area:hover {
+    .upload-area-drag,
-      background-color: rgba($color: #fff, $alpha: 0.10);
+    .upload-area:hover {
+      background-color: rgba($color: #fff, $alpha: 0.1);
     }
 
     .upload-area > i {
@@ -198,12 +223,10 @@
     .upload-area > p {
       margin: 0px 10px 10px 10px;
     }
-
   }
 </style>
 
 <script lang="ts">
-
   import { Component, Vue } from 'vue-property-decorator'
 
   import Markdown from './markdown'
@@ -215,11 +238,10 @@
     components: {
       'neko-markdown': Markdown,
       'neko-context': Content,
-    }
+    },
   })
   export default class extends Vue {
-
+    public uploadAreaDrag: boolean = false
-    public uploadAreaDrag: boolean = false;
 
     get cwd() {
       return this.$accessor.files.cwd
@@ -234,11 +256,11 @@
     }
 
     get downloads() {
-      return this.$accessor.files.transfers.filter((t => t.direction === 'download'))
+      return this.$accessor.files.transfers.filter((t) => t.direction === 'download')
     }
 
     get uploads() {
-      return this.$accessor.files.transfers.filter((t => t.direction === 'upload'))
+      return this.$accessor.files.transfers.filter((t) => t.direction === 'upload')
     }
 
     refresh() {
@@ -261,10 +283,11 @@
         progress: 0,
         status: 'pending',
         axios: null,
-        abortController: null
+        abortController: null,
       }
       transfer.abortController = new AbortController()
-      transfer.axios = this.$http.get(url, {
+      transfer.axios = this.$http
+        .get(url, {
           responseType: 'blob',
           signal: transfer.abortController.signal,
           onDownloadProgress: (x) => {
@@ -278,10 +301,10 @@
             } else if (transfer.status !== 'inprogress') {
               transfer.status = 'inprogress'
             }
-        }
+          },
-      }).then((res) => {
+        })
-        const url = window.URL
+        .then((res) => {
-        .createObjectURL(new Blob([res.data]))
+          const url = window.URL.createObjectURL(new Blob([res.data]))
           const link = document.createElement('a')
           link.href = url
           link.setAttribute('download', item.name)
@@ -291,7 +314,8 @@
 
           transfer.progress = transfer.size
           transfer.status = 'completed'
-      }).catch((err) => {
+        })
+        .catch((err) => {
           this.$log.error(err)
         })
       this.$accessor.files.addTransfer(transfer)
@@ -302,7 +326,7 @@
 
       for (const file of dt.files) {
         const formdata = new FormData()
-        formdata.append("files", file, file.name)
+        formdata.append('files', file, file.name)
 
         const url = `/file?pwd=${this.$accessor.password}`
         let transfer: FileTransfer = {
@@ -313,10 +337,11 @@
           progress: 0,
           status: 'pending',
           axios: null,
-          abortController: null
+          abortController: null,
         }
         transfer.abortController = new AbortController()
-        this.$http.post(url, formdata, {
+        this.$http
+          .post(url, formdata, {
             onUploadProgress: (x: any) => {
               transfer.progress = x.loaded
 
@@ -328,8 +353,9 @@
               } else if (transfer.status !== 'inprogress') {
                 transfer.status = 'inprogress'
               }
-          }
+            },
-        }).catch((err) => {
+          })
+          .catch((err) => {
             this.$log.error(err)
           })
         this.$accessor.files.addTransfer(transfer)
@@ -399,7 +425,7 @@
         case 'tiff':
         case 'webp':
           className += 'fa-image'
-          break;
+          break
         default:
           className += 'fa-file'
       }
@@ -421,7 +447,5 @@
       }
       return `${(size / 1000 ** 4).toFixed(3)} tb`
     }
-
   }
-
 </script>

client/src/components/settings.vue

@@ -385,7 +385,7 @@
     }
 
     set file_transfer(value: boolean) {
-      this.$accessor.settings.setGlobalFileTransferStatus({ admin: value, unpriv: false })
+      this.$accessor.settings.setRemoteFileTransferStatus({ admin: value, unpriv: false })
     }
 
     get unpriv_file_transfer() {
@@ -393,7 +393,7 @@
     }
 
     set unpriv_file_transfer(value: boolean) {
-      this.$accessor.settings.setGlobalFileTransferStatus({ admin: this.file_transfer, unpriv: value }) 
+      this.$accessor.settings.setRemoteFileTransferStatus({ admin: this.file_transfer, unpriv: value })
     }
 
     get broadcast_is_active() {

client/src/components/side.vue

@@ -79,7 +79,7 @@
 </style>
 
 <script lang="ts">
-  import { Vue, Component } from 'vue-property-decorator'
+  import { Vue, Component, Watch } from 'vue-property-decorator'
 
   import Settings from '~/components/settings.vue'
   import Chat from '~/components/chat.vue'
@@ -90,28 +90,29 @@
     components: {
       'neko-settings': Settings,
       'neko-chat': Chat,
-      'neko-files': Files
+      'neko-files': Files,
     },
   })
   export default class extends Vue {
-
-    constructor() {
-      super()
-      if (this.tab === 'files' && (!this.$accessor.settings.file_transfer ||
-      !this.$accessor.user.admin && this.$accessor.settings.unpriv_file_transfer)) {
-        this.change('chat')
-      }
-    }
-
     get filetransferAllowed() {
-      return this.$accessor.user.admin && this.$accessor.settings.file_transfer ||
+      return (
+        (this.$accessor.user.admin && this.$accessor.settings.file_transfer) ||
         this.$accessor.settings.unpriv_file_transfer
+      )
     }
 
     get tab() {
       return this.$accessor.client.tab
     }
 
+    @Watch('tab', { immediate: true })
+    onTabChange() {
+      // do not show the files tab if file transfer is disabled
+      if (this.tab === 'files' && !this.filetransferAllowed) {
+        this.change('chat')
+      }
+    }
+
     change(tab: string) {
       this.$accessor.client.setTab(tab)
     }

client/src/lib.ts

@@ -38,9 +38,9 @@ const exportMixin = {
     $accessor() {
       return neko
     },
-    $client () {
+    $client() {
       return window.$client
-    }
+    },
   },
 }
 
@@ -52,15 +52,8 @@ const plugini18n: PluginObject<undefined> = {
   },
 }
 
-function extend (component: any) {
+function extend(component: any) {
-  return component
+  return component.use(plugini18n).use(Logger).use(Axios).use(Swal).use(Anime).use(Client).extend(exportMixin)
-    .use(plugini18n)
-    .use(Logger)
-    .use(Axios)
-    .use(Swal)
-    .use(Anime)
-    .use(Client)
-    .extend(exportMixin)
 }
 
 export const NekoConnect = extend(Connect)

client/src/locale/de-de.ts

@@ -115,5 +115,5 @@ export const notifications = {
 export const files = {
   downloads: 'Herunterladen',
   uploads: 'Hochladen',
-  upload_here: 'Klicken oder ziehen Sie Dateien zum Hochladen hierher'
+  upload_here: 'Klicken oder ziehen Sie Dateien zum Hochladen hierher',
 }

client/src/locale/en-us.ts

@@ -117,5 +117,5 @@ export const notifications = {
 export const files = {
   downloads: 'Downloads',
   uploads: 'Uploads',
-  upload_here: 'Click or drag files here to upload'
+  upload_here: 'Click or drag files here to upload',
 }

client/src/locale/es-sp.ts

@@ -124,5 +124,5 @@ export const notifications = {
 export const files = {
   downloads: 'Descargas',
   uploads: 'Cargar',
-  upload_here: 'Haga clic o arrastre los archivos aquí para cargarlos'
+  upload_here: 'Haga clic o arrastre los archivos aquí para cargarlos',
 }

client/src/locale/fi-fi.ts

@@ -117,5 +117,5 @@ export const notifications = {
 export const files = {
   downloads: 'Lataukset',
   uploads: 'Lataa',
-  upload_here: 'Klikkaa tai vedä tiedostoja tähän ladataksesi'
+  upload_here: 'Klikkaa tai vedä tiedostoja tähän ladataksesi',
 }

client/src/locale/fr-fr.ts

@@ -85,7 +85,7 @@ export const setting = {
   chat_sound: 'Jouer le son du tchat',
   keyboard_layout: 'Langue du clavier',
   file_transfer: 'Transfert de fichiers',
-  unpriv_file_transfer: 'Transfert de fichiers d\'utilisateurs',
+  unpriv_file_transfer: "Transfert de fichiers d'utilisateurs",
   // TODO
   //broadcast_title: 'Live Broadcast',
 }
@@ -124,5 +124,5 @@ export const notifications = {
 export const files = {
   downloads: 'Téléchargements',
   uploads: 'Télécharger',
-  upload_here: 'Cliquez ou faites glisser les fichiers ici pour les télécharger'
+  upload_here: 'Cliquez ou faites glisser les fichiers ici pour les télécharger',
 }

client/src/locale/ko-kr.ts

@@ -115,5 +115,5 @@ export const notifications = {
 export const files = {
   downloads: '다운로드',
   uploads: '업로드',
-  upload_here: '업로드할 파일을 여기로 클릭하거나 드래그하세요.'
+  upload_here: '업로드할 파일을 여기로 클릭하거나 드래그하세요.',
 }

client/src/locale/nb-no.ts

@@ -124,5 +124,5 @@ export const notifications = {
 export const files = {
   downloads: 'Overførsler',
   uploads: 'Overfør',
-  upload_here: 'Klik eller træk filer her for at uploade'
+  upload_here: 'Klik eller træk filer her for at uploade',
 }

client/src/locale/ru-ru.ts

@@ -117,5 +117,5 @@ export const notifications = {
 export const files = {
   downloads: 'Загрузки',
   uploads: 'Загрузить',
-  upload_here: 'Нажмите или перетащите сюда файлы для загрузки'
+  upload_here: 'Нажмите или перетащите сюда файлы для загрузки',
 }

client/src/locale/sk-sk.ts

@@ -120,5 +120,5 @@ export const notifications = {
 export const files = {
   downloads: 'Stiahnutia',
   uploads: 'Nahrávanie',
-  upload_here: 'Kliknutím alebo pretiahnutím súborov sem ich môžete nahrať'
+  upload_here: 'Kliknutím alebo pretiahnutím súborov sem ich môžete nahrať',
 }

client/src/locale/sv-se.ts

@@ -124,5 +124,5 @@ export const notifications = {
 export const files = {
   downloads: 'Nedladdningar',
   uploads: 'Ladda upp',
-  upload_here: 'Klicka eller dra filer hit för att ladda upp dem'
+  upload_here: 'Klicka eller dra filer hit för att ladda upp dem',
 }

client/src/locale/zh-cn.ts

@@ -117,5 +117,5 @@ export const notifications = {
 export const files = {
   downloads: '下载',
   uploads: '上传',
-  upload_here: '点击或拖动文件到这里来上传'
+  upload_here: '点击或拖动文件到这里来上传',
 }

client/src/neko/events.ts

@@ -41,7 +41,7 @@ export const EVENT = {
   FILETRANSFER: {
     STATUS: 'filetransfer/status',
     LIST: 'filetransfer/list',
-    REFRESH: 'filetransfer/refresh'
+    REFRESH: 'filetransfer/refresh',
   },
   SCREEN: {
     CONFIGURATIONS: 'screen/configurations',

client/src/neko/messages.ts

@@ -10,12 +10,7 @@ import {
   AdminEvents,
   FileTransferEvents,
 } from './events'
-import {
+import { FileListItem, Member, ScreenConfigurations, ScreenResolution } from './types'
-  FileListItem,
-  Member,
-  ScreenConfigurations,
-  ScreenResolution
-} from './types'
 
 export type WebSocketMessages =
   | WebSocketMessage
@@ -199,12 +194,15 @@ export interface EmojiSendPayload {
   emote: string
 }
 
-// file transfer enabled
+/*
+  FILE TRANSFER PAYLOADS
+*/
 export interface FileTransferStatusMessage extends WebSocketMessage, FileTransferStatusPayload {
   event: typeof EVENT.FILETRANSFER.STATUS
 }
+
 export interface FileTransferStatusPayload {
-  admin: boolean,
+  admin: boolean
   unpriv: boolean
 }
 
@@ -212,8 +210,9 @@ export interface FileTransferStatusPayload {
 export interface FileTransferListMessage extends WebSocketMessage, FileTransferListPayload {
   event: FileTransferEvents
 }
+
 export interface FileTransferListPayload {
-  cwd: string,
+  cwd: string
   files: FileListItem[]
 }
 

client/src/neko/types.ts

@@ -24,18 +24,18 @@ export interface ScreenResolution {
 }
 
 export interface FileListItem {
-  name: string,
+  name: string
-  type: 'file' | 'dir',
+  type: 'file' | 'dir'
   size: number
 }
 
 export interface FileTransfer {
-  id: number,
+  id: number
-  name: string,
+  name: string
-  direction: 'upload' | 'download',
+  direction: 'upload' | 'download'
-  size: number,
+  size: number
-  progress: number,
+  progress: number
-  status: 'pending' | 'inprogress' | 'completed',
+  status: 'pending' | 'inprogress' | 'completed'
-  axios: Promise<void> | null,
+  axios: Promise<void> | null
   abortController: AbortController | null
 }

client/src/store/files.ts

@@ -6,7 +6,7 @@ import { accessor } from '~/store'
 export const state = () => ({
   cwd: '',
   files: [] as FileListItem[],
-  transfers: [] as FileTransfer[]
+  transfers: [] as FileTransfer[],
 })
 
 export const getters = getterTree(state, {
@@ -28,7 +28,7 @@ export const mutations = mutationTree(state, {
 
   _removeTransfer(state, transfer: FileTransfer) {
     state.transfers = state.transfers.filter((t) => t.id !== transfer.id)
-  }
+  },
 })
 
 export const actions = actionTree(
@@ -67,6 +67,6 @@ export const actions = actionTree(
         return
       }
       $client.sendMessage(EVENT.FILETRANSFER.REFRESH)
-    }
+    },
-  }
+  },
 )

client/src/store/settings.ts

@@ -94,7 +94,7 @@ export const actions = actionTree(
       accessor.settings.setFileTransfer(admin)
       accessor.settings.setUnprivFileTransfer(unpriv)
 
-      if (!admin || !accessor.user.admin && !unpriv) {
+      if (!admin || (!accessor.user.admin && !unpriv)) {
         accessor.files.cancelAllTransfers()
       }
 
@@ -102,8 +102,7 @@ export const actions = actionTree(
         accessor.client.setTab('chat')
       }
     },
-
+    setRemoteFileTransferStatus({ getters }, { admin, unpriv }) {
-    setGlobalFileTransferStatus({ getters}, { admin, unpriv }) {
       $client.sendMessage(EVENT.FILETRANSFER.STATUS, { admin, unpriv })
     },
 

client/vue.config.js

@@ -23,5 +23,5 @@ module.exports = {
   },
   devServer: {
     disableHostCheck: true,
-  }
+  },
 }