frontend/js/app.js

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