Adding Password Strength Meter Fixes openemr#7366 (openemr#7367)

* Created by OWASP Threat Dragon * Created by OWASP Threat Dragon * Adding password strength meter * Resolving comments for Password strength meter * Replacing xlt with xlj * Moved Password Strength meter to utility.js and added it to user_info as well * Resolving comments about src and bootstrap styling --------- Co-authored-by: kmalick <[email protected]>
sjpadgett · Apr 19, 2024 · 4a991ed · 4a991ed
1 parent d277140
commit 4a991ed
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 1 deletion.
diff --git a/interface/usergroup/user_info.php b/interface/usergroup/user_info.php
@@ -127,6 +127,11 @@ function(data)
                         <label class='control-label col-sm-2'><?php echo xlt('New Password') . ":"; ?></label>
                         <div class='col-sm-3'>
                             <input type='password' class='form-control' name='newPass'  value="" autocomplete='off'>
+                            <!-- Password Strength Meter -->
+                            <div id="password_strength_meter" class="progress">
+                                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
+                            </div>
+                            <div id="password_strength_text"></div>
                         </div>
                     </div>
                     <div class="form-group">

diff --git a/interface/usergroup/usergroup_admin_add.php b/interface/usergroup/usergroup_admin_add.php
@@ -237,7 +237,18 @@ function authorized_clicked() {
 <tr>
 <td style="width:150px;"><span class="text"><?php echo xlt('Username'); ?>: </span></td><td style="width:220px;"><input type="text" name="rumple" style="width:120px;" class="form-control"><span class="mandatory"></span></td>
 <?php if (empty($GLOBALS['gbl_ldap_enabled']) || empty($GLOBALS['gbl_ldap_exclusions'])) { ?>
-<td style="width:150px;"><span class="text"><?php echo xlt('Password'); ?>: </span></td><td style="width:250px;"><input type="password" style="width:120px;" name="stiltskin" class="form-control"><span class="mandatory"></span></td>
+<td style="width:150px;">
+    <span class="text"><?php echo xlt('Password'); ?>:</span>
+</td>
+<td style="width:150px;">
+    <input type="password" style="width:120px;" name="stiltskin" id="stiltskin" class="form-control" onkeyup="checkPasswordStrength(this);">
+    <span class="mandatory"></span>
+    <!-- Password Strength Meter -->
+    <div id="password_strength_meter" class="progress mt-2">
+        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    <div id="password_strength_text"></div>
+</td>
 <?php } else { ?>
         <td><input type="hidden" value="124" name="stiltskin" /></td>
 <?php } ?>
@@ -645,6 +656,7 @@ function authorized_clicked() {
 
 });
 </script>
+
 <table>
 
 </table>

diff --git a/library/js/utility.js b/library/js/utility.js
@@ -345,7 +345,47 @@ function oeSortable(callBackFn) {
     }
 }
 
+// Password Strength Meter JavaScript
+function checkPasswordStrength(inputElement) {
+    var number = /[\p{N}]/u;  // Matches any Unicode number character
+    var alphabets = /[\p{L}]/u;  // Matches any Unicode letter character
+    var special_characters = /[^\p{N}\p{L}]/u; // Matches any character that is not a letter, number, or whitespace
+
+    var pwd = inputElement.value;
+    var strength = 0;
+
+    if (pwd.length < 6) {
+        document.getElementById('password_strength_meter').style.backgroundColor = "#ff6666";
+        document.getElementById('password_strength_text').innerText = xl('Very Weak');
+    } else {
+        if (pwd.match(number) && pwd.match(alphabets) && pwd.match(special_characters)) {
+            strength += 3;
+        } else if (pwd.match(number) && pwd.match(alphabets)) {
+            strength += 2;
+        } else if (pwd.match(alphabets)) {
+            strength += 1;
+        }
 
+        switch (strength) {
+            case 1:
+                document.getElementById('password_strength_meter').style.backgroundColor = "#ffcc00";
+                document.getElementById('password_strength_text').innerText = xl('Weak');
+                break;
+            case 2:
+                document.getElementById('password_strength_meter').style.backgroundColor = "#ffcc66";
+                document.getElementById('password_strength_text').innerText = xl('Good');
+                break;
+            case 3:
+                document.getElementById('password_strength_meter').style.backgroundColor = "#99cc00";
+                document.getElementById('password_strength_text').innerText = xl('Strong');
+                break;
+            default:
+                document.getElementById('password_strength_meter').style.backgroundColor = "#ff6666";
+                document.getElementById('password_strength_text').innerText = xl('Very Weak');
+                break;
+        }
+    }
+}
 /*
 * Universal async BS alert message with promise
 * Note the use of new javaScript translate function xl().