RVRNEXT-26 show confirmation modal before deleting something

public/static/css/rvr.css

@@ -238,6 +238,7 @@ button.noRightRadius, a.button.noRightRadius {
 
 button.gray, a.button.gray {
     background-color: #808080;
+    color: #ffffff;
 }
 
 button.gray:enabled:hover, button.gray:enabled:focus, a.button.gray:hover, a.button.gray:focus {
@@ -246,6 +247,7 @@ button.gray:enabled:hover, button.gray:enabled:focus, a.button.gray:hover, a.but
 
 button.red, a.button.red {
     background-color: #aa5e5e;
+    color: #ffffff;
 }
 
 button.red:enabled:hover, button.red:enabled:focus, a.button.red:hover, a.button.red:focus {

public/static/js/rvr.js

@@ -88,6 +88,28 @@ var RVR = {
         }
     },
 
+    setOnclickForFormConfirmation: function (button) {
+        button.onclick = function(e) {
+            e.preventDefault();
+
+            var self = this;
+
+            RVR.showModalWithContent('Confirmation', this.dataset.confirmation, [
+                {
+                    type: 'button',
+                    text: self.textContent,
+                    classNames: ['red'],
+                    onclick: function() {
+                        var event = new Event('submit', {'bubbles': true, 'cancelable': true});
+                        self.form.dispatchEvent(event);
+
+                        RVR.hideModal();
+                    }
+                }
+            ]);
+        };
+    },
+
     showModal: function (id) {
         document.getElementById(id).style.visibility = 'visible';
         document.getElementById('cover').style.visibility = 'visible';
@@ -234,6 +256,10 @@ var RVR = {
         if (form.dataset.observeInputs) {
             RVR.observeInputsInForm(form, form.dataset.observeInputs.split(','));
         }
+
+        if (form.elements['submit_button'] && form.elements['submit_button'].dataset.confirmation) {
+            RVR.setOnclickForFormConfirmation(form.elements['submit_button']);
+        }
     }
 
     document.getElementById('cover').onclick = function () {