dropbox provider settings config

app/scripts/comp/dropbox-link.js

@@ -5,7 +5,7 @@ var Dropbox = require('dropbox'),
     Launcher = require('./launcher'),
     Logger = require('../util/logger'),
     Locale = require('../util/locale'),
-    Links = require('../const/links');
+    AppSettingsModel = require('../models/app-settings-model');
 
 var logger = new Logger('dropbox');
 
@@ -18,11 +18,8 @@ var DropboxCustomErrors = {
     BadKey: 'bad-key'
 };
 
-function isValidKey() {
-    var isSelfHostedApp = !/^http(s?):\/\/localhost:8085/.test(location.href) &&
-        !/http(s?):\/\/antelle\.github\.io\/keeweb/.test(location.href) &&
-        !/http(s?):\/\/app\.keeweb\.info/.test(location.href);
-    return Launcher || !isSelfHostedApp || DropboxKeys.AppFolder !== DropboxKeys.AppFolderKeyParts.join('');
+function getKey() {
+    return AppSettingsModel.instance.get('dropboxAppKey') || DropboxKeys.AppFolder;
 }
 
 var DropboxChooser = function(callback) {
@@ -51,7 +48,7 @@ DropboxChooser.prototype.choose = function() {
 DropboxChooser.prototype.buildUrl = function() {
     var urlParams = {
         origin: encodeURIComponent(window.location.protocol + '//' + window.location.host),
-        'app_key': DropboxKeys.AppFolder,
+        'app_key': getKey(),
         'link_type': 'direct',
         trigger: 'js',
         multiselect: 'false',
@@ -129,21 +126,15 @@ var DropboxLink = {
     ERROR_CONFLICT: Dropbox.ApiError.CONFLICT,
     ERROR_NOT_FOUND: Dropbox.ApiError.NOT_FOUND,
 
-    _getClient: function(complete) {
+    _getClient: function(complete, overrideAppKey) {
         if (this._dropboxClient && this._dropboxClient.isAuthenticated()) {
             complete(null, this._dropboxClient);
             return;
         }
-        if (!isValidKey()) {
-            Alerts.error({
-                icon: 'dropbox',
-                header: Locale.dropboxNotConfigured,
-                body: Locale.dropboxNotConfiguredBody1 + '<br/>' + Locale.dropboxNotConfiguredBody2.replace('{}',
-                        '<a href="' + Links.SelfHostedDropbox + '" target="blank">' + Locale.dropboxNotConfiguredLink + '</a>')
-            });
+        if (!overrideAppKey && !this.isValidKey()) {
             return complete(DropboxCustomErrors.BadKey);
         }
-        var client = new Dropbox.Client({key: DropboxKeys.AppFolder});
+        var client = new Dropbox.Client({key: overrideAppKey || getKey()});
         if (Launcher) {
             client.authDriver(new Dropbox.AuthDriver.Electron({ receiverUrl: location.href }));
         } else {
@@ -251,8 +242,19 @@ var DropboxLink = {
         });
     },
 
-    authenticate: function(copmlete) {
-        this._getClient(function(err) { copmlete(err); });
+    isValidKey: function() {
+        var isSelfHostedApp = !/^http(s?):\/\/localhost:8085/.test(location.href) &&
+            !/http(s?):\/\/antelle\.github\.io\/keeweb/.test(location.href) &&
+            !/http(s?):\/\/app\.keeweb\.info/.test(location.href);
+        return Launcher || !isSelfHostedApp || getKey() !== DropboxKeys.AppFolderKeyParts.join('');
+    },
+
+    setKey: function(key) {
+        AppSettingsModel.instance.set('dropboxAppKey', key);
+    },
+
+    authenticate: function(complete, overrideAppKey) {
+        this._getClient(function(err) { complete(err); }, overrideAppKey);
     },
 
     receive: function() {

app/scripts/models/app-settings-model.js

@@ -24,7 +24,8 @@ var AppSettingsModel = Backbone.Model.extend({
         skipOpenLocalWarn: false,
         hideEmptyFields: false,
         skipHttpsWarning: false,
-        demoOpened: false
+        demoOpened: false,
+        dropboxAppKey: null
     },
 
     initialize: function() {

app/scripts/storage/storage-dropbox.js

@@ -25,7 +25,27 @@ var StorageDropbox = {
     },
 
     needShowOpenConfig: function() {
-        return false;
+        return !DropboxLink.isValidKey();
+    },
+
+    getOpenConfig: function() {
+        return {
+            desc: 'dropboxSetupDesc',
+            fields: [
+                {id: 'key', title: 'dropboxAppKey', desc: 'dropboxAppKeyDesc', type: 'text', required: true, pattern: '\\w{10,}'}
+            ]
+        };
+    },
+
+    applyConfig: function(config, callback) {
+        if (config.key) {
+            DropboxLink.authenticate(function(err) {
+                if (!err) {
+                    DropboxLink.setKey(config.key);
+                }
+                callback(err);
+            }, config.key);
+        }
     },
 
     getPathForName: function(fileName) {

app/scripts/storage/storage-webdav.js

@@ -14,12 +14,14 @@ var StorageWebDav = {
         return true;
     },
 
-    getOpenConfigFields: function() {
-        return [
-            {id: 'path', title: 'openUrl', desc: 'openUrlDesc', type: 'text', required: true},
-            {id: 'user', title: 'openUser', desc: 'openUserDesc', placeholder: 'openUserPlaceholder', type: 'text'},
-            {id: 'password', title: 'openPass', desc: 'openPassDesc', placeholder: 'openPassPlaceholder', type: 'password'}
-        ];
+    getOpenConfig: function() {
+        return {
+            fields: [
+                {id: 'path', title: 'openUrl', desc: 'openUrlDesc', type: 'text', required: true},
+                {id: 'user', title: 'openUser', desc: 'openUserDesc', placeholder: 'openUserPlaceholder', type: 'text'},
+                {id: 'password', title: 'openPass', desc: 'openPassDesc', placeholder: 'openPassPlaceholder', type: 'password'}
+            ]
+        };
     },
 
     load: function(path, opts, callback) {

app/scripts/util/locale.js

@@ -354,10 +354,6 @@ var Locale = {
     setHelpUpdates: 'Updates',
     setHelpTwitter: 'App twitter',
 
-    dropboxNotConfigured: 'Dropbox not configured',
-    dropboxNotConfiguredBody1: 'So, you are using KeeWeb on your own server? Good!',
-    dropboxNotConfiguredBody2: '{} is required to make Dropbox work, it\'s just 3 steps away.',
-    dropboxNotConfiguredLink: 'Some configuration',
     dropboxLogin: 'Dropbox Login',
     dropboxLoginBody: 'To continue, you have to sign in to Dropbox.',
     dropboxSyncError: 'Dropbox Sync Error',
@@ -369,6 +365,9 @@ var Locale = {
     dropboxNetErrorBody: 'Network error occurred during Dropbox sync. Please, check your connection and try again.',
     dropboxErrorBody: 'Something went wrong during Dropbox sync. Please, try again later. Error code: ',
     dropboxErrorRepeatBody: 'Something went wrong during Dropbox sync. Please, try again later. Error: ',
+    dropboxSetupDesc: 'Some configuration is required to use Dropbox in self-hosted app. Please create your own Dropbox app and fill in its key below.',
+    dropboxAppKey: 'Dropbox app key',
+    dropboxAppKeyDesc: 'Copy it from your Dropbox app (Developer settings)',
 
     launcherSave: 'Save Passwords Database',
     launcherFileFilter: 'KeePass files'

app/scripts/views/open-view.js

@@ -556,12 +556,11 @@ var OpenView = Backbone.View.extend({
         if (this.views.openConfig) {
             this.views.openConfig.remove();
         }
-        var config = {
+        var config = _.extend({
             id: storage.name,
             name: Locale[storage.name] || storage.name,
-            icon: storage.icon,
-            fields: storage.getOpenConfigFields()
-        };
+            icon: storage.icon
+        }, storage.getOpenConfig());
         this.views.openConfig = new OpenConfigView({ el: this.$el.find('.open__config-wrap'), model: config }).render();
         this.views.openConfig.on('cancel', this.closeConfig.bind(this));
         this.views.openConfig.on('apply', this.applyConfig.bind(this));
@@ -599,7 +598,25 @@ var OpenView = Backbone.View.extend({
             path: path,
             opts: opts
         };
-        storage.stat(path, opts, this.storageStatComplete.bind(this, req));
+        if (storage.applyConfig) {
+            storage.applyConfig(opts, this.storageApplyConfigComplete.bind(this, req));
+        } else {
+            storage.stat(path, opts, this.storageStatComplete.bind(this, req));
+        }
+    },
+
+    storageApplyConfigComplete: function(req, err) {
+        if (this.storageWaitId !== req.waitId) {
+            return;
+        }
+        this.storageWaitId = null;
+        this.busy = false;
+        if (err) {
+            this.views.openConfig.setDisabled(false);
+            this.views.openConfig.setError(err);
+        } else {
+            this.closeConfig();
+        }
     },
 
     storageStatComplete: function(req, err, stat) {

app/templates/open-config.hbs

@@ -1,5 +1,6 @@
 <div class="open__config">
     <h2 class="open__config-header"><i class="fa fa-{{icon}}"></i> {{#res 'openConfigHeader'}}{{name}}{{/res}}</h2>
+    {{#if desc}}<div class="open__config-desc">{{res desc}}</div>{{/if}}
     <div class="open__config-fields">
         {{#each fields as |field ix|}}
         <label for="open__config-field-{{id}}">{{res title}}:</label>
@@ -8,7 +9,7 @@
             autocomplete="off"
             {{#if placeholder}}placeholder="{{res placeholder}}"{{/if}}
             {{#if required}}required{{/if}}
-            {{#if pattern}}pattern="{{pattern}}"{{/if}}
+            {{#if pattern}}pattern="{{{pattern}}}"{{/if}}
         />
         {{/each}}
     </div>