add commands

assets/public/css/styles.css

@@ -489,7 +489,8 @@ header p i {
     vertical-align: middle;
 }
 
-header form {
+header #search {
+    position: relative;
     display: inline-block;
     height: 100%;
     padding: 0.75em;
@@ -497,43 +498,81 @@ header form {
     color: #fff;
     border-radius: 0.3em;
     background-color: #1e88e5;
+    transition: .1s ease all;
 }
 
-header form i,
-header form input {
+header #search.active {
+    background-color: #fff;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+}
+
+header #search.active i,
+header #search.active input {
+    color: #212121;
+}
+
+header #search i,
+header #search input {
     vertical-align: middle;
 }
 
-header form i {
+header #search i {
     margin-right: 0.3em;
     color: rgba(255, 255, 255, .5);
 }
 
-header form input {
+header #search input {
     min-width: 20em;
     border: 0;
     outline: 0;
+    color: #fff;
     background-color: transparent;
 }
 
-header form::-webkit-input-placeholder {
+header #search.active div {
+    visibility: visible;
+    opacity: 1;
+    top: 100%;
+}
+
+header #search div {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    left: 0;
+    z-index: 999999;
+    background-color: #fff;
+    text-align: left;
+    color: #ccc;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .12);
+    padding: .5em;
+    border-bottom-left-radius: .3em;
+    border-bottom-right-radius: .3em;
+    transition: .1s ease all;
+    visibility: hidden;
+    opacity: 0;
+}
+
+header #search ::-webkit-input-placeholder {
     /* WebKit, Blink, Edge */
     color: rgba(255, 255, 255, .5);
 }
 
-header form:-moz-placeholder {
+header #search :-moz-placeholder {
     opacity: 1;
     /* Mozilla Firefox 4 to 18 */
     color: rgba(255, 255, 255, .5);
 }
 
-header form::-moz-placeholder {
+header #search ::-moz-placeholder {
     opacity: 1;
     /* Mozilla Firefox 19+ */
     color: rgba(255, 255, 255, .5);
 }
 
-header form:-ms-input-placeholder {
+header #search :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
     color: rgba(255, 255, 255, .5);
 }

assets/public/js/application.js

@@ -403,6 +403,50 @@ document.addEventListener("changed-selected", function(event) {
     return false;
 });
 
+var searchEvent = function(event) {
+    let value = this.value;
+    let box = document.querySelector('#search div');
+
+    if (value.length == 0) {
+        box.innerHTML = "Write your git, mercurial or svn command and press enter.";
+        return;
+    }
+
+    let pieces = value.split(' ');
+
+    if (pieces[0] != "git" && pieces[0] != "hg" && pieces[0] != "svn") {
+        box.innerHTML = "Command not supported."
+        return;
+    }
+
+    box.innerHTML = "Press enter to continue."
+
+    if (event.keyCode == 13) {
+        let request = new XMLHttpRequest();
+        request.open('POST', window.location);
+        request.setRequestHeader('Command', value);
+        request.send();
+        request.onreadystatechange = function() {
+            if (request.readyState == 4) {
+                if (request.status == 501) {
+                    box.innerHTML = "Command not implemented."
+                }
+
+                if (request.status == 500) {
+                    box.innerHTML = "Something went wrong."
+                }
+
+                if (request.status == 200) {
+                    let text = request.responseText;
+                    text = text.substring(1, text.length - 1);
+                    text = text.replace('\\n', "\n");
+                    box.innerHTML = text;
+                }
+            }
+        }
+    }
+}
+
 document.addEventListener('listing', event => {
     // Handle date times
     let timeList = document.getElementsByTagName("time");
@@ -426,6 +470,17 @@ document.addEventListener('listing', event => {
         }
     });
 
+    document.querySelector('#search input').addEventListener('focus', event => {
+        document.getElementById('search').classList.add('active');
+    });
+
+    document.querySelector('#search input').addEventListener('blur', event => {
+        document.getElementById('search').classList.remove('active');
+        document.querySelector('#search input').value = '';
+    });
+
+    document.querySelector('#search input').addEventListener('keyup', searchEvent);
+
     // Enables upload button
     document.getElementById("upload").addEventListener("click", (event) => {
         document.getElementById("upload-input").click();

assets/templates/base.tmpl

@@ -39,12 +39,13 @@
 
    <div>
     {{ if .IsDir}}
-     <!--
-     <form>
-        <i class="material-icons">search</i>
-        <input type="text" placeholder="Search or command">
-    </form>
-    -->
+
+    <div id="search">
+        <i class="material-icons">storage</i>
+        <input type="text" placeholder="Execute a command...">
+        <div>Write your git, mercurial or svn command and press enter.</div>
+    </div>
+
      <div class="action" id="view">
       <i class="material-icons">view_headline</i>
      </div>

filemanager.go

@@ -98,7 +98,7 @@ func (f FileManager) ServeHTTP(w http.ResponseWriter, r *http.Request) (int, err
 				// VCS commands
 				if r.Header.Get("Command") != "" {
 					// TODO: not implemented on frontend
-					vcsCommand(w, r, c)
+					return vcsCommand(w, r, c)
 				}
 				// Creates a new folder
 				// TODO: not implemented on frontend
@@ -209,8 +209,11 @@ func vcsCommand(w http.ResponseWriter, r *http.Request, c *config.Config) (int,
 		return http.StatusNotImplemented, nil
 	}
 
+	path := strings.Replace(r.URL.Path, c.BaseURL, c.PathScope, 1)
+	path = filepath.Clean(path)
+
 	cmd := exec.Command(command[0], command[1:len(command)]...)
-	cmd.Dir = c.PathScope
+	cmd.Dir = path
 	output, err := cmd.CombinedOutput()
 
 	if err != nil {