ensure we deal with encoding of paths correctly on the client

[perso/Immae/Projets/Nodejs/Surfer.git] / app / js / app.js

diff --git a/app/js/app.js b/app/js/app.js
index 872148670ffcaa041733c241e506878207034772..b26a2a6c037b86833af219b24521bd1834ca5d6a 100644 (file)
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -21,7 +21,7 @@ function login(username, password) {
         localStorage.username = username;
         localStorage.password = password;
 
-        loadDirectory(app.path);
+        loadDirectory(window.location.hash.slice(1));
     });
 }
 
@@ -43,6 +43,10 @@ function encode(filePath) {
     return filePath.split('/').map(encodeURIComponent).join('/');
 }
 
+function decode(filePath) {
+    return filePath.split('/').map(decodeURIComponent).join('/');
+}
+
 var mimeTypes = {
     images: [ '.png', '.jpg', '.jpeg', '.tiff', '.gif' ],
     text: [ '.txt', '.md' ],
@@ -78,16 +82,19 @@ function loadDirectory(filePath) {
     superagent.get('/api/files/' + filePath).query({ username: app.session.username, password: app.session.password }).end(function (error, result) {
         app.busy = false;
 
+        if (result && result.statusCode === 401) return logout();
         if (error) return console.error(error);
-        if (result.statusCode === 401) return logout();
 
-        result.body.entries.sort(function (a, b) { return a.isDirectory && b.isFile ? -1 : 1 });
+        result.body.entries.sort(function (a, b) { return a.isDirectory && b.isFile ? -1 : 1; });
         app.entries = result.body.entries.map(function (entry) {
             entry.previewUrl = getPreviewUrl(entry, filePath);
             return entry;
         });
         app.path = filePath;
-        app.pathParts = filePath.split('/').filter(function (e) { return !!e; });
+        app.pathParts = decode(filePath).split('/').filter(function (e) { return !!e; });
+
+        // update in case this was triggered from code
+        window.location.hash = app.path;
 
         Vue.nextTick(function () {
             $(function () {
@@ -100,13 +107,16 @@ function loadDirectory(filePath) {
 function open(entry) {
     var path = sanitize(app.path + '/' + entry.filePath);
 
-    if (entry.isDirectory) return loadDirectory(path);
+    if (entry.isDirectory) {
+        window.location.hash = path;
+        return;
+    }
 
-    window.open(path);
+    window.open(encode(path));
 }
 
 function up() {
-    loadDirectory(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/'));
+    window.location.hash = sanitize(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/'));
 }
 
 function upload() {
@@ -125,13 +135,17 @@ function upload() {
         superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password }).send(formData).end(function (error, result) {
             app.busy = false;
 
+            if (result && result.statusCode === 401) return logout();
+            if (result && result.statusCode !== 201) return console.error('Error uploading file: ', result.statusCode);
             if (error) return console.error(error);
-            if (result.statusCode !== 201) return console.error('Error uploading file: ', result.statusCode);
 
             refresh();
         });
     });
 
+    // reset the form first to make the change handler retrigger even on the same file selected
+    $('#fileUploadForm')[0].reset();
+
     app.$els.upload.click();
 }
 
@@ -148,8 +162,9 @@ function del(entry) {
     superagent.del('/api/files' + path).query({ username: app.session.username, password: app.session.password, recursive: true }).end(function (error, result) {
         app.busy = false;
 
+        if (result && result.statusCode === 401) return logout();
+        if (result && result.statusCode !== 200) return console.error('Error deleting file: ', result.statusCode);
         if (error) return console.error(error);
-        if (result.statusCode !== 200) return console.error('Error deleting file: ', result.statusCode);
 
         refresh();
 
@@ -160,18 +175,29 @@ function del(entry) {
 function createDirectoryAsk() {
     $('#modalcreateDirectory').modal('show');
     app.createDirectoryData = '';
+    app.createDirectoryError = null;
 }
 
 function createDirectory(name) {
     app.busy = true;
+    app.createDirectoryError = null;
 
     var path = encode(sanitize(app.path + '/' + name));
 
     superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password, directory: true }).end(function (error, result) {
         app.busy = false;
 
+        if (result && result.statusCode === 401) return logout();
+        if (result && result.statusCode === 403) {
+            app.createDirectoryError = 'Name not allowed';
+            return;
+        }
+        if (result && result.statusCode === 409) {
+            app.createDirectoryError = 'Directory already exists';
+            return;
+        }
+        if (result && result.statusCode !== 201) return console.error('Error creating directory: ', result.statusCode);
         if (error) return console.error(error);
-        if (result.statusCode !== 201) return console.error('Error creating directory: ', result.statusCode);
 
         app.createDirectoryData = '';
         refresh();
@@ -201,6 +227,7 @@ var app = new Vue({
         loginData: {},
         deleteData: {},
         createDirectoryData: '',
+        createDirectoryError: null,
         entries: []
     },
     methods: {
@@ -217,6 +244,19 @@ var app = new Vue({
     }
 });
 
+window.app = app;
+
 login(localStorage.username, localStorage.password);
 
+$(window).on('hashchange', function () {
+    loadDirectory(window.location.hash.slice(1));
+});
+
+// setup all the dialog focus handling
+['modalcreateDirectory'].forEach(function (id) {
+    $('#' + id).on('shown.bs.modal', function () {
+        $(this).find("[autofocus]:first").focus();
+    });
+});
+
 })();