Merge pull request #5550 from andreasjacobsen93/clean-settings-layout

Cleaned up personal settings page

3 files changed, 265 insertions, 240 deletions

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 3fa064c95d1..cf9e7efbc88 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -2,20 +2,20 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
-select#languageinput, select#timezone {
-	width: 15em;
-}
-
 input#openid, input#webdav {
 	width: 20em;
 }
 
 /* PERSONAL */
-
 .clear {
 	clear: both;
 }
 
+.icon-federation-menu {
+	width: 16px;
+	float: right;
+}
+
 /* icons for sidebar */
 .nav-icon-personal-settings {
 	background-image: url('../img/personal.svg?v=1');
@@ -41,13 +41,8 @@ input#openid, input#webdav {
 	background-image: url('../img/password.svg?v=1');
 }
 
-#avatarform {
-	min-width: 145px;
-	padding-right: 0;
-}
-
 #avatarform .avatardiv {
-	margin-bottom: 10px;
+	margin: 10px auto;
 }
 
 #avatarform .warning {
@@ -69,8 +64,7 @@ input#openid, input#webdav {
 #uploadavatarbutton,
 #selectavatar,
 #removeavatar {
-	width: 33px;
-	height: 33px;
+	padding: 21px;
 }
 
 .jcrop-holder {
@@ -115,79 +109,86 @@ input#openid, input#webdav {
 	float: right;
 }
 
-#personal-settings-avatar-container {
-	float: left;
+#personal-settings-avatar-container,
+#personal-settings-group-container {
+	display: inline-block;
+	vertical-align: top;
+	width: 225px;
 }
 
-#personal-settings-container {
-	position: relative;
-	float: left;
-	min-width: 280px;
-	max-width: 700px;
-	width: calc(100% - 200px);
+.profile-settings-container,
+.personal-settings-container {
+	display: inline-block;
+	max-width: 600px;
+	margin-bottom: 20px;
 }
 
-#personal-settings-container:after {
+.personal-settings-container:after {
 	clear: both;
 }
 
-#personal-settings-container > div {
+.personal-settings-container > div,
+.profile-settings-container > div {
 	float: left;
-	height: 100px;
-	min-width: 300px;
-}
-
-#personal-settings-container.no-edit > div {
-	height: 20px;
-	min-width: 200px;
+	width: 300px;
 }
 
 #avatarform > h2,
-#personal-settings-container > div h2 {
+.personal-settings-container > div h2 {
 	position: relative;
 }
 
-#personal-settings-container > div h2 span[class^="icon-"],
+.personal-settings-container > div h2 {
+	margin-bottom: 5px;
+}
+
+.personal-settings-container > div h2 span[class^="icon-"],
 #personal-settings-avatar-container h2 span[class^="icon-"] {
-	display: inline-block;
-	padding: 8px;
-	margin-left: -8px;
-	margin-bottom: -10px;
+	padding-left: 16px;
 	background-size: 16px;
+	background-position: left 8px;
 	opacity: .3;
 	cursor: pointer;
 }
 
+.personal-show-container,
 .personal-settings-setting-box input[type="text"],
 .personal-settings-setting-box input[type="email"],
-.personal-settings-setting-box input[type="tel"] {
-	width: 17em;
+.personal-settings-setting-box input[type="tel"],
+select#timezone,
+select#languageinput,
+input#pass1,
+input#pass2,
+input#passwordbutton {
+	width: 100%;
 }
 
-#personal-settings-container > div > form span[class^="icon-checkmark"] {
-	position: absolute;
-	left: 228px;
-	top: 82px;
+.personal-settings-container > div > form span[class^="icon-checkmark"] {
+	position: relative;
+	left: 90%;
+	top: -44px;
 	pointer-events: none;
+	width: 44px;
 }
 
 /* verify accounts */
-#personal-settings-container .verify {
-	position: absolute;
-	right: 14px;
-	top: 70px;
+.personal-settings-container .verify {
+	position: relative;
+	left: 100%;
+	top: 0;
+	height: 0;
 }
 
