Update error messages

_assets/src/components/Listing.vue

@@ -1,5 +1,11 @@
 <template>
-  <div id="listing"
+  <div v-if="(req.numDirs + req.numFiles) == 0">
+    <h2 class="message">
+      <i class="material-icons">sentiment_dissatisfied</i>
+      <span>It feels lonely here...</span>
+    </h2>
+  </div>
+  <div v-else id="listing"
     :class="req.display"
     @drop="drop"
     @dragenter="dragEnter"
@@ -23,8 +29,6 @@
       </div>
     </div>
 
-    <h2 v-if="(req.numDirs + req.numFiles) == 0" class="message">It feels lonely here :'(</h2>
-
     <h2 v-if="req.numDirs > 0">Folders</h2>
     <div v-if="req.numDirs > 0">
       <item v-for="(item, index) in req.items"

_assets/src/components/Main.vue

@@ -25,14 +25,22 @@
 
     <main>
       <div v-if="loading">Loading...</div>
-      <editor v-if="isEditor"></editor>
-      <listing v-if="isListing"></listing>
-      <preview v-if="isPreview"></preview>
+      <div v-else-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>
+      </div>
+      <editor v-else-if="isEditor"></editor>
+      <listing v-else-if="isListing"></listing>
+      <preview v-else-if="isPreview"></preview>
     </main>
 
     <prompts></prompts>
-
-    <footer>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
   </div>
 </template>
 
@@ -104,7 +112,7 @@ export default {
   data: function () {
     return {
       loading: true,
-      error: ''
+      error: null
     }
   },
   created () {
@@ -178,6 +186,7 @@ export default {
   methods: {
     fetchData () {
       this.loading = true
+      this.error = null
       // Reset selected items and multiple selection.
       this.$store.commit('resetSelected')
       this.$store.commit('multiple', false)
@@ -199,7 +208,7 @@ export default {
       .catch(error => {
         // TODO: 404, 403 and 500!
         console.log(error)
-
+        this.error = error
         this.loading = false
       })
     },

_assets/src/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav>
-    <router-link class="action" to="/files/">
+    <router-link class="action" to="/files/" aria-label="My Files" title="My Files">
       <i class="material-icons">folder</i>
       <span>My Files</span>
     </router-link>
@@ -24,10 +24,19 @@
       </button>
     </div>
 
-    <button @click="logout" class="action" id="logout" aria-label="Log out">
-      <i class="material-icons" title="Logout">exit_to_app</i>
-      <span>Logout</span>
-    </button>
+    <div>
+      <router-link class="action" to="/dashboard" aria-label="Settings" title="Settings">
+        <i class="material-icons">settings_applications</i>
+        <span>Settings</span>
+      </router-link>
+
+      <button @click="logout" class="action" id="logout" aria-label="Log out" title="Logout">
+        <i class="material-icons">exit_to_app</i>
+        <span>Logout</span>
+      </button>
+    </div>
+
+    <p class="credits">Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</p>
   </nav>
 </template>
 

_assets/src/css/base.css

@@ -100,7 +100,6 @@ nav .action {
     padding: .5em;
 }
 
-nav > .action:last-child,
 nav > div {
     border-top: 1px solid rgba(0, 0, 0, 0.05);
 }

_assets/src/css/listing.css

@@ -59,10 +59,9 @@
     vertical-align: bottom;
 }
 
-#listing h2.message,
 .message {
     text-align: center;
-    font-size: 3em;
+    font-size: 2em;
     margin: 1em auto;
     display: block !important;
     width: 95%;
@@ -71,8 +70,9 @@
 }
 
 .message i {
-    font-size: inherit;
-    vertical-align: middle;
+    font-size: 2.5em;
+    margin-bottom: .2em;
+    display: block;
 }
 
 #listing.mosaic {
@@ -246,4 +246,4 @@
         right: 1em;
         left: 1em;
     }
-}
+}

_assets/src/css/styles.css

@@ -396,15 +396,14 @@ fieldset h3,
  *            FOOTER           *
  * * * * * * * * * * * * * * * */
 
-footer {
+.credits {
     font-size: 0.6em;
-    margin: 2em 0 2em;
-    text-align: center;
-    color: grey;
+    margin: 3em 2.5em;
+    color: #a5a5a5;
 }
 
-footer a,
-footer a:hover {
+.credits a,
+.credits a:hover {
     color: inherit;
 }