From 38a09c9c01d422afca1978245de6b37c8d59508c Mon Sep 17 00:00:00 2001
From: rodrigovallades <rodrigo.vallades@gmail.com>
Date: Mon, 5 Feb 2018 00:27:05 -0200
Subject: [PATCH] Removing inline CSS from the strength-meter and adding
 support to configurable CSS classes

---
 src/modules/security.js | 46 ++++++++++++++++-------------------------
 src/theme-default.css   | 24 +++++++++++++++++++++
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/src/modules/security.js b/src/modules/security.js
index aa8ad1c..8434c02 100644
--- a/src/modules/security.js
+++ b/src/modules/security.js
@@ -281,12 +281,14 @@
 
     strengthDisplay: function ($el, options) {
       var config = {
-        fontSize: '12pt',
-        padding: '4px',
-        bad: 'Very bad',
-        weak: 'Weak',
-        good: 'Good',
-        strong: 'Strong'
+        text_strength0: 'Very bad',
+        text_strength1: 'Weak',
+        text_strength2: 'Good',
+        text_strength3: 'Strong',
+        cssClass_strength0: 'strength-meter-0',
+        cssClass_strength1: 'strength-meter-1',
+        cssClass_strength2: 'strength-meter-2',
+        cssClass_strength3: 'strength-meter-3'
       };
 
       if (options) {
@@ -298,22 +300,12 @@
           $parent = typeof config.parent === 'undefined' ? $(this).parent() : $(config.parent),
           $displayContainer = $parent.find('.strength-meter'),
           strength = $.formUtils.validators.validate_strength.calculatePasswordStrength(val),
-          css = {
-            background: 'pink',
-            color: '#FF0000',
-            fontWeight: 'bold',
-            border: 'red solid 1px',
-            borderWidth: '0px 0px 4px',
-            display: 'inline-block',
-            fontSize: config.fontSize,
-            padding: config.padding
-          },
-          text = config.bad;
+          text = config.text_strength0,
+          cssClass = config.cssClass_strength0;
 
         if ($displayContainer.length === 0) {
           $displayContainer = $('<span></span>');
           $displayContainer
-            .addClass('strength-meter')
             .appendTo($parent);
         }
 
@@ -324,23 +316,21 @@
         }
 
         if (strength === 1) {
-          text = config.weak;
+          text = config.text_strength1;
+          cssClass = config.cssClass_strength1;
         }
         else if (strength === 2) {
-          css.background = 'lightyellow';
-          css.borderColor = 'yellow';
-          css.color = 'goldenrod';
-          text = config.good;
+          text = config.text_strength2;
+          cssClass = config.cssClass_strength2;
         }
         else if (strength >= 3) {
-          css.background = 'lightgreen';
-          css.borderColor = 'darkgreen';
-          css.color = 'darkgreen';
-          text = config.strong;
+          text = config.text_strength3;
+          cssClass = config.cssClass_strength3;
         }
 
         $displayContainer
-          .css(css)
+          .removeClass()
+          .addClass('strength-meter ' + cssClass)          
           .text(text);
       });
     }
diff --git a/src/theme-default.css b/src/theme-default.css
index f0c5e5b..859e754 100644
--- a/src/theme-default.css
+++ b/src/theme-default.css
@@ -108,3 +108,27 @@ div.form-error ul,
 div.form-error ul li {
     background: none;
 }
+
+span.strength-meter {
+  font-weight: bold;
+  border-bottom: 1px solid;
+  display: inline-block;
+  font-size: 12px;
+  padding: 4px;
+}
+
+span.strength-meter-0,
+span.strength-meter-1 {
+  background-color: #ffc0cb;
+  border-bottom-color: #f00;
+}
+
+span.strength-meter-2 {
+  background-color: #ffff00;
+  border-bottom-color: #daa520;
+}
+
+span.strength-meter-3 {
+  background-color: #90ee90;
+  border-bottom-color: #006400;
+}