Merge pull request 'RVRNEXT-26 show confirmation modal before deleting something' (!40) from feature/RVRNEXT-26-confirmation-before-delete into master

Reviewed-on: #40

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 () {

views/account/account.php

@@ -34,7 +34,7 @@
             <input type="text" class="text big fullWidth marginTop" name="id_number" placeholder="ID number" value="<?= $user['id_number'] ?>">
             <p id="accountFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
-                <button type="submit" name="submit" disabled>Save</button>
+                <button type="submit" name="submit_button" disabled>Save</button>
             </div>
         </form>
     </div>

views/communities/community_currencies.php

@@ -26,9 +26,9 @@
                         <input type="number" form="editCurrency_<?= $currency->getId() ?>" class="text fullWidth" name="round_digits" value="<?= $currency->getRoundDigits() ?>" min="0" max="9" required>
                     </td>
                     <td style="text-align: right; font-size: 0;">
-                        <button type="submit" form="editCurrency_<?= $currency->getId() ?>" name="submit" class="small" disabled>Save</button>
+                        <button type="submit" form="editCurrency_<?= $currency->getId() ?>" name="submit_button" class="small" disabled>Save</button>
                         <?php if ($currency->getId() !== $community->getMainCurrencyId()): ?>
-                            <button type="submit" form="deleteCurrency_<?= $currency->getId() ?>" class="small red marginLeft">Delete</button>
+                            <button type="submit" form="deleteCurrency_<?= $currency->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this currency?" class="small red marginLeft">Delete</button>
                         <?php endif; ?>
                     </td>
                 </tr>
@@ -42,7 +42,7 @@
                     <input type="number" form="newCurrency" class="text fullWidth" name="round_digits" placeholder="Round digits" min="0" max="9" required>
                 </td>
                 <td style="text-align: right;">
-                    <button type="submit" form="newCurrency" name="submit" class="small" disabled>Add</button>
+                    <button type="submit" form="newCurrency" name="submit_button" class="small" disabled>Add</button>
                 </td>
             </tr>
         </table>

views/communities/community_edit.php

@@ -23,7 +23,7 @@
             <?php endif; ?>
             <p id="communityFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
-                <button type="submit" name="submit"><?= isset($community) ? 'Save' : 'Create' ?></button>
+                <button type="submit" name="submit_button"><?= isset($community) ? 'Save' : 'Create' ?></button>
             </div>
         </form>
     </div>

views/communities/community_members.php

@@ -32,8 +32,8 @@
                     </td>
                     <td style="text-align: right;">
                         <?php if ($editable): ?>
-                            <button type="submit" form="editMember_<?= $member->getId() ?>" name="submit" class="small marginRight" disabled>Save</button><!--
+                            <button type="submit" form="editMember_<?= $member->getId() ?>" name="submit_button" class="small marginRight" disabled>Save</button><!--
-                         --><button type="submit" form="deleteMember_<?= $member->getId() ?>" class="small red">Delete</button>
+                         --><button type="submit" form="deleteMember_<?= $member->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this member?" class="small red">Delete</button>
                         <?php endif; ?>
                     </td>
                 </tr>
@@ -47,7 +47,7 @@
                     <input type="checkbox" form="newMember" name="owner" />
                 </td>
                 <td style="text-align: right;">
-                    <button type="submit" form="newMember" name="submit" class="small" disabled>Add</button>
+                    <button type="submit" form="newMember" name="submit_button" class="small" disabled>Add</button>
                 </td>
             </tr>
         </table>

views/communities/currency_exchange_rates.php

@@ -32,8 +32,8 @@
                             <input type="datetime-local" form="editExchangeRate_<?= $currencyExchangeRate->getId() ?>" class="text fullWidth" name="valid_from" value="<?= $currencyExchangeRate->getValidFromDate()->format('Y-m-d\TH:i') ?>" required>
                         </td>
                         <td style="text-align: right;">
-                            <button type="submit" form="editExchangeRate_<?= $currencyExchangeRate->getId() ?>" name="submit" class="small marginRight" disabled>Save</button><!--
+                            <button type="submit" form="editExchangeRate_<?= $currencyExchangeRate->getId() ?>" name="submit_button" class="small marginRight" disabled>Save</button><!--
-                         --><button type="submit" form="deleteCurrency_<?= $currencyExchangeRate->getId() ?>" class="small red">Delete</button>
+                         --><button type="submit" form="deleteCurrency_<?= $currencyExchangeRate->getId() ?>" name="submit_button" data-confirmation="Are you sure you want to delete this exchange rate?" class="small red">Delete</button>
                         </td>
                     <?php else: ?>
                         <td><?= $currencyExchangeRate->getExchangeRate() ?></td>
@@ -51,7 +51,7 @@
                         <input type="datetime-local" form="newExchangeRate" class="text fullWidth" name="valid_from" placeholder="Valid from" required>
                     </td>
                     <td style="text-align: right;">
-                        <button type="submit" form="newExchangeRate" name="submit" class="small" disabled>Add</button>
+                        <button type="submit" form="newExchangeRate" name="submit_button" class="small" disabled>Add</button>
                     </td>
                 </tr>
             <?php endif; ?>

views/communities/transaction_edit.php

@@ -41,9 +41,9 @@
             <p class="formError justify marginTop"></p>
             <div class="right marginTop" style="font-size: 0;">
                 <?php if (isset($transaction)): ?>
-                    <button type="submit" form="deleteTransaction" class="red marginRight">Delete</button>
+                    <button type="submit" form="deleteTransaction"  name="submit_button" data-confirmation="Are you sure you want to delete this transaction?" class="red marginRight">Delete</button>
                 <?php endif; ?>
-                <button type="submit" name="submit"><?= isset($transaction) ? 'Save' : 'Create' ?></button>
+                <button type="submit" name="submit_button"><?= isset($transaction) ? 'Save' : 'Create' ?></button>
             </div>
         </form>
         <?php if (isset($transaction)): ?>