Working better :)

_assets/src/components/DeletePrompt.vue

@@ -49,7 +49,7 @@ export default {
       let promises = []
 
       for (let index of this.selected) {
-        promises.push(webdav.trash(this.req.data.items[index].url))
+        promises.push(webdav.trash(this.req.items[index].url))
       }
 
       Promise.all(promises)

_assets/src/components/DownloadPrompt.vue

@@ -27,7 +27,7 @@ export default {
         let files = ''
 
         for (let i of this.selected) {
-          files += this.req.data.items[i].url.replace(window.location.pathname, '') + ','
+          files += this.req.items[i].url.replace(window.location.pathname, '') + ','
         }
 
         files = files.substring(0, files.length - 1)

_assets/src/components/Editor.vue

@@ -6,7 +6,7 @@
 
         <div class="content">
             <div id="ace"></div>
-            <textarea id="source" name="content">{{ req.data.content }}</textarea>
+            <textarea id="source" name="content">{{ req.content }}</textarea>
         </div>
     </form>
 </template>
@@ -19,7 +19,7 @@ export default {
   computed: {
     ...mapState(['req']),
     hasMetadata: function () {
-      return (this.req.data.metadata !== undefined && this.req.data.metadata !== null)
+      return (this.req.metadata !== undefined && this.req.metadata !== null)
     }
   },
   data: function () {

_assets/src/components/InfoPrompt.vue

@@ -9,8 +9,8 @@
     <p v-show="selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p>
 
     <section v-show="dir() && selected.length === 0">
-      <p><strong>Number of files:</strong> {{ req.data.numFiles }}</p>
+      <p><strong>Number of files:</strong> {{ req.numFiles }}</p>
-      <p><strong>Number of directories:</strong> {{ req.data.numDirs }}</p>
+      <p><strong>Number of directories:</strong> {{ req.numDirs }}</p>
     </section>
 
     <section v-show="!dir()">
@@ -40,30 +40,30 @@ export default {
   methods: {
     humanSize: function () {
       if (this.selectedCount === 0 || this.req.kind !== 'listing') {
-        return filesize(this.req.data.size)
+        return filesize(this.req.size)
       }
 
       var sum = 0
 
       for (let i = 0; i < this.selectedCount; i++) {
-        sum += this.req.data.items[this.selected[i]].size
+        sum += this.req.items[this.selected[i]].size
       }
 
       return filesize(sum)
     },
     humanTime: function () {
       if (this.selectedCount === 0) {
-        return moment(this.req.data.modified).fromNow()
+        return moment(this.req.modified).fromNow()
       }
 
-      return moment(this.req.data.items[this.selected[0]]).fromNow()
+      return moment(this.req.items[this.selected[0]]).fromNow()
     },
     name: function () {
       if (this.selectedCount === 0) {
-        return this.req.data.name
+        return this.req.name
       }
 
-      return this.req.data.items[this.selected[0]].name
+      return this.req.items[this.selected[0]].name
     },
     dir: function () {
       if (this.selectedCount > 1) {
@@ -72,10 +72,10 @@ export default {
       }
 
       if (this.selectedCount === 0) {
-        return this.req.data.isDir
+        return this.req.isDir
       }
 
-      return this.req.data.items[this.selected[0]].isDir
+      return this.req.items[this.selected[0]].isDir
     },
     checksum: function (event, hash) {
       event.preventDefault()
@@ -84,7 +84,7 @@ export default {
       let link
 
       if (this.selectedCount) {
-        link = this.req.data.items[this.selected[0]].url
+        link = this.req.items[this.selected[0]].url
       } else {
         link = window.location.pathname
       }

_assets/src/components/Listing.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="listing"
-    :class="req.data.display"
+    :class="req.display"
     @drop="drop"
     @dragenter="dragEnter"
     @dragend="dragEnd">
@@ -8,13 +8,13 @@
       <div class="item header">
         <div></div>
         <div>
-          <p v-bind:class="{ active: req.data.sort === 'name' }" class="name"><span>Name</span>
+          <p v-bind:class="{ active: req.sort === 'name' }" class="name"><span>Name</span>
-            <a v-if="req.data.sort === 'name' && req.data.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
+            <a v-if="req.sort === 'name' && req.order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
             <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
           </p>
 
-          <p v-bind:class="{ active: req.data.sort === 'size' }" class="size"><span>Size</span>
+          <p v-bind:class="{ active: req.sort === 'size' }" class="size"><span>Size</span>
-            <a v-if="req.data.sort === 'size' && req.data.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
+            <a v-if="req.sort === 'size' && req.order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
             <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
           </p>
 
@@ -23,11 +23,11 @@
       </div>
     </div>
 
-    <h2 v-if="(req.data.numDirs + req.data.numFiles) == 0" class="message">It feels lonely here :'(</h2>
+    <h2 v-if="(req.numDirs + req.numFiles) == 0" class="message">It feels lonely here :'(</h2>
 
-    <h2 v-if="req.data.numDirs > 0">Folders</h2>
+    <h2 v-if="req.numDirs > 0">Folders</h2>
-    <div v-if="req.data.numDirs > 0">
+    <div v-if="req.numDirs > 0">
-      <item v-for="(item, index) in req.data.items"
+      <item v-for="(item, index) in req.items"
         v-if="item.isDir"
         :key="base64(item.name)"
         v-bind:index="index"
@@ -40,9 +40,9 @@
       </item>
     </div>
 
-    <h2 v-if="req.data.numFiles > 0">Files</h2>
+    <h2 v-if="req.numFiles > 0">Files</h2>
-    <div v-if="req.data.numFiles > 0">
+    <div v-if="req.numFiles > 0">
-      <item v-for="(item, index) in req.data.items"
+      <item v-for="(item, index) in req.items"
         v-if="!item.isDir"
         :key="base64(item.name)"
         v-bind:index="index"

_assets/src/components/ListingItem.vue

@@ -84,8 +84,8 @@ export default {
       let promises = []
 
       for (let i of this.selected) {
-        let url = this.req.data.items[i].url
+        let url = this.req.items[i].url
-        let name = this.req.data.items[i].name
+        let name = this.req.items[i].name
 
         promises.push(webdav.move(url, this.url + encodeURIComponent(name)))
       }

_assets/src/components/Login.vue

@@ -29,8 +29,8 @@ export default {
       event.stopPropagation()
 
       let redirect = this.$route.query.redirect
-      if (redirect === '') {
+      if (redirect === '' || redirect === undefined || redirect === null) {
-        redirect = this.$store.state.baseURL + '/files/'
+        redirect = '/files/'
       }
 
       auth.login(this.username, this.password)

_assets/src/components/Main.vue

@@ -93,6 +93,7 @@ import NewFilePrompt from './NewFilePrompt'
 import NewDirPrompt from './NewDirPrompt'
 import css from '@/utils/css'
 import auth from '@/utils/auth'
+import api from '@/utils/api'
 import {mapGetters, mapState} from 'vuex'
 
 function updateColumnSizes () {
@@ -149,7 +150,21 @@ export default {
       plugins: []
     }
   },
-  mounted: function () {
+  beforeRouteEnter (to, from, next) {
+    api.fetch(to.params[0])
+    .then(() => {
+      next()
+    })
+    .catch(error => {
+      // TODO: 404, 403 and 500!
+      console.log(error)
+      window.alert('Something went wrong. Please reload.')
+    })
+  },
+  beforeRouteUpdate (to, from, next) {
+    console.log('hey')
+  },
+  mounted () {
     updateColumnSizes()
     window.addEventListener('resize', updateColumnSizes)
 
@@ -157,7 +172,7 @@ export default {
       this.plugins = window.plugins
     }
 
-    document.title = this.req.data.name
+    document.title = this.req.name
     window.history.replaceState({
       url: window.location.pathname,
       name: document.title

_assets/src/components/MovePrompt.vue

@@ -39,7 +39,7 @@ export default {
     }
 
     if (this.req.kind === 'listing') {
-      for (let item of this.req.data.items) {
+      for (let item of this.req.items) {
         if (!item.isDir) continue
 
         this.items.push({
@@ -66,8 +66,8 @@ export default {
       }
 
       for (let item of this.selected) {
-        let from = this.req.data.items[item].url
+        let from = this.req.items[item].url
-        let to = dest + '/' + encodeURIComponent(this.req.data.items[item].name)
+        let to = dest + '/' + encodeURIComponent(this.req.items[item].name)
         to = to.replace('//', '/')
 
         promises.push(webdav.move(from, to))
@@ -100,7 +100,7 @@ export default {
           }
 
           let req = JSON.parse(data)
-          for (let item of req.data.items) {
+          for (let item of req.items) {
             if (!item.isDir) continue
 
             this.items.push({

_assets/src/components/Preview.vue

@@ -12,18 +12,18 @@
     </div>
 
     <div class="preview">
-      <img v-if="req.data.type == 'image'" :src="raw()">
+      <img v-if="req.type == 'image'" :src="raw()">
-      <audio v-else-if="req.data.type == 'audio'" :src="raw()" controls></audio>
+      <audio v-else-if="req.type == 'audio'" :src="raw()" controls></audio>
-      <video v-else-if="req.data.type == 'video'" :src="raw()" controls>
+      <video v-else-if="req.type == 'video'" :src="raw()" controls>
         Sorry, your browser doesn't support embedded videos,
         but don't worry, you can <a href="?download=true">download it</a>
         and watch it with your favorite video player!
       </video>
-      <object v-else-if="req.data.extension == '.pdf'" class="pdf" :data="raw()"></object>
+      <object v-else-if="req.extension == '.pdf'" class="pdf" :data="raw()"></object>
-      <a v-else-if="req.data.type == 'blob'" href="?download=true">
+      <a v-else-if="req.type == 'blob'" href="?download=true">
         <h2 class="message">Download <i class="material-icons">file_download</i></h2>
       </a>
-      <pre v-else >{{ req.data.content }}</pre>
+      <pre v-else >{{ req.content }}</pre>
     </div>
   </div>
 </template>
@@ -47,7 +47,7 @@ export default {
   computed: mapState(['req']),
   methods: {
     raw: function () {
-      return this.req.data.url + '?raw=true'
+      return this.req.url + '?raw=true'
     },
     back: function (event) {
       let url = page.removeLastDir(window.location.pathname) + '/'

_assets/src/components/RenamePrompt.vue

@@ -29,7 +29,7 @@ export default {
     },
     oldName: function () {
       if (this.req.kind !== 'listing') {
-        return this.req.data.name
+        return this.req.name
       }
 
       if (this.selectedCount === 0 || this.selectedCount > 1) {
@@ -37,16 +37,16 @@ export default {
         return
       }
 
-      return this.req.data.items[this.selected[0]].name
+      return this.req.items[this.selected[0]].name
     },
     submit: function (event) {
       let oldLink = ''
       let newLink = ''
 
       if (this.req.kind !== 'listing') {
-        oldLink = this.req.data.url
+        oldLink = this.req.url
       } else {
-        oldLink = this.req.data.items[this.selected[0]].url
+        oldLink = this.req.items[this.selected[0]].url
       }
 
       this.name = encodeURIComponent(this.name)

_assets/src/components/SwitchViewButton.vue

@@ -12,7 +12,7 @@ export default {
     change: function (event) {
       let display = 'mosaic'
 
-      if (this.$store.state.req.data.display === 'mosaic') {
+      if (this.$store.state.req.display === 'mosaic') {
         display = 'list'
       }
 
@@ -20,7 +20,7 @@ export default {
       document.cookie = `display=${display}; max-age=31536000; path=${this.$store.state.baseURL}`
     },
     icon: function () {
-      if (this.$store.state.req.data.display === 'mosaic') return 'view_list'
+      if (this.$store.state.req.display === 'mosaic') return 'view_list'
       return 'view_module'
     }
   }

_assets/src/router/index.js

@@ -21,6 +21,7 @@ const router = new Router({
           next({ path: '/files' })
         })
         .catch(() => {
+          document.title = 'Login'
           next()
         })
       }
@@ -33,7 +34,7 @@ const router = new Router({
       },
       children: [
         {
-          path: '/files/*',
+          path: '/files*',
           name: 'Files',
           component: Files
         },

_assets/src/store/mutations.js

@@ -18,6 +18,7 @@ const mutations = {
     state.showDownload = false
   },
   setUser: (state, value) => (state.user = value),
+  setJWT: (state, value) => (state.jwt = value),
   multiple: (state, value) => (state.multiple = value),
   addSelected: (state, value) => (state.selected.push(value)),
   removeSelected: (state, value) => {
@@ -29,11 +30,10 @@ const mutations = {
     state.selected = []
   },
   listingDisplay: (state, value) => {
-    state.req.data.display = value
+    state.req.display = value
   },
   updateRequest: (state, value) => {
-    state.req.kind = value.kind
+    state.req = value
-    state.req.data = value.data
   }
 }
 

_assets/src/store/store.js

@@ -10,6 +10,7 @@ const state = {
   req: {},
   baseURL: document.querySelector('meta[name="base"]').getAttribute('content'),
   ssl: (window.location.protocol === 'https:'),
+  jwt: '',
   selected: [],
   multiple: false,
   showInfo: false,

_assets/src/utils/api.js

@@ -0,0 +1,27 @@
+import store from '../store/store'
+
+function fetch (url) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('GET', `${store.state.baseURL}/api/resource${url}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      if (request.status === 200) {
+        let req = JSON.parse(request.responseText)
+        store.commit('updateRequest', req)
+        console.log(req)
+        document.title = req.name
+        resolve()
+      } else {
+        reject()
+      }
+    }
+    request.onerror = () => reject()
+    request.send()
+  })
+}
+
+export default {
+  fetch
+}

_assets/src/utils/auth.js

@@ -6,6 +6,7 @@ function parseToken (token) {
   document.cookie = `auth=${token}; max-age=86400; path=${store.state.baseURL}`
   let res = token.split('.')
   let user = JSON.parse(window.atob(res[1]))
+  store.commit('setJWT', token)
   store.commit('setUser', user)
 }