From 1be3297551159fdd8b90a1e2b779b985510111af Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Thu, 30 Apr 2020 22:35:51 +0200
Subject: [PATCH 1/4] install bootbox

---
 static/package-lock.json | 20 ++++++++++++++++++++
 static/package.json      |  1 +
 2 files changed, 21 insertions(+)

diff --git a/static/package-lock.json b/static/package-lock.json
index d2a84667..f94137bf 100644
--- a/static/package-lock.json
+++ b/static/package-lock.json
@@ -61,6 +61,21 @@
         "tslib": "^1.9.3"
       }
     },
+    "bootbox": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/bootbox/-/bootbox-5.4.0.tgz",
+      "integrity": "sha512-GCPrDwZpJsUnqzrto3ZURVafypl13+DAyE3YZx5jR5EIoTDSyREPhr77hlCuPKvM6VvXR5Mh/34W3DYMC7JE9g==",
+      "requires": {
+        "bootstrap": "^4.4.0",
+        "jquery": "^3.4.1",
+        "popper.js": "^1.16.0"
+      }
+    },
+    "bootstrap": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
+      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
+    },
     "font-awesome": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
@@ -81,6 +96,11 @@
       "resolved": "https://registry.npmjs.org/notie/-/notie-4.3.1.tgz",
       "integrity": "sha1-DRmd4VEwJC4hZ1UHq6Y8aSngrdo="
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "qrious": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/qrious/-/qrious-4.0.2.tgz",
diff --git a/static/package.json b/static/package.json
index d41cfa1c..c2628ef7 100644
--- a/static/package.json
+++ b/static/package.json
@@ -17,6 +17,7 @@
   "homepage": "https://github.com/simple-login/app#readme",
   "dependencies": {
     "@sentry/browser": "^5.12.0",
+    "bootbox": "^5.4.0",
     "font-awesome": "^4.7.0",
     "intro.js": "^2.9.3",
     "notie": "^4.3.1",

From 7277c307356c77e92a31c0c6276c41a28b77a9b4 Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Thu, 30 Apr 2020 22:37:39 +0200
Subject: [PATCH 2/4] use bootbox instead of notie

---
 .../dashboard/alias_contact_manager.html      | 30 ++++++++++++-----
 .../templates/dashboard/api_key.html          | 28 +++++++++++-----
 .../templates/dashboard/billing.html          | 25 ++++++++++----
 .../templates/dashboard/custom_domain.html    |  3 +-
 .../templates/dashboard/directory.html        | 30 ++++++++++++-----
 .../dashboard/domain_detail/info.html         | 27 ++++++++++-----
 app/dashboard/templates/dashboard/index.html  | 33 +++++++++++++------
 .../templates/dashboard/mailbox.html          | 29 +++++++++++-----
 .../templates/dashboard/setting.html          | 26 +++++++++++----
 templates/base.html                           |  8 +++++
 10 files changed, 173 insertions(+), 66 deletions(-)

diff --git a/app/dashboard/templates/dashboard/alias_contact_manager.html b/app/dashboard/templates/dashboard/alias_contact_manager.html
index 286fa916..c9e988a1 100644
--- a/app/dashboard/templates/dashboard/alias_contact_manager.html
+++ b/app/dashboard/templates/dashboard/alias_contact_manager.html
@@ -84,7 +84,7 @@
             <form method="post">
               <input type="hidden" name="form-name" value="delete">
               <input type="hidden" name="contact-id" value="{{ contact.id }}">
-              <span class="card-link btn btn-link float-right delete-forward-email">
+              <span class="card-link btn btn-link float-right delete-forward-email text-danger">
                 Delete
               </span>
             </form>
@@ -101,16 +101,28 @@
 {% block script %}
   <script>
     $(".delete-forward-email").on("click", function (e) {
-      notie.confirm({
-        text: "Activity history associated with this reverse-alias will be deleted, " +
-          " please confirm.",
-        cancelCallback: () => {
-          // nothing to do
+      let that = $(this);
+
+      bootbox.confirm({
+        message: "All activities associated with this reverse-alias will also be deleted, please confirm.",
+        buttons: {
+          confirm: {
+            label: 'Yes, delete it',
+            className: 'btn-danger'
+          },
+          cancel: {
+            label: 'Cancel',
+            className: 'btn-outline-primary'
+          }
         },
-        submitCallback: () => {
-          $(this).closest("form").submit();
+        callback: function (result) {
+          if (result) {
+            that.closest("form").submit();
+          }
         }
-      });
+      })
+
+
     });
   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/dashboard/templates/dashboard/api_key.html b/app/dashboard/templates/dashboard/api_key.html
index 01a3f4ee..6d93fccc 100644
--- a/app/dashboard/templates/dashboard/api_key.html
+++ b/app/dashboard/templates/dashboard/api_key.html
@@ -104,16 +104,28 @@
 {% block script %}
   <script>
     $(".delete-api-key").on("click", function (e) {
-      notie.confirm({
-        text: "If this api key is currently in use, you need to replace it with another api key, " +
-          " please confirm.",
-        cancelCallback: () => {
-          // nothing to do
+      let that = $(this);
+
+      bootbox.confirm({
+        message: "If this api key is currently in use, you need to replace it with another api key, please confirm.",
+        buttons: {
+          confirm: {
+            label: 'Yes, delete it',
+            className: 'btn-danger'
+          },
+          cancel: {
+            label: 'Cancel',
+            className: 'btn-outline-primary'
+          }
         },
-        submitCallback: () => {
-          $(this).closest("form").submit();
+        callback: function (result) {
+          if (result) {
+            that.closest("form").submit();
+          }
         }
-      });
+      })
+
+
     });
 
     $(".toggle-api-key").on('click', function (event) {
diff --git a/app/dashboard/templates/dashboard/billing.html b/app/dashboard/templates/dashboard/billing.html
index 6c6cbfb7..522f7d11 100644
--- a/app/dashboard/templates/dashboard/billing.html
+++ b/app/dashboard/templates/dashboard/billing.html
@@ -87,15 +87,26 @@
   <script>
 
     $(".cancel").on("click", function (e) {
-      notie.confirm({
-        text: `This operation is irreversible, please confirm`,
-        cancelCallback: () => {
-          // nothing to do
+      let that = $(this);
+
+      bootbox.confirm({
+        message: "This operation is irreversible, please confirm.",
+        buttons: {
+          confirm: {
+            label: 'Cancel subscription',
+            className: 'btn-danger'
+          },
+          cancel: {
+            label: 'Close',
+            className: 'btn-outline-primary'
+          }
         },
-        submitCallback: () => {
-          $(this).closest("form").submit();
+        callback: function (result) {
+          if (result) {
+            that.closest("form").submit();
+          }
         }
-      });
+      })
     });
 
   </script>
diff --git a/app/dashboard/templates/dashboard/custom_domain.html b/app/dashboard/templates/dashboard/custom_domain.html
index a296bbb6..1df8df1b 100644
--- a/app/dashboard/templates/dashboard/custom_domain.html
+++ b/app/dashboard/templates/dashboard/custom_domain.html
@@ -20,7 +20,8 @@
       {% endif %}
 
       <div class="alert alert-primary" role="alert">
-        If you own a domain, let's say <b>example.com</b>, you will be able to create aliases with this domain, for example
+        If you own a domain, let's say <b>example.com</b>, you will be able to create aliases with this domain, for
+        example
         contact@example.com, help@example.com, etc with SimpleLogin. <br>
         You could also enable <b>catch-all</b> feature that allows you to create aliases on-the-fly.
       </div>
diff --git a/app/dashboard/templates/dashboard/directory.html b/app/dashboard/templates/dashboard/directory.html
index b4ed3e6f..02ba129e 100644
--- a/app/dashboard/templates/dashboard/directory.html
+++ b/app/dashboard/templates/dashboard/directory.html
@@ -107,16 +107,30 @@
   <script>
     $(".delete-dir").on("click", function (e) {
       let directory = $(this).parent().find(".dir-name").val();
-      notie.confirm({
-        text: `All aliases associated with <b>${directory}</b> directory will be also deleted, ` +
-          " please confirm.",
-        cancelCallback: () => {
-          // nothing to do
+
+      let that = $(this);
+      let message = `All aliases associated with <b>${directory}</b> directory will also be deleted, ` +
+          " please confirm.";
+
+      bootbox.confirm({
+        message: message,
+        buttons: {
+          confirm: {
+            label: 'Yes, delete it',
+            className: 'btn-danger'
+          },
+          cancel: {
+            label: 'Cancel',
+            className: 'btn-outline-primary'
+          }
         },
-        submitCallback: () => {
-          $(this).closest("form").submit();
+        callback: function (result) {
+          if (result) {
+            that.closest("form").submit();
+          }
         }
-      });
+      })
+
     });
   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/dashboard/templates/dashboard/domain_detail/info.html b/app/dashboard/templates/dashboard/domain_detail/info.html
index f208e87f..42b4e7fe 100644
--- a/app/dashboard/templates/dashboard/domain_detail/info.html
+++ b/app/dashboard/templates/dashboard/domain_detail/info.html
@@ -54,7 +54,7 @@
   <hr>
   <h3 class="mb-0">Delete Domain</h3>
   <div class="small-text mb-3">Please note that this operation is irreversible.
-    All aliases associated with this domain will be also deleted
+    All aliases associated with this domain will be also deleted.
   </div>
 
   <form method="post">
@@ -71,16 +71,27 @@
     });
 
     $(".delete-custom-domain").on("click", function (e) {
-      notie.confirm({
-        text: "All aliases associated with <b>{{ custom_domain.domain }}</b> will be also deleted, " +
+      let that = $(this);
+
+      bootbox.confirm({
+        message: "All aliases associated with <b>{{ custom_domain.domain }}</b> will be also deleted, " +
           " please confirm.",
-        cancelCallback: () => {
-          // nothing to do
+        buttons: {
+          confirm: {
+            label: 'Yes, delete it',
+            className: 'btn-danger'
+          },
+          cancel: {
+            label: 'Cancel',
+            className: 'btn-outline-primary'
+          }
         },
-        submitCallback: () => {
-          $(this).closest("form").submit();
+        callback: function (result) {
+          if (result) {
+            that.closest("form").submit();
+          }
         }
-      });
+      })
     });
   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/dashboard/templates/dashboard/index.html b/app/dashboard/templates/dashboard/index.html
index 7432ea96..c7ab1007 100644
--- a/app/dashboard/templates/dashboard/index.html
+++ b/app/dashboard/templates/dashboard/index.html
@@ -483,7 +483,6 @@
 
 {% block script %}
   <script>
-    var clipboard = new ClipboardJS('.clipboard');
 
     {% if show_intro %}
       // only show intro when screen is big enough to show "developer" tab
@@ -494,17 +493,31 @@
 
     $(".delete-email").on("click", function (e) {
       let alias = $(this).parent().find(".alias").val();
-      notie.confirm({
-        text: `Once <b>${alias}</b> is deleted, people/apps ` +
-          "who used to contact you via this alias cannot reach you any more," +
-          " please confirm.",
-        cancelCallback: () => {
-          // nothing to do
+      let message = `Once <b>${alias}</b> is deleted, people/apps ` +
+        "who used to contact you via this alias cannot reach you any more," +
+        " please confirm.";
+      let that = $(this);
+
+      bootbox.confirm({
+        message: message,
+        buttons: {
+          confirm: {
+            label: 'Yes, delete it',
+            className: 'btn-danger'
+          },
+          cancel: {
+            label: 'Cancel',
+            className: 'btn-outline-primary'
+          }
         },
-        submitCallback: () => {
-          $(this).closest("form").submit();
+        callback: function (result) {
+          if (result) {
+            that.closest("form").submit();
+          }
         }
-      });
+      })
+
+
     });
 
     $(".custom-switch-input").change(async function (e) {
diff --git a/app/dashboard/templates/dashboard/mailbox.html b/app/dashboard/templates/dashboard/mailbox.html
index 53c03171..67850458 100644
--- a/app/dashboard/templates/dashboard/mailbox.html
+++ b/app/dashboard/templates/dashboard/mailbox.html
@@ -123,16 +123,29 @@
   <script>
     $(".delete-mailbox").on("click", function (e) {
       let mailbox = $(this).parent().find(".mailbox").val();
-      notie.confirm({
-        text: `All aliases owned by this mailbox <b>${mailbox}</b> will be also deleted, ` +
-          " please confirm.",
-        cancelCallback: () => {
-          // nothing to do
+
+      let that = $(this);
+      let message = `All aliases owned by this mailbox <b>${mailbox}</b> will be also deleted, ` +
+          " please confirm.";
+
+      bootbox.confirm({
+        message: message,
+        buttons: {
+          confirm: {
+            label: 'Yes, delete it',
+            className: 'btn-danger'
+          },
+          cancel: {
+            label: 'Cancel',
+            className: 'btn-outline-primary'
+          }
         },
-        submitCallback: () => {
-          $(this).closest("form").submit();
+        callback: function (result) {
+          if (result) {
+            that.closest("form").submit();
+          }
         }
-      });
+      })
     });
   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/dashboard/templates/dashboard/setting.html b/app/dashboard/templates/dashboard/setting.html
index 8d9dc5a6..5d515ea8 100644
--- a/app/dashboard/templates/dashboard/setting.html
+++ b/app/dashboard/templates/dashboard/setting.html
@@ -306,17 +306,29 @@
 {% block script %}
   <script>
     $(".delete-account").on("click", function (e) {
-      notie.confirm({
-        text: "All your data including your aliases will be deleted, " +
+      let that = $(this);
+
+      bootbox.confirm({
+        message: "All your data including your aliases will be deleted, " +
           "other people might not be able to reach you after, " +
           " please confirm.",
-        cancelCallback: () => {
-          // nothing to do
+        buttons: {
+          confirm: {
+            label: 'Yes, delete my account',
+            className: 'btn-danger'
+          },
+          cancel: {
+            label: 'Cancel',
+            className: 'btn-outline-primary'
+          }
         },
-        submitCallback: () => {
-          $(this).closest("form").submit();
+        callback: function (result) {
+          if (result) {
+            that.closest("form").submit();
+          }
         }
-      });
+      })
+
     });
   </script>
 {% endblock %}
diff --git a/templates/base.html b/templates/base.html
index d5397157..d4f8a334 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -62,6 +62,8 @@
   <link rel="stylesheet" href="{{ url_for('static', filename='node_modules/toastr/build/toastr.min.css') }}">
   <script src="{{ url_for('static', filename='node_modules/toastr/build/toastr.min.js') }}"></script>
 
+  <script src="{{ url_for('static', filename='node_modules/bootbox/dist/bootbox.min.js') }}"></script>
+
   <link rel="stylesheet" type="text/css" href="/static/style.css?v={{ VERSION }}">
 
   <script>
@@ -151,6 +153,12 @@
     overlayClickDismiss: false,
   });
 
+  // default options for bootbox
+  bootbox.setDefaults({
+    closeButton: false,
+    backdrop: true
+  })
+
   var clipboard = new ClipboardJS('.clipboard');
 
   clipboard.on('success', function (e) {

From 2df6b8023dd79db8eb100ea6c9e85f2278bcc278 Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Thu, 30 Apr 2020 22:39:23 +0200
Subject: [PATCH 3/4] remove notie

---
 static/package-lock.json |  5 -----
 static/package.json      |  1 -
 templates/base.html      | 11 -----------
 3 files changed, 17 deletions(-)

diff --git a/static/package-lock.json b/static/package-lock.json
index f94137bf..59d2b610 100644
--- a/static/package-lock.json
+++ b/static/package-lock.json
@@ -91,11 +91,6 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
       "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
     },
-    "notie": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/notie/-/notie-4.3.1.tgz",
-      "integrity": "sha1-DRmd4VEwJC4hZ1UHq6Y8aSngrdo="
-    },
     "popper.js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
diff --git a/static/package.json b/static/package.json
index c2628ef7..4dedbbae 100644
--- a/static/package.json
+++ b/static/package.json
@@ -20,7 +20,6 @@
     "bootbox": "^5.4.0",
     "font-awesome": "^4.7.0",
     "intro.js": "^2.9.3",
-    "notie": "^4.3.1",
     "qrious": "^4.0.2",
     "toastr": "^2.1.4",
     "vue": "^2.6.11"
diff --git a/templates/base.html b/templates/base.html
index d4f8a334..042e7c0f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -42,11 +42,6 @@
   <!-- ClipboardJS -->
   <script src="/static/vendor/clipboard.min.js"></script>
 
-  <!-- Notie -->
-  <link rel="stylesheet" type="text/css"
-        href="{{ url_for('static', filename='node_modules/notie/dist/notie.min.css') }}">
-  <script src="{{ url_for('static', filename='node_modules/notie/dist/notie.min.js') }}"></script>
-
   <!-- IntroJS -->
   <link rel="stylesheet" type="text/css"
         href="{{ url_for('static', filename='node_modules/intro.js/minified/introjs.min.css') }}">
@@ -147,12 +142,6 @@
     }
   {% endif %}
 
-  // the modal does not get close when user clicks outside of modal
-  // necessary for obligatory modal such as the one displayed when user enable/display email forwarding
-  notie.setOptions({
-    overlayClickDismiss: false,
-  });
-
   // default options for bootbox
   bootbox.setDefaults({
     closeButton: false,

From ef58b935d4bf6d156fb1d13f24d31ddf67b5c114 Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Thu, 30 Apr 2020 22:39:31 +0200
Subject: [PATCH 4/4] remove unused code

---
 .../templates/dashboard/custom_domain.html    | 17 --------------
 app/developer/templates/developer/index.html  | 23 -------------------
 2 files changed, 40 deletions(-)

diff --git a/app/dashboard/templates/dashboard/custom_domain.html b/app/dashboard/templates/dashboard/custom_domain.html
index 1df8df1b..702d2dee 100644
--- a/app/dashboard/templates/dashboard/custom_domain.html
+++ b/app/dashboard/templates/dashboard/custom_domain.html
@@ -70,20 +70,3 @@
 
   </div>
 {% endblock %}
-
-{% block script %}
-  <script>
-    $(".delete-custom-domain").on("click", function (e) {
-      notie.confirm({
-        text: "All aliases associated with this domain will be also deleted, " +
-          " please confirm.",
-        cancelCallback: () => {
-          // nothing to do
-        },
-        submitCallback: () => {
-          $(this).closest("form").submit();
-        }
-      });
-    });
-  </script>
-{% endblock %}
\ No newline at end of file
diff --git a/app/developer/templates/developer/index.html b/app/developer/templates/developer/index.html
index d8d33bbf..b1ebcc76 100644
--- a/app/developer/templates/developer/index.html
+++ b/app/developer/templates/developer/index.html
@@ -65,28 +65,5 @@
 
 {% endblock %}
 
-{% block script %}
-  <script>
-    $(".custom-switch-input").change(function (e) {
-      // Only ask for confirmation when publishing, not when un-publishing
-      if (e.target.checked) {
-        var message = `After this, your app/website will made available in "Discover", please confirm.`;
 
-        notie.confirm({
-          text: message,
-          cancelCallback: () => {
-            // reset to the original value
-            var oldValue = !$(this).prop("checked");
-            $(this).prop("checked", oldValue);
-          },
-          submitCallback: () => {
-            $(this).closest("form").submit();
-          }
-        });
-      } else {
-        $(this).closest("form").submit();
-      }
-    })
-  </script>
-{% endblock %}