From c206bea84a3e667047920d7dbcd0fc1c89cbced9 Mon Sep 17 00:00:00 2001
From: Henrique Dias <hacdias@gmail.com>
Date: Sat, 8 Jul 2017 11:51:24 +0100
Subject: [PATCH] Updates on errors

---
 assets/src/components/Editor.vue     |  1 -
 assets/src/components/Files.vue      | 29 +++++++++++++++-------------
 assets/src/components/errors/403.vue | 13 +++++++++++++
 assets/src/components/errors/404.vue | 13 +++++++++++++
 assets/src/components/errors/500.vue | 13 +++++++++++++
 assets/src/router/index.js           | 18 +++++++++++++++++
 assets/src/store/mutations.js        |  8 +++++++-
 assets/src/utils/api.js              |  5 ++++-
 assets/src/utils/buttons.js          |  4 ++--
 9 files changed, 86 insertions(+), 18 deletions(-)
 create mode 100644 assets/src/components/errors/403.vue
 create mode 100644 assets/src/components/errors/404.vue
 create mode 100644 assets/src/components/errors/500.vue

diff --git a/assets/src/components/Editor.vue b/assets/src/components/Editor.vue
index 144605c5..22d17e0a 100644
--- a/assets/src/components/Editor.vue
+++ b/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')
diff --git a/assets/src/components/Files.vue b/assets/src/components/Files.vue
index b5fcbc94..4ef96b6a 100644
--- a/assets/src/components/Files.vue
+++ b/assets/src/components/Files.vue
@@ -1,17 +1,8 @@
 <template>
   <div v-if="error">
-    <h2 class="message" v-if="error === 404">
-      <i class="material-icons">gps_off</i>
-      <span>This location can't be reached.</span>
-    </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>
+    <not-found v-if="error === 404"></not-found>
+    <forbidden v-else-if="error === 403"></forbidden>
+    <internal-error v-else></internal-error>
   </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) {
diff --git a/assets/src/components/errors/403.vue b/assets/src/components/errors/403.vue
new file mode 100644
index 00000000..5c19daf5
--- /dev/null
+++ b/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>
+
diff --git a/assets/src/components/errors/404.vue b/assets/src/components/errors/404.vue
new file mode 100644
index 00000000..d73682e3
--- /dev/null
+++ b/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>
+
diff --git a/assets/src/components/errors/500.vue b/assets/src/components/errors/500.vue
new file mode 100644
index 00000000..681f78a9
--- /dev/null
+++ b/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>
+
diff --git a/assets/src/router/index.js b/assets/src/router/index.js
index 08267aa3..c1ce9725 100644
--- a/assets/src/router/index.js
+++ b/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',
diff --git a/assets/src/store/mutations.js b/assets/src/store/mutations.js
index 4035439a..262ef36d 100644
--- a/assets/src/store/mutations.js
+++ b/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 },
diff --git a/assets/src/utils/api.js b/assets/src/utils/api.js
index a3357e85..a96546f2 100644
--- a/assets/src/utils/api.js
+++ b/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
       }
     }
diff --git a/assets/src/utils/buttons.js b/assets/src/utils/buttons.js
index 2fb366ed..10206638 100644
--- a/assets/src/utils/buttons.js
+++ b/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 {