Merge pull request #10053 from nextcloud/feature/7378/password-security-move

Move password change to security settings

5 files changed, 150 insertions, 127 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index b23dac7de1e..f12d1de2519 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -124,14 +124,6 @@ select {
 	}
 }
 
-input {
-	&#pass1,
-	&#pass2,
-	&#passwordbutton {
-		width: 100%;
-	}
-}
-
 #personal-settings {
 	display: grid;
 	padding: 20px;
@@ -380,9 +372,7 @@ input#identity {
 	}
 }
 
-.password-state {
-	display: inline-block;
-}
+
 
 table.nostyle {
 	label {
@@ -393,6 +383,33 @@ table.nostyle {
 	}
 }
 
+#security-password {
+	#passwordform {
+		display: flex;
+		flex-wrap: wrap;
+		#pass1, .personal-show-container, #passwordbutton {
+			flex-shrink: 1;
+			width: 200px;
+			min-width: 150px;
+		}
+		#pass2 {
+			width: 100%;
+		}
+		.password-state {
+			display: inline-block;
+		}
+		.strengthify-wrapper {
+			position: absolute;
+			left: 0;
+			width: 100%;
+			border-radius: 0 0 2px 2px;
+			margin-top: -6px;
+			overflow: hidden;
+			height: 3px;
+		}
+	}
+}
+
 #security {
 	table {
 		width: 100%;
@@ -1246,16 +1263,7 @@ span {
 	}
 }
 
