Updates on errors

assets/src/components/Editor.vue

@@ -112,7 +112,6 @@ export default {
       api.put(this.$route.path, content)
         .then(() => {
           buttons.done('save')
-          console.log('Saved!')
         })
         .catch(error => {
           buttons.done('save')

assets/src/components/Files.vue

@@ -1,17 +1,8 @@
 <template>
   <div v-if="error">
-    <h2 class="message" v-if="error === 404">
+    <not-found v-if="error === 404"></not-found>
-      <i class="material-icons">gps_off</i>
+    <forbidden v-else-if="error === 403"></forbidden>
-      <span>This location can't be reached.</span>
+    <internal-error v-else></internal-error>
-    </h2>
-    <h2 class="message" v-else-if="error === 403">
-      <i class="material-icons">error</i>
-      <span>You're not welcome here.</span>
-    </h2>
-    <h2 class="message" v-else>
-      <i class="material-icons">error_outline</i>
-      <span>Something really went wrong.</span>
-    </h2>
   </div>
   <editor v-else-if="isEditor"></editor>
   <listing :class="{ multiple }" v-else-if="isListing"></listing>
@@ -19,6 +10,9 @@
 </template>
 
 <script>
+import Forbidden from './errors/403'
+import NotFound from './errors/404'
+import InternalError from './errors/500'
 import Preview from './Preview'
 import Listing from './Listing'
 import Editor from './Editor'
@@ -38,6 +32,9 @@ function updateColumnSizes () {
 export default {
   name: 'files',
   components: {
+    Forbidden,
+    NotFound,
+    InternalError,
     Preview,
     Listing,
     Editor
@@ -105,8 +102,14 @@ export default {
         this.setLoading(false)
       })
       .catch(error => {
-        this.error = error
         this.setLoading(false)
+
+        if (typeof error === 'object') {
+          this.error = error.status
+          return
+        }
+
+        this.error = error
       })
     },
     keyEvent (event) {

assets/src/components/errors/403.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h2 class="message">
+      <i class="material-icons">error</i>
+      <span>You're not welcome here.</span>
+    </h2>
+  </div>
+</template>
+
+<script>
+export default {name: 'forbidden'}
+</script>
+

assets/src/components/errors/404.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h2 class="message">
+      <i class="material-icons">gps_off</i>
+      <span>This location can't be reached.</span>
+    </h2>
+  </div>
+</template>
+
+<script>
+export default {name: 'not-found'}
+</script>
+

assets/src/components/errors/500.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h2 class="message">
+      <i class="material-icons">error_outline</i>
+      <span>Something really went wrong.</span>
+    </h2>
+  </div>
+</template>
+
+<script>
+export default {name: 'internal-error'}
+</script>
+

assets/src/router/index.js

@@ -6,6 +6,9 @@ import Files from '@/components/Files'
 import Users from '@/components/Users'
 import User from '@/components/User'
 import Settings from '@/components/Settings'
+import error403 from '@/components/errors/403'
+import error404 from '@/components/errors/404'
+import error500 from '@/components/errors/500'
 import auth from '@/utils/auth.js'
 import store from '@/store'
 
@@ -53,6 +56,21 @@ const router = new Router({
           name: 'Settings',
           component: Settings
         },
+        {
+          path: '/403',
+          name: 'Forbidden',
+          component: error403
+        },
+        {
+          path: '/404',
+          name: 'Not Found',
+          component: error404
+        },
+        {
+          path: '/500',
+          name: 'Internal Server Error',
+          component: error500
+        },
         {
           path: '/users',
           name: 'Users',

assets/src/store/mutations.js

@@ -14,7 +14,13 @@ const mutations = {
   },
   showError: (state, value) => {
     state.show = 'error'
-    state.showMessage = value
+
+    if (typeof value !== 'object') {
+      state.showMessage = value
+      return
+    }
+
+    state.showMessage = value.message
   },
   setLoading: (state, value) => { state.loading = value },
   setReload: (state, value) => { state.reload = value },

assets/src/utils/api.js

@@ -24,7 +24,10 @@ function fetch (url) {
           resolve(JSON.parse(request.responseText))
           break
         default:
-          reject(request.responseText)
+          reject({
+            message: request.responseText,
+            status: request.status
+          })
           break
       }
     }

assets/src/utils/buttons.js

@@ -13,7 +13,7 @@ function loading (button) {
     el.classList.add('spin')
     el.innerHTML = 'autorenew'
     el.style.opacity = 1
-  }, 200)
+  }, 0)
 }
 
 function done (button, success = true) {
@@ -30,7 +30,7 @@ function done (button, success = true) {
     el.classList.remove('spin')
     el.innerHTML = el.dataset.icon
     el.style.opacity = 1
-  }, 200)
+  }, 0)
 }
 
 export default {