From e54d06edc379c59fc64a5db8dedc94abd5c32f04 Mon Sep 17 00:00:00 2001
From: kasperisager <kasperisager@gmail.com>
Date: Wed, 21 May 2014 19:12:01 -0400
Subject: [PATCH] Implement password strength indicator

---
 design/custom_amelia.css           | 59 ++++++++++++++++++
 design/custom_bootstrap.css        | 97 ++++++++++++++++++++++++++++++
 design/custom_cerulean.css         | 59 ++++++++++++++++++
 design/custom_cosmo.css            | 62 ++++++++++++++++++-
 design/custom_cyborg.css           | 59 ++++++++++++++++++
 design/custom_darkly.css           | 62 ++++++++++++++++++-
 design/custom_flatly.css           | 62 ++++++++++++++++++-
 design/custom_journal.css          | 59 ++++++++++++++++++
 design/custom_lumen.css            | 62 ++++++++++++++++++-
 design/custom_readable.css         | 59 ++++++++++++++++++
 design/custom_simplex.css          | 59 ++++++++++++++++++
 design/custom_slate.css            | 59 ++++++++++++++++++
 design/custom_spacelab.css         | 59 ++++++++++++++++++
 design/custom_superhero.css        | 59 ++++++++++++++++++
 design/custom_united.css           | 59 ++++++++++++++++++
 design/custom_yeti.css             | 62 ++++++++++++++++++-
 design/style.css                   | 59 ++++++++++++++++++
 less/components/progress-bars.less | 56 +++++++++++++++++
 less/library.less                  |  1 +
 19 files changed, 1108 insertions(+), 5 deletions(-)
 create mode 100644 less/components/progress-bars.less

diff --git a/design/custom_amelia.css b/design/custom_amelia.css
index ca1b77a..420eb0d 100644
--- a/design/custom_amelia.css
+++ b/design/custom_amelia.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #0d747c;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #ad1d28;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #48ca3b;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #debb27;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #df6e1e;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_bootstrap.css b/design/custom_bootstrap.css
index bef1b1a..fbd949d 100644
--- a/design/custom_bootstrap.css
+++ b/design/custom_bootstrap.css
@@ -3425,6 +3425,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #428bca;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #5cb85c;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #f0ad4e;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #d9534f;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
@@ -5075,6 +5134,44 @@ img.jcrop-preview {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
   border-color: #dca7a7;
 }