-/* PASSWORD */
-#passwordform .strengthify-wrapper {
-	position: absolute;
-	left: 0;
-	width: 100%;
-	border-radius: 0 0 2px 2px;
-	margin-top: -6px;
-	overflow: hidden;
-	height: 3px;
-}
+
 
 /* OPERA hack for strengthify*/
 doesnotexist:-o-prefocus, .strengthify-wrapper {
diff --git a/settings/js/security_password.js b/settings/js/security_password.js
new file mode 100644
index 00000000000..f7cb657c258
--- /dev/null
+++ b/settings/js/security_password.js
@@ -0,0 +1,85 @@
+/* global OC */
+
+/**
+ * Copyright (c) 2011, Robin Appelman <icewind1991@gmail.com>
+ *               2013, Morris Jobke <morris.jobke@gmail.com>
+ *               2016, Christoph Wurst <christoph@owncloud.com>
+ *               2017, Arthur Schiwon <blizzz@arthur-schiwon.de>
+ *               2017, Thomas Citharel <tcit@tcit.fr>
+ * This file is licensed under the Affero General Public License version 3 or later.
+ * See the COPYING-README file.
+ */
+
+$(document).ready(function () {
+	if($('#pass2').length) {
+		$('#pass2').showPassword().keyup();
+	}
+
+	var removeloader = function () {
+		setTimeout(function(){
+			if ($('.password-state').length > 0) {
+				$('.password-state').remove();
+			}
+		}, 5000)
+	};
+
+	$("#passwordbutton").click(function () {
+		if ($('#pass1').val() !== '' && $('#pass2').val() !== '') {
+			// Serialize the data
+			var post = $("#passwordform").serialize();
+			$('#passwordchanged').hide();
+			$('#passworderror').hide();
+			$("#passwordbutton").attr('disabled', 'disabled');
+			$("#passwordbutton").after("<span class='password-loading icon icon-loading-small-dark password-state'></span>");
+			$(".personal-show-label").hide();
+			// Ajax foo
+			$.post(OC.generateUrl('/settings/personal/changepassword'), post, function (data) {
+				if (data.status === "success") {
+					$("#passwordbutton").after("<span class='checkmark icon icon-checkmark password-state'></span>");
+					removeloader();
+					$('#pass1').val('');
+					$('#pass2').val('').change();
+				}
+				if (typeof(data.data) !== "undefined") {
+					OC.msg.finishedSaving('#password-error-msg', data);
+				} else {
+					OC.msg.finishedSaving('#password-error-msg',
+						{
+							'status' : 'error',
+							'data' : {
+								'message' : t('settings', 'Unable to change password')
+							}
+						}
+					);
+				}
+				$(".personal-show-label").show();
+				$(".password-loading").remove();
+				$("#passwordbutton").removeAttr('disabled');
+			});
+			return false;
+		} else {
+			OC.msg.finishedSaving('#password-error-msg',
+				{
+					'status' : 'error',
+					'data' : {
+						'message' : t('settings', 'Unable to change password')
+					}
+				}
+			);
+			return false;
+		}
+	});
+
+	$('#pass2').strengthify({
+		zxcvbn: OC.linkTo('core','vendor/zxcvbn/dist/zxcvbn.js'),
+		titles: [
+			t('settings', 'Very weak password'),
+			t('settings', 'Weak password'),
+			t('settings', 'So-so password'),
+			t('settings', 'Good password'),
+			t('settings', 'Strong password')
+		],
+		drawTitles: true,
+		$addAfter: $('input[name="newpassword-clone"]'),
+	});
+});
\ No newline at end of file
diff --git a/settings/js/settings/personalInfo.js b/settings/js/settings/personalInfo.js
index 2f7e1c386b5..c9da3c6ebe8 100644
--- a/settings/js/settings/personalInfo.js
+++ b/settings/js/settings/personalInfo.js
@@ -145,67 +145,6 @@ $(document).ready(function () {
 		$('#pass2').showPassword().keyup();
 	}
 
-	var removeloader = function () {
-		setTimeout(function(){
-			if ($('.password-state').length > 0) {
-				$('.password-state').remove();
-			}
-		}, 5000)
-	};
-
-	$("#passwordbutton").click(function () {
-		var isIE8or9 = $('html').hasClass('lte9');
-		// FIXME - TODO - once support for IE8 and IE9 is dropped
-		// for IE8 and IE9 this will check additionally if the typed in password
-		// is different from the placeholder, because in IE8/9 the placeholder
-		// is simply set as the value to look like a placeholder
-		if ($('#pass1').val() !== '' && $('#pass2').val() !== ''
-			&& !(isIE8or9 && $('#pass2').val() === $('#pass2').attr('placeholder'))) {
-			// Serialize the data
-			var post = $("#passwordform").serialize();
-			$('#passwordchanged').hide();
-			$('#passworderror').hide();
-			$("#passwordbutton").attr('disabled', 'disabled');
-			$("#passwordbutton").after("<span class='password-loading icon icon-loading-small-dark password-state'></span>");
-			$(".personal-show-label").hide();
-			// Ajax foo
-			$.post(OC.generateUrl('/settings/personal/changepassword'), post, function (data) {
-				if (data.status === "success") {
-					$("#passwordbutton").after("<span class='checkmark icon icon-checkmark password-state'></span>");
-					removeloader();
-					$('#pass1').val('');
-					$('#pass2').val('').change();
-				}
-				if (typeof(data.data) !== "undefined") {
-					OC.msg.finishedSaving('#password-error-msg', data);
-				} else {
-					OC.msg.finishedSaving('#password-error-msg',
-						{
-							'status' : 'error',
-							'data' : {
-								'message' : t('settings', 'Unable to change password')
-							}
-						}
-					);
-				}
-				$(".personal-show-label").show();
-				$(".password-loading").remove();
-				$("#passwordbutton").removeAttr('disabled');
-			});
-			return false;
-		} else {
-			OC.msg.finishedSaving('#password-error-msg',
-				{
-					'status' : 'error',
-					'data' : {
-						'message' : t('settings', 'Unable to change password')
-					}
-				}
-			);
-			return false;
-		}
-	});
-
 	var showVerifyDialog = function(dialog, howToVerify, verificationCode) {
 		var dialogContent = dialog.children('.verification-dialog-content');
 		dialogContent.children(".explainVerification").text(howToVerify);
@@ -417,19 +356,6 @@ $(document).ready(function () {
 		sendCropData();
 	});
 
-	$('#pass2').strengthify({
-		zxcvbn: OC.linkTo('core','vendor/zxcvbn/dist/zxcvbn.js'),
-		titles: [
-			t('settings', 'Very weak password'),
-			t('settings', 'Weak password'),
-			t('settings', 'So-so password'),
-			t('settings', 'Good password'),
-			t('settings', 'Strong password')
-		],
-		drawTitles: true,
-		$addAfter: $('input[name="newpassword-clone"]'),
-	});
-
 	// Load the big avatar
 	var user = OC.getCurrentUser();
 	$('#avatarform .avatardiv').avatar(user.uid, 145, true, null, function() {
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index 1946e3ec66e..3e8f31cf073 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -31,8 +31,6 @@ script('settings', [
 	'federationscopemenu',
 	'settings/personalInfo',
 ]);
-vendor_script('strengthify/jquery.strengthify');
-vendor_style('strengthify/strengthify');
 vendor_script('jcrop/js/jquery.Jcrop');
 vendor_style('jcrop/css/jquery.Jcrop');
 
@@ -376,36 +374,6 @@ vendor_style('jcrop/css/jquery.Jcrop');
 				</form>
 			<?php } ?>
 		</div>
-		<div class="personal-settings-setting-box personal-settings-password-box">
-			<?php
-			if($_['passwordChangeSupported']) {
-				script('jquery-showpassword');
-				?>
-				<form id="passwordform" class="section">
-					<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
-					<div id="password-error-msg" class="msg success inlineblock" style="display: none;">Saved</div>
-
-					<label for="pass1" class="hidden-visually"><?php p($l->t('Current password')); ?>: </label>
-					<input type="password" id="pass1" name="oldpassword"
-						   placeholder="<?php p($l->t('Current password'));?>"
-						   autocomplete="off" autocapitalize="none" autocorrect="off" />
-
-					<div class="personal-show-container">
-						<label for="pass2" class="hidden-visually"><?php p($l->t('New password'));?>: </label>
-						<input type="password" id="pass2" name="newpassword"
-							   placeholder="<?php p($l->t('New password')); ?>"
-							   data-typetoggle="#personal-show"
-							   autocomplete="off" autocapitalize="none" autocorrect="off" />
-						<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
-					</div>
-
-					<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
-
-				</form>
-				<?php
-			}
-			?>
-		</div>
 		<span class="msg"></span>
 	</div>
 
diff --git a/settings/templates/settings/personal/security.php b/settings/templates/settings/personal/security.php
index 9b0d9b6e8d0..e0de11de60e 100644
--- a/settings/templates/settings/personal/security.php
+++ b/settings/templates/settings/personal/security.php
@@ -22,14 +22,50 @@
  */
 
 script('settings', [
+	'security_password',
 	'authtoken',
 	'authtoken_collection',
 	'authtoken_view',
 	'settings/authtoken-init'
 ]);
 
+if($_['passwordChangeSupported']) {
+	script('jquery-showpassword');
+	vendor_script('strengthify/jquery.strengthify');
+	vendor_style('strengthify/strengthify');
+}
+
 ?>
 
+<div id="security-password" class="section">
+	<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
+	<span id="password-error-msg" class="msg success hidden">Saved</span>
+	<div class="personal-settings-setting-box personal-settings-password-box">
+		<?php if($_['passwordChangeSupported']) { ?>
+			<form id="passwordform">
+				<label for="pass1" class="hidden-visually"><?php p($l->t('Current password')); ?>: </label>
+				<input type="password" id="pass1" name="oldpassword"
+					   placeholder="<?php p($l->t('Current password'));?>"
+					   autocomplete="off" autocapitalize="none" autocorrect="off" />
+
+				<div class="personal-show-container">
+					<label for="pass2" class="hidden-visually"><?php p($l->t('New password'));?>: </label>
+					<input type="password" id="pass2" name="newpassword"
+						   placeholder="<?php p($l->t('New password')); ?>"
+						   data-typetoggle="#personal-show"
+						   autocomplete="off" autocapitalize="none" autocorrect="off" />
+					<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
+				</div>
+
+				<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
+
+			</form>
+			<?php
+		}
+		?>
+	</div>
+	<span class="msg"></span>
+</div>
 
 <div id="security" class="section">
 	<h2><?php p($l->t('Devices & sessions'));?></h2>