Carry over public.html fixes to index.html

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

diff --git a/frontend/js/app.js b/frontend/js/app.js
index e446db3dd374530f2309f1b8fe6c772e4ff2f70e..f532bc1e508515a9196329474af9e53450644ce9 100644 (file)
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -23,14 +23,14 @@ function asyncForEach(items, handler, callback) {
     })();
 }
 
-function getProfile(accessToken, callback) {
+function initWithToken(accessToken) {
     superagent.get('/api/profile').query({ access_token: accessToken }).end(function (error, result) {
         app.ready = true;
 
-        if (error && !error.response) return callback(error);
+        if (error && !error.response) return console.error(error);
         if (result.statusCode !== 200) {
             delete localStorage.accessToken;
-            return callback('Invalid access token');
+            return;
         }
 
         localStorage.accessToken = accessToken;
@@ -42,7 +42,9 @@ function getProfile(accessToken, callback) {
 
             app.folderListingEnabled = !!result.body.folderListingEnabled;
 
-            callback();
+            loadDirectory(decode(window.location.hash.slice(1)));
+
+            app.refreshAccessTokens();
         });
     });
 }
@@ -116,6 +118,8 @@ function loadDirectory(filePath) {
         app.entries = result.body.entries.map(function (entry) {
             entry.previewUrl = getPreviewUrl(entry, filePath);
             entry.extension = getExtension(entry);
+            entry.rename = false;
+            entry.filePathNew = entry.filePath;
             return entry;
         });
         app.path = filePath;
@@ -131,7 +135,10 @@ function loadDirectory(filePath) {
     });
 }
 
-function open(row, event, column) {
+function open(row, column, event) {
+    // ignore item open on row clicks if we are renaming this entry
+    if (row.rename) return;
+
     var path = sanitize(app.path + '/' + row.filePath);
 
     if (row.isDirectory) {
@@ -139,7 +146,19 @@ function open(row, event, column) {
         return;
     }
 
-    window.open(encode(path));
+    app.activeEntry = row;
+    app.activeEntry.fullPath = encode(sanitize(app.path + '/' + row.filePath));
+    app.previewDrawerVisible = true
+
+    // need to wait for DOM element to exist
+    setTimeout(function () {
+        $('iframe').on('load', function (e) {
+            if (!e.target.contentWindow.document.body) return;
+
+            e.target.contentWindow.document.body.style.display = 'flex'
+            e.target.contentWindow.document.body.style.justifyContent = 'center'
+        });
+    }, 0);
 }
 
 function uploadFiles(files) {
@@ -254,6 +273,7 @@ var app = new Vue({
     data: {
         ready: false,
         busy: false,
+        origin: window.location.origin,
         uploadStatus: {
             busy: false,
             count: 0,
@@ -272,7 +292,11 @@ var app = new Vue({
             password: '',
             busy: false
         },
-        entries: []
+        previewDrawerVisible: false,
+        activeEntry: {},
+        entries: [],
+        accessTokens: [],
+        accessTokensDialogVisible: false
     },
     methods: {
         onLogin: function () {
@@ -286,11 +310,7 @@ var app = new Vue({
                 if (error && !result) return that.$message.error(error.message);
                 if (result.statusCode === 401) return that.$message.error('Wrong username or password');
 
-                getProfile(result.body.accessToken, function (error) {
-                    if (error) return console.error(error);
-
-                    loadDirectory(decode(window.location.hash.slice(1)));
-                });
+                initWithToken(result.body.accessToken);
             });
         },
         onOptionsMenu: function (command) {
@@ -310,6 +330,8 @@ var app = new Vue({
                   }).then(function () {}).catch(function () {});
             } else if (command === 'logout') {
                 logout();
+            } else if (command === 'apiAccess') {
+                this.accessTokensDialogVisible = true;
             }
         },
         onDownload: function (entry) {
@@ -358,22 +380,42 @@ var app = new Vue({
                 });
             }).catch(function () {});
         },
-        onRename: function (entry) {
+        onRename: function (entry, scope) {
+            if (entry.rename) return entry.rename = false;
+
+            entry.rename = true;
+
+            Vue.nextTick(function () {
+                var elem = document.getElementById('filePathRenameInputId-' + scope.$index);
+                elem.focus();
+
+                if (typeof elem.selectionStart != "undefined") {
+                    elem.selectionStart = 0;
+                    elem.selectionEnd = entry.filePath.lastIndexOf('.');
+                }
+            });
+        },
+        onRenameEnd: function (entry) {
+            entry.rename = false;
+            entry.filePathNew = entry.filePath;
+        },
+        onRenameSubmit: function (entry) {
             var that = this;
 
-            var title = 'Rename ' + entry.filePath;
-            this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new filename', inputValue: entry.filePath }).then(function (data) {
-                var path = encode(sanitize(that.path + '/' + entry.filePath));
-                var newFilePath = sanitize(that.path + '/' + data.value);
+            entry.rename = false;
 
-                superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) {
-                    if (result && result.statusCode === 401) return logout();
-                    if (result && result.statusCode !== 200) return that.$message.error('Error renaming file: ' + result.statusCode);
-                    if (error) return that.$message.error(error.message);
+            if (entry.filePathNew === entry.filePath) return;
 
-                    refresh();
-                });
-            }).catch(function () {});
+            var path = encode(sanitize(this.path + '/' + entry.filePath));
+            var newFilePath = sanitize(this.path + '/' + entry.filePathNew);
+
+            superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) {
+                if (result && result.statusCode === 401) return logout();
+                if (result && result.statusCode !== 200) return that.$message.error('Error renaming file: ' + result.statusCode);
+                if (error) return that.$message.error(error.message);
+
+                entry.filePath = entry.filePathNew;
+            });
         },
         onNewFolder: function () {
             var that = this;
@@ -393,6 +435,42 @@ var app = new Vue({
                 });
             }).catch(function () {});
         },
