Adding error message when navigation to inaccessible directory. Fixin…

…g problem with navigating out of directories containing periods. Adding fade in feedback to nav listing. Closes #668 and closes #669.
sandialabs · Oct 27, 2016 · 08dd7bc · 08dd7bc
1 parent a5ec9f7
commit 08dd7bc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/web-server/css/slycat.css b/web-server/css/slycat.css
@@ -105,15 +105,20 @@ body
   padding: 48px;
 }
 
-slycat-navbar .alert
+slycat-navbar nav .alert
 {
   margin: 0 !important;
 }
 
-slycat-navbar .alert pre
+slycat-navbar nav .alert pre
 {
   margin: 12px 0 0 0;
 }
+#slycat-wizard .slycat-remote-browser .path .alert {
+  margin-top: 10px;
+  margin-bottom: 0;
+  display: none;
+}
 #slycat-wizard .nav-pills a
 {
   cursor: default;

diff --git a/web-server/js/slycat-remote-browser.js b/web-server/js/slycat-remote-browser.js
@@ -15,6 +15,7 @@ define("slycat-remote-browser", ["slycat-server-root", "slycat-web-client", "kno
       component.sid = params.sid;
       component.hostname = params.hostname;
       component.path = params.path;
+      component.path_input = ko.observable(component.path());
       component.selection = params.selection;
       component.open_file_callback = params.open_file_callback;
       component.raw_files = mapping.fromJS([]);
@@ -67,7 +68,7 @@ define("slycat-remote-browser", ["slycat-server-root", "slycat-web-client", "kno
 
       function path_dirname(path)
       {
-        var new_path = path.replace(/\/\.?(\w|\-)*\/?$/, "");
+        var new_path = path.replace(/\/\.?(\w|\-|\.)*\/?$/, "");
         if(new_path == "")
           new_path = "/";
         return new_path;
@@ -134,36 +135,39 @@ define("slycat-remote-browser", ["slycat-server-root", "slycat-web-client", "kno
           path : path,
           success : function(results)
           {
+            $('.slycat-remote-browser .path .alert').fadeOut(400);
+            $('.slycat-remote-browser .form-group.path').removeClass('has-error');
+            $('.slycat-remote-browser-files').fadeOut(0);
+
             localStorage.setItem("slycat-remote-browser-path-" + component.hostname(), path);
 
             component.path(path);
+            component.path_input(path);
+
             var files = []
             if(path != "/")
               files.push({type: "", name: "..", size: "", mtime: "", mime_type:"application/x-directory"});
             for(var i = 0; i != results.names.length; ++i)
               files.push({name:results.names[i], size:results.sizes[i], type:results.types[i], mtime:results.mtimes[i], mime_type:results["mime-types"][i]});
             mapping.fromJS(files, component.raw_files);
             $('.slycat-remote-browser-files').scrollTop(0);
+            $('.slycat-remote-browser-files').fadeIn(400);
           },
           error : function(results)
           {
-            var key = "slycat-remote-browser-path-" + component.hostname();
-            var current_path = localStorage.getItem(key);
-
-            if(current_path == "/")
-              return;
-
-            current_path = current_path || "/"
+            if(component.path() != component.path_input())
+            {
+              $('.slycat-remote-browser .form-group.path').addClass('has-error');
+            }
 
-            localStorage.setItem(key, "/");
-            component.browse(current_path);
+            $('.slycat-remote-browser .path .alert').fadeIn(400);
           }
         });
       }
 
       component.browse_path = function(formElement)
       {
-        component.browse(component.path());
+        component.browse(component.path_input());
       }
 
       component.session_exists.subscribe(function(new_session_exists)

diff --git a/web-server/templates/slycat-remote-browser.html b/web-server/templates/slycat-remote-browser.html
@@ -1,13 +1,13 @@
 <div class="slycat-remote-browser">
   <form class="form-horizontal" data-bind="submit: browse_path">
-    <div class="form-group">
+    <div class="form-group path">
       <label class="col-sm-2 control-label" for="slycat-remote-browser-path"
         data-bind="text: hostname()"
       ></label>
       <div class="col-sm-10">
         <div class="input-group">
           <input type="text" class="form-control" id="slycat-remote-browser-path" 
-            data-bind="value: path"
+            data-bind="value: path_input"
           >
           <span class="input-group-btn">
             <button class="btn btn-default" type="button"
@@ -20,6 +20,7 @@
             <button class="btn btn-default" type="submit">Go</button>
           </span>
         </div>
+        <div class="alert alert-danger" role="alert">Oops, that path is not accessible. Please try again.</div>
       </div>
     </div>
   </form>