Merge pull request #111 from nextcloud/strengthify-update

Fix strengthify issues

7 files changed, 209 insertions, 126 deletions

diff --git a/core/css/fixes.css b/core/css/fixes.css
index 71cb09cae76..b660cd47aa8 100644
--- a/core/css/fixes.css
+++ b/core/css/fixes.css
@@ -108,12 +108,6 @@ select {
 	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c320000', endColorstr='#4c320000');
 }
 
-/* IE8 doesn't have rounded corners, so the strengthify bar should be wider */
-.lte8 #body-login .strengthify-wrapper {
-	width: 271px;
-	left: 6px;
-}
-
 /* fix background of navigation popup in IE8 */
 .ie8 #navigation,
 .ie8 #expanddiv {
diff --git a/core/css/styles.css b/core/css/styles.css
index d44ba31f4d0..4f56a0d441e 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -346,8 +346,8 @@ a.two-factor-cancel {
 	display: inline-block;
 	position: relative;
 	left: 15px;
-	top: -21px;
-	width: 252px;
+	top: -23px;
+	width: 250px;
 }
 
 /* tipsy for the strengthify wrapper looks better with following font settings */
diff --git a/core/js/setup.js b/core/js/setup.js
index cb299597451..96760e8ae61 100644
--- a/core/js/setup.js
+++ b/core/js/setup.js
@@ -109,7 +109,8 @@ $(document).ready(function() {
 			t('core', 'So-so password'),
 			t('core', 'Good password'),
 			t('core', 'Strong password')
-		]
+		],
+		drawTitles: true,
 	});
 
 	// centers the database chooser if it is too wide
