UI-243: Added a control to display the password strength on a passwor…

…d input.
kiserp · Apr 20, 2015 · 8d9aa85 · 8d9aa85
1 parent 3d808ac
commit 8d9aa85
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 15 deletions.
diff --git a/app.js b/app.js
@@ -406,6 +406,7 @@ define(function(require){
 					}
 				}
 			});
+			monster.ui.showPasswordStrength(newAccountWizard.find('input[name="user.password"]'));
 
 			parent.find('.edition-view').hide();
 			parent.find('.creation-view').append(newAccountWizard);
@@ -794,6 +795,11 @@ define(function(require){
 							userId = $adminElement.data('user_id'),
 							$adminPasswordDiv = $adminElement.find('.edit-admin-password-div');
 
+						monster.ui.showPasswordStrength($adminElement.find('input[name="password"]'), {
+							container: $adminElement.find('.password-strength-container'),
+							display: 'icon'
+						});
+
 						$adminPasswordDiv.hide();
 
 						$adminElement.find('.admin-cancel-btn').click(function(e) {

diff --git a/style/app.css b/style/app.css
@@ -399,6 +399,16 @@
 	padding: 10px;
 }
 
+#form_accountsmanager_account_admins .admin-element .password-strength-container {
+	position: absolute;
+	top: 0px;
+	left: 125px;
+}
+
+#form_accountsmanager_account_admins .admin-element .admin-element-edit .edit-admin-password-div {
+	position: relative;
+}
+
 #form_accountsmanager_account_admins .new-admin-element {
 	display: none;
 	position: relative;
@@ -459,10 +469,14 @@
 
 #form_accountsmanager_account_admins .create-user-div .new-admin-password-div {
 	display: none;
-	margin-top: 5px;
+	margin-top: 15px;
 	position: relative;
 }
 
+#form_accountsmanager_account_admins .create-user-div .new-admin-password-div .checkbox-container {
+	margin-top: 10px;
+}
+
 #form_accountsmanager_account_admins .create-user-div .new-admin-password-div label.monster-invalid[for="password"],
 #form_accountsmanager_account_admins .admin-element-edit .edit-admin-password-div label.monster-invalid[for="password"] {
 	margin-top: 30px;
@@ -471,7 +485,7 @@
 #form_accountsmanager_account_admins .create-user-div .new-admin-password-div label.monster-invalid[for="extra.password_confirm"],
 #form_accountsmanager_account_admins .admin-element-edit .edit-admin-password-div label.monster-invalid[for="extra.password_confirm"] {
 	margin-top: 30px;
-	margin-left: 145px; /* Warning: This will be messed up if the screen is too small due to bootstraps responsive spans; */
+	margin-left: 150px; /* Warning: This will be messed up if the screen is too small due to bootstraps responsive spans; */
 }
 
 #form_accountsmanager_account_admins .admin-empty-msg {
@@ -743,6 +757,16 @@
 	margin-left: 10px;
 }
 
+#accountsmanager_new_account_form .account-settings-step .new-admin-div input[name="user.password"] {
+	margin-bottom: 0px;
+}
+#accountsmanager_new_account_form .account-settings-step .new-admin-div input[name="extra.confirmPassword"] {
+	margin-bottom: 25px;
+}
+#accountsmanager_new_account_form .account-settings-step .new-admin-div .monster-checkbox {
+	margin-top: 20px;
+}
+
 #accountsmanager_new_account_form .error-message {
 	color: red;
 	font-style: italic;

diff --git a/views/accountsAdminForm.html b/views/accountsAdminForm.html
@@ -23,23 +23,24 @@
 								<div class="input-prepend span12">
 									<span class="add-on"><i class="icon-envelope"></i></span>
 									<input required type="email" name="email" value="{{this.email}}" data-original_value="{{this.email}}" placeholder="{{ ../i18n.adminPlaceholders.email }}" data-original-title="{{../i18n.adminLabels.emailTooltip}}" data-placement="right" data-toggle="tooltip" data-trigger="focus" data-container="#form_accountsmanager_account_admins"/>