-#personal-settings-container .verify img {
+.personal-settings-container .verify img {
 	padding: 12px 7px 6px;
 }
 
 /* only show pointer cursor when popup will be there */
-#personal-settings-container .verify-action {
+.personal-settings-container .verify-action {
 	cursor: pointer;
 }
 
-#personal-settings-container input:disabled {
+.personal-settings-container input:disabled {
 	background-color: white;
 	color: black;
 	border: none;
@@ -213,7 +214,7 @@ input#openid, input#webdav {
 
 .federationScopeMenu {
 	top: 44px;
-	margin: -5px 0px 0;
+	margin: -5px 5px 0;
 }
 
 .federationScopeMenu.bubble::after {
@@ -232,26 +233,8 @@ input#openid, input#webdav {
 	opacity: .75;
 }
 
-#lostpassword,
-#groups {
-	display: inline-block;
-	margin-bottom: 0;
-	padding-bottom: 0;
-	padding-right: 0;
-	min-width: 60%;
-}
-
-#avatarform,
-#passwordform {
-	margin-bottom: 0;
-	padding-bottom: 0;
-}
-
-#groups {
-	overflow-wrap: break-word;
-	max-width: 75%;
-	display: block;;
-	clear: both;
+#groups-groups {
+	padding-top: 5px;
 }
 
 .clientsbox img {
@@ -952,8 +935,9 @@ span.version {
 	margin: 8px 0;
 }
 
-form.section {
-	position: relative;
+.section {
+	padding: 10px 30px;
+	margin-bottom: 0;
 }
 
 .followupsection {
diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js
index 1a0a3dcb4d1..d5537d19404 100644
--- a/settings/js/federationsettingsview.js
+++ b/settings/js/federationsettingsview.js
@@ -180,18 +180,24 @@
 
 		_setFieldScopeIcon: function(field, scope) {
 			var $icon = this.$('#' + field + 'form > h2 > span');
+			
 			$icon.removeClass('icon-password');
 			$icon.removeClass('icon-contacts-dark');
 			$icon.removeClass('icon-link');
+			$icon.addClass('hidden');
+
 			switch (scope) {
 				case 'private':
 					$icon.addClass('icon-password');
+					$icon.removeClass('hidden');
 					break;
 				case 'contacts':
 					$icon.addClass('icon-contacts-dark');
+					$icon.removeClass('hidden');
 					break;
 				case 'public':
 					$icon.addClass('icon-link');
+					$icon.removeClass('hidden');
 					break;
 			}
 		}
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index db14a4de986..27c5915d5be 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -56,8 +56,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
 	<div id="personal-settings-avatar-container">
 		<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
 			<h2>
-				<label><?php p($l->t('Profile picture')); ?></label>
-				<span class="icon-password"/>
+				<label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password">&#9662;<span/>
 			</h2>
 			<div id="displayavatar">
 				<div class="avatardiv"></div>
@@ -81,17 +80,17 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			</div>
 			<span class="icon-checkmark hidden"/>
 			<?php if($_['lookupServerUploadEnabled']) { ?>
-				<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
+			<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
 			<?php } ?>
 		</form>
 	</div>
 
-	<div id="personal-settings-container">
+	<div class="personal-settings-container">
 		<div class="personal-settings-setting-box">
 			<form id="displaynameform" class="section">
 				<h2>
 					<label for="displayname"><?php p($l->t('Full name')); ?></label>
-					<span class="icon-password"/>
+					<span class="icon-federation-menu icon-password">&#9662;<span/>
 				</h2>
 				<input type="text" id="displayname" name="displayname"
 					<?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?>
@@ -110,7 +109,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			<form id="emailform" class="section">
 				<h2>
 					<label for="email"><?php p($l->t('Email')); ?></label>
-					<span class="icon-password"/>
+					<span class="icon-federation-menu icon-password">&#9662;<span/>
 				</h2>
 				<div class="verify <?php if ($_['email'] === ''  || $_['emailScope'] !== 'public') p('hidden'); ?>">
 					<img id="verify-email" title="<?php p($_['emailMessage']); ?>" data-status="<?php p($_['emailVerification']) ?>" src="
@@ -135,182 +134,218 @@ vendor_style('jcrop/css/jquery.Jcrop');
 					<span><?php if(isset($_['email']) && !empty($_['email'])) { p($_['email']); } else { p($l->t('No email address set')); }?></span>
 				<?php } ?>
 				<?php if($_['displayNameChangeSupported']) { ?>
-					<br />
 					<em><?php p($l->t('For password reset and notifications')); ?></em>
 				<?php } ?>
 				<span class="icon-checkmark hidden"/>
 				<?php if($_['lookupServerUploadEnabled']) { ?>
-					<input type="hidden" id="emailscope" value="<?php p($_['emailScope']) ?>">
+				<input type="hidden" id="emailscope" value="<?php p($_['emailScope']) ?>">
 				<?php } ?>
 			</form>
 		</div>
-		<?php if($_['lookupServerUploadEnabled']) { ?>
-			<div class="personal-settings-setting-box">
-				<form id="phoneform" class="section">
-					<h2>
-						<label for="phone"><?php p($l->t('Phone number')); ?></label>
-						<span class="icon-password"/>
-					</h2>
-					<input type="tel" id="phone" name="phone"
-						   value="<?php p($_['phone']) ?>"
-						   placeholder="<?php p($l->t('Your phone number')); ?>"
-						   autocomplete="on" autocapitalize="none" autocorrect="off" />
-					<span class="icon-checkmark hidden"/>
-					<input type="hidden" id="phonescope" value="<?php p($_['phoneScope']) ?>">
-				</form>
-			</div>
-			<div class="personal-settings-setting-box">
-				<form id="addressform" class="section">
-					<h2>
-						<label for="address"><?php p($l->t('Address')); ?></label>
-						<span class="icon-password"/>
-					</h2>
-					<input type="text" id="address" name="address"
-						   placeholder="<?php p($l->t('Your postal address')); ?>"
-						   value="<?php p($_['address']) ?>"
-						   autocomplete="on" autocapitalize="none" autocorrect="off" />
-					<span class="icon-checkmark hidden"/>
-					<input type="hidden" id="addressscope" value="<?php p($_['addressScope']) ?>">
-				</form>
-			</div>
-			<div class="personal-settings-setting-box">
-				<form id="websiteform" class="section">
-					<h2>
-						<label for="website"><?php p($l->t('Website')); ?></label>
-						<span class="icon-password"/>
-					</h2>
-					<div class="verify <?php if ($_['website'] === ''  || $_['websiteScope'] !== 'public') p('hidden'); ?>">
-						<img id="verify-website" title="<?php p($_['websiteMessage']); ?>" data-status="<?php p($_['websiteVerification']) ?>" src="
-				<?php
-						switch($_['websiteVerification']) {
-							case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
-								p(image_path('core', 'actions/verifying.svg'));
-								break;
-							case \OC\Accounts\AccountManager::VERIFIED:
-								p(image_path('core', 'actions/verified.svg'));
-								break;
-							default:
-								p(image_path('core', 'actions/verify.svg'));
-						}
-						?>"
-							<?php if($_['websiteVerification'] === \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS || $_['websiteVerification'] === \OC\Accounts\AccountManager::NOT_VERIFIED) print_unescaped(' class="verify-action"') ?>
-						>
-						<div class="verification-dialog popovermenu bubble menu">
-							<div class="verification-dialog-content">
-								<p class="explainVerification"></p>
-								<p class="verificationCode"></p>
-								<p><?php p($l->t('It can take up to 24 hours before the account is displayed as verified.'));?></p>
-							</div>
+		<?php if (!empty($_['phone']) || $_['lookupServerUploadEnabled']) { ?>
+		<div class="personal-settings-setting-box">
+			<form id="phoneform" class="section">
+				<h2>
+					<label for="phone"><?php p($l->t('Phone number')); ?></label>
+					<span class="icon-federation-menu icon-password">&#9662;<span/>
+				</h2>
+				<input type="tel" id="phone" name="phone" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
+					   value="<?php p($_['phone']) ?>"
+					   placeholder="<?php p($l->t('Your phone number')); ?>"
+				       autocomplete="on" autocapitalize="none" autocorrect="off" />
+				<span class="icon-checkmark hidden"/>
+				<?php if($_['lookupServerUploadEnabled']) { ?>
+				<input type="hidden" id="phonescope" value="<?php p($_['phoneScope']) ?>">
+				<?php } ?>
+			</form>
+		</div>
+		<?php } ?>
+		<?php if (!empty($_['address']) || $_['lookupServerUploadEnabled']) { ?>
+		<div class="personal-settings-setting-box">
+			<form id="addressform" class="section">
+				<h2>
+					<label for="address"><?php p($l->t('Address')); ?></label>
+					<span class="icon-federation-menu icon-password">&#9662;<span/>
+				</h2>
+				<input type="text" id="address" name="address" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"');  ?>
+					   placeholder="<?php p($l->t('Your postal address')); ?>"
+					   value="<?php p($_['address']) ?>"
+					   autocomplete="on" autocapitalize="none" autocorrect="off" />
+				<span class="icon-checkmark hidden"/>
+				<?php if($_['lookupServerUploadEnabled']) { ?>
+				<input type="hidden" id="addressscope" value="<?php p($_['addressScope']) ?>">
+				<?php } ?>
+			</form>
+		</div>
+		<?php } ?>
+		<?php if (!empty($_['website']) || $_['lookupServerUploadEnabled']) { ?>
+		<div class="personal-settings-setting-box">
+			<form id="websiteform" class="section">
+				<h2>
+					<label for="website"><?php p($l->t('Website')); ?></label>
+					<span class="icon-federation-menu icon-password">&#9662;<span/>
+				</h2>
+				<?php if($_['lookupServerUploadEnabled']) { ?>
+				<div class="verify <?php if ($_['website'] === ''  || $_['websiteScope'] !== 'public') p('hidden'); ?>">
+					<img id="verify-website" title="<?php p($_['websiteMessage']); ?>" data-status="<?php p($_['websiteVerification']) ?>" src="
+					<?php
+					switch($_['websiteVerification']) {
+						case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
+							p(image_path('core', 'actions/verifying.svg'));
+							break;
+						case \OC\Accounts\AccountManager::VERIFIED:
+							p(image_path('core', 'actions/verified.svg'));
+							break;
+						default:
+							p(image_path('core', 'actions/verify.svg'));
+					}
+					?>"
+					<?php if($_['websiteVerification'] === \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS || $_['websiteVerification'] === \OC\Accounts\AccountManager::NOT_VERIFIED) print_unescaped(' class="verify-action"') ?>
+					>
+					<div class="verification-dialog popovermenu bubble menu">
+						<div class="verification-dialog-content">
+							<p class="explainVerification"></p>
+							<p class="verificationCode"></p>
+							<p><?php p($l->t('It can take up to 24 hours before the account is displayed as verified.'));?></p>
 						</div>
 					</div>
-					<input type="text" name="website" id="website" value="<?php p($_['website']); ?>"
-						   placeholder="<?php p($l->t('Link https://…')); ?>"
-						   autocomplete="on" autocapitalize="none" autocorrect="off" />
-					<span class="icon-checkmark hidden"/>
-					<input type="hidden" id="websitescope" value="<?php p($_['websiteScope']) ?>">
-				</form>
-			</div>
-			<div class="personal-settings-setting-box">
-				<form id="twitterform" class="section">
-					<h2>
-						<label for="twitter"><?php p($l->t('Twitter')); ?></label>
-						<span class="icon-password"/>
-					</h2>
-					<div class="verify <?php if ($_['twitter'] === ''  || $_['twitterScope'] !== 'public') p('hidden'); ?>">
-						<img id="verify-twitter" title="<?php p($_['twitterMessage']); ?>" data-status="<?php p($_['twitterVerification']) ?>" src="
-				<?php
-						switch($_['twitterVerification']) {
-							case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
-								p(image_path('core', 'actions/verifying.svg'));
-								break;
-							case \OC\Accounts\AccountManager::VERIFIED:
-								p(image_path('core', 'actions/verified.svg'));
-								break;
-							default:
-								p(image_path('core', 'actions/verify.svg'));
-						}
-						?>"
-							<?php if($_['twitterVerification'] === \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS || $_['twitterVerification'] === \OC\Accounts\AccountManager::NOT_VERIFIED) print_unescaped(' class="verify-action"') ?>
-						>
-						<div class="verification-dialog popovermenu bubble menu">
-							<div class="verification-dialog-content">
-								<p class="explainVerification"></p>
-								<p class="verificationCode"></p>
-								<p><?php p($l->t('It can take up to 24 hours before the account is displayed as verified.'));?></p>
-							</div>
+				</div>
+				<?php } ?>
+				<input type="text" name="website" id="website" value="<?php p($_['website']); ?>"
+				       placeholder="<?php p($l->t('Link https://…')); ?>"
+				       autocomplete="on" autocapitalize="none" autocorrect="off"
+					   <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"');  ?>
+				/>
+				<span class="icon-checkmark hidden"/>
+				<?php if($_['lookupServerUploadEnabled']) { ?>
+				<input type="hidden" id="websitescope" value="<?php p($_['websiteScope']) ?>">
+				<?php } ?>
+			</form>
+		</div>
+		<?php } ?>
+		<?php if (!empty($_['twitter']) || $_['lookupServerUploadEnabled']) { ?>
+		<div class="personal-settings-setting-box">
+			<form id="twitterform" class="section">
+				<h2>
+					<label for="twitter"><?php p($l->t('Twitter')); ?></label>
+					<span class="icon-federation-menu icon-password">&#9662;<span/>
+				</h2>
+				<?php if($_['lookupServerUploadEnabled']) { ?>
+				<div class="verify <?php if ($_['twitter'] === ''  || $_['twitterScope'] !== 'public') p('hidden'); ?>">
+					<img id="verify-twitter" title="<?php p($_['twitterMessage']); ?>" data-status="<?php p($_['twitterVerification']) ?>" src="
+					<?php
+					switch($_['twitterVerification']) {
+						case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
+							p(image_path('core', 'actions/verifying.svg'));
+							break;
+						case \OC\Accounts\AccountManager::VERIFIED:
+							p(image_path('core', 'actions/verified.svg'));
+							break;
+						default:
+							p(image_path('core', 'actions/verify.svg'));
+					}
+					?>"
+					<?php if($_['twitterVerification'] === \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS || $_['twitterVerification'] === \OC\Accounts\AccountManager::NOT_VERIFIED) print_unescaped(' class="verify-action"') ?>
+					>
+					<div class="verification-dialog popovermenu bubble menu">
+						<div class="verification-dialog-content">
+							<p class="explainVerification"></p>
+							<p class="verificationCode"></p>
+							<p><?php p($l->t('It can take up to 24 hours before the account is displayed as verified.'));?></p>
 						</div>
 					</div>
-					<input type="text" name="twitter" id="twitter" value="<?php p($_['twitter']); ?>"
-						   placeholder="<?php p($l->t('Twitter handle @…')); ?>"
-						   autocomplete="on" autocapitalize="none" autocorrect="off" />
-					<span class="icon-checkmark hidden"/>
-					<input type="hidden" id="twitterscope" value="<?php p($_['twitterScope']) ?>">
-				</form>
-			</div>
+				</div>
+				<?php } ?>
+				<input type="text" name="twitter" id="twitter" value="<?php p($_['twitter']); ?>"
+					   placeholder="<?php p($l->t('Twitter handle @…')); ?>"
+					   autocomplete="on" autocapitalize="none" autocorrect="off"
+					   <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"');  ?>
+				/>
+				<span class="icon-checkmark hidden"/>
+				<?php if($_['lookupServerUploadEnabled']) { ?>
+				<input type="hidden" id="twitterscope" value="<?php p($_['twitterScope']) ?>">
+				<?php } ?>
+			</form>
+		</div>
 		<?php } ?>
-		<span class="msg"></span>
 	</div>
-</div>
 
-<div id="groups" class="section">
-	<h2><?php p($l->t('Groups')); ?></h2>
-	<p><?php p($l->t('You are member of the following groups:')); ?></p>
-	<p>
-		<?php p(implode(', ', $_['groups'])); ?>
-	</p>
-</div>
+	<div class="clear"></div>
 
-<?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>
-		<br>
-		<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 id="personal-settings-group-container">
+		<div class="personal-settings-setting-box personal-settings-group-box">
+			<div id="groups" class="section">
+				<h2><?php p($l->t('Groups')); ?></h2>
+				<p><?php p($l->t('You are member of the following groups:')); ?></p>
+				<p id="groups-groups">
+				<strong><?php p(implode(', ', $_['groups'])); ?></strong>
+				</p>
+			</div>
 		</div>
-		<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
-		<br/>
-	</form>
-	<?php
-}
-?>
+	</div>
+	
+	<div class="profile-settings-container">
+		<div class="personal-settings-setting-box personal-settings-language-box">
+			<?php if (isset($_['activelanguage'])) { ?>
+			<form id="language" class="section">
+				<h2>
+					<label for="languageinput"><?php p($l->t('Language'));?></label>
+				</h2>
+				<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
+					<option value="<?php p($_['activelanguage']['code']);?>">
+						<?php p($_['activelanguage']['name']);?>
+					</option>
+					<?php foreach($_['commonlanguages'] as $language):?>
+						<option value="<?php p($language['code']);?>">
+							<?php p($language['name']);?>
+						</option>
+					<?php endforeach;?>
+					<optgroup label="––––––––––"></optgroup>
+					<?php foreach($_['languages'] as $language):?>
+						<option value="<?php p($language['code']);?>">
+							<?php p($language['name']);?>
+						</option>
+					<?php endforeach;?>
+				</select>
+				<a href="https://www.transifex.com/nextcloud/nextcloud/"
+					target="_blank" rel="noreferrer">
+					<em><?php p($l->t('Help translate'));?></em>
+				</a>
+			</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>
+</div>
 
-<?php if (isset($_['activelanguage'])) { ?>
-<form id="language" class="section">
-	<h2>
-		<label for="languageinput"><?php p($l->t('Language'));?></label>
-	</h2>
-	<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
-		<option value="<?php p($_['activelanguage']['code']);?>">
-			<?php p($_['activelanguage']['name']);?>
-		</option>
-		<?php foreach($_['commonlanguages'] as $language):?>
-			<option value="<?php p($language['code']);?>">
-				<?php p($language['name']);?>
-			</option>
-		<?php endforeach;?>
-		<optgroup label="––––––––––"></optgroup>
-		<?php foreach($_['languages'] as $language):?>
-			<option value="<?php p($language['code']);?>">
-				<?php p($language['name']);?>
-			</option>
-		<?php endforeach;?>
-	</select>
-	<a href="https://www.transifex.com/nextcloud/nextcloud/"
-	   target="_blank" rel="noreferrer">
-		<em><?php p($l->t('Help translate'));?></em>
-	</a>
-</form>
-<?php } ?>
+<div class="clear"></div>