diff --git a/core/templates/installation.php b/core/templates/installation.php
index 7f179bfa5d6..a4dbb078344 100644
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@@ -52,7 +52,6 @@ script('core', [
 			<label for="adminpass" class="infield"><?php p($l->t( 'Password' )); ?></label>
 			<input type="checkbox" id="show" name="show">
 			<label for="show" class="svg"></label>
-			<div class="strengthify-wrapper"></div>
 		</p>
 	</fieldset>
 
diff --git a/core/vendor/strengthify/.bower.json b/core/vendor/strengthify/.bower.json
index d0baec6ed73..4da982f2403 100644
--- a/core/vendor/strengthify/.bower.json
+++ b/core/vendor/strengthify/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "strengthify",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "homepage": "https://github.com/MorrisJobke/strengthify",
   "authors": [
     "Morris Jobke <hey@morrisjobke.de>"
@@ -8,13 +8,13 @@
   "description": "Combine jQuery and zxcvbn to create a password strength meter.",
   "main": "jquery.strengthify.js",
   "license": "MIT",
-  "_release": "0.4.2",
+  "_release": "0.5.1",
   "_resolution": {
     "type": "version",
-    "tag": "v0.4.2",
-    "commit": "b3df9344d829063564cdced3c6328b001bc4bad1"
+    "tag": "0.5.1",
+    "commit": "fd8bc41992bb37e16495a8e4c266951b93f8467d"
   },
   "_source": "git://github.com/MorrisJobke/strengthify.git",
-  "_target": "0.4.2",
+  "_target": "0.5.1",
   "_originalSource": "strengthify"
 }
\ No newline at end of file
diff --git a/core/vendor/strengthify/jquery.strengthify.js b/core/vendor/strengthify/jquery.strengthify.js
index 26d06a5d301..1019aab2976 100644
--- a/core/vendor/strengthify/jquery.strengthify.js
+++ b/core/vendor/strengthify/jquery.strengthify.js
@@ -2,14 +2,16 @@
  * Strengthify - show the weakness of a password (uses zxcvbn for this)
  * https://github.com/MorrisJobke/strengthify
  *
- * Version: 0.4.2
- * Author: Morris Jobke (github.com/MorrisJobke)
+ * Version: 0.5.1
+ * Author: Morris Jobke (github.com/MorrisJobke) - original
+ *         Eve Ragins @ Eve Corp (github.com/eve-corp)
+ *
  *
  * License:
  *
  * The MIT License (MIT)
  *
- * Copyright (c) 2013-2015 Morris Jobke <morris.jobke@gmail.com>
+ * Copyright (c) 2013-2016 Morris Jobke <morris.jobke@gmail.com>
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -30,108 +32,183 @@
  */
 
 /* global jQuery */
-(function ($) {
-	$.fn.strengthify = function(paramOptions) {
-		var me = this,
-			defaults = {
-				zxcvbn: 'zxcvbn/zxcvbn.js',
-				titles: [
-					'Weakest',
-					'Weak',
-					'So-so',
-					'Good',
-					'Perfect'
-				]
-			},
-			options = $.extend(defaults, paramOptions),
-			drawStrengthify = function() {
-				var password = $(me).val(),
-					// hide strengthigy if no input is provided
-					opacity = (password === '') ? 0 : 1,
-					// calculate result
-					result = zxcvbn(password),
-					css = '',
-					// cache jQuery selections
-					$container = $('.strengthify-container'),
-					$wrapper = $('.strengthify-wrapper');
-
-				$wrapper.children().css(
-					'opacity',
-					opacity
-				).css(
-					'-ms-filter',
-					'"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
-				);
-
-				// style strengthify bar
-				// possible scores: 0-4
-				switch(result.score) {
-					case 0:
-					case 1:
-						css = 'password-bad';
-						break;
-					case 2:
-						css = 'password-medium';
-						break;
-					case 3:
-					case 4:
-						css = 'password-good';
-						break;
-				}
-
-				$container
-					.attr('class', css + ' strengthify-container')
-					// possible scores: 0-4
-					.css(
-						'width',
-						// if score is '0' it will be changed to '1' to
-						// not hide strengthify if the password is extremely weak
-						((result.score === 0 ? 1 : result.score) * 25) + '%'
-					);
-
-				// set a title for the wrapper
-				$wrapper.attr(
-					'title',
-					options.titles[result.score]
-				).tooltip({
-					placement: 'bottom',
-					trigger: 'manual',
-				}).tooltip(
-					'show'
-				);
-
-				if(opacity === 0) {
-					$wrapper.tooltip(
-						'hide'
-					);
-				}
-
-				// reset state for empty string password
-				if(password === '') {
-					$container.css('width', 0);
-				}
-
-			};
-
-		// add elements
-		$('.strengthify-wrapper')
-			.append('<div class="strengthify-bg" />')
-			.append('<div class="strengthify-container" />')
-			.append('<div class="strengthify-separator" style="left: 25%" />')
-			.append('<div class="strengthify-separator" style="left: 50%" />')
-			.append('<div class="strengthify-separator" style="left: 75%" />');
-
-		me.parents().on('scroll', drawStrengthify);
-
-		$.ajax({
-			cache: true,
-			dataType: 'script',
-			url: options.zxcvbn
-		}).done(function() {
-			me.bind('keyup input change', drawStrengthify);
-		});
-
-		return me;
-	};
-
-}(jQuery));
+(function($) {
+    $.fn.strengthify = function(paramOptions) {
+        "use strict";
+
+        var defaults = {
+            zxcvbn: 'zxcvbn/zxcvbn.js',
+            titles: [
+                'Weakest',
+                'Weak',
+                'So-so',
+                'Good',
+                'Perfect'
+            ],
+            tilesOptions:{
+              tooltip: true,
+              element: false
+            },
+            drawTitles: false,
+            drawMessage: false,
+            drawBars: true
+        };
+
+        return this.each(function() {
+            var options = $.extend(defaults, paramOptions);
+
+            if (!options.drawTitles
+                && !options.drawMessage
+                && !options.drawBars)
+                console.warn("expect at least one of 'drawTitles', 'drawMessage', or 'drawBars' to be true");
+
+            function getWrapperFor(id) {
+                return $('div[data-strengthifyFor="' + id + '"]');
+            };
+
+            function drawStrengthify() {
+                var password = $(this).val(),
+                    elemId = $(this).attr('id'),
+                    // hide strengthify if no input is provided
+                    opacity = (password === '') ? 0 : 1,
+                    // calculate result
+                    result = zxcvbn(password),
+                    // setup some vars for later
+                    css = '',
+                    bsLevel = '',
+                    message = '',
+                    // cache jQuery selections
+                    $wrapper = getWrapperFor(elemId),
+                    $container = $wrapper.find('.strengthify-container'),
+                    $message = $wrapper.find('[data-strengthifyMessage]');
+
+
+                $wrapper.children()
+                    .css('opacity', opacity)
+                    .css('-ms-filter',
+                    '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
+                    );
+
+                // style strengthify bar
+                // possible scores: 0-4
+                switch (result.score) {
+                    case 0:
+                    case 1:
+                        css = 'password-bad';
+                        bsLevel = 'danger';
+                        message = result.feedback ? result.feedback.suggestions.join('<br/>') : "";
+                        break;
+                    case 2:
+                        bsLevel = 'warning';
+                        message = result.feedback ? result.feedback.suggestions.join('<br/>') : "";
+                        css = 'password-medium';
+                        break;
+                    case 3:
+                        css = 'password-good';
+                        bsLevel = 'info';
+                        message = "Getting better.";
+                    case 4:
+                        css = 'password-good';
+                        bsLevel = 'success';
+                        message = "Looks good.";
+                        break;
+                }
+
+                if ($message) {
+                    $message.removeAttr('class');
+                    $message.addClass('bg-' + bsLevel);
+
+                    // reset state for empty string password
+                    if (password === '') {
+                        message = '';
+                    }
+                    $message.html(message);
+                }
+                if ($container) {
+                    $container
+                        .attr('class', css + ' strengthify-container')
+                        // possible scores: 0-4
+                        .css(
+                        'width',
+                        // if score is '0' it will be changed to '1' to
+                        // not hide strengthify if the password is extremely weak
+                        ((result.score === 0 ? 1 : result.score) * 25) + '%'
+                        );
+
+                    // reset state for empty string password
+                    if (password === '') {
+                        $container.css('width', 0);
+                    }
+                }
+
+                if (options.drawTitles) {
+                    // set a title for the wrapper
+                    if(options.tilesOptions.tooltip){
+                        $wrapper.attr(
+                            'title',
+                            options.titles[result.score]
+                        ).tooltip({
+                            placement: 'bottom',
+                            trigger: 'manual',
+                        }).tooltip(
+                            'fixTitle'
+                        ).tooltip(
+                            'show'
+                        );
+
+                        if (opacity === 0) {
+                            $wrapper.tooltip(
+                                'hide'
+                            );
+                        }
+                    }
+
+                    if(options.tilesOptions.element){
+                        $wrapper.find(".strengthify-tiles").text(options.titles[result.score]);
+                    }
+                }
+            };
+
+            function init() {
+                var $elem = $(this),
+                    elemId = $elem.attr('id');
+                var drawSelf = drawStrengthify.bind(this);
+
+                // add elements
+                $elem.after('<div class="strengthify-wrapper" data-strengthifyFor="' + $elem.attr('id') + '"></div>');
+
+                if (options.drawBars) {
+                    getWrapperFor(elemId)
+                        .append('<div class="strengthify-bg" />')
+                        .append('<div class="strengthify-container" />')
+                        .append('<div class="strengthify-separator" style="left: 25%" />')
+                        .append('<div class="strengthify-separator" style="left: 50%" />')
+                        .append('<div class="strengthify-separator" style="left: 75%" />');
+                }
+
+                if (options.drawMessage) {
+                    getWrapperFor(elemId).append('<div data-strengthifyMessage></div>');
+                }
+
+                if (options.drawTitles && options.tilesOptions) {
+                    getWrapperFor(elemId).append('<div class="strengthify-tiles"></div>');
+                }
+
+                $elem.parent().on('scroll', drawSelf);
+
+                $.ajax({
+                    cache: true,
+                    dataType: 'script',
+                    url: options.zxcvbn
+                }).done(function() {
+                    $elem.bind('keyup input change', drawSelf);
+                });
+            };
+
+            init.call(this);
+
+            //return me;
+        });
+    };
+
+} (jQuery));
diff --git a/core/vendor/strengthify/strengthify.css b/core/vendor/strengthify/strengthify.css
index 5555cbdf334..e8486fb0881 100644
--- a/core/vendor/strengthify/strengthify.css
+++ b/core/vendor/strengthify/strengthify.css
@@ -1,11 +1,15 @@
 /**
  * Strengthify - show the weakness of a password (uses zxcvbn for this)
  * https://github.com/MorrisJobke/strengthify
- * Version: 0.4.2
+ * Version: 0.5.1
  * License: The MIT License (MIT)
- * Copyright (c) 2013 Morris Jobke <morris.jobke@gmail.com>
+ * Copyright (c) 2013-2016 Morris Jobke <morris.jobke@gmail.com>
  */
 
+.strengthify-wrapper {
+    position: relative;
+}
+
 .strengthify-wrapper > * {
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	filter: alpha(opacity=0);
@@ -15,7 +19,7 @@
 	transition:all .5s ease-in-out;
 }
 
-.strengthify-bg, .strengthify-container, .strengthify-wrapper, .strengthify-separator {
+.strengthify-bg, .strengthify-container, .strengthify-separator {
 	height: 3px;
 }
 
@@ -46,3 +50,11 @@
 .password-good {
 	background-color: #3C3;
 }
+
+div[data-strengthifyMessage] {
+    padding: 3px 8px;
+}
+
+.strengthify-tiles{
+	float: right;
+}