Error box, download button, editor save and more.

Former-commit-id: c14972384cc8afad28d49388b0b4545669e20b7d [formerly 0af2e5f9aff2aac576044ca9590045f656fbffda] [formerly 02248a86b7063e1c9d6779c3574a848708ff86f2 [formerly efaa8439a9dbbf9b829cf9fc32ca789c2a16df7d]]
Former-commit-id: 4ce0a81ea04b56cef11d62107d692502e266a16e [formerly 2c46db9398c267351c10f06c089ed08dc3625232]
Former-commit-id: 1c93a0643217ab69668600b41e2d8263266d7e23

api.go

@@ -59,8 +59,6 @@ func serveAPI(c *requestContext, w http.ResponseWriter, r *http.Request) (int, e
 		}
 	}
 
-	fmt.Println(c.us)
-
 	switch router {
 	case "download":
 		return downloadHandler(c, w, r)
@@ -524,14 +522,12 @@ func usersPutHandler(c *requestContext, w http.ResponseWriter, r *http.Request)
 
 		pw, err := hashPassword(u.Password)
 		if err != nil {
-			fmt.Println(err)
 			return http.StatusInternalServerError, err
 		}
 
 		c.us.Password = pw
 		err = c.fm.db.UpdateField(&User{ID: c.us.ID}, "Password", pw)
 		if err != nil {
-			fmt.Println(err)
 			return http.StatusInternalServerError, err
 		}
 

assets/src/components/Editor.vue

@@ -1,16 +1,18 @@
 <template>
     <form id="editor" :class="req.language">
-        <h2 v-if="hasMetadata">Metadata</h2>
+        <div v-if="hasMetadata" id="metadata">
-        <textarea v-model="req.metadata" v-if="hasMetadata" id="metadata"></textarea>
+          <h2>Metadata</h2>
+        </div>
 
         <h2 v-if="hasMetadata">Body</h2>
-        <textarea v-model="req.content" id="content"></textarea>
     </form>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import CodeMirror from '@/utils/codemirror'
+import api from '@/utils/api'
+import buttons from '@/utils/buttons'
 
 export default {
   name: 'editor',
@@ -23,11 +25,22 @@ export default {
   data: function () {
     return {
       metadata: null,
+      metalang: null,
       content: null
     }
   },
+  created () {
+    window.addEventListener('keydown', this.keyEvent)
+    document.getElementById('save-button').addEventListener('click', this.save)
+  },
+  beforeDestroy () {
+    window.removeEventListener('keydown', this.keyEvent)
+    document.getElementById('save-button').removeEventListener('click', this.save)
+  },
   mounted: function () {
-    this.content = CodeMirror.fromTextArea(document.getElementById('content'), {
+    // Set up the main content editor.
+    this.content = CodeMirror(document.getElementById('editor'), {
+      value: this.req.content,
       lineNumbers: (this.req.language !== 'markdown'),
       viewportMargin: Infinity,
       autofocus: true,
@@ -42,25 +55,66 @@ export default {
       return
     }
 
-    this.metadata = CodeMirror.fromTextArea(document.getElementById('metadata'), {
+    this.parseMetadata()
+
+    // Set up metadata editor.
+    this.metadata = CodeMirror(document.getElementById('metadata'), {
+      value: this.req.metadata,
       viewportMargin: Infinity,
       lineWrapping: true,
       theme: 'markdown'
     })
 
-    if (this.req.metadata.startsWith('{')) {
+    CodeMirror.autoLoadMode(this.metadata, this.metalang)
-      CodeMirror.autoLoadMode(this.metadata, 'json')
-    }
-
-    if (this.req.metadata.startsWith('---')) {
-      CodeMirror.autoLoadMode(this.metadata, 'yaml')
-    }
-
-    if (this.req.metadata.startsWith('+++')) {
-      CodeMirror.autoLoadMode(this.metadata, 'toml')
-    }
   },
   methods: {
+    // Saves the content when the user presses CTRL-S.
+    keyEvent (event) {
+      if (!event.ctrlKey && !event.metaKey) {
+        return
+      }
+
+      if (String.fromCharCode(event.which).toLowerCase() !== 's') {
+        return
+      }
+
+      event.preventDefault()
+      this.save()
+    },
+    // Parses the metadata and gets the language in which
+    // it is written.
+    parseMetadata () {
+      if (this.req.metadata.startsWith('{')) {
+        this.metalang = 'json'
+      }
+
+      if (this.req.metadata.startsWith('---')) {
+        this.metalang = 'yaml'
+      }
+
+      if (this.req.metadata.startsWith('+++')) {
+        this.metalang = 'toml'
+      }
+    },
+    // Saves the file.
+    save () {
+      buttons.loading('save')
+      let content = this.content.getValue()
+
+      if (this.hasMetadata) {
+        content = this.metadata.getValue() + '\n\n' + content
+      }
+
+      api.put(this.$route.path, content)
+        .then(() => {
+          buttons.done('save')
+          console.log('Saved!')
+        })
+        .catch(error => {
+          buttons.done('save')
+          console.log(error)
+        })
+    }
   }
 }
 </script>

assets/src/components/Listing.vue

@@ -172,10 +172,9 @@ export default {
           buttons.done('upload')
           this.$store.commit('setReload', true)
         })
-        .catch(e => {
+        .catch(error => {
           buttons.done('upload')
-          // TODO: show error in box
+          this.$store.commit('showError', error)
-          console.log(e)
         })
 
       return false

assets/src/components/Main.vue

@@ -13,7 +13,7 @@
           <i class="material-icons">search</i>
         </button>
 
-        <button v-show="isEditor" aria-label="Save" class="action" id="save">
+        <button v-show="isEditor" aria-label="Save" class="action" id="save-button">
           <i class="material-icons" title="Save">save</i>
         </button>
         <rename-button v-show="!loading && showRenameButton"></rename-button>
@@ -171,8 +171,6 @@ export default {
   },
   created () {
     this.fetchData()
-    // TODO: finish this box
-    // this.$store.commit('showHover', 'error')
   },
   watch: {
     '$route': 'fetchData',
@@ -184,59 +182,7 @@ export default {
   mounted () {
     updateColumnSizes()
     window.addEventListener('resize', updateColumnSizes)
-    window.addEventListener('keydown', (event) => {
+    window.addEventListener('keydown', this.keyEvent)
-      // Esc!
-      if (event.keyCode === 27) {
-        this.$store.commit('closeHovers')
-
-        // Unselect all files and folders.
-        if (this.req.kind === 'listing') {
-          let items = document.getElementsByClassName('item')
-          Array.from(items).forEach(link => {
-            link.setAttribute('aria-selected', false)
-          })
-
-          this.$store.commit('resetSelected')
-        }
-
-        return
-      }
-
-      // Del!
-      if (event.keyCode === 46) {
-        if (this.showDeleteButton) {
-          this.$store.commit('showHover', 'delete')
-        }
-      }
-
-      // F1!
-      if (event.keyCode === 112) {
-        event.preventDefault()
-        this.$store.commit('showHover', 'help')
-      }
-
-      // F2!
-      if (event.keyCode === 113) {
-        if (this.showRenameButton) {
-          this.$store.commit('showHover', 'rename')
-        }
-      }
-
-      // CTRL + S
-      if (event.ctrlKey || event.metaKey) {
-        switch (String.fromCharCode(event.which).toLowerCase()) {
-          case 's':
-            event.preventDefault()
-
-            if (this.req.kind !== 'editor') {
-              window.location = '?download=true'
-              return
-            }
-
-            // TODO: save file on editor!
-        }
-      }
-    })
   },
   methods: {
     fetchData () {
@@ -262,12 +208,61 @@ export default {
         this.loading = false
       })
       .catch(error => {
-        // TODO: 404, 403 and 500!
         console.log(error)
         this.error = error
         this.loading = false
       })
     },
+    keyEvent (event) {
+      // Esc!
+      if (event.keyCode === 27) {
+        this.$store.commit('closeHovers')
+
+        if (this.req.kind !== 'listing') {
+          return
+        }
+
+        // If we're on a listing, unselect all files and folders.
+        let items = document.getElementsByClassName('item')
+        Array.from(items).forEach(link => {
+          link.setAttribute('aria-selected', false)
+        })
+
+        this.$store.commit('resetSelected')
+      }
+
+      // Del!
+      if (event.keyCode === 46) {
+        if (this.showDeleteButton && this.req.kind !== 'editor') {
+          this.$store.commit('showHover', 'delete')
+        }
+      }
+
+      // F1!
+      if (event.keyCode === 112) {
+        event.preventDefault()
+        this.$store.commit('showHover', 'help')
+      }
+
+      // F2!
+      if (event.keyCode === 113) {
+        if (this.showRenameButton) {
+          this.$store.commit('showHover', 'rename')
+        }
+      }
+
+      // CTRL + S
+      if (event.ctrlKey || event.metaKey) {
+        if (String.fromCharCode(event.which).toLowerCase() === 's') {
+          event.preventDefault()
+
+          if (this.req.kind !== 'editor') {
+            document.getElementById('download-button').click()
+            return
+          }
+        }
+      }
+    },
     openSidebar () {
       this.$store.commit('showHover', 'sidebar')
     },

assets/src/components/buttons/Download.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="download" aria-label="Download" title="Download" class="action">
+  <button @click="download" aria-label="Download" title="Download" id="download-button" class="action">
     <i class="material-icons">file_download</i>
     <span>Download</span>
     <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>

assets/src/components/prompts/Delete.vue

@@ -36,8 +36,7 @@ export default {
           })
           .catch(error => {
             buttons.done('delete')
-            // TODO: show error in prompt
+            this.$store.commit('showError', error)
-            console.log(error)
           })
 
         return
@@ -63,7 +62,7 @@ export default {
           console.log(error)
           this.$store.commit('setReload', true)
           buttons.done('delete')
-          // TODO: show error in prompt
+          this.$store.commit('showError', error)
         })
     }
   }

assets/src/components/prompts/Error.vue

@@ -2,9 +2,9 @@
   <div class="prompt error">
     <i class="material-icons">error_outline</i>
     <h3>Something went wrong</h3>
-    <pre>{{ error }}</pre>
+    <pre>{{ $store.state.showMessage }}</pre>
     <div>
-      <button @click="$store.commit('closeHovers')" autofocus>Close</button>
+      <button @click="close" autofocus>Close</button>
       <button @click="reportIssue" class="cancel">Report Issue</button>
     </div>
   </div>
@@ -13,10 +13,12 @@
 <script>
 export default {
   name: 'error',
-  props: ['error'],
   methods: {
     reportIssue () {
       window.open('https://github.com/hacdias/filemanager/issues/new')
+    },
+    close () {
+      this.$store.commit('closeHovers')
     }
   }
 }

assets/src/components/prompts/Move.vue

@@ -81,10 +81,9 @@ export default {
           buttons.done('move')
           this.$router.push({page: dest})
         })
-        .catch(e => {
+        .catch(error => {
           buttons.done('move')
-          // TODO: show error in prompt
+          this.$store.commit('showError', error)
-          console.log(e)
         })
     },
     next: function (event) {

assets/src/components/prompts/NewDir.vue

@@ -39,8 +39,7 @@ export default {
           this.$router.push({ path: uri })
         })
         .catch(error => {
-          // TODO: Show error message!
+          this.$store.commit('showError', error)
-          console.log(error)
         })
 
       this.$store.commit('closeHovers')

assets/src/components/prompts/NewFile.vue

@@ -39,8 +39,7 @@ export default {
           this.$router.push({ path: uri })
         })
         .catch(error => {
-          // TODO: show error message in a box
+          this.$store.commit('showError', error)
-          console.log(error)
         })
 
       this.$store.commit('closeHovers')

assets/src/components/prompts/Rename.vue

@@ -61,8 +61,7 @@ export default {
           // TODO: keep selected after reload?
           this.$store.commit('setReload', true)
         }).catch(error => {
-          // TODO: show error message
+          this.$store.commit('showError', error)
-          console.log(error)
         })
 
       this.$store.commit('closeHovers')

assets/src/store/index.js

@@ -13,7 +13,8 @@ const state = {
   reload: false,
   selected: [],
   multiple: false,
-  show: null
+  show: null,
+  showMessage: null
 }
 
 export default new Vuex.Store({

assets/src/store/mutations.js

@@ -1,6 +1,21 @@
 const mutations = {
-  closeHovers: state => { state.show = null },
+  closeHovers: state => {
-  showHover: (state, value) => { state.show = value },
+    state.show = null
+    state.showMessage = null
+  },
+  showHover: (state, value) => {
+    if (typeof value !== 'object') {
+      state.show = value
+      return
+    }
+
+    state.show = value.prompt
+    state.showMessage = value.message
+  },
+  showError: (state, value) => {
+    state.show = 'error'
+    state.showMessage = value
+  },
   setReload: (state, value) => { state.reload = value },
   setUser: (state, value) => (state.user = value),
   setJWT: (state, value) => (state.jwt = value),

filemanager.go

@@ -19,9 +19,15 @@ var (
 // FileManager is a file manager instance. It should be creating using the
 // 'New' function and not directly.
 type FileManager struct {
-	db  *storm.DB
+	// The BoltDB database for this instance.
+	db *storm.DB
+
+	// The key used to sign the JWT tokens.
 	key []byte
 
+	// The static assets.
+	assets *rice.Box
+
 	// PrefixURL is a part of the URL that is already trimmed from the request URL before it
 	// arrives to our handlers. It may be useful when using File Manager as a middleware
 	// such as in caddy-filemanager plugin. It is only useful in certain situations.
@@ -35,7 +41,8 @@ type FileManager struct {
 	// Users is a map with the different configurations for each user.
 	Users map[string]*User
 
-	assets *rice.Box
+	// The plugins that have been plugged in.
+	Plugins []*Plugin
 }
 
 // Command is a command function.
@@ -96,6 +103,12 @@ type Regexp struct {
 	regexp *regexp.Regexp
 }
 
+// Plugin is a File Manager plugin.
+type Plugin struct {
+	// The JavaScript that will be injected into the main page.
+	JavaScript string
+}
+
 // DefaultUser is used on New, when no 'base' user is provided.
 var DefaultUser = User{
 	Username:      "admin",
@@ -208,11 +221,19 @@ func (m *FileManager) SetBaseURL(url string) {
 // ServeHTTP determines if the request is for this plugin, and if all prerequisites are met.
 func (m *FileManager) ServeHTTP(w http.ResponseWriter, r *http.Request) (int, error) {
 	// TODO: Handle errors here and make it compatible with http.Handler
-	return serveHTTP(&requestContext{
+	code, err := serveHTTP(&requestContext{
 		fm: m,
 		us: nil,
 		fi: nil,
 	}, w, r)
+
+	if code != 0 && err != nil {
+		w.WriteHeader(code)
+		w.Write([]byte(err.Error()))
+		return 0, nil
+	}
+
+	return code, err
 }
 
 // Allowed checks if the user has permission to access a directory/file.