From 1df5bec8dfb01503800bec9e00d28aeae18b24b3 Mon Sep 17 00:00:00 2001
From: Son Nguyen Kim <nguyenkims@users.noreply.github.com>
Date: Mon, 6 Sep 2021 18:51:50 +0200
Subject: [PATCH] use parsleyjs instead of formbouncerjs

---
 .../templates/dashboard/custom_alias.html     | 10 ++---
 app/oauth/templates/oauth/authorize.html      | 20 +++-------
 static/package-lock.json                      | 13 ++++---
 static/package.json                           |  2 +-
 static/style.css                              | 39 ++++++++++++++++++-
 templates/base.html                           |  5 ++-
 6 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/app/dashboard/templates/dashboard/custom_alias.html b/app/dashboard/templates/dashboard/custom_alias.html
index bd2ab982..bca4fe5a 100644
--- a/app/dashboard/templates/dashboard/custom_alias.html
+++ b/app/dashboard/templates/dashboard/custom_alias.html
@@ -25,15 +25,16 @@
         </div>
       {% endif %}
 
-      <form method="post">
+      <form method="post" data-parsley-validate>
         <div class="row mb-2">
           <div class="col-sm-6 mb-1 p-1" style="min-width: 4em">
             <input name="prefix" class="form-control"
                    id="prefix"
                    type="text"
-                   pattern="[0-9a-z-_.]{1,}"
+                   data-parsley-pattern="[0-9a-z-_.]{1,}"
+                   data-parsley-trigger="change"
+                   data-parsley-error-message="Only lowercase letters, dots, numbers, dashes (-) and underscores (_) are currently supported."
                    maxlength="40"
-                   data-bouncer-message="Only lowercase letters, dots, numbers, dashes (-) and underscores (_) are currently supported."
                    placeholder="Alias prefix, for example newsletter.com-123_xyz"
                    autofocus required>
 
@@ -105,9 +106,6 @@
 
 {% block script %}
   <script>
-    // init bouncer
-    new Bouncer('form');
-
     $('.mailbox-select').multipleSelect();
     
     // Ctrl-enter submit the form
diff --git a/app/oauth/templates/oauth/authorize.html b/app/oauth/templates/oauth/authorize.html
index 3abfb2c1..99853c7f 100644
--- a/app/oauth/templates/oauth/authorize.html
+++ b/app/oauth/templates/oauth/authorize.html
@@ -33,7 +33,7 @@
 
 {% block single_content %}
 
-  <form class="card" method="post" style="max-width: 40rem; margin: auto; border-radius: 2%">
+  <form class="card" method="post" data-parsley-validate style="max-width: 40rem; margin: auto; border-radius: 2%">
     {% if not client.approved %}
       <div class="alert alert-warning" style="border-bottom: 3px solid;">
         <b>{{ client.name }}</b> is in Dev Mode and isn't approved (yet) by SimpleLogin.
@@ -101,10 +101,11 @@
                 <div class="col-sm-6 pr-1 mb-1" style="min-width: 5em">
                   <input name="prefix" class="form-control"
                          type="text"
-                         pattern="[0-9a-z-_]{1,}"
                          maxlength="40"
-                         data-bouncer-message="Only lowercase letters, dots, numbers, dashes (-) and underscores (_) are currently supported."
-                         placeholder="email alias"
+                         data-parsley-pattern="[0-9a-z-_.]{1,}"
+                         data-parsley-trigger="change"
+                         data-parsley-error-message="Only lowercase letters, dots, numbers, dashes (-) and underscores (_) are currently supported."
+                         placeholder="Alias prefix, for example newsletter.com-123_xyz"
                          autofocus>
                 </div>
 
@@ -124,10 +125,6 @@
                   </select>
                 </div>
               </div>
-
-              <small class="text-muted">
-                Alias can use letter, number, dash and cannot be empty
-              </small>
             {% endif %}
           </div>
         </div>
@@ -202,10 +199,3 @@
     </div>
   </form>
 {% endblock %}
