frontend/js/app.js

   1 (function () {
   2 'use strict';
   3
   4 /* global superagent */
   5 /* global Vue */
   6 /* global $ */
   7 /* global filesize */
   8
   9 // poor man's async
  10 function asyncForEach(items, handler, callback) {
  11     var cur = 0;
  12
  13     if (items.length === 0) return callback();
  14
  15     (function iterator() {
  16         handler(items[cur], function (error) {
  17             if (error) return callback(error);
  18             if (cur >= items.length-1) return callback();
  19             ++cur;
  20
  21             iterator();
  22         });
  23     })();
  24 }
  25
  26 function initWithToken(accessToken) {
  27     superagent.get('/api/profile').query({ access_token: accessToken }).end(function (error, result) {
  28         app.ready = true;
  29
  30         if (error && !error.response) return console.error(error);
  31         if (result.statusCode !== 200) {
  32             delete localStorage.accessToken;
  33             return;
  34         }
  35
  36         localStorage.accessToken = accessToken;
  37         app.session.username = result.body.username;
  38         app.session.valid = true;
  39
  40         superagent.get('/api/settings').query({ access_token: localStorage.accessToken }).end(function (error, result) {
  41             if (error) console.error(error);
  42
  43             app.folderListingEnabled = !!result.body.folderListingEnabled;
  44
  45             loadDirectory(decode(window.location.hash.slice(1)));
  46
  47             app.refreshAccessTokens();
  48         });
  49     });
  50 }
  51
  52 function sanitize(filePath) {
  53     filePath = '/' + filePath;
  54     return filePath.replace(/\/+/g, '/');
  55 }
  56
  57 function encode(filePath) {
  58     return filePath.split('/').map(encodeURIComponent).join('/');
  59 }
  60
  61 function decode(filePath) {
  62     return filePath.split('/').map(decodeURIComponent).join('/');
  63 }
  64
  65 var mimeTypes = {
  66     images: [ '.png', '.jpg', '.jpeg', '.tiff', '.gif' ],
  67     text: [ '.txt', '.md' ],
  68     pdf: [ '.pdf' ],
  69     html: [ '.html', '.htm', '.php' ],
  70     video: [ '.mp4', '.mpg', '.mpeg', '.ogg', '.mkv', '.avi', '.mov' ]
  71 };
  72
  73 function getPreviewUrl(entry, basePath) {
  74     var path = '/_admin/img/';
  75
  76     if (entry.isDirectory) return path + 'directory.png';
  77     if (mimeTypes.images.some(function (e) { return entry.filePath.endsWith(e); })) return sanitize(basePath + '/' + entry.filePath);
  78     if (mimeTypes.text.some(function (e) { return entry.filePath.endsWith(e); })) return path +'text.png';
  79     if (mimeTypes.pdf.some(function (e) { return entry.filePath.endsWith(e); })) return path + 'pdf.png';
  80     if (mimeTypes.html.some(function (e) { return entry.filePath.endsWith(e); })) return path + 'html.png';
  81     if (mimeTypes.video.some(function (e) { return entry.filePath.endsWith(e); })) return path + 'video.png';
  82
  83     return path + 'unknown.png';
  84 }
  85
  86 // simple extension detection, does not work with double extension like .tar.gz
  87 function getExtension(entry) {
  88     if (entry.isFile) return entry.filePath.slice(entry.filePath.lastIndexOf('.') + 1);
  89     return '';
  90 }
  91
  92 function refresh() {
  93     loadDirectory(app.path);
  94 }
  95
  96 function logout() {
  97     superagent.post('/api/logout').query({ access_token: localStorage.accessToken }).end(function (error) {
  98         if (error) console.error(error);
  99
 100         app.session.valid = false;
 101
 102         delete localStorage.accessToken;
 103     });
 104 }
 105
 106 function loadDirectory(filePath) {
 107     app.busy = true;
 108
 109     filePath = filePath ? sanitize(filePath) : '/';
 110
 111     superagent.get('/api/files/' + encode(filePath)).query({ access_token: localStorage.accessToken }).end(function (error, result) {
 112         app.busy = false;
 113
 114         if (result && result.statusCode === 401) return logout();
 115         if (error) return console.error(error);
 116
 117         result.body.entries.sort(function (a, b) { return a.isDirectory && b.isFile ? -1 : 1; });
 118         app.entries = result.body.entries.map(function (entry) {
 119             entry.previewUrl = getPreviewUrl(entry, filePath);
 120             entry.extension = getExtension(entry);
 121             entry.rename = false;
 122             entry.filePathNew = entry.filePath;
 123             return entry;
 124         });
 125         app.path = filePath;
 126         app.pathParts = decode(filePath).split('/').filter(function (e) { return !!e; }).map(function (e, i, a) {
 127             return {
 128                 name: e,
 129                 link: '#' + sanitize('/' + a.slice(0, i).join('/') + '/' + e)
 130             };
 131         });
 132
 133         // update in case this was triggered from code
 134         window.location.hash = app.path;
 135     });
 136 }
 137
 138 function open(row, column, event) {
 139     // ignore item open on row clicks if we are renaming this entry
 140     if (row.rename) return;
 141
 142     var path = sanitize(app.path + '/' + row.filePath);
 143
 144     if (row.isDirectory) {
 145         window.location.hash = path;
 146         return;
 147     }
 148
 149     app.activeEntry = row;
 150     app.activeEntry.fullPath = encode(sanitize(app.path + '/' + row.filePath));
 151     app.previewDrawerVisible = true
 152
 153     // need to wait for DOM element to exist
 154     setTimeout(function () {
 155         $('iframe').on('load', function (e) {
 156             if (!e.target.contentWindow.document.body) return;
 157
 158             e.target.contentWindow.document.body.style.display = 'flex'
 159             e.target.contentWindow.document.body.style.justifyContent = 'center'
 160         });
 161     }, 0);
 162 }
 163
 164 function uploadFiles(files) {
 165     if (!files || !files.length) return;
 166
 167     app.uploadStatus.busy = true;
 168     app.uploadStatus.count = files.length;
 169     app.uploadStatus.size = 0;
 170     app.uploadStatus.done = 0;
 171     app.uploadStatus.percentDone = 0;
 172
 173     for (var i = 0; i < files.length; ++i) {
 174         app.uploadStatus.size += files[i].size;
 175     }
 176
 177     asyncForEach(files, function (file, callback) {
 178         var path = encode(sanitize(app.path + '/' + (file.webkitRelativePath || file.name)));
 179
 180         var formData = new FormData();
 181         formData.append('file', file);
 182
 183         var finishedUploadSize = app.uploadStatus.done;
 184
 185         superagent.post('/api/files' + path)
 186           .query({ access_token: localStorage.accessToken })
 187           .send(formData)
 188           .on('progress', function (event) {
 189             // only handle upload events
 190             if (!(event.target instanceof XMLHttpRequestUpload)) return;
 191
 192             app.uploadStatus.done = finishedUploadSize + event.loaded;
 193             var tmp = Math.round(app.uploadStatus.done / app.uploadStatus.size * 100);
 194             app.uploadStatus.percentDone = tmp > 100 ? 100 : tmp;
 195         }).end(function (error, result) {
 196             if (result && result.statusCode === 401) return logout();
 197             if (result && result.statusCode !== 201) return callback('Error uploading file: ', result.statusCode);
 198             if (error) return callback(error);
 199
 200             callback();
 201         });
 202     }, function (error) {
 203         if (error) console.error(error);
 204
 205         app.uploadStatus.busy = false;
 206         app.uploadStatus.count = 0;
 207         app.uploadStatus.size = 0;
 208         app.uploadStatus.done = 0;
 209         app.uploadStatus.percentDone = 100;
 210
 211         refresh();
 212     });
 213 }
 214
 215 function dragOver(event) {
 216     event.stopPropagation();
 217     event.preventDefault();
 218     event.dataTransfer.dropEffect = 'copy';
 219 }
 220
 221 function drop(event) {
 222     event.stopPropagation();
 223     event.preventDefault();
 224
 225     if (!event.dataTransfer.items[0]) return;
 226
 227     // figure if a folder was dropped on a modern browser, in this case the first would have to be a directory
 228     var folderItem;
 229     try {
 230         folderItem = event.dataTransfer.items[0].webkitGetAsEntry();
 231         if (folderItem.isFile) return uploadFiles(event.dataTransfer.files);
 232     } catch (e) {
 233         return uploadFiles(event.dataTransfer.files);
 234     }
 235
 236     // if we got here we have a folder drop and a modern browser
 237     // now traverse the folder tree and create a file list
 238     app.uploadStatus.busy = true;
 239     app.uploadStatus.uploadListCount = 0;
 240
 241     var fileList = [];
 242     function traverseFileTree(item, path, callback) {
 243         if (item.isFile) {
 244             // Get file
 245             item.file(function (file) {
 246                 fileList.push(file);
 247                 ++app.uploadStatus.uploadListCount;
 248                 callback();
 249             });
 250         } else if (item.isDirectory) {
 251             // Get folder contents
 252             var dirReader = item.createReader();
 253             dirReader.readEntries(function (entries) {
 254                 asyncForEach(entries, function (entry, callback) {
 255                     traverseFileTree(entry, path + item.name + '/', callback);
 256                 }, callback);
 257             });
 258         }
 259     }
 260
 261     traverseFileTree(folderItem, '', function (error) {
 262         app.uploadStatus.busy = false;
 263         app.uploadStatus.uploadListCount = 0;
 264
 265         if (error) return console.error(error);
 266
 267         uploadFiles(fileList);
 268     });
 269 }
 270
 271 var app = new Vue({
 272     el: '#app',
 273     data: {
 274         ready: false,
 275         busy: false,
 276         origin: window.location.origin,
 277         uploadStatus: {
 278             busy: false,
 279             count: 0,
 280             done: 0,
 281             percentDone: 50,
 282             uploadListCount: 0
 283         },
 284         path: '/',
 285         pathParts: [],
 286         session: {
 287             valid: false
 288         },
 289         folderListingEnabled: false,
 290         loginData: {
 291             username: '',
 292             password: '',
 293             busy: false
 294         },
 295         previewDrawerVisible: false,
 296         activeEntry: {},
 297         entries: [],
 298         accessTokens: [],
 299         accessTokensDialogVisible: false
 300     },
 301     methods: {
 302         onLogin: function () {
 303             var that = this;
 304
 305             that.loginData.busy = true;
 306
 307             superagent.post('/api/login').send({ username: that.loginData.username, password: that.loginData.password }).end(function (error, result) {
 308                 that.loginData.busy = false;
 309
 310                 if (error && !result) return that.$message.error(error.message);
 311                 if (result.statusCode === 401) return that.$message.error('Wrong username or password');
 312
 313                 initWithToken(result.body.accessToken);
 314             });
 315         },
 316         onOptionsMenu: function (command) {
 317             if (command === 'folderListing') {
 318                 superagent.put('/api/settings').send({ folderListingEnabled: this.folderListingEnabled }).query({ access_token: localStorage.accessToken }).end(function (error) {
 319                     if (error) console.error(error);
 320                 });
 321             } else if (command === 'about') {
 322                 this.$msgbox({
 323                     title: 'About Surfer',
 324                     message: 'Surfer is a static file server written by <a href="https://cloudron.io" target="_blank">Cloudron</a>.<br/><br/>The source code is licensed under MIT and available <a href="https://git.cloudron.io/cloudron/surfer" target="_blank">here</a>.',
 325                     dangerouslyUseHTMLString: true,
 326                     confirmButtonText: 'OK',
 327                     showCancelButton: false,
 328                     type: 'info',
 329                     center: true
 330                   }).then(function () {}).catch(function () {});
 331             } else if (command === 'logout') {
 332                 logout();
 333             } else if (command === 'apiAccess') {
 334                 this.accessTokensDialogVisible = true;
 335             }
 336         },
 337         onDownload: function (entry) {
 338             if (entry.isDirectory) return;
 339             window.location.href = encode('/api/files/' + sanitize(this.path + '/' + entry.filePath)) + '?access_token=' + localStorage.accessToken;
 340         },
 341         onUpload: function () {
 342             var that = this;
 343
 344             $(this.$refs.upload).on('change', function () {
 345                 // detach event handler
 346                 $(that.$refs.upload).off('change');
 347                 uploadFiles(that.$refs.upload.files || []);
 348             });
 349
 350             // reset the form first to make the change handler retrigger even on the same file selected
 351             this.$refs.upload.value = '';
 352             this.$refs.upload.click();
 353         },
 354         onUploadFolder: function () {
 355             var that = this;
 356
 357             $(this.$refs.uploadFolder).on('change', function () {
 358                 // detach event handler
 359                 $(that.$refs.uploadFolder).off('change');
 360                 uploadFiles(that.$refs.uploadFolder.files || []);
 361             });
 362
 363             // reset the form first to make the change handler retrigger even on the same file selected
 364             this.$refs.uploadFolder.value = '';
 365             this.$refs.uploadFolder.click();
 366         },
 367         onDelete: function (entry) {
 368             var that = this;
 369
 370             var title = 'Really delete ' + (entry.isDirectory ? 'folder ' : '') + entry.filePath;
 371             this.$confirm('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No' }).then(function () {
 372                 var path = encode(sanitize(that.path + '/' + entry.filePath));
 373
 374                 superagent.del('/api/files' + path).query({ access_token: localStorage.accessToken, recursive: true }).end(function (error, result) {
 375                     if (result && result.statusCode === 401) return logout();
 376                     if (result && result.statusCode !== 200) return that.$message.error('Error deleting file: ' + result.statusCode);
 377                     if (error) return that.$message.error(error.message);
 378
 379                     refresh();
 380                 });
 381             }).catch(function () {});
 382         },
 383         onRename: function (entry, scope) {
 384             if (entry.rename) return entry.rename = false;
 385
 386             entry.rename = true;
 387
 388             Vue.nextTick(function () {
 389                 var elem = document.getElementById('filePathRenameInputId-' + scope.$index);
 390                 elem.focus();
 391
 392                 if (typeof elem.selectionStart != "undefined") {
 393                     elem.selectionStart = 0;
 394                     elem.selectionEnd = entry.filePath.lastIndexOf('.');
 395                 }
 396             });
 397         },
 398         onRenameEnd: function (entry) {
 399             entry.rename = false;
 400             entry.filePathNew = entry.filePath;
 401         },
 402         onRenameSubmit: function (entry) {
 403             var that = this;
 404
 405             entry.rename = false;
 406
 407             if (entry.filePathNew === entry.filePath) return;
 408
 409             var path = encode(sanitize(this.path + '/' + entry.filePath));
 410             var newFilePath = sanitize(this.path + '/' + entry.filePathNew);
 411
 412             superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) {
 413                 if (result && result.statusCode === 401) return logout();
 414                 if (result && result.statusCode !== 200) return that.$message.error('Error renaming file: ' + result.statusCode);
 415                 if (error) return that.$message.error(error.message);
 416
 417                 entry.filePath = entry.filePathNew;
 418             });
 419         },
 420         onNewFolder: function () {
 421             var that = this;
 422
 423             var title = 'Create New Folder';
 424             this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new foldername' }).then(function (data) {
 425                 var path = encode(sanitize(that.path + '/' + data.value));
 426
 427                 superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken, directory: true }).end(function (error, result) {
 428                     if (result && result.statusCode === 401) return logout();
 429                     if (result && result.statusCode === 403) return that.$message.error('Folder name not allowed');
 430                     if (result && result.statusCode === 409) return that.$message.error('Folder already exists');
 431                     if (result && result.statusCode !== 201) return that.$message.error('Error creating folder: ' + result.statusCode);
 432                     if (error) return that.$message.error(error.message);
 433
 434                     refresh();
 435                 });
 436             }).catch(function () {});
 437         },
 438         refreshAccessTokens: function () {
 439             var that = this;
 440
 441             superagent.get('/api/tokens').query({ access_token: localStorage.accessToken }).end(function (error, result) {
 442                 if (error && !result) return that.$message.error(error.message);
 443
 444                 that.accessTokens = result.body.accessTokens;
 445             });
 446         },
 447         onCopyAccessToken: function (event) {
 448             event.target.select();
 449             document.execCommand('copy');
 450
 451             this.$message({ type: 'success', message: 'Access token copied to clipboard' });
 452         },
 453         onCreateAccessToken: function () {
 454             var that = this;
 455
 456             superagent.post('/api/tokens').query({ access_token: localStorage.accessToken }).end(function (error, result) {
 457                 if (error && !result) return that.$message.error(error.message);
 458
 459                 that.refreshAccessTokens();
 460             });
 461         },
 462         onDeleteAccessToken: function (token) {
 463             var that = this;
 464
 465             this.$confirm('All actions from apps using this token will fail!', 'Really delete this access token?', { confirmButtonText: 'Yes Delete', cancelButtonText: 'No' }).then(function () {
 466                 superagent.delete('/api/tokens/' + token).query({ access_token: localStorage.accessToken }).end(function (error, result) {
 467                     if (error && !result) return that.$message.error(error.message);
 468
 469                     that.refreshAccessTokens();
 470                 });
 471             }).catch(function () {});
 472
 473         },
 474         prettyDate: function (row, column, cellValue, index) {
 475             var date = new Date(cellValue),
 476             diff = (((new Date()).getTime() - date.getTime()) / 1000),
 477             day_diff = Math.floor(diff / 86400);
 478
 479             if (isNaN(day_diff) || day_diff < 0)
 480                 return;
 481
 482             return day_diff === 0 && (
 483                 diff < 60 && 'just now' ||
 484                 diff < 120 && '1 minute ago' ||
 485                 diff < 3600 && Math.floor( diff / 60 ) + ' minutes ago' ||
 486                 diff < 7200 && '1 hour ago' ||
 487                 diff < 86400 && Math.floor( diff / 3600 ) + ' hours ago') ||
 488                 day_diff === 1 && 'Yesterday' ||
 489                 day_diff < 7 && day_diff + ' days ago' ||
 490                 day_diff < 31 && Math.ceil( day_diff / 7 ) + ' weeks ago' ||
 491                 day_diff < 365 && Math.round( day_diff / 30 ) +  ' months ago' ||
 492                 Math.round( day_diff / 365 ) + ' years ago';
 493         },
 494         prettyFileSize: function (row, column, cellValue, index) {
 495             return filesize(cellValue);
 496         },
 497         loadDirectory: loadDirectory,
 498         onUp: function () {
 499             window.location.hash = sanitize(this.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/'));
 500         },
 501         open: open,
 502         drop: drop,
 503         dragOver: dragOver
 504     }
 505 });
 506
 507 initWithToken(localStorage.accessToken);
 508
 509 $(window).on('hashchange', function () {
 510     loadDirectory(decode(window.location.hash.slice(1)));
 511 });
 512
 513 })();