Ported logic to settings: Debug Tab closes #2424

- Added file upload component
- Added import client logic
- Added e-mail sending client logic
- Added settings model

core/client/components/file-upload.js

@@ -0,0 +1,23 @@
+var FileUpload = Ember.Component.extend({
+    _file: null,
+    uploadButtonText: 'Text',
+    uploadButtonDisabled: true,
+    change: function (event) {
+        this.set('uploadButtonDisabled', false);
+        this.sendAction('onAdd');
+        this._file = event.target.files[0];
+    },
+    actions: {
+        upload: function () {
+            var self = this;
+            if (!this.uploadButtonDisabled && self._file) {
+                self.sendAction('onUpload', self._file);
+            }
+
+            // Prevent double post by disabling the button.
+            this.set('uploadButtonDisabled', true);
+        }
+    }
+});
+
+export default FileUpload;

core/client/components/gh-form.js

@@ -0,0 +1,13 @@
+export default Ember.View.extend({
+    tagName: 'form',
+    attributeBindings: ['enctype'],
+    reset: function () {
+        this.$().get(0).reset();
+    },
+    didInsertElement: function () {
+        this.get('controller').on('reset', this, this.reset);
+    },
+    willClearRender: function () {
+        this.get('controller').off('reset', this, this.reset);
+    }
+});

core/client/controllers/settings/debug.js

@@ -0,0 +1,37 @@
+/*global alert, console */
+
+var Debug = Ember.Controller.extend(Ember.Evented, {
+    uploadButtonText: 'Import',
+    actions: {
+        importData: function (file) {
+            var self = this;
+            this.set('uploadButtonText', 'Importing');
+            this.get('model').importFrom(file)
+                .then(function (response) {
+                    console.log(response);
+                    alert('@TODO: success');
+                })
+                .catch(function (response) {
+                    console.log(response);
+                    alert('@TODO: error');
+                })
+                .finally(function () {
+                    self.set('uploadButtonText', 'Import');
+                    self.trigger('reset');
+                });
+        },
+        sendTestEmail: function () {
+            this.get('model').sendTestEmail()
+                .then(function (response) {
+                    console.log(response);
+                    alert('@TODO: success');
+                })
+                .catch(function (response) {
+                    console.log(response);
+                    alert('@TODO: error');
+                });
+        }
+    }
+});
+
+export default Debug;

core/client/models/base.js

@@ -5,6 +5,7 @@ function ghostPaths() {
 
     return {
         subdir: subdir,
+        adminRoot: subdir + '/ghost',
         apiRoot: subdir + '/ghost/api/v0.1'
     };
 }
@@ -29,5 +30,6 @@ var BaseModel = Ember.Object.extend({
 
 BaseModel.apiRoot = ghostPaths().apiRoot;
 BaseModel.subdir = ghostPaths().subdir;
+BaseModel.adminRoot = ghostPaths().adminRoot;
 
 export default BaseModel;

core/client/models/post.js

@@ -53,4 +53,4 @@ var PostModel = BaseModel.extend({
     }
 });
 
-export default PostModel;
+export default PostModel;

core/client/models/settings.js

@@ -2,7 +2,7 @@ var validator = window.validator;
 
 import BaseModel from 'ghost/models/base';
 
-export default BaseModel.extend({
+var SettingsModel = BaseModel.extend({
     url: BaseModel.apiRoot + '/settings/?type=blog,theme,app',
 
     title: null,
@@ -46,5 +46,31 @@ export default BaseModel.extend({
         }
 
         return validationErrors;
+    },
+    exportPath: BaseModel.adminRoot + '/export/',
+    importFrom: function (file) {
+        var formData = new FormData();
+        formData.append('importfile', file);
+        return ic.ajax.request(BaseModel.apiRoot + '/db/', {
+            headers: {
+                'X-CSRF-Token': $('meta[name="csrf-param"]').attr('content')
+            },
+            type: 'POST',
+            data: formData,
+            dataType: 'json',
+            cache: false,
+            contentType: false,
+            processData: false
+        });
+    },
+    sendTestEmail: function () {
+        return ic.ajax.request(BaseModel.apiRoot + '/mail/test/', {
+            type: 'POST',
+            headers: {
+                'X-CSRF-Token': $('meta[name="csrf-param"]').attr('content')
+            }
+        });
     }
-});
+});
+
+export default SettingsModel;

core/client/router.js

@@ -24,6 +24,7 @@ Router.map(function () {
         this.route('debug');
         this.route('apps');
     });
+    this.route('debug');
 });
 
 export default Router;

core/client/routes/debug.js

@@ -0,0 +1,7 @@
+var DebugRoute = Ember.Route.extend({
+    beforeModel: function () {
+        this.transitionTo('settings.debug');
+    }
+});
+
+export default DebugRoute;

core/client/routes/settings/debug.js

@@ -0,0 +1,11 @@
+import SettingsModel from 'ghost/models/settings';
+
+var settingsModel = SettingsModel.create();
+
+var DebugRoute = Ember.Route.extend({
+    model: function () {
+        return settingsModel;
+    }
+});
+
+export default DebugRoute;

core/client/templates/components/file-upload.hbs

@@ -0,0 +1,2 @@
+<input type="file" class="button-add" />
+<button type="submit" class="button-save" {{bind-attr disabled=uploadButtonDisabled}} {{action "upload"}}>{{uploadButtonText}}</button>

core/client/templates/settings/debug.hbs

@@ -3,25 +3,23 @@
 </header>
 <section class="content">
     <form id="settings-export">
-        <input type="hidden" name="_csrf" value="{{csrfToken}}" />
         <fieldset>
             <div class="form-group">
                 <label>Export</label>
-                <a href="{{admin_url}}/export/" class="button-save">Export</a>
+                <a class="button-save" {{bind-attr href=model.exportPath}}>Export</a>
                 <p>Export the blog settings and data.</p>
             </div>
         </fieldset>
     </form>
-    <form id="settings-import" enctype="multipart/form-data">
+    {{#gh-form id="settings-import" enctype="multipart/form-data"}}
         <fieldset>
             <div class="form-group">
                 <label>Import</label>
-                <input type="file" class="button-add" name="importfile" id="importfile" />
-                <button type="submit" class="button-save" value="Import" id="startupload" >Import</button>
+                {{file-upload onUpload="importData" uploadButtonText=uploadButtonText}}
                 <p>Import from another Ghost installation. If you import a user, this will replace the current user & log you out.</p>
             </div>
         </fieldset>
-    </form>
+    {{/gh-form}}
     <form id="settings-resetdb">
         <fieldset>
             <div class="form-group">
@@ -31,4 +29,13 @@
             </div>
         </fieldset>
     </form>
-</section>
+    <form id="settings-testmail">
+        <fieldset>
+            <div class="form-group">
+                <label>Send a test email</label>
+                <button type="submit" id="sendtestmail" class="button-save" {{action "sendTestEmail"}}>Send</button>
+                <p>Sends a test email to your address.</p>
+            </div>
+        </fieldset>
+    </form>
+</section>