Modal instead of prompt for delete

Display a modal asking for database name instead of a simple prompt.

3 files changed, 119 insertions, 33 deletions

diff --git a/src/fauxton/app/addons/documents/templates/delete_database_modal.html b/src/fauxton/app/addons/documents/templates/delete_database_modal.html
new file mode 100644
index 000000000..024f7c947
--- /dev/null
+++ b/src/fauxton/app/addons/documents/templates/delete_database_modal.html
@@ -0,0 +1,37 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<div class="modal hide fade">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Delete Database</h3>
+  </div>
+  <div class="modal-body">
+    <form id="delete-db-check" class="form" method="post">
+      <p>
+      You've asked to <b>permanently delete</b> <code><%= database.id %></code>.
+      Please enter the database name below to confirm the deletion of the
+      database and all documents and attachments within.
+      </p>
+      <input class="input-block-level" type="text" name="db_name" id="db_name"></input>
+      <br/>
+      <div id="modal-error" class="alert alert-error hide" style="font-size: 16px;"></div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <a href="#" data-dismiss="modal" data-bypass="true" class="btn button cancel-button outlineGray fonticon-circle-x">Cancel</a>
+    <a href="#" id="delete-db-btn" data-bypass="true" class="btn btn-primary button red save fonticon-circle-check">Delete</a>
+  </div>
+</div>
+
diff --git a/src/fauxton/app/addons/documents/templates/sidebar.html b/src/fauxton/app/addons/documents/templates/sidebar.html
index 8a73ae9a3..c8ce511c2 100644
--- a/src/fauxton/app/addons/documents/templates/sidebar.html
+++ b/src/fauxton/app/addons/documents/templates/sidebar.html
@@ -64,4 +64,5 @@ the License.
     </ul>
     <div id="extension-navs"></div>
   </nav>
+  <div id="delete-db-modal"> </div>
 </div>
diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js
index fd7d034af..455bfda7f 100644
--- a/src/fauxton/app/addons/documents/views.js
+++ b/src/fauxton/app/addons/documents/views.js
@@ -113,6 +113,76 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
     }
   });
 