-							    </div>
+								</div>
 							</div>
 							<div class="controls clearfix">
 								<div class="input-prepend span12">
 									<span class="add-on"><i class="icon-user"></i></span>
 									<input required type="text" name="first_name" value="{{this.first_name}}" data-original_value="{{this.first_name}}" placeholder="{{ ../i18n.adminPlaceholders.firstName }}"/>
-							    </div>
+								</div>
 							</div>
 							<div class="controls clearfix">
 								<div class="input-prepend span12">
 									<span class="add-on"><i class="icon-user"></i></span>
 									<input required type="text" name="last_name" value="{{this.last_name}}" data-original_value="{{this.last_name}}" placeholder="{{ ../i18n.adminPlaceholders.lastName }}"/>
-							    </div>
+								</div>
 							</div>
 							<div class="controls controls-row edit-admin-password-div clearfix">
-									<input required type="password" class="span6" name="password" placeholder="{{ ../i18n.adminPlaceholders.password }}"/>
-									<input required type="password" class="span6" name="extra.password_confirm" placeholder="{{ ../i18n.adminPlaceholders.confirm }}"/>
+								<input required type="password" class="span6" name="password" placeholder="{{ ../i18n.adminPlaceholders.password }}"/>
+								<input required type="password" class="span6" name="extra.password_confirm" placeholder="{{ ../i18n.adminPlaceholders.confirm }}"/>
+								<div class="password-strength-container"></div>
 							</div>
 							<div class="controls controls-row admin-btn-div">
 								<div class="span6">
@@ -75,28 +76,31 @@
 									<div class="input-prepend span12">
 										<span class="add-on"><i class="icon-envelope"></i></span>
 										<input required  type="email" name="email" placeholder="Email address" data-original-title="{{i18n.adminLabels.emailTooltip}}" data-placement="right" data-toggle="tooltip" data-trigger="focus" data-container="#form_accountsmanager_account_admins"/>
-								    </div>
+									</div>
 								</div>
 								<div class="controls clearfix">
 									<div class="input-prepend span12">
 										<span class="add-on"><i class="icon-user"></i></span>
 										<input required  type="text" name="first_name" placeholder="First name"/>
-								    </div>
+									</div>
 								</div>
 								<div class="controls clearfix">
 									<div class="input-prepend span12">
 										<span class="add-on"><i class="icon-user"></i></span>
 										<input required  type="text" name="last_name" placeholder="Last name"/>
-								    </div>
+									</div>
 								</div>
 								<div>
 									<label><input type="radio" name="extra.autogen_password" value="true" checked />{{ i18n.autogenPassword }}</label>
 									<label><input type="radio" name="extra.autogen_password" value="false" />{{ i18n.manuallyTypePassword }}</label>
 									<div class="controls controls-row new-admin-password-div clearfix">
-											<input required type="password" class="span6" name="password" placeholder="Password"/>
-											<input required type="password" class="span6" name="extra.password_confirm" placeholder="Confirm"/>
-											<div>
-												{{#monsterCheckbox 'large-checkbox' i18n.adminLabels.sendCredentialsEmailShort}}
+											<div class="input-container clearfix">
+												<input required type="password" class="span6" name="password" placeholder="Password"/>
+												<input required type="password" class="span6" name="extra.password_confirm" placeholder="Confirm"/>
+												<div class="password-strength-container"></div>
+											</div>
+											<div class="checkbox-container">
+												{{#monsterCheckbox i18n.adminLabels.sendCredentialsEmailShort}}
 													<input type="checkbox" name="send_email_on_creation"></input>
 												{{/monsterCheckbox}}
 											</div>

diff --git a/views/newAccountWizard.html b/views/newAccountWizard.html
@@ -103,7 +103,7 @@
 							<div class="control-group password-toggle-div clearfix">
 								<div class="span5 offset1">
 									<label>{{ i18n.adminLabels.password }}</label>
-									<input required type="password" name="user.password" />
+									<input type="password" name="user.password" />
 								</div>
 								<div class="span5">
 									<label>{{ i18n.adminLabels.confirm }}</label>