-
-{% block script %}
-  <script>
-    // init bouncer
-    new Bouncer('form');
-  </script>
-{% endblock %}
\ No newline at end of file
diff --git a/static/package-lock.json b/static/package-lock.json
index 13aa66a7..6e7b2ef1 100644
--- a/static/package-lock.json
+++ b/static/package-lock.json
@@ -81,11 +81,6 @@
       "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
       "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
     },
-    "formbouncerjs": {
-      "version": "1.4.6",
-      "resolved": "https://registry.npmjs.org/formbouncerjs/-/formbouncerjs-1.4.6.tgz",
-      "integrity": "sha512-uQL/ZFs5w79RPtgtPbmL8HTKrsEK2q7Fph/uBqe4sFNXIszcrVmHcJ3aj5sB4OTsFbV6igQX9819f/f5t5Wjgg=="
-    },
     "intro.js": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-2.9.3.tgz",
@@ -101,6 +96,14 @@
       "resolved": "https://registry.npmjs.org/multiple-select/-/multiple-select-1.5.2.tgz",
       "integrity": "sha512-sTNNRrjnTtB1b1+HTKcjQ/mjWY7Gvigo9F3C/3oTQCTFEpYzwaRYFPRAOu2SogfA1hEfyJTXjyS1VAbanJMsmA=="
     },
+    "parsleyjs": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/parsleyjs/-/parsleyjs-2.9.2.tgz",
+      "integrity": "sha512-DKS2XXTjEUZ1BJWUzgXAr+550kFBZrom2WYweubqdV7WzdNC1hjOajZDfeBPoAZMkXumJPlB3v37IKatbiW8zQ==",
+      "requires": {
+        "jquery": ">=1.8.0"
+      }
+    },
     "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 e9f7cb48..6342fb98 100644
--- a/static/package.json
+++ b/static/package.json
@@ -19,9 +19,9 @@
     "@sentry/browser": "^5.30.0",
     "bootbox": "^5.5.2",
     "font-awesome": "^4.7.0",
-    "formbouncerjs": "^1.4.6",
     "intro.js": "^2.9.3",
     "multiple-select": "^1.5.2",
+    "parsleyjs": "^2.9.2",
     "qrious": "^4.0.2",
     "toastr": "^2.1.4",
     "vue": "^2.6.14"
diff --git a/static/style.css b/static/style.css
index 5ec0300d..d8f0c233 100644
--- a/static/style.css
+++ b/static/style.css
@@ -128,4 +128,41 @@ em {
 .disabled-content {
     pointer-events: none;
     opacity: 0.4;
-}
\ No newline at end of file
+}
+
+/* Parsley CSS */
+input.parsley-success,
+select.parsley-success,
+textarea.parsley-success {
+    color: #468847;
+    background-color: #DFF0D8;
+    border: 1px solid #D6E9C6;
+}
+
+input.parsley-error,
+select.parsley-error,
+textarea.parsley-error {
+    color: #B94A48;
+    background-color: #F2DEDE;
+    border: 1px solid #EED3D7;
+}
+
+.parsley-errors-list {
+    margin: 2px 0 3px;
+    padding: 0;
+    list-style-type: none;
+    font-size: 0.9em;
+    line-height: 0.9em;
+    opacity: 0;
+    color: #B94A48;
+
+    transition: all .3s ease-in;
+    -o-transition: all .3s ease-in;
+    -moz-transition: all .3s ease-in;
+    -webkit-transition: all .3s ease-in;
+}
+
+.parsley-errors-list.filled {
+    opacity: 1;
+}
+/* END Parsley CSS */
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 6a7487d4..15476cce 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -77,8 +77,9 @@
   <script
       src="{{ url_for('static', filename='node_modules/multiple-select/dist/multiple-select.min.js') }}"></script>
 
-  <!-- bouncer library -->
-  <script src="{{ url_for('static', filename='node_modules/formbouncerjs/dist/bouncer.js') }}"></script>
+  <!-- Parseley library -->
+  <script src="{{ url_for('static', filename='node_modules/parsleyjs/dist/parsley.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='node_modules/parsleyjs/dist/i18n/en.js') }}"></script>
 
 
   {% if PLAUSIBLE_HOST and PLAUSIBLE_DOMAIN %}