+        refreshAccessTokens: function () {
+            var that = this;
+
+            superagent.get('/api/tokens').query({ access_token: localStorage.accessToken }).end(function (error, result) {
+                if (error && !result) return that.$message.error(error.message);
+
+                that.accessTokens = result.body.accessTokens;
+            });
+        },
+        onCopyAccessToken: function (event) {
+            event.target.select();
+            document.execCommand('copy');
+
+            this.$message({ type: 'success', message: 'Access token copied to clipboard' });
+        },
+        onCreateAccessToken: function () {
+            var that = this;
+
+            superagent.post('/api/tokens').query({ access_token: localStorage.accessToken }).end(function (error, result) {
+                if (error && !result) return that.$message.error(error.message);
+
+                that.refreshAccessTokens();
+            });
+        },
+        onDeleteAccessToken: function (token) {
+            var that = this;
+
+            this.$confirm('All actions from apps using this token will fail!', 'Really delete this access token?', { confirmButtonText: 'Yes Delete', cancelButtonText: 'No' }).then(function () {
+                superagent.delete('/api/tokens/' + token).query({ access_token: localStorage.accessToken }).end(function (error, result) {
+                    if (error && !result) return that.$message.error(error.message);
+
+                    that.refreshAccessTokens();
+                });
+            }).catch(function () {});
+
+        },
         prettyDate: function (row, column, cellValue, index) {
             var date = new Date(cellValue),
             diff = (((new Date()).getTime() - date.getTime()) / 1000),
@@ -426,11 +504,7 @@ var app = new Vue({
     }
 });
 
-getProfile(localStorage.accessToken, function (error) {
-    if (error) return console.error(error);
-
-    loadDirectory(decode(window.location.hash.slice(1)));
-});
+initWithToken(localStorage.accessToken);
 
 $(window).on('hashchange', function () {
     loadDirectory(decode(window.location.hash.slice(1)));