using existing store state and component

frontend/src/api/files.js

@@ -58,8 +58,7 @@ export async function put (url, content = '') {
 }
 
 export function download (format, ...files) {
-  const isSharing = store.getters['isSharing']
+  let url = store.getters['isSharing'] ? `${baseURL}/api/public/dl/${store.state.hash}` : `${baseURL}/api/raw`
-  let url = isSharing ? `${baseURL}/api/public/dl/${store.state.shared.hash}` : `${baseURL}/api/raw`
 
   if (files.length === 1) {
     url += removePrefix(files[0]) + '?'
@@ -79,9 +78,7 @@ export function download (format, ...files) {
     url += `algo=${format}&`
   }
 
-  if (!isSharing) {
+  url += `auth=${store.state.jwt}`
-    url += `auth=${store.state.jwt}`
-  }
   window.open(url)
 }
 

frontend/src/api/utils.js

@@ -37,7 +37,7 @@ export function removePrefix (url) {
   if (url.startsWith('/files')) {
     url = url.slice(6)
   } else if (store.getters['isSharing']) {
-    url = url.slice(7 + store.state.shared.hash.length)
+    url = url.slice(7 + store.state.hash.length)
   }
 
   if (url === '') url = '/'

frontend/src/components/Header.vue

@@ -8,8 +8,8 @@
       <search v-if="isLogged"></search>
     </div>
     <div>
-      <template v-if="isLogged">
+      <template v-if="isLogged || isSharing">
-        <button @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
+        <button v-show="!isSharing" @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
           <i class="material-icons">search</i>
         </button>
 
@@ -18,7 +18,7 @@
         </button>
 
         <!-- Menu that shows on listing AND mobile when there are files selected -->
-        <div id="file-selection" v-if="isMobile && isListing">
+        <div id="file-selection" v-if="isMobile && isListing && !isSharing">
           <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
           <share-button v-show="showShareButton"></share-button>
           <rename-button v-show="showRenameButton"></rename-button>
@@ -28,7 +28,7 @@
         </div>
 
         <!-- This buttons are shown on a dropdown on mobile phones -->
-        <div class="dropdown" :class="{ active: showMore }">
+        <div id="dropdown" :class="{ active: showMore }">
           <div v-if="!isListing || !isMobile">
             <share-button v-show="showShareButton"></share-button>
             <rename-button v-show="showRenameButton"></rename-button>
@@ -43,18 +43,7 @@
           <upload-button v-show="showUpload"></upload-button>
           <info-button v-show="isFiles"></info-button>
 
-          <button v-show="isListing" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
+          <button v-show="isListing || (isSharing && req.isDir)" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
-            <i class="material-icons">check_circle</i>
-            <span>{{ $t('buttons.select') }}</span>
-          </button>
-        </div>
-      </template>
-      <template v-if="isSharing">
-        <!-- This buttons are shown on a dropdown on mobile phones -->
-        <div class="dropdown" :class="{ active: showMore }">
-          <download-button v-if="sharedSelectedCount > 0"></download-button>
-
-          <button @click="toggleSharedMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
             <i class="material-icons">check_circle</i>
             <span>{{ $t('buttons.select') }}</span>
           </button>
@@ -122,16 +111,14 @@ export default {
       'isPreview',
       'isListing',
       'isLogged',
-      'isSharing',
+      'isSharing'
-      'sharedSelectedCount'
     ]),
     ...mapState([
       'req',
       'user',
       'loading',
       'reload',
-      'multiple',
+      'multiple'
-      'shared'
     ]),
     logoURL: () => logoURL,
     isExecEnabled: () => enableExec,
@@ -142,7 +129,7 @@ export default {
       return this.isListing && this.user.perm.create
     },
     showDownloadButton () {
-      return this.isFiles && this.user.perm.download
+      return (this.isFiles && this.user.perm.download) || (this.isSharing && this.selectedCount > 0)
     },
     showDeleteButton () {
       return this.isFiles && (this.isListing
@@ -190,10 +177,6 @@ export default {
       this.$store.commit('multiple', !this.multiple)
       this.resetPrompts()
     },
-    toggleSharedMultipleSelection () {
-      this.$store.commit('sharedMultiple', !this.shared.multiple)
-      this.resetPrompts()
-    },
     resetPrompts () {
       this.$store.commit('closeHovers')
     }

frontend/src/components/buttons/Download.vue

@@ -3,7 +3,6 @@
     <i class="material-icons">file_download</i>
     <span>{{ $t('buttons.download') }}</span>
     <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
-    <span v-else-if="isSharing && sharedSelectedCount > 0" class="counter">{{ sharedSelectedCount }}</span>
   </button>
 </template>
 
@@ -14,8 +13,8 @@ import { files as api } from '@/api'
 export default {
   name: 'download-button',
   computed: {
-    ...mapState(['req', 'selected', 'shared']),
+    ...mapState(['req', 'selected']),
-    ...mapGetters(['isListing', 'selectedCount', 'isSharing', 'sharedSelectedCount'])
+    ...mapGetters(['isListing', 'selectedCount', 'isSharing'])
   },
   methods: {
     download: function () {
@@ -29,11 +28,6 @@ export default {
         return
       }
 
-      if (this.sharedSelectedCount === 1 && !this.shared.req.items[this.shared.selected[0]].isDir) {
-        api.download(null, this.shared.req.items[this.shared.selected[0]].url)
-        return
-      }
-
       this.$store.commit('showHover', 'download')
     }
   }

frontend/src/components/files/ListingItem.vue

@@ -48,7 +48,7 @@ export default {
   props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
   computed: {
     ...mapState(['user', 'selected', 'req', 'user', 'jwt']),
-    ...mapGetters(['selectedCount']),
+    ...mapGetters(['selectedCount', 'isSharing']),
     isSelected () {
       return (this.selected.indexOf(this.index) !== -1)
     },
@@ -63,7 +63,7 @@ export default {
       return this.user.perm.rename
     },
     canDrop () {
-      if (!this.isDir) return false
+      if (!this.isDir || this.isSharing) return false
 
       for (let i of this.selected) {
         if (this.req.items[i].url === this.url) {

frontend/src/components/files/SharedItem.vue

@@ -1,112 +0,0 @@
-<template>
-  <div class="item"
-  role="button"
-  tabindex="0"
-  @click="click"
-  @dblclick="dblclick"
-  @touchstart="touchstart"
-  :data-dir="isDir"
-  :aria-label="name"
-  :aria-selected="isSelected">
-    <div>
-      <i class="material-icons">{{ icon }}</i>
-    </div>
-
-    <div>
-      <p class="name">{{ name }}</p>
-
-      <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
-      <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
-
-      <p class="modified">
-        <time :datetime="modified">{{ humanTime() }}</time>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapMutations, mapGetters, mapState } from 'vuex'
-import filesize from 'filesize'
-import moment from 'moment'
-
-export default {
-  name: 'sharedItem',
-  data: function () {
-    return {
-      touches: 0
-    }
-  },
-  props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
-  computed: {
-    ...mapState(['shared']),
-    ...mapGetters(['sharedSelectedCount']),
-    isSelected () {
-      return (this.shared.selected.indexOf(this.index) !== -1)
-    },
-    icon () {
-      if (this.isDir) return 'folder'
-      if (this.type === 'image') return 'insert_photo'
-      if (this.type === 'audio') return 'volume_up'
-      if (this.type === 'video') return 'movie'
-      return 'insert_drive_file'
-    }
-  },
-  methods: {
-    ...mapMutations(['addSharedSelected', 'removeSharedSelected', 'resetSharedSelected']),
-    humanSize: function () {
-      return filesize(this.size)
-    },
-    humanTime: function () {
-      return moment(this.modified).fromNow()
-    },
-    click: function (event) {
-      if (this.sharedSelectedCount !== 0) event.preventDefault()
-      if (this.$store.state.shared.selected.indexOf(this.index) !== -1) {
-        this.removeSharedSelected(this.index)
-        return
-      }
-
-      if (event.shiftKey && this.shared.selected.length > 0) {
-        let fi = 0
-        let la = 0
-
-        if (this.index > this.shared.selected[0]) {
-          fi = this.shared.selected[0] + 1
-          la = this.index
-        } else {
-          fi = this.index
-          la = this.shared.selected[0] - 1
-        }
-
-        for (; fi <= la; fi++) {
-          if (this.$store.state.shared.selected.indexOf(fi) == -1) {
-            this.addSharedSelected(fi)
-          }
-        }
-
-        return
-      }
-
-      if (!event.ctrlKey && !event.metaKey && !this.$store.state.shared.multiple) this.resetSharedSelected()
-      this.addSharedSelected(this.index)
-    },
-    dblclick: function () {
-      this.open()
-    },
-    touchstart () {
-      setTimeout(() => {
-        this.touches = 0
-      }, 300)
-
-      this.touches++
-      if (this.touches > 1) {
-        this.open()
-      }
-    },
-    open: function () {
-      this.$router.push({path: this.url})
-    }
-  }
-}
-</script>

frontend/src/components/prompts/Download.vue

@@ -25,20 +25,12 @@ import { files as api } from '@/api'
 export default {
   name: 'download',
   computed: {
-    ...mapState(['selected', 'req', 'shared']),
+    ...mapState(['selected', 'req']),
-    ...mapGetters(['selectedCount', 'isSharing' ,'sharedSelectedCount'])
+    ...mapGetters(['selectedCount'])
   },
   methods: {
     download: function (format) {
-      if (this.isSharing) {
+      if (this.selectedCount === 0) {
-        let files = []
-
-        for (let i of this.shared.selected) {
-          files.push(this.shared.req.items[i].url)
-        }
-
-        api.download(format, ...files)
-      } else if (this.selectedCount === 0) {
         api.download(format, this.$route.path)
       } else {
         let files = []

frontend/src/css/_share.css

@@ -54,12 +54,6 @@
   border-right: 0;
   border-bottom: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
-  -webkit-user-select:none;
-  -khtml-user-select:none;
-  -moz-user-select:none;
-  -ms-user-select:none;
-  -o-user-select:none;
-  user-select:none;
 }
 
 .share__box__items #listing.list .item .name {

frontend/src/css/mobile.css

@@ -28,7 +28,7 @@
     height: 100%;
     background-color: rgba(0, 0, 0, 0.1);
   }
-  .dropdown {
+  #dropdown {
     position: fixed;
     top: 1em;
     right: 1em;
@@ -40,23 +40,23 @@
     transform-origin: top right;
     z-index: 99999;
   }
-  .dropdown > div {
+  #dropdown > div {
     display: block;
   }
-  .dropdown.active {
+  #dropdown.active {
     transform: scale(1);
   }
-  .dropdown .action {
+  #dropdown .action {
     display: flex;
     align-items: center;
     border-radius: 0;
     width: 100%;
   }
-  .dropdown .action span:not(.counter) {
+  #dropdown .action span:not(.counter) {
     display: inline-block;
     padding: .4em;
   }
-  .dropdown .counter {
+  #dropdown .counter {
     left: 2.25em;
   }
   #file-selection {

frontend/src/store/getters.js

@@ -4,7 +4,7 @@ const getters = {
   isListing: (state, getters) => getters.isFiles && state.req.isDir,
   isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
   isPreview: state => state.previewMode,
-  isSharing: state =>  state.shared.loaded && state.route.name === 'Share',
+  isSharing: state =>  !state.loading && state.route.name === 'Share',
   selectedCount: state => state.selected.length,
   progress : state => {
     if (state.upload.progress.length == 0) {
@@ -13,8 +13,7 @@ const getters = {
 
     let sum = state.upload.progress.reduce((acc, val) => acc + val)
     return Math.ceil(sum / state.upload.size * 100);
-  },
+  }
-  sharedSelectedCount: state => state.shared.selected.length
 }
 
 export default getters

frontend/src/store/index.js

@@ -7,7 +7,18 @@ import upload from './modules/upload'
 Vue.use(Vuex)
 
 const state = {
-  user: null,
+  user: {
+    perm: {
+      admin: false,
+      create: false,
+      delete: false,
+      download: false,
+      execute: false,
+      modify: false,
+      rename: false,
+      share: false
+    }
+  },
   req: {},
   oldReq: {},
   clipboard: {
@@ -25,13 +36,7 @@ const state = {
   showMessage: null,
   showConfirm: null,
   previewMode: false,
-  shared: {
+  hash: ''
-    req: {},
-    hash: '',
-    loaded: false,
-    selected: [],
-    multiple: false
-  }
 }
 
 export default new Vuex.Store({

frontend/src/store/mutations.js

@@ -27,12 +27,8 @@ const mutations = {
     state.show = 'success'
     state.showMessage = value
   },
-  setLoading: (state, value) => {
+  setLoading: (state, value) => { state.loading = value },
-    state.loading = value
+  setReload: (state, value) => { state.reload = value },
-  },
-  setReload: (state, value) => {
-    state.reload = value
-  },
   setUser: (state, value) => {
     if (value === null) {
       state.user = null
@@ -91,19 +87,7 @@ const mutations = {
   setPreviewMode(state, value) {
     state.previewMode = value
   },
-  addSharedSelected: (state, value) => (state.shared.selected.push(value)),
+  setHash: (state, value) => (state.hash = value),
-  removeSharedSelected: (state, value) => {
-    let i = state.shared.selected.indexOf(value)
-    if (i === -1) return
-    state.shared.selected.splice(i, 1)
-  },
-  resetSharedSelected: (state) => {
-    state.shared.selected = []
-  },
-  sharedMultiple: (state, value) => (state.shared.multiple = value),
-  updateSharedRequest: (state, value) => (state.shared.req = value),
-  setSharedHash: (state, value) => (state.shared.hash = value),
-  toggleSharedLoaded: (state, value) => (state.shared.loaded = value)
 }
 
 export default mutations

frontend/src/views/Share.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-if="shared.loaded">
+  <div v-if="!loading">
     <div id="breadcrumbs">
-      <router-link :to="'/share/' + shared.hash" :aria-label="$t('files.home')" :title="$t('files.home')">
+      <router-link :to="'/share/' + hash" :aria-label="$t('files.home')" :title="$t('files.home')">
         <i class="material-icons">home</i>
       </router-link>
 
@@ -13,13 +13,13 @@
     <div class="share">
       <div class="share__box share__box__info">
           <div class="share__box__header">
-            {{ shared.req.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
+            {{ req.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
           </div>
           <div class="share__box__element share__box__center share__box__icon">
             <i class="material-icons">{{ icon }}</i>
           </div>
           <div class="share__box__element">
-            <strong>{{ $t('prompts.displayName') }}</strong> {{ shared.req.name }}
+            <strong>{{ $t('prompts.displayName') }}</strong> {{ req.name }}
           </div>
           <div class="share__box__element">
             <strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}
@@ -34,12 +34,12 @@
             <qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
           </div>
       </div>
-      <div v-if="shared.req.isDir" class="share__box share__box__items">
+      <div v-if="req.isDir && req.items.length > 0" class="share__box share__box__items">
-        <div class="share__box__header" v-if="shared.req.isDir">
+        <div class="share__box__header" v-if="req.isDir">
           {{ $t('files.files') }}
         </div>
         <div id="listing" class="list">
-          <shared-item v-for="(item) in shared.req.items.slice(0, this.showLimit)"
+          <item v-for="(item) in req.items.slice(0, this.showLimit)"
             :key="base64(item.name)"
             v-bind:index="item.index"
             v-bind:name="item.name"
@@ -48,14 +48,14 @@
             v-bind:modified="item.modified"
             v-bind:type="item.type"
             v-bind:size="item.size">
-          </shared-item>
+          </item>
-          <div v-if="shared.req.items.length > showLimit" class="item">
+          <div v-if="req.items.length > showLimit" class="item">
             <div>
-              <p class="name"> + {{ shared.req.items.length - showLimit }} </p>
+              <p class="name"> + {{ req.items.length - showLimit }} </p>
             </div>
           </div>
 
-          <div :class="{ active: $store.state.shared.multiple }" id="multiple-selection">
+          <div :class="{ active: $store.state.multiple }" id="multiple-selection">
             <p>{{ $t('files.multipleSelectionEnabled') }}</p>
             <div @click="$store.commit('sharedMultiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
               <i class="material-icons">clear</i>
@@ -63,8 +63,19 @@
           </div>
         </div>
       </div>
+      <div v-else-if="req.isDir && req.items.length === 0" class="share__box share__box__items">
+        <h2 class="message">
+          <i class="material-icons">sentiment_dissatisfied</i>
+          <span>{{ $t('files.lonely') }}</span>
+        </h2>
+      </div>
     </div>
   </div>
+  <div v-else-if="error">
+    <not-found v-if="error.message === '404'"></not-found>
+    <forbidden v-else-if="error.message === '403'"></forbidden>
+    <internal-error v-else></internal-error>
+  </div>
 </template>
 
 <script>
@@ -74,16 +85,22 @@ import { baseURL } from '@/utils/constants'
 import filesize from 'filesize'
 import moment from 'moment'
 import QrcodeVue from 'qrcode.vue'
-import SharedItem from "@/components/files/SharedItem"
+import Item from "@/components/files/ListingItem"
+import Forbidden from './errors/403'
+import NotFound from './errors/404'
+import InternalError from './errors/500'
 
 export default {
   name: 'share',
   components: {
-    SharedItem,
+    Item,
+    Forbidden,
+    NotFound,
+    InternalError,
     QrcodeVue
   },
   data: () => ({
-    notFound: false,
+    error: null,
     filePath: '',
     showLimit: 500
   }),
@@ -92,7 +109,7 @@ export default {
   },
   created: async function () {
     const hash = this.$route.params.pathMatch.split('/')[0]
-    this.setSharedHash(hash)
+    this.setHash(hash)
     await this.fetchData()
   },
   mounted () {
@@ -102,13 +119,13 @@ export default {
     window.removeEventListener('keydown', this.keyEvent)
   },
   computed: {
-    ...mapState(['shared']),
+    ...mapState(['hash', 'req', 'loading', 'multiple']),
-    ...mapGetters(['sharedSelectedCount']),
+    ...mapGetters(['selectedCount']),
     icon: function () {
-      if (this.shared.req.isDir) return 'folder'
+      if (this.req.isDir) return 'folder'
-      if (this.shared.req.type === 'image') return 'insert_photo'
+      if (this.req.type === 'image') return 'insert_photo'
-      if (this.shared.req.type === 'audio') return 'volume_up'
+      if (this.req.type === 'audio') return 'volume_up'
-      if (this.shared.req.type === 'video') return 'movie'
+      if (this.req.type === 'video') return 'movie'
       return 'insert_drive_file'
     },
     path: function () {
@@ -132,20 +149,20 @@ export default {
       return absoluteParts.slice(absoluteParts.length - len).join('/')
     },
     link: function () {
-      return `${baseURL}/api/public/dl/${this.shared.hash}/${this.path}`
+      return `${baseURL}/api/public/dl/${this.hash}/${this.path}`
     },
     fullLink: function () {
       return window.location.origin + this.link
     },
     humanSize: function () {
-      if (this.shared.req.isDir) {
+      if (this.req.isDir) {
-        return this.shared.req.items.length
+        return this.req.items.length
       }
 
-      return filesize(this.shared.req.size)
+      return filesize(this.req.size)
     },
     humanTime: function () {
-      return moment(this.shared.req.modified).fromNow()
+      return moment(this.req.modified).fromNow()
     },
     breadcrumbs () {
       let parts = this.path.split('/')
@@ -162,7 +179,7 @@ export default {
 
       for (let i = 0; i < parts.length; i++) {
         if (i === 0) {
-          breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/share/' + this.shared.hash + '/' + parts[i] + '/' })
+          breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/share/' + this.hash + '/' + parts[i] + '/' })
         } else  {
           breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: breadcrumbs[i - 1].url + parts[i] + '/' })
         }
@@ -182,27 +199,33 @@ export default {
     }
   },
   methods: {
-    ...mapMutations([ 'resetSharedSelected', 'setSharedHash', 'updateSharedRequest', 'toggleSharedLoaded' ]),
+    ...mapMutations([ 'setHash', 'resetSelected', 'updateRequest', 'setLoading' ]),
     base64: function (name) {
       return window.btoa(unescape(encodeURIComponent(name)))
     },
     fetchData: async function () {
-      this.notFound = false
+      // Reset view information.
-      this.$store.commit('toggleSharedLoaded', false)
+      this.$store.commit('setReload', false)
-      this.$store.commit('resetSharedSelected')
+      this.$store.commit('resetSelected')
-      this.$store.commit('sharedMultiple', false)
+      this.$store.commit('multiple', false)
+      this.$store.commit('closeHovers')
+
+      // Set loading to true and reset the error.
+      this.setLoading(true)
+      this.error = null
+
       try {
         let file = await api.getHash(encodeURIComponent(this.$route.params.pathMatch))
         this.filePath = file.path
         if (file.isDir) file.items = file.items.map((item, index) => {
           item.index = index
-          item.url = `/share/${this.shared.hash}/${this.path}/${encodeURIComponent(item.name)}`
+          item.url = `/share/${this.hash}/${this.path}/${encodeURIComponent(item.name)}`
           return item
         })
-        this.updateSharedRequest(file)
+        this.updateRequest(file)
-        this.$store.commit('toggleSharedLoaded', true)
+        this.setLoading(false)
       } catch (e) {
-        this.notFound = true
+        this.error = e
       }
     },
     keyEvent (event) {
@@ -210,13 +233,13 @@ export default {
       if (event.keyCode === 27) {
         // If we're on a listing, unselect all
         // files and folders.
-        if (this.sharedSelectedCount > 0) {
+        if (this.selectedCount > 0) {
-          this.resetSharedSelected()
+          this.resetSelected()
         }
       }
     },
     toggleMultipleSelection () {
-      this.$store.commit('sharedMultiple', !this.shared.multiple)
+      this.$store.commit('multiple', !this.multiple)
     }
   }
 }