+  Views.DeleteDBModal = FauxtonAPI.View.extend({
+    template: "addons/documents/templates/delete_database_modal",
+
+    disableLoader: true,
+
+    initialize: function (options) {
+      _.bindAll(this);
+    },
+
+    events: {
+      "click a#delete-db-btn": "deleteDatabase",
+      "submit #delete-db-check": "deleteDatabase"
+    },
+
+    deleteDatabase: function (event) {
+      event.preventDefault();
+      var enterredName = this.$('#db_name')[0].value;
+      if (this.database.id != enterredName) {
+        this.set_error_msg(enterredName + " does not match database id - are you sure you want to delete " + this.database.id + "?");
+        return;
+      }
+      this.hideModal();
+      var databaseName = this.database.id;
+      FauxtonAPI.addNotification({
+        msg: "Deleting your database...",
+        type: "error",
+        clear: true
+      });
+
+      this.database.destroy().then(function () {
+        FauxtonAPI.navigate('#/_all_dbs');
+        FauxtonAPI.addNotification({
+          msg: 'The database <code>' + databaseName + '</code> has been deleted.',
+          clear: true
+        });
+      }).fail(function (rsp, error, msg) {
+        FauxtonAPI.addNotification({
+          msg: 'Could not delete the database, reason ' + msg + '.',
+          type: 'error',
+          clear: true
+        });
+      });
+    },
+
+    showModal: function () {
+      this.clear_error_msg();
+      this.$('.modal').modal();
+      // hack to get modal visible
+      $('.modal-backdrop').css('z-index',1025);
+    },
+
+    hideModal: function () {
+      this.$('.modal').modal('hide');
+    },
+
+    set_error_msg: function (msg) {
+      var text;
+      if (typeof(msg) == 'string') {
+        text = msg;
+      } else {
+        text = JSON.parse(msg.responseText).reason;
+      }
+      this.$('#modal-error').text(text).removeClass('hide');
+    },
+
+    clear_error_msg: function () {
+      this.$('#modal-error').text(' ').addClass('hide');
+    }
+  });
+
   Views.UploadModal = FauxtonAPI.View.extend({
     template: "addons/documents/templates/upload_modal",
 
@@ -411,7 +481,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
         ddoc: this.ddoc,
         database: this.database,
         index_clean: app.utils.removeSpecialCharacters(this.index),
-        ddoc_clean: app.utils.removeSpecialCharacters(this.ddoc), 
+        ddoc_clean: app.utils.removeSpecialCharacters(this.ddoc),
         index_encoded: app.utils.safeURLName(this.index),
         ddoc_encoded: app.utils.safeURLName(this.ddoc),
         database_encoded: app.utils.safeURLName(this.database),
@@ -1393,7 +1463,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
           });
 
           if (that.newView || viewNameChange) {
-            var fragment = '/database/' + that.database.safeID() +'/' + ddoc.safeID() + '/_view/' + app.utils.safeURLName(viewName); 
+            var fragment = '/database/' + that.database.safeID() +'/' + ddoc.safeID() + '/_view/' + app.utils.safeURLName(viewName);
 
             FauxtonAPI.navigate(fragment, {trigger: false});
             that.newView = false;
@@ -1507,7 +1577,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
        }
 
       promise.then(function () {
-        params.docs = that.database.allDocs.map(function (model) { return model.get('doc');}); 
+        params.docs = that.database.allDocs.map(function (model) { return model.get('doc');});
         var queryPromise = pouchdb.runViewQuery({map: mapVal, reduce: reduceVal}, params);
         queryPromise.then(function (results) {
           FauxtonAPI.triggerRouteEvent('updatePreviewDocs', {rows: results.rows, ddoc: that.getCurrentDesignDoc().id, view: that.viewName});
@@ -1534,7 +1604,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
     reduceVal: function() {
       var reduceOption = this.$('#reduce-function-selector :selected').val(),
       reduceVal = "";
-      
+
       if (reduceOption === 'CUSTOM') {
         if (!this.reduceEditor) { this.createReduceEditor(); }
         reduceVal = this.reduceEditor.getValue();
@@ -1732,7 +1802,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
   Views.Sidebar = FauxtonAPI.View.extend({
     template: "addons/documents/templates/sidebar",
     events: {
-      "click button#delete-database": "deleteDatabase"
+      "click button#delete-database": "showDeleteDatabaseModal"
     },
 
     initialize: function(options) {
@@ -1742,33 +1812,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
         this.currView = options.ddocInfo.currView;
       }
     },
-
-    deleteDatabase: function (event) {
-      event.preventDefault();
-
-      var result = confirm('Are you sure you want to delete this database?');
-
-      if (!result) { return; }
-      var databaseName = this.database.id;
-      FauxtonAPI.addNotification({
-        msg: "Deleting your database...",
-        type: "error",
-        clear: true
-      });
-
-      this.database.destroy().then(function () {
-        FauxtonAPI.navigate('#/_all_dbs');
-        FauxtonAPI.addNotification({
-          msg: 'The database <code>' + databaseName + '</code> has been deleted.',
-          clear: true
-        });
-      }).fail(function (rsp, error, msg) {
-        FauxtonAPI.addNotification({
-          msg: 'Could not delete the database, reason ' + msg + '.',
-          type: 'error',
-          clear: true
-        });
-      });
+    showDeleteDatabaseModal: function(event){
+      this.deleteDBModal.showModal();
     },
 
     serialize: function() {
@@ -1803,6 +1848,10 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
     },
 
     beforeRender: function(manage) {
+      this.deleteDBModal = this.setView(
+        '#delete-db-modal',
+        new Views.DeleteDBModal({database: this.database})
+      );
 
       var sidebarListViews = FauxtonAPI.getExtensions('sidebar:list');
       _.each(sidebarListViews, function (view) {
@@ -1811,7 +1860,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
         extension.render();
       }, this);
 
-
       this.collection.each(function(design) {
         if (design.has('doc')){
           var ddoc = design.id.replace(/^_design\//,"");