Indicate password strength using strengthify

 * uses zxcvbn
 * outsourced to separate jquery plugin
 * async loading
 * hide strength meter if input is empty
 * feedback if user enters weakest password
 * fade in and out
 * show tipsy with strength
 * Opera 12, IE8-10, FF 23, Chromium 29

5 files changed, 41 insertions, 7 deletions

diff --git a/core/css/fixes.css b/core/css/fixes.css
index bec002b96b3..4ee854addef 100644
--- a/core/css/fixes.css
+++ b/core/css/fixes.css
@@ -63,3 +63,9 @@
 .ie8 #nojavascript {
 	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c320000', endColorstr='#4c320000'); /* IE */
 }
+
+/* IE8 doesn't have rounded corners, so the strengthify bar should be wider */
+.lte8 #body-login .strengthify-wrapper {
+	width: 271px;
+	left: 6px;
+}
diff --git a/core/css/styles.css b/core/css/styles.css
index df014567087..29fcdd45738 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -341,7 +341,7 @@ input[type="submit"].enabled {
 	margin-bottom: 20px;
 	text-align: left;
 }
-#body-login form #adminaccount { margin-bottom:5px; }
+#body-login form #adminaccount { margin-bottom:15px; }
 #body-login form fieldset legend, #datadirContent label {
 	width: 100%;
 	font-weight: bold;
@@ -361,6 +361,21 @@ input[type="submit"].enabled {
 	margin-left: -4px;
 }
 
+/* strengthify wrapper */
+#body-login .strengthify-wrapper {
+	display: inline-block;
+	position: relative;
+	left: 15px;
+	top: -21px;
+	width: 252px;
+}
+
+/* tipsy for the strengthify wrapper looks better with following font settings */
+#body-login .tipsy-inner {
+	font-weight: bold;
+	color: #ccc;
+}
+
 /* Icons for username and password fields to better recognize them */
 #adminlogin, #adminpass, #user, #password { width:11.7em!important; padding-left:1.8em; }
 #adminlogin+label+img, #adminpass-icon, #user+label+img, #password-icon {
diff --git a/core/js/setup.js b/core/js/setup.js
index 0863be35886..279b5fbebb9 100644
--- a/core/js/setup.js
+++ b/core/js/setup.js
@@ -7,9 +7,9 @@ $(document).ready(function() {
 		oracle:!!$('#hasOracle').val(),
 		mssql:!!$('#hasMSSQL').val()
 	};
-	
+
 	$('#selectDbType').buttonset();
-	
+
 	if($('#hasSQLite').val()){
 		$('#use_other_db').hide();
 		$('#use_oracle_db').hide();
@@ -63,17 +63,27 @@ $(document).ready(function() {
 		form.submit();
 		return false;
 	});
-	
+
 	// Expand latest db settings if page was reloaded on error
 	var currentDbType = $('input[type="radio"]:checked').val();
-	
+
 	if (currentDbType === undefined){
 		$('input[type="radio"]').first().click();
 	}
-	
+
 	if (currentDbType === 'sqlite' || (dbtypes.sqlite && currentDbType === undefined)){
 		$('#datadirContent').hide(250);
 		$('#databaseField').hide(250);
 	}
-	
+
+	$('#adminpass').strengthify({
+		zxcvbn: OC.linkTo('3rdparty','zxcvbn/js/zxcvbn.js'),
+		titles: [
+			t('core', 'Very weak password'),
+			t('core', 'Weak password'),
+			t('core', 'So-so password'),
+			t('core', 'Good password'),
+			t('core', 'Strong password')
+		]
+	});
 });
diff --git a/core/setup.php b/core/setup.php
index 781d6e572af..958376b2cce 100644
--- a/core/setup.php
+++ b/core/setup.php
@@ -20,6 +20,8 @@ if ($dbIsSet AND $directoryIsSet AND $adminAccountIsSet) {
 	}
 }
 
+OC_Util::addScript( '3rdparty', 'strengthify/jquery.strengthify' );
+OC_Util::addStyle( '3rdparty', 'strengthify/strengthify' );
 OC_Util::addScript('setup');
 
 $hasSQLite = class_exists('SQLite3');
diff --git a/core/templates/installation.php b/core/templates/installation.php
index ec55a65ea58..182fc83a4d4 100644
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@@ -59,6 +59,7 @@
 			<img class="svg" id="adminpass-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt="" />
 			<input type="checkbox" id="show" name="show" />
 			<label for="show"></label>
+			<div class="strengthify-wrapper"></div>
 		</p>
 	</fieldset>