X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=frontend%2Fjs%2Fapp.js;h=0875f1459e0d820299ab9cb075e91c1ee9256dbd;hb=c667d125938bbf6e89c89572646cd06f3e2bffd3;hp=e0464f8191906afd0c57334f49461b9d93ad3ce8;hpb=fea6789c72b7ef5b69281d8866f4ae0475135d4a;p=perso%2FImmae%2FProjets%2FNodejs%2FSurfer.git

diff --git a/frontend/js/app.js b/frontend/js/app.js
index e0464f8..0875f14 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -1,37 +1,54 @@
 (function () {
 'use strict';
 
+function getProfile(accessToken, callback) {
+    callback = callback || function (error) { if (error) console.error(error); };
+
+    superagent.get('/api/profile').query({ access_token: accessToken }).end(function (error, result) {
+        app.busy = false;
+
+        if (error && !error.response) return callback(error);
+        if (result.statusCode !== 200) {
+            delete localStorage.accessToken;
+            return callback('Invalid access token');
+        }
+
+        localStorage.accessToken = accessToken;
+        app.session.username = result.body.username;
+        app.session.valid = true;
+
+        callback();
+    });
+}
+
 function login(username, password) {
     username = username || app.loginData.username;
     password = password || app.loginData.password;
 
     app.busy = true;
 
-    superagent.get('/api/files/').query({ username: username, password: password }).end(function (error, result) {
+    superagent.post('/api/login').send({ username: username, password: password }).end(function (error, result) {
         app.busy = false;
 
         if (error) return console.error(error);
         if (result.statusCode === 401) return console.error('Invalid credentials');
 
-        app.session.valid = true;
-        app.session.username = username;
-        app.session.password = password;
-
-        // clearly not the best option
-        localStorage.username = username;
-        localStorage.password = password;
+        getProfile(result.body.accessToken, function (error) {
+            if (error) return console.error(error);
 
-        loadDirectory(window.location.hash.slice(1));
+            loadDirectory(window.location.hash.slice(1));
+        });
     });
 }
 
 function logout() {
-    app.session.valid = false;
-    app.session.username = null;
-    app.session.password = null;
+    superagent.post('/api/logout').query({ access_token: localStorage.accessToken }).end(function (error) {
+        if (error) console.error(error);
+
+        app.session.valid = false;
 
-    delete localStorage.username;
-    delete localStorage.password;
+        delete localStorage.accessToken;
+    });
 }
 
 function sanitize(filePath) {
@@ -77,7 +94,7 @@ function loadDirectory(filePath) {
 
     filePath = filePath ? sanitize(filePath) : '/';
 
-    superagent.get('/api/files/' + encode(filePath)).query({ username: app.session.username, password: app.session.password }).end(function (error, result) {
+    superagent.get('/api/files/' + encode(filePath)).query({ access_token: localStorage.accessToken }).end(function (error, result) {
         app.busy = false;
 
         if (result && result.statusCode === 401) return logout();
@@ -118,55 +135,65 @@ function open(entry) {
     window.open(encode(path));
 }
 
+function download(entry) {
+    if (entry.isDirectory) return;
+
+    window.location.href = encode('/api/files/' + sanitize(app.path + '/' + entry.filePath)) + '?access_token=' + localStorage.accessToken;
+}
+
 function up() {
     window.location.hash = sanitize(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/'));
 }
 
+function uploadFiles(files) {
+    if (!files || !files.length) return;
+
+    app.uploadStatus = {
+        busy: true,
+        count: files.length,
+        done: 0,
+        percentDone: 0
+    };
+
+    function uploadFile(file) {
+        var path = encode(sanitize(app.path + '/' + file.name));
+
+        var formData = new FormData();
+        formData.append('file', file);
+
+        superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken }).send(formData).end(function (error, result) {
+            if (result && result.statusCode === 401) return logout();
+            if (result && result.statusCode !== 201) console.error('Error uploading file: ', result.statusCode);
+            if (error) console.error(error);
+
+            app.uploadStatus.done += 1;
+            app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100);
+
+            if (app.uploadStatus.done >= app.uploadStatus.count) {
+                app.uploadStatus = {
+                    busy: false,
+                    count: 0,
+                    done: 0,
+                    percentDone: 100
+                };
+
+                refresh();
+            }
+        });
+    }
+
+    for(var i = 0; i < app.uploadStatus.count; ++i) {
+        uploadFile(files[i]);
+    }
+}
+
 function upload() {
     $(app.$els.upload).on('change', function () {
 
         // detach event handler
         $(app.$els.upload).off('change');
 
-        app.uploadStatus = {
-            busy: true,
-            count: app.$els.upload.files.length,
-            done: 0,
-            percentDone: 0
-        };
-
-        function uploadFile(file) {
-            var path = encode(sanitize(app.path + '/' + file.name));
-
-            var formData = new FormData();
-            formData.append('file', file);
-
-            superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password }).send(formData).end(function (error, result) {
-                if (result && result.statusCode === 401) return logout();
-                if (result && result.statusCode !== 201) console.error('Error uploading file: ', result.statusCode);
-                if (error) console.error(error);
-
-                app.uploadStatus.done += 1;
-                app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100);
-
-                console.log(Math.round(app.uploadStatus.done / app.uploadStatus.count * 100))
-
-                if (app.uploadStatus.done >= app.uploadStatus.count) {
-                    app.uploadStatus = {
-                        busy: false,
-                        count: 0,
-                        done: 0,
-                        percentDone: 100
-                    };
-
-                    refresh();
-                }
-            });
-        }
-
-        for(var i = 0; i < app.uploadStatus.count; ++i) {
-            uploadFile(app.$els.upload.files[i]);
-        }
+        uploadFiles(app.$els.upload.files || []);
     });
 
     // reset the form first to make the change handler retrigger even on the same file selected
@@ -185,7 +212,7 @@ function del(entry) {
 
     var path = encode(sanitize(app.path + '/' + entry.filePath));
 
-    superagent.del('/api/files' + path).query({ username: app.session.username, password: app.session.password, recursive: true }).end(function (error, result) {
+    superagent.del('/api/files' + path).query({ access_token: localStorage.accessToken, recursive: true }).end(function (error, result) {
         app.busy = false;
 
         if (result && result.statusCode === 401) return logout();
@@ -198,6 +225,33 @@ function del(entry) {
     });
 }
 
+function renameAsk(entry) {
+    app.renameData.entry = entry;
+    app.renameData.error = null;
+    app.renameData.newFilePath = entry.filePath;
+
+    $('#modalRename').modal('show');
+}
+
+function rename(data) {
+    app.busy = true;
+
+    var path = encode(sanitize(app.path + '/' + data.entry.filePath));
+    var newFilePath = sanitize(app.path + '/' + data.newFilePath);
+
+    superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) {
+        app.busy = false;
+
+        if (result && result.statusCode === 401) return logout();
+        if (result && result.statusCode !== 200) return console.error('Error renaming file: ', result.statusCode);
+        if (error) return console.error(error);
+
+        refresh();
+
+        $('#modalRename').modal('hide');
+    });
+}
+
 function createDirectoryAsk() {
     $('#modalcreateDirectory').modal('show');
     app.createDirectoryData = '';
@@ -210,7 +264,7 @@ function createDirectory(name) {
 
     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) {
+    superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken, directory: true }).end(function (error, result) {
         app.busy = false;
 
         if (result && result.statusCode === 401) return logout();
@@ -232,6 +286,15 @@ function createDirectory(name) {
     });
 }
 
+function dragOver(event) {
+    event.preventDefault();
+}
+
+function drop(event) {
+    event.preventDefault();
+    uploadFiles(event.dataTransfer.files || []);
+}
+
 Vue.filter('prettyDate', function (value) {
     var d = new Date(value);
     return d.toDateString();
@@ -258,6 +321,11 @@ var app = new Vue({
         },
         loginData: {},
         deleteData: {},
+        renameData: {
+            entry: {},
+            error: null,
+            newFilePath: ''
+        },
         createDirectoryData: '',
         createDirectoryError: null,
         entries: []
@@ -267,18 +335,27 @@ var app = new Vue({
         logout: logout,
         loadDirectory: loadDirectory,
         open: open,
+        download: download,
         up: up,
         upload: upload,
         delAsk: delAsk,
         del: del,
+        renameAsk: renameAsk,
+        rename: rename,
         createDirectoryAsk: createDirectoryAsk,
-        createDirectory: createDirectory
+        createDirectory: createDirectory,
+        drop: drop,
+        dragOver: dragOver
     }
 });
 
 window.app = app;
 
-login(localStorage.username, localStorage.password);
+getProfile(localStorage.accessToken, function (error) {
+    if (error) return console.error(error);
+
+    loadDirectory(window.location.hash.slice(1));
+});
 
 $(window).on('hashchange', function () {
     loadDirectory(window.location.hash.slice(1));