NEW Give feedback of password strength

silverstripe · Oct 3, 2024 · 4e93b52 · 4e93b52
1 parent 547afc6
commit 4e93b52
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/js/vendor.js b/client/dist/js/vendor.js
diff --git a/client/src/legacy/ConfirmedPasswordField.js b/client/src/legacy/ConfirmedPasswordField.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import debounce from 'lodash/debounce';
 
 $(document).on('click', '.confirmedpassword .showOnClick a', function () {
   var $container = $('.showOnClickContainer', $(this).parent());
@@ -12,3 +13,25 @@ $(document).on('click', '.confirmedpassword .showOnClick a', function () {
 
   return false;
 });
+
+$(document).on('input', '.confirmedpassword .password', function() {
+  const $password = $(this);
+  debounce(function () {
+    const url = $password.attr('data-strengthurl');
+    const $container = $password.closest('.confirmedpassword');
+    const $strength = $container.find('.passwordstrength');
+    if (!$strength.length || !url) {
+      return;
+    }
+    $.post({
+      url,
+      data: JSON.stringify({
+        password: $password.val()
+      }),
+    }).done(function(data) {
+      const json = JSON.parse(data);
+      const level = json.valid ? 'success' : 'danger';
+      $strength.html('<p class="alert alert-' + level + ' validation;" role="alert">' + json.message + '</p>');
+    });
+  }, 300)()
+});