Skip to content

PUBLIC / surfer-okd

Go to a project
Commit 25c2c5de by Johannes Zellner
Options

Improve error feedback

1 parent 5e3bdc80
Inline Side-by-side
Showing with 47 additions and 38 deletions
frontend/index.html
...@@ -25,12 +25,12 @@ ...@@ -25,12 +25,12 @@
<el-dialog title="Login" :visible.sync="ready && !session.valid" width="30%" :close-on-press-escape="false" :show-close="false"> <el-dialog title="Login" :visible.sync="ready && !session.valid" width="30%" :close-on-press-escape="false" :show-close="false">
<el-form :model="loginData" label-position="top" @submit.native.prevent> <el-form :model="loginData" label-position="top" @submit.native.prevent>
<el-form-item label="Username"><el-input v-model="loginData.username" required autofocus></el-input></el-form-item> <el-form-item label="Username"><el-input v-model="loginData.username" required autofocus :disabled="loginData.busy"></el-input></el-form-item>
<el-form-item label="Password"><el-input v-model="loginData.password" type="password" required></el-input></el-form-item> <el-form-item label="Password"><el-input v-model="loginData.password" type="password" required :disabled="loginData.busy"></el-input></el-form-item>
<input type="submit" @click="onLogin" v-show="false"/> <input type="submit" @click="onLogin" v-show="false"/>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="onLogin"><i class="el-icon-loading" v-show="busy"></i><span v-show="!busy">Login</span></el-button> <el-button type="primary" @click="onLogin"><i class="el-icon-loading" v-show="loginData.busy"></i><span v-show="!loginData.busy">Login</span></el-button>
</span> </span>
</el-dialog> </el-dialog>
...@@ -53,7 +53,6 @@ ...@@ -53,7 +53,6 @@
<el-button-group> <el-button-group>
<el-button type="primary" icon="el-icon-upload" size="small" @click="onUpload">Upload</el-button> <el-button type="primary" icon="el-icon-upload" size="small" @click="onUpload">Upload</el-button>
<el-button type="primary" icon="el-icon-plus" size="small" @click="onNewFolder">New Folder</el-button> <el-button type="primary" icon="el-icon-plus" size="small" @click="onNewFolder">New Folder</el-button>
</el-button-group> </el-button-group>
<el-dropdown @command="onOptionsMenu"> <el-dropdown @command="onOptionsMenu">
<el-button size="small" icon="el-icon-more"></el-button> <el-button size="small" icon="el-icon-more"></el-button>
......
frontend/js/app.js
...@@ -19,10 +19,7 @@ function asyncForEach(items, handler, callback) { ...@@ -19,10 +19,7 @@ function asyncForEach(items, handler, callback) {
} }
function getProfile(accessToken, callback) { 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) { superagent.get('/api/profile').query({ access_token: accessToken }).end(function (error, result) {
app.busy = false;
app.ready = true; app.ready = true;
if (error && !error.response) return callback(error); if (error && !error.response) return callback(error);
...@@ -179,7 +176,7 @@ var app = new Vue({ ...@@ -179,7 +176,7 @@ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
ready: false, ready: false,
busy: true, busy: false,
uploadStatus: { uploadStatus: {
busy: false, busy: false,
count: 0, count: 0,
...@@ -194,19 +191,22 @@ var app = new Vue({ ...@@ -194,19 +191,22 @@ var app = new Vue({
folderListingEnabled: false, folderListingEnabled: false,
loginData: { loginData: {
username: '', username: '',
password: '' password: '',
busy: false
}, },
entries: [] entries: []
}, },
methods: { methods: {
onLogin: function () { onLogin: function () {
app.busy = true; var that = this;
superagent.post('/api/login').send({ username: app.loginData.username, password: app.loginData.password }).end(function (error, result) { that.loginData.busy = true;
app.busy = false;
if (error) return console.error(error); superagent.post('/api/login').send({ username: that.loginData.username, password: that.loginData.password }).end(function (error, result) {
if (result.statusCode === 401) return console.error('Invalid credentials'); that.loginData.busy = false;
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) { getProfile(result.body.accessToken, function (error) {
if (error) return console.error(error); if (error) return console.error(error);
...@@ -216,6 +216,8 @@ var app = new Vue({ ...@@ -216,6 +216,8 @@ var app = new Vue({
}); });
}, },
onOptionsMenu: function (command) { onOptionsMenu: function (command) {
var that = this;
if (command === 'folderListing') { if (command === 'folderListing') {
superagent.put('/api/settings').send({ folderListingEnabled: this.folderListingEnabled }).query({ access_token: localStorage.accessToken }).end(function (error) { superagent.put('/api/settings').send({ folderListingEnabled: this.folderListingEnabled }).query({ access_token: localStorage.accessToken }).end(function (error) {
if (error) console.error(error); if (error) console.error(error);
...@@ -234,7 +236,7 @@ var app = new Vue({ ...@@ -234,7 +236,7 @@ var app = new Vue({
superagent.post('/api/logout').query({ access_token: localStorage.accessToken }).end(function (error) { superagent.post('/api/logout').query({ access_token: localStorage.accessToken }).end(function (error) {
if (error) console.error(error); if (error) console.error(error);
app.session.valid = false; that.session.valid = false;
delete localStorage.accessToken; delete localStorage.accessToken;
}); });
...@@ -242,30 +244,34 @@ var app = new Vue({ ...@@ -242,30 +244,34 @@ var app = new Vue({
}, },
onDownload: function (entry) { onDownload: function (entry) {
if (entry.isDirectory) return; if (entry.isDirectory) return;
window.location.href = encode('/api/files/' + sanitize(app.path + '/' + entry.filePath)) + '?access_token=' + localStorage.accessToken; window.location.href = encode('/api/files/' + sanitize(this.path + '/' + entry.filePath)) + '?access_token=' + localStorage.accessToken;
}, },
onUpload: function () { onUpload: function () {
$(app.$refs.upload).on('change', function () { var that = this;
$(this.$refs.upload).on('change', function () {
// detach event handler // detach event handler
$(app.$refs.upload).off('change'); $(that.$refs.upload).off('change');
uploadFiles(app.$refs.upload.files || []); uploadFiles(that.$refs.upload.files || []);
}); });
// reset the form first to make the change handler retrigger even on the same file selected // reset the form first to make the change handler retrigger even on the same file selected
app.$refs.upload.value = ''; this.$refs.upload.value = '';
app.$refs.upload.click(); this.$refs.upload.click();
}, },
onDelete: function (entry) { onDelete: function (entry) {
var that = this;
var title = 'Really delete ' + (entry.isDirectory ? 'folder ' : '') + entry.filePath; var title = 'Really delete ' + (entry.isDirectory ? 'folder ' : '') + entry.filePath;
this.$confirm('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No' }).then(function () { this.$confirm('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No' }).then(function () {
var path = encode(sanitize(app.path + '/' + entry.filePath)); var path = encode(sanitize(that.path + '/' + entry.filePath));
superagent.del('/api/files' + path).query({ access_token: localStorage.accessToken, recursive: true }).end(function (error, result) { superagent.del('/api/files' + path).query({ access_token: localStorage.accessToken, recursive: true }).end(function (error, result) {
if (result && result.statusCode === 401) return logout(); if (result && result.statusCode === 401) return logout();
if (result && result.statusCode !== 200) return console.error('Error deleting file: ', result.statusCode); if (result && result.statusCode !== 200) return that.$message.error('Error deleting file: ' + result.statusCode);
if (error) return console.error(error); if (error) return that.$message.error(error.message);
refresh(); refresh();
}); });
...@@ -274,38 +280,42 @@ var app = new Vue({ ...@@ -274,38 +280,42 @@ var app = new Vue({
}); });
}, },
onRename: function (entry) { onRename: function (entry) {
var that = this;
var title = 'Rename ' + entry.filePath; var title = 'Rename ' + entry.filePath;
this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new filename', inputValue: entry.filePath }).then(function (data) { this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new filename', inputValue: entry.filePath }).then(function (data) {
var path = encode(sanitize(app.path + '/' + entry.filePath)); var path = encode(sanitize(that.path + '/' + entry.filePath));
var newFilePath = sanitize(app.path + '/' + data.value); var newFilePath = sanitize(that.path + '/' + data.value);
superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) { 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 === 401) return logout();
if (result && result.statusCode !== 200) return console.error('Error renaming file: ', result.statusCode); if (result && result.statusCode !== 200) return that.$message.error('Error renaming file: ' + result.statusCode);
if (error) return console.error(error); if (error) return that.$message.error(error.message);
refresh(); refresh();
}); });
}).catch(function () { }).catch(function (error) {
console.log('rename error:', arguments); that.$message.error(error.message);
}); });
}, },
onNewFolder: function () { onNewFolder: function () {
var that = this;
var title = 'Create New Folder'; var title = 'Create New Folder';
this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new foldername' }).then(function (data) { this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new foldername' }).then(function (data) {
var path = encode(sanitize(app.path + '/' + data.value)); var path = encode(sanitize(that.path + '/' + data.value));
superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken, directory: true }).end(function (error, result) { superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken, directory: true }).end(function (error, result) {
if (result && result.statusCode === 401) return logout(); if (result && result.statusCode === 401) return logout();
if (result && result.statusCode === 403) return console.error('Name not allowed'); if (result && result.statusCode === 403) return that.$message.error('Folder name not allowed');
if (result && result.statusCode === 409) return console.error('Directory already exists'); if (result && result.statusCode === 409) return that.$message.error('Folder already exists');
if (result && result.statusCode !== 201) return console.error('Error creating directory: ', result.statusCode); if (result && result.statusCode !== 201) return that.$message.error('Error creating folder: ' + result.statusCode);
if (error) return console.error(error); if (error) return that.$message.error(error.message);
refresh(); refresh();
}); });
}).catch(function () { }).catch(function (error) {
console.log('create folder error:', arguments); that.$message.error(error.message);
}); });
}, },
prettyDate: function (row, column, cellValue, index) { prettyDate: function (row, column, cellValue, index) {
...@@ -333,7 +343,7 @@ var app = new Vue({ ...@@ -333,7 +343,7 @@ var app = new Vue({
}, },
loadDirectory: loadDirectory, loadDirectory: loadDirectory,
onUp: function () { onUp: function () {
window.location.hash = sanitize(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/')); window.location.hash = sanitize(this.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/'));
}, },
open: open, open: open,
drop: drop, drop: drop,
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!