+.PasswordStrength {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
+  background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
+}
+.PasswordStrength .StrengthText {
+  background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9));
+  background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+}
 .PanelInfo,
 .DataList {
   border-radius: 4px;
diff --git a/design/custom_cerulean.css b/design/custom_cerulean.css
index 92c3083..f87eb31 100644
--- a/design/custom_cerulean.css
+++ b/design/custom_cerulean.css
@@ -3397,6 +3397,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #2fa4e7;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #73a839;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #dd5600;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #c71c22;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_cosmo.css b/design/custom_cosmo.css
index c21ac5e..f5ae9c1 100644
--- a/design/custom_cosmo.css
+++ b/design/custom_cosmo.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 21px;
+  margin-bottom: 21px;
+  background-color: #cccccc;
+  border-radius: 0;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 13px;
+  line-height: 21px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #007fff;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #3fb618;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #ff7518;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #ff0039;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
@@ -4953,7 +5012,8 @@ table .info a {
 .token-input-token {
   border-radius: 0;
 }
-.progress {
+.progress,
+.PasswordStrength {
   height: 8px;
   -webkit-box-shadow: none;
   box-shadow: none;
diff --git a/design/custom_cyborg.css b/design/custom_cyborg.css
index a85e877..c067985 100644
--- a/design/custom_cyborg.css
+++ b/design/custom_cyborg.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #222222;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #2a9fd6;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #77b300;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #ff8800;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #cc0000;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_darkly.css b/design/custom_darkly.css
index f4c0c9a..6fa65f0 100644
--- a/design/custom_darkly.css
+++ b/design/custom_darkly.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 21px;
+  margin-bottom: 21px;
+  background-color: #ebebeb;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 13px;
+  line-height: 21px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #375a7f;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #00bc8c;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #f39c12;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #e74c3c;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
@@ -5017,7 +5076,8 @@ select:focus,
   color: #fff;
   text-decoration: underline;
 }
-.progress {
+.progress,
+.PasswordStrength {
   height: 10px;
   -webkit-box-shadow: none;
   box-shadow: none;
diff --git a/design/custom_flatly.css b/design/custom_flatly.css
index a1cc1ee..fe5c9e8 100644
--- a/design/custom_flatly.css
+++ b/design/custom_flatly.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 21px;
+  margin-bottom: 21px;
+  background-color: #ecf0f1;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 13px;
+  line-height: 21px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #2c3e50;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #18bc9c;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #f39c12;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #e74c3c;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
@@ -5019,7 +5078,8 @@ select:focus,
   color: #fff;
   opacity: 1;
 }
-.progress {
+.progress,
+.PasswordStrength {
   height: 10px;
   -webkit-box-shadow: none;
   box-shadow: none;
diff --git a/design/custom_journal.css b/design/custom_journal.css
index 612b54a..4cc564d 100644
--- a/design/custom_journal.css
+++ b/design/custom_journal.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 21px;
+  margin-bottom: 21px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 13px;
+  line-height: 21px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #eb6864;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #22b24c;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #f5e625;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #f57a00;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_lumen.css b/design/custom_lumen.css
index 198a130..35eeae7 100644
--- a/design/custom_lumen.css
+++ b/design/custom_lumen.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #fafafa;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #158cba;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #28b62c;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #ff851b;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #ff4136;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
@@ -5168,7 +5227,8 @@ label {
 .token-input-token {
   font-weight: normal;
 }
-.progress {
+.progress,
+.PasswordStrength {
   border: 1px solid #e7e7e7;
   -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.1);
diff --git a/design/custom_readable.css b/design/custom_readable.css
index 8b51b40..be33635 100644
--- a/design/custom_readable.css
+++ b/design/custom_readable.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 22px;
+  margin-bottom: 22px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 14px;
+  line-height: 22px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #4582ec;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #3fad46;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #f0ad4e;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #d9534f;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_simplex.css b/design/custom_simplex.css
index 625499f..0ca7ddb 100644
--- a/design/custom_simplex.css
+++ b/design/custom_simplex.css
@@ -3397,6 +3397,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #d9230f;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #469408;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #9b479f;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #d9831f;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_slate.css b/design/custom_slate.css
index 4a6c0be..4814a04 100644
--- a/design/custom_slate.css
+++ b/design/custom_slate.css
@@ -3409,6 +3409,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #1c1e22;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #7a8288;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #62c462;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #f89406;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #ee5f5b;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_spacelab.css b/design/custom_spacelab.css
index 5df66b9..02a790d 100644
--- a/design/custom_spacelab.css
+++ b/design/custom_spacelab.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #446e9b;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #3cb521;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #d47500;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #cd0200;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_superhero.css b/design/custom_superhero.css
index 07d67f7..aea8ed7 100644
--- a/design/custom_superhero.css
+++ b/design/custom_superhero.css
@@ -3397,6 +3397,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 21px;
+  margin-bottom: 21px;
+  background-color: #4e5d6c;
+  border-radius: 0;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 13px;
+  line-height: 21px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #df691a;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #5cb85c;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #f0ad4e;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #d9534f;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_united.css b/design/custom_united.css
index 479bbc4..527f5bf 100644
--- a/design/custom_united.css
+++ b/design/custom_united.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #dd4814;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #38b44a;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #efb73e;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #df382c;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/design/custom_yeti.css b/design/custom_yeti.css
index 69f1348..d41386e 100644
--- a/design/custom_yeti.css
+++ b/design/custom_yeti.css
@@ -3398,6 +3398,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 21px;
+  margin-bottom: 21px;
+  background-color: #f5f5f5;
+  border-radius: 0;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 21px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #008cba;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #43ac6a;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #e99002;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #f04124;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
@@ -5153,7 +5212,8 @@ a.Delete:focus,
 .Alert {
   font-weight: 300;
 }
-.progress {
+.progress,
+.PasswordStrength {
   height: 22px;
   padding: 2px;
   background-color: #f6f6f6;
diff --git a/design/style.css b/design/style.css
index 5098630..34af5c4 100644
--- a/design/style.css
+++ b/design/style.css
@@ -3397,6 +3397,65 @@ fieldset[disabled] .Button.Danger:active {
 .Errors ul li {
   margin-bottom: 0 !important;
 }
+.PasswordStrength {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.PasswordStrength .StrengthText {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #428bca;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.PasswordStrength.Score-4 .StrengthText,
+.PasswordStrength.Score-5 .StrengthText {
+  background-color: #5cb85c;
+}
+.PasswordStrength.Score-2 .StrengthText,
+.PasswordStrength.Score-3 .StrengthText {
+  background-color: #f0ad4e;
+}
+.PasswordStrength.Score-0 .StrengthText,
+.PasswordStrength.Score-1 .StrengthText {
+  background-color: #d9534f;
+}
+.PasswordStrength {
+  width: 100% !important;
+}
+.InputBox + .PasswordStrength {
+  margin-top: 5px;
+}
+.PasswordStrength.Score-0 .StrengthText {
+  width: 20%;
+}
+.PasswordStrength.Score-1 .StrengthText {
+  width: 36%;
+}
+.PasswordStrength.Score-2 .StrengthText {
+  width: 52%;
+}
+.PasswordStrength.Score-3 .StrengthText {
+  width: 68%;
+}
+.PasswordStrength.Score-4 .StrengthText {
+  width: 84%;
+}
+.PasswordStrength.Score-5 .StrengthText {
+  width: 100%;
+}
 .PanelInfo,
 .DataList {
   margin-bottom: 20px;
diff --git a/less/components/progress-bars.less b/less/components/progress-bars.less
new file mode 100644
index 0000000..265164c
--- /dev/null
+++ b/less/components/progress-bars.less
@@ -0,0 +1,56 @@
+//
+// # Progress Bars
+//
+// No styleguide reference.
+
+// WARNING: DO NOT EDIT THIS FILE
+
+// Library
+// -----------------------------------------------------------------------------
+@import (reference) "@{bootstrap}/progress-bars";
+
+// Extensions
+// -----------------------------------------------------------------------------
+
+.PasswordStrength {
+  width: 100% !important;
+  &:extend(.progress);
+
+  .InputBox + & {
+    margin-top: 5px;
+  }
+
+  .StrengthText {
+    &:extend(.progress-bar);
+  }
+
+  &.Score-0 .StrengthText {
+    width: 20%;
+    &:extend(.progress-bar-danger);
+  }
+
+  &.Score-1 .StrengthText {
+    width: 36%;
+    &:extend(.progress-bar-danger);
+  }
+
+  &.Score-2 .StrengthText {
+    width: 52%;
+    &:extend(.progress-bar-warning);
+  }
+
+  &.Score-3 .StrengthText {
+    width: 68%;
+    &:extend(.progress-bar-warning);
+  }
+
+  &.Score-4 .StrengthText {
+    width: 84%;
+    &:extend(.progress-bar-success);
+  }
+
+  &.Score-5 .StrengthText {
+    width: 100%;
+    &:extend(.progress-bar-success);
+  }
+}
diff --git a/less/library.less b/less/library.less
index 1e81503..a8911c8 100644
--- a/less/library.less
+++ b/less/library.less
@@ -42,6 +42,7 @@
 @import "components/badges";
 @import "components/thumbnails";
 @import "components/alerts";
+@import "components/progress-bars";
 @import "components/list-group";
 @import "components/panels";
 @import "components/wells";
-- 
GitLab