From 88ac51d522473133c39425b58c3dd9f6896a821f Mon Sep 17 00:00:00 2001
From: Andreas Jacobsen <anjac@itu.dk>
Date: Tue, 27 Jun 2017 20:21:54 +0200
Subject: [PATCH 01/12] Cleaned up personal settings page

---
 settings/css/settings.css       |  33 +++++++-
 settings/templates/personal.php | 146 +++++++++++++++++---------------
 2 files changed, 106 insertions(+), 73 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 0d68a3b622d..5f4fa12f2db 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -2,20 +2,47 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
-select#languageinput, select#timezone {
+select#timezone {
 	width: 15em;
 }
 
+select#languageinput {
+	width: 17em;
+}
+
 input#openid, input#webdav {
 	width: 20em;
 }
 
+input#pass1, input#pass2, input#passwordbutton {
+	width: 17em;
+}
+
 /* PERSONAL */
 
 .clear {
 	clear: both;
 }
 
+.personal-settings-password-box {
+	margin-top: 20px;
+	margin-bottom: 136px;
+}
+
+.icon-federation-menu {
+	width: 44px;
+	margin: -6px;
+	float: right;
+}
+
+.icon-avartar-federation-menu {
+	position: absolute;
+    width: 44px;
+    top: -6px;
+    left: 129px;
+    z-index: 10;
+}
+
 /* icons for sidebar */
 .nav-icon-personal-settings {
 	background-image: url('../img/personal.svg?v=1');
@@ -213,7 +240,7 @@ input#openid, input#webdav {
 
 .federationScopeMenu {
 	top: 44px;
-	margin: -5px 0px 0;
+	margin: -5px -5px 0;
 }
 
 .federationScopeMenu.bubble::after {
@@ -235,7 +262,7 @@ input#openid, input#webdav {
 #lostpassword,
 #groups {
 	display: inline-block;
-	margin-bottom: 0;
+	margin-bottom: 10px;
 	padding-bottom: 0;
 	padding-right: 0;
 	min-width: 60%;
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 7a7d87e930d..a456183d380 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -44,7 +44,7 @@
 	<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"/>
+				<span class="icon-avartar-federation-menu icon-password">&#9662;<span/>
 		</h2>
 		<div id="displayavatar">
 			<div class="avatardiv"></div>
@@ -78,7 +78,7 @@
 		<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('disabled="1"'); } ?>
@@ -94,7 +94,7 @@
 		<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="
@@ -130,7 +130,7 @@
 		<form id="phoneform" class="section">
 			<h2>
 				<label for="phone"><?php p($l->t('Phone number')); ?></label>
-				<span class="icon-password"/>
+				<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']) ?>"
@@ -148,7 +148,7 @@
 		<form id="addressform" class="section">
 			<h2>
 				<label for="address"><?php p($l->t('Address')); ?></label>
-				<span class="icon-password"/>
+				<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')); ?>"
@@ -166,7 +166,7 @@
 		<form id="websiteform" class="section">
 			<h2>
 				<label for="website"><?php p($l->t('Website')); ?></label>
-				<span class="icon-password"/>
+				<span class="icon-federation-menu icon-password">&#9662;<span/>
 			</h2>
 			<?php if($_['lookupServerUploadEnabled']) { ?>
 			<div class="verify <?php if ($_['website'] === ''  || $_['websiteScope'] !== 'public') p('hidden'); ?>">
@@ -211,7 +211,7 @@
 		<form id="twitterform" class="section">
 			<h2>
 				<label for="twitter"><?php p($l->t('Twitter')); ?></label>
-				<span class="icon-password"/>
+				<span class="icon-federation-menu icon-password">&#9662;<span/>
 			</h2>
 			<?php if($_['lookupServerUploadEnabled']) { ?>
 			<div class="verify <?php if ($_['twitter'] === ''  || $_['twitterScope'] !== 'public') p('hidden'); ?>">
@@ -251,75 +251,81 @@
 		</form>
 	</div>
 	<?php } ?>
+	<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>
+			<strong><?php p(implode(', ', $_['groups'])); ?></strong>
+			</p>
+		</div>
+	</div>
+	<div class="personal-settings-setting-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>
+			<br>
+			<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>
+			<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" />
+			<br>
+			<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>
+			<br>
+			<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
+			<br/>
+		</form>
+		<?php
+		}
+		?>
+	</div>
 	<span class="msg"></span>
 </div>
 </div>
 
 <div class="clear"></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>
-
-<?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>
-	<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
-	<br/>
-</form>
-<?php
-}
-?>
-
-<?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 id="clientsbox" class="section clientsbox">
 	<h2><?php p($l->t('Get the apps to sync your files'));?></h2>

From fe84dc73a8e2e8b9322391d21e8b220b13194ba1 Mon Sep 17 00:00:00 2001
From: Andreas Jacobsen <anjac@itu.dk>
Date: Tue, 27 Jun 2017 20:21:54 +0200
Subject: [PATCH 02/12] Cleaned up personal settings page

Signed-off-by: Andreas Jacobsen <andreasjacobsen93@gmail.com>
---
 settings/css/settings.css       |  33 +++++++-
 settings/templates/personal.php | 146 +++++++++++++++++---------------
 2 files changed, 106 insertions(+), 73 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 0d68a3b622d..5f4fa12f2db 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -2,20 +2,47 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
-select#languageinput, select#timezone {
+select#timezone {
 	width: 15em;
 }
 
+select#languageinput {
+	width: 17em;
+}
+
 input#openid, input#webdav {
 	width: 20em;
 }
 
+input#pass1, input#pass2, input#passwordbutton {
+	width: 17em;
+}
+
 /* PERSONAL */
 
 .clear {
 	clear: both;
 }
 
+.personal-settings-password-box {
+	margin-top: 20px;
+	margin-bottom: 136px;
+}
+
+.icon-federation-menu {
+	width: 44px;
+	margin: -6px;
+	float: right;
+}
+
+.icon-avartar-federation-menu {
+	position: absolute;
+    width: 44px;
+    top: -6px;
+    left: 129px;
+    z-index: 10;
+}
+
 /* icons for sidebar */
 .nav-icon-personal-settings {
 	background-image: url('../img/personal.svg?v=1');
@@ -213,7 +240,7 @@ input#openid, input#webdav {
 
 .federationScopeMenu {
 	top: 44px;
-	margin: -5px 0px 0;
+	margin: -5px -5px 0;
 }
 
 .federationScopeMenu.bubble::after {
@@ -235,7 +262,7 @@ input#openid, input#webdav {
 #lostpassword,
 #groups {
 	display: inline-block;
-	margin-bottom: 0;
+	margin-bottom: 10px;
 	padding-bottom: 0;
 	padding-right: 0;
 	min-width: 60%;
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 7a7d87e930d..a456183d380 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -44,7 +44,7 @@
 	<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"/>
+				<span class="icon-avartar-federation-menu icon-password">&#9662;<span/>
 		</h2>
 		<div id="displayavatar">
 			<div class="avatardiv"></div>
@@ -78,7 +78,7 @@
 		<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('disabled="1"'); } ?>
@@ -94,7 +94,7 @@
 		<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="
@@ -130,7 +130,7 @@
 		<form id="phoneform" class="section">
 			<h2>
 				<label for="phone"><?php p($l->t('Phone number')); ?></label>
-				<span class="icon-password"/>
+				<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']) ?>"
@@ -148,7 +148,7 @@
 		<form id="addressform" class="section">
 			<h2>
 				<label for="address"><?php p($l->t('Address')); ?></label>
-				<span class="icon-password"/>
+				<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')); ?>"
@@ -166,7 +166,7 @@
 		<form id="websiteform" class="section">
 			<h2>
 				<label for="website"><?php p($l->t('Website')); ?></label>
-				<span class="icon-password"/>
+				<span class="icon-federation-menu icon-password">&#9662;<span/>
 			</h2>
 			<?php if($_['lookupServerUploadEnabled']) { ?>
 			<div class="verify <?php if ($_['website'] === ''  || $_['websiteScope'] !== 'public') p('hidden'); ?>">
@@ -211,7 +211,7 @@
 		<form id="twitterform" class="section">
 			<h2>
 				<label for="twitter"><?php p($l->t('Twitter')); ?></label>
-				<span class="icon-password"/>
+				<span class="icon-federation-menu icon-password">&#9662;<span/>
 			</h2>
 			<?php if($_['lookupServerUploadEnabled']) { ?>
 			<div class="verify <?php if ($_['twitter'] === ''  || $_['twitterScope'] !== 'public') p('hidden'); ?>">
@@ -251,75 +251,81 @@
 		</form>
 	</div>
 	<?php } ?>
+	<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>
+			<strong><?php p(implode(', ', $_['groups'])); ?></strong>
+			</p>
+		</div>
+	</div>
+	<div class="personal-settings-setting-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>
+			<br>
+			<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>
+			<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" />
+			<br>
+			<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>
+			<br>
+			<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
+			<br/>
+		</form>
+		<?php
+		}
+		?>
+	</div>
 	<span class="msg"></span>
 </div>
 </div>
 
 <div class="clear"></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>
-
-<?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>
-	<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
-	<br/>
-</form>
-<?php
-}
-?>
-
-<?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 id="clientsbox" class="section clientsbox">
 	<h2><?php p($l->t('Get the apps to sync your files'));?></h2>

From b4e05e8c589a838c5d3dc849b2f126380b28e040 Mon Sep 17 00:00:00 2001
From: Andreas Jacobsen <anjac@itu.dk>
Date: Wed, 28 Jun 2017 14:27:08 +0200
Subject: [PATCH 03/12] Fixed typos

---
 settings/css/settings.css       | 10 +++++-----
 settings/templates/personal.php |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 5f4fa12f2db..7e257eec9ff 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -35,12 +35,12 @@ input#pass1, input#pass2, input#passwordbutton {
 	float: right;
 }
 
-.icon-avartar-federation-menu {
+.icon-avatar-federation-menu {
 	position: absolute;
-    width: 44px;
-    top: -6px;
-    left: 129px;
-    z-index: 10;
+	width: 44px;
+	top: -6px;
+	left: 129px;
+	z-index: 10;
 }
 
 /* icons for sidebar */
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index a456183d380..d3b37996996 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -44,7 +44,7 @@
 	<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-avartar-federation-menu icon-password">&#9662;<span/>
+				<span class="icon-avatar-federation-menu icon-password">&#9662;<span/>
 		</h2>
 		<div id="displayavatar">
 			<div class="avatardiv"></div>

From b55c7032adbe825d7076347274c2603f1b232f7a Mon Sep 17 00:00:00 2001
From: Andreas Jacobsen <anjac@itu.dk>
Date: Wed, 28 Jun 2017 18:26:50 +0200
Subject: [PATCH 04/12] Added space between avatar and settings

Signed-off-by: Andreas Jacobsen <andreasjacobsen93@gmail.com>
---
 settings/css/settings.css | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 7e257eec9ff..549971c8176 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -39,8 +39,7 @@ input#pass1, input#pass2, input#passwordbutton {
 	position: absolute;
 	width: 44px;
 	top: -6px;
-	left: 129px;
-	z-index: 10;
+	left: 130px;
 }
 
 /* icons for sidebar */
@@ -71,6 +70,7 @@ input#pass1, input#pass2, input#passwordbutton {
 #avatarform {
 	min-width: 145px;
 	padding-right: 0;
+	margin-top: -2px;
 }
 
 #avatarform .avatardiv {
@@ -148,10 +148,8 @@ input#pass1, input#pass2, input#passwordbutton {
 
 #personal-settings-container {
 	position: relative;
-	float: left;
-	min-width: 280px;
-	max-width: 700px;
-	width: calc(100% - 200px);
+	margin-left: 215px;
+	max-width: 600px;
 }
 
 #personal-settings-container:after {

From f6e57180405b201ab40fcf7bac6e456a4dea448c Mon Sep 17 00:00:00 2001
From: Andreas Jacobsen <anjac@itu.dk>
Date: Thu, 29 Jun 2017 12:28:36 +0200
Subject: [PATCH 05/12] Update for settings

Signed-off-by: Andreas Jacobsen <andreasjacobsen93@gmail.com>
---
 settings/css/settings.css       | 44 ++++++++++++++++++++++-----------
 settings/templates/personal.php |  6 +++--
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 549971c8176..54eaea9b977 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -29,17 +29,25 @@ input#pass1, input#pass2, input#passwordbutton {
 	margin-bottom: 136px;
 }
 
+.personal-settings-group-box,
+.personal-settings-language-box {
+	margin-top: 20px;
+}
+
 .icon-federation-menu {
 	width: 44px;
 	margin: -6px;
+	margin-right: 10px;
 	float: right;
+	text-align: right;
 }
 
 .icon-avatar-federation-menu {
 	position: absolute;
-	width: 44px;
+	width: 46px;
 	top: -6px;
-	left: 130px;
+	left: 128px;
+	text-align: right;
 }
 
 /* icons for sidebar */
@@ -146,33 +154,41 @@ input#pass1, input#pass2, input#passwordbutton {
 	float: left;
 }
 
-#personal-settings-container {
+.profile-settings-container {
+	top: 20px;
+}
+
+.personal-settings-container {
 	position: relative;
 	margin-left: 215px;
 	max-width: 600px;
 }
 
-#personal-settings-container:after {
+.personal-settings-container:after {
 	clear: both;
 }
 
-#personal-settings-container > div {
+.personal-settings-container > div {
 	float: left;
 	height: 100px;
 	min-width: 300px;
 }
 
-#personal-settings-container.no-edit > div {
+.personal-settings-container.no-edit > div {
 	height: 20px;
 	min-width: 200px;
 }
 
 #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;
@@ -189,7 +205,7 @@ input#pass1, input#pass2, input#passwordbutton {
 	width: 17em;
 }
 
-#personal-settings-container > div > form span[class^="icon-checkmark"] {
+.personal-settings-container > div > form span[class^="icon-checkmark"] {
 	position: absolute;
 	left: 228px;
 	top: 82px;
@@ -197,22 +213,22 @@ input#pass1, input#pass2, input#passwordbutton {
 }
 
 /* verify accounts */
-#personal-settings-container .verify {
+.personal-settings-container .verify {
 	position: absolute;
 	right: 14px;
 	top: 70px;
 }
 
-#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;
@@ -238,7 +254,7 @@ input#pass1, input#pass2, input#passwordbutton {
 
 .federationScopeMenu {
 	top: 44px;
-	margin: -5px -5px 0;
+	margin: -5px 5px 0;
 }
 
 .federationScopeMenu.bubble::after {
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index d3b37996996..a37e67bc218 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -73,7 +73,7 @@
 	</form>
 </div>
 
-<div id="personal-settings-container">
+<div class="personal-settings-container">
 	<div class="personal-settings-setting-box">
 		<form id="displaynameform" class="section">
 			<h2>
@@ -251,6 +251,8 @@
 		</form>
 	</div>
 	<?php } ?>
+</div>
+<div class="personal-settings-container profile-settings-container">
 	<div class="personal-settings-setting-box personal-settings-group-box">
 		<div id="groups" class="section">
 			<h2><?php p($l->t('Groups')); ?></h2>
@@ -260,7 +262,7 @@
 			</p>
 		</div>
 	</div>
-	<div class="personal-settings-setting-box">
+	<div class="personal-settings-setting-box personal-settings-language-box">
 		<?php if (isset($_['activelanguage'])) { ?>
 		<form id="language" class="section">
 			<h2>

From 91651cfbb9fecf99dc26152b0dbc4b48456de2cd Mon Sep 17 00:00:00 2001
From: Andreas Jacobsen <anjac@itu.dk>
Date: Fri, 14 Jul 2017 09:43:19 +0200
Subject: [PATCH 06/12] Moved settings to left

Signed-off-by: Andreas Jacobsen <andreasjacobsen93@gmail.com>
---
 settings/css/settings.css       | 20 ++++++++++++--------
 settings/templates/personal.php |  2 +-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 54eaea9b977..d4ffe232bb5 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -25,13 +25,7 @@ input#pass1, input#pass2, input#passwordbutton {
 }
 
 .personal-settings-password-box {
-	margin-top: 20px;
-	margin-bottom: 136px;
-}
-
-.personal-settings-group-box,
-.personal-settings-language-box {
-	margin-top: 20px;
+	margin-bottom: 80px;
 }
 
 .icon-federation-menu {
@@ -108,6 +102,10 @@ input#pass1, input#pass2, input#passwordbutton {
 	height: 33px;
 }
 
+#language {
+	padding-bottom: 0;
+}
+
 .jcrop-holder {
 	z-index: 500;
 }
@@ -156,6 +154,8 @@ input#pass1, input#pass2, input#passwordbutton {
 
 .profile-settings-container {
 	top: 20px;
+	position: relative;
+	max-width: 600px;
 }
 
 .personal-settings-container {
@@ -179,6 +179,11 @@ input#pass1, input#pass2, input#passwordbutton {
 	min-width: 200px;
 }
 
+.personal-settings-group-box, .personal-settings-language-box {
+    margin-top: -20px;
+    margin-bottom: -20px;
+}
+
 #avatarform > h2,
 .personal-settings-container > div h2 {
 	position: relative;
@@ -276,7 +281,6 @@ input#pass1, input#pass2, input#passwordbutton {
 #lostpassword,
 #groups {
 	display: inline-block;
-	margin-bottom: 10px;
 	padding-bottom: 0;
 	padding-right: 0;
 	min-width: 60%;
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index a37e67bc218..09df4a5f00d 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -252,7 +252,7 @@
 	</div>
 	<?php } ?>
 </div>
-<div class="personal-settings-container profile-settings-container">
+<div class="profile-settings-container">
 	<div class="personal-settings-setting-box personal-settings-group-box">
 		<div id="groups" class="section">
 			<h2><?php p($l->t('Groups')); ?></h2>

From b0e83e17bb2235aefdf0e291cbf967193c69b666 Mon Sep 17 00:00:00 2001
From: Andreas Jacobsen <anjac@itu.dk>
Date: Fri, 14 Jul 2017 11:46:12 +0200
Subject: [PATCH 07/12] Updated layout

Signed-off-by: Andreas Jacobsen <andreasjacobsen93@gmail.com>
---
 settings/css/settings.css       | 34 ++++++++++++++++++---------------
 settings/templates/personal.php |  9 +++++++--
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index d4ffe232bb5..f99aa57be22 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -25,9 +25,15 @@ input#pass1, input#pass2, input#passwordbutton {
 }
 
 .personal-settings-password-box {
-	margin-bottom: 80px;
+	margin-top: 20px;
+	margin-bottom: 136px;
 }
 
+.personal-settings-group-box,
+.personal-settings-language-box {
+	margin-top: 20px;
+ }
+
 .icon-federation-menu {
 	width: 44px;
 	margin: -6px;
@@ -102,10 +108,6 @@ input#pass1, input#pass2, input#passwordbutton {
 	height: 33px;
 }
 
-#language {
-	padding-bottom: 0;
-}
-
 .jcrop-holder {
 	z-index: 500;
 }
@@ -148,13 +150,14 @@ input#pass1, input#pass2, input#passwordbutton {
 	float: right;
 }
 
-#personal-settings-avatar-container {
+#personal-settings-avatar-container,
+#personal-settings-group-container {
 	float: left;
 }
 
 .profile-settings-container {
-	top: 20px;
 	position: relative;
+	margin-left: 215px;
 	max-width: 600px;
 }
 
@@ -168,7 +171,8 @@ input#pass1, input#pass2, input#passwordbutton {
 	clear: both;
 }
 
-.personal-settings-container > div {
+.personal-settings-container > div,
+.profile-settings-container > div {
 	float: left;
 	height: 100px;
 	min-width: 300px;
@@ -179,11 +183,6 @@ input#pass1, input#pass2, input#passwordbutton {
 	min-width: 200px;
 }
 
-.personal-settings-group-box, .personal-settings-language-box {
-    margin-top: -20px;
-    margin-bottom: -20px;
-}
-
 #avatarform > h2,
 .personal-settings-container > div h2 {
 	position: relative;
@@ -281,6 +280,7 @@ input#pass1, input#pass2, input#passwordbutton {
 #lostpassword,
 #groups {
 	display: inline-block;
+	margin-bottom: 10px;
 	padding-bottom: 0;
 	padding-right: 0;
 	min-width: 60%;
@@ -294,11 +294,15 @@ input#pass1, input#pass2, input#passwordbutton {
 
 #groups {
 	overflow-wrap: break-word;
-	max-width: 75%;
-	display: block;;
+	width: 125px;
+	display: block;
 	clear: both;
 }
 
+#groups-groups {
+	padding-top: 5px;
+}
+
 .clientsbox img {
 	height: 60px;
 }
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 09df4a5f00d..0fe078bae8a 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -252,16 +252,21 @@
 	</div>
 	<?php } ?>
 </div>
-<div class="profile-settings-container">
+
+<div class="clear"></div>
+
+<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>
+			<p id="groups-groups">
 			<strong><?php p(implode(', ', $_['groups'])); ?></strong>
 			</p>
 		</div>
 	</div>
+</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">

From 84eb18b01172014919f6a257fd9323fb5cfcc59b Mon Sep 17 00:00:00 2001
From: Andreas Jacobsen <anjac@itu.dk>
Date: Sat, 15 Jul 2017 09:30:38 +0200
Subject: [PATCH 08/12] Personal settings file changed

---
 settings/templates/personal.php               | 422 ------------------
 .../settings/personal/personal.info.php       | 347 ++++++++++++++
 2 files changed, 347 insertions(+), 422 deletions(-)
 delete mode 100644 settings/templates/personal.php
 create mode 100644 settings/templates/settings/personal/personal.info.php

diff --git a/settings/templates/personal.php b/settings/templates/personal.php
deleted file mode 100644
index 0fe078bae8a..00000000000
--- a/settings/templates/personal.php
+++ /dev/null
@@ -1,422 +0,0 @@
-<?php /**
- * Copyright (c) 2011, Robin Appelman <icewind1991@gmail.com>
- * This file is licensed under the Affero General Public License version 3 or later.
- * See the COPYING-README file.
- */
-
-/** @var $_ mixed[]|\OCP\IURLGenerator[] */
-/** @var \OCP\Defaults $theme */
-?>
-
-<div id="app-navigation">
-	<ul class="with-icon">
-	<?php foreach($_['forms'] as $form) {
-		if (isset($form['anchor'])) {
-			$anchor = '#' . $form['anchor'];
-			$class = 'nav-icon-' . $form['anchor'];
-			$sectionName = $form['section-name'];
-			print_unescaped(sprintf("<li><a href='%s' class='%s'>%s</a></li>", \OCP\Util::sanitizeHTML($anchor),
-			\OCP\Util::sanitizeHTML($class), \OCP\Util::sanitizeHTML($sectionName)));
-		}
-	}?>
-	</ul>
-</div>
-
-<div id="app-content">
-
-<div id="quota" class="section">
-	<div style="width:<?php p($_['usage_relative']);?>%"
-		<?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>>
-		<p id="quotatext">
-			<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
-				<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
-					[$_['usage'], $_['total_space']]));?>
-			<?php else: ?>
-				<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)',
-					[$_['usage'], $_['total_space'],  $_['usage_relative']]));?>
-			<?php endif ?>
-		</p>
-	</div>
-</div>
-
-<div id="personal-settings">
-<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-avatar-federation-menu icon-password">&#9662;<span/>
-		</h2>
-		<div id="displayavatar">
-			<div class="avatardiv"></div>
-			<div class="warning hidden"></div>
-			<?php if ($_['avatarChangeSupported']): ?>
-				<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
-				<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
-				<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
-				<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
-				<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
-			<?php else: ?>
-				<?php p($l->t('Picture provided by original account')); ?>
-			<?php endif; ?>
-		</div>
-
-		<div id="cropper" class="hidden">
-			<div class="inner-container">
-				<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
-				<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
-			</div>
-		</div>
-		<span class="icon-checkmark hidden"/>
-		<?php if($_['lookupServerUploadEnabled']) { ?>
-		<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
-		<?php } ?>
-	</form>
-</div>
-
-<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-federation-menu icon-password">&#9662;<span/>
-			</h2>
-			<input type="text" id="displayname" name="displayname"
-				<?php if(!$_['displayNameChangeSupported']) { print_unescaped('disabled="1"'); } ?>
-				value="<?php p($_['displayName']) ?>"
-				autocomplete="on" autocapitalize="none" autocorrect="off" />
-			<span class="icon-checkmark hidden"/>
-			<?php if($_['lookupServerUploadEnabled']) { ?>
-			<input type="hidden" id="displaynamescope" value="<?php p($_['displayNameScope']) ?>">
-			<?php } ?>
-		</form>
-	</div>
-	<div class="personal-settings-setting-box">
-		<form id="emailform" class="section">
-			<h2>
-				<label for="email"><?php p($l->t('Email')); ?></label>
-				<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="
-				<?php
-				switch($_['emailVerification']) {
-					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'));
-				}
-				?>">
-			</div>
-			<input type="email" name="email" id="email" value="<?php if(!$_['displayNameChangeSupported'] && empty($_['email'])) p($l->t('No email address set')); else p($_['email']); ?>"
-				<?php if(!$_['displayNameChangeSupported']) { print_unescaped('disabled="1"'); } ?>
-				placeholder="<?php p($l->t('Your email address')) ?>"
-				autocomplete="on" autocapitalize="none" autocorrect="off" />
-			<?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']) ?>">
-			<?php } ?>
-		</form>
-	</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>
-			</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>
-			</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 } ?>
-</div>
-
-<div class="clear"></div>
-
-<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>
-</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>
-			<br>
-			<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>
-			<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" />
-			<br>
-			<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>
-			<br>
-			<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
-			<br/>
-		</form>
-		<?php
-		}
-		?>
-	</div>
-	<span class="msg"></span>
-</div>
-</div>
-
-<div class="clear"></div>
-
-
-<div id="clientsbox" class="section clientsbox">
-	<h2><?php p($l->t('Get the apps to sync your files'));?></h2>
-	<a href="<?php p($_['clients']['desktop']); ?>" rel="noreferrer" target="_blank">
-		<img src="<?php print_unescaped(image_path('core', 'desktopapp.svg')); ?>"
-			 alt="<?php p($l->t('Desktop client'));?>" />
-	</a>
-	<a href="<?php p($_['clients']['android']); ?>" rel="noreferrer" target="_blank">
-		<img src="<?php print_unescaped(image_path('core', 'googleplay.png')); ?>"
-			 alt="<?php p($l->t('Android app'));?>" />
-	</a>
-	<a href="<?php p($_['clients']['ios']); ?>" rel="noreferrer" target="_blank">
-		<img src="<?php print_unescaped(image_path('core', 'appstore.svg')); ?>"
-			 alt="<?php p($l->t('iOS app'));?>" />
-	</a>
-
-		<p>
-			<?php print_unescaped(str_replace(
-				[
-					'{contributeopen}',
-					'{linkclose}',
-				],
-				[
-					'<a href="https://nextcloud.com/contribute" target="_blank" rel="noreferrer">',
-					'</a>',
-				],
-				$l->t('If you want to support the project {contributeopen}join development{linkclose} or {contributeopen}spread the word{linkclose}!'))); ?>
-		</p>
-
-	<?php if(OC_APP::isEnabled('firstrunwizard')) {?>
-		<p><a class="button" href="#" id="showWizard"><?php p($l->t('Show First Run Wizard again'));?></a></p>
-	<?php }?>
-</div>
-
-<div id="security" class="section">
-	<h2><?php p($l->t('Security'));?></h2>
-	<p class="settings-hint hidden-when-empty"><?php p($l->t('Web, desktop, mobile clients and app specific passwords that currently have access to your account.'));?></p>
-	<table class="icon-loading">
-		<thead class="token-list-header">
-			<tr>
-				<th><?php p($l->t('Device'));?></th>
-				<th><?php p($l->t('Last activity'));?></th>
-				<th></th>
-			</tr>
-		</thead>
-		<tbody class="token-list">
-		</tbody>
-	</table>
-
-	<h3><?php p($l->t('App passwords'));?></h3>
-	<p class="settings-hint"><?php p($l->t('Here you can generate individual passwords for apps so you don’t have to give out your password. You can revoke them individually too.'));?></p>
-
-	<div id="app-password-form">
-		<input id="app-password-name" type="text" placeholder="<?php p($l->t('App name')); ?>">
-		<button id="add-app-password" class="button"><?php p($l->t('Create new app password')); ?></button>
-	</div>
-	<div id="app-password-result" class="hidden">
-		<span>
-			<?php p($l->t('Use the credentials below to configure your app or device.')); ?>
-			<?php p($l->t('For security reasons this password will only be shown once.')); ?>
-		</span>
-		<div class="app-password-row">
-			<span class="app-password-label"><?php p($l->t('Username')); ?></span>
-			<input id="new-app-login-name" type="text" readonly="readonly"/>
-		</div>
-		<div class="app-password-row">
-			<span class="app-password-label"><?php p($l->t('Password')); ?></span>
-			<input id="new-app-password" type="text" readonly="readonly"/>
-			<a class="clipboardButton icon icon-clippy" data-clipboard-target="#new-app-password"></a>
-			<button id="app-password-hide" class="button"><?php p($l->t('Done')); ?></button>
-		</div>
-	</div>
-</div>
-
-<?php foreach($_['forms'] as $form) {
-	if (isset($form['form'])) {?>
-	<div id="<?php isset($form['anchor']) ? p($form['anchor']) : p('');?>"><?php print_unescaped($form['form']);?></div>
-	<?php }
-};?>
-
-<div class="section">
-	<h2><?php p($l->t('Version'));?></h2>
-	<p><a href="<?php print_unescaped($theme->getBaseUrl()); ?>" target="_blank"><?php p($theme->getTitle()); ?></a> <?php p(OC_Util::getHumanVersion()) ?></p>
-	<p><?php include('settings.development.notice.php'); ?></p>
-</div>
-
-</div>
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
new file mode 100644
index 00000000000..d22e9f8ea99
--- /dev/null
+++ b/settings/templates/settings/personal/personal.info.php
@@ -0,0 +1,347 @@
+<?php
+/**
+ * @copyright Copyright (c) 2017 Arthur Schiwon <blizzz@arthur-schiwon.de>
+ *
+ * @author Arthur Schiwon <blizzz@arthur-schiwon.de>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/** @var \OCP\IL10N $l */
+/** @var array $_ */
+
+script('settings', [
+	'usersettings',
+	'federationsettingsview',
+	'federationscopemenu',
+	'settings/personalInfo',
+]);
+vendor_script('strengthify/jquery.strengthify');
+vendor_style('strengthify/strengthify');
+vendor_script('jcrop/js/jquery.Jcrop');
+vendor_style('jcrop/css/jquery.Jcrop');
+
+?>
+
+<div id="quota" class="section">
+	<div style="width:<?php p($_['usage_relative']);?>%"
+		<?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>>
+		<p id="quotatext">
+			<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
+				<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
+					[$_['usage'], $_['total_space']]));?>
+			<?php else: ?>
+				<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)',
+					[$_['usage'], $_['total_space'],  $_['usage_relative']]));?>
+			<?php endif ?>
+		</p>
+	</div>
+</div>
+
+<div id="personal-settings">
+	<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-avatar-federation-menu icon-password">&#9662;<span/>
+			</h2>
+			<div id="displayavatar">
+				<div class="avatardiv"></div>
+				<div class="warning hidden"></div>
+				<?php if ($_['avatarChangeSupported']): ?>
+					<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
+					<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
+					<div class="hidden button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
+					<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
+					<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
+				<?php else: ?>
+					<?php p($l->t('Picture provided by original account')); ?>
+				<?php endif; ?>
+			</div>
+
+			<div id="cropper" class="hidden">
+				<div class="inner-container">
+					<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
+					<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
+				</div>
+			</div>
+			<span class="icon-checkmark hidden"/>
+			<?php if($_['lookupServerUploadEnabled']) { ?>
+			<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
+			<?php } ?>
+		</form>
+	</div>
+
+	<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-federation-menu icon-password">&#9662;<span/>
+				</h2>
+				<input type="text" id="displayname" name="displayname"
+					<?php if(!$_['displayNameChangeSupported']) { print_unescaped('disabled="1"'); } ?>
+					value="<?php p($_['displayName']) ?>"
+					autocomplete="on" autocapitalize="none" autocorrect="off" />
+				<span class="icon-checkmark hidden"/>
+				<?php if($_['lookupServerUploadEnabled']) { ?>
+				<input type="hidden" id="displaynamescope" value="<?php p($_['displayNameScope']) ?>">
+				<?php } ?>
+			</form>
+		</div>
+		<div class="personal-settings-setting-box">
+			<form id="emailform" class="section">
+				<h2>
+					<label for="email"><?php p($l->t('Email')); ?></label>
+					<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="
+					<?php
+					switch($_['emailVerification']) {
+						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'));
+					}
+					?>">
+				</div>
+				<input type="email" name="email" id="email" value="<?php if(!$_['displayNameChangeSupported'] && empty($_['email'])) p($l->t('No email address set')); else p($_['email']); ?>"
+					<?php if(!$_['displayNameChangeSupported']) { print_unescaped('disabled="1"'); } ?>
+					placeholder="<?php p($l->t('Your email address')) ?>"
+					autocomplete="on" autocapitalize="none" autocorrect="off" />
+				<?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']) ?>">
+				<?php } ?>
+			</form>
+		</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>
+				</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>
+				</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 } ?>
+	</div>
+
+	<div class="clear"></div>
+
+	<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>
+	</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>
+				<br>
+				<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>
+				<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" />
+				<br>
+				<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>
+				<br>
+				<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
+				<br/>
+			</form>
+			<?php
+			}
+			?>
+		</div>
+		<span class="msg"></span>
+	</div>
+</div>
+
+<div class="clear"></div>
\ No newline at end of file

From 35494703f32bb011e66e2a896b36a185b17e10c2 Mon Sep 17 00:00:00 2001
From: Andreas Jacobsen <anjac@itu.dk>
Date: Mon, 24 Jul 2017 10:14:57 +0200
Subject: [PATCH 09/12] Fixed bug with sharing-settings

Signed-off-by: Andreas Jacobsen <andreasjacobsen93@gmail.com>
---
 settings/css/settings.css             | 1 -
 settings/js/federationsettingsview.js | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index f99aa57be22..3dd2d9babaa 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -194,7 +194,6 @@ input#pass1, input#pass2, input#passwordbutton {
 
 .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;
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;
 			}
 		}

From 7284458e24553a05078259635279356cc4d361c2 Mon Sep 17 00:00:00 2001
From: Marin Treselj <marin@pixelipo.com>
Date: Thu, 3 Aug 2017 12:51:27 +0200
Subject: [PATCH 10/12] Clean up HTML structure, fix labels.

Signed-off-by: Marin Treselj <marin@pixelipo.com>
---
 settings/css/settings.css                     | 76 ++++++-------------
 .../settings/personal/personal.info.php       | 10 +--
 2 files changed, 26 insertions(+), 60 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index f20c13eacb3..5a9e4c7f053 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -2,24 +2,11 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
-select#timezone {
-	width: 15em;
-}
-
-select#languageinput {
-	width: 17em;
-}
-
 input#openid, input#webdav {
 	width: 20em;
 }
 
-input#pass1, input#pass2, input#passwordbutton {
-	width: 17em;
-}
-
 /* PERSONAL */
-
 .clear {
 	clear: both;
 }
@@ -37,7 +24,6 @@ input#pass1, input#pass2, input#passwordbutton {
 .icon-federation-menu {
 	width: 44px;
 	margin: -6px;
-	margin-right: 10px;
 	float: right;
 	text-align: right;
 }
@@ -75,12 +61,6 @@ input#pass1, input#pass2, input#passwordbutton {
 	background-image: url('../img/password.svg?v=1');
 }
 
-#avatarform {
-	min-width: 145px;
-	padding-right: 0;
-	margin-top: -2px;
-}
-
 #avatarform .avatardiv {
 	margin-bottom: 10px;
 }
@@ -152,18 +132,14 @@ input#pass1, input#pass2, input#passwordbutton {
 
 #personal-settings-avatar-container,
 #personal-settings-group-container {
-	float: left;
-}
-
-.profile-settings-container {
-	position: relative;
-	margin-left: 215px;
-	max-width: 600px;
+	display: inline-block;
+	vertical-align: top;
+	min-width: 205px;
 }
 
+.profile-settings-container,
 .personal-settings-container {
-	position: relative;
-	margin-left: 215px;
+	display: inline-block;
 	max-width: 600px;
 }
 
@@ -174,13 +150,7 @@ input#pass1, input#pass2, input#passwordbutton {
 .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,
@@ -202,24 +172,32 @@ input#pass1, input#pass2, input#passwordbutton {
 	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;
+	position: relative;
+	left: 90%;
+	top: -44px;
 	pointer-events: none;
+	width: 44px;
 }
 
 /* verify accounts */
 .personal-settings-container .verify {
-	position: absolute;
-	right: 14px;
-	top: 70px;
+	position: relative;
+	left: 100%;
+	top: 0;
+	height: 0;
 }
 
 .personal-settings-container .verify img {
@@ -285,12 +263,6 @@ input#pass1, input#pass2, input#passwordbutton {
 	min-width: 60%;
 }
 
-#avatarform,
-#passwordform {
-	margin-bottom: 0;
-	padding-bottom: 0;
-}
-
 #groups {
 	overflow-wrap: break-word;
 	width: 125px;
@@ -1000,10 +972,6 @@ span.version {
 	margin: 8px 0;
 }
 
-form.section {
-	position: relative;
-}
-
 .followupsection {
 	display: block;
 	padding: 0 30px 30px 30px;
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index ee831f8f4f6..e0655b393d2 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -135,7 +135,6 @@ 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"/>
@@ -308,7 +307,6 @@ vendor_style('jcrop/css/jquery.Jcrop');
 						</option>
 					<?php endforeach;?>
 				</select>
-				<br>
 				<a href="https://www.transifex.com/nextcloud/nextcloud/"
 					target="_blank" rel="noreferrer">
 					<em><?php p($l->t('Help translate'));?></em>
@@ -324,12 +322,12 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			<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" />
-				<br>
+
 				<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"
@@ -338,9 +336,9 @@ vendor_style('jcrop/css/jquery.Jcrop');
 						autocomplete="off" autocapitalize="none" autocorrect="off" />
 					<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
 				</div>
-				<br>
+
 				<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
-				<br/>
+
 			</form>
 			<?php
 			}

From 7de9eb16d80d31162b5f3930daa45f8e0df45ccc Mon Sep 17 00:00:00 2001
From: Marin Treselj <marin@pixelipo.com>
Date: Thu, 3 Aug 2017 13:12:00 +0200
Subject: [PATCH 11/12] Reintroduce a more compact grid.

Overrides core `.section` values.

Signed-off-by: Marin Treselj <marin@pixelipo.com>
---
 settings/css/settings.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 5a9e4c7f053..ec0e8209dcd 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -972,6 +972,11 @@ span.version {
 	margin: 8px 0;
 }
 
+form.section {
+	padding: 0 30px;
+	margin-bottom: 0;
+}
+
 .followupsection {
 	display: block;
 	padding: 0 30px 30px 30px;

From a4d984532660637fd7ce604762b019479f641dcd Mon Sep 17 00:00:00 2001
From: Marin Treselj <marin@pixelipo.com>
Date: Fri, 4 Aug 2017 10:22:03 +0200
Subject: [PATCH 12/12] Fix federation icon menu and container paddings.

Signed-off-by: Marin Treselj <marin@pixelipo.com>
---
 settings/css/settings.css                     | 55 +++----------------
 .../settings/personal/personal.info.php       |  4 +-
 2 files changed, 11 insertions(+), 48 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index ec0e8209dcd..cf9e7efbc88 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -11,29 +11,9 @@ input#openid, input#webdav {
 	clear: both;
 }
 
-.personal-settings-password-box {
-	margin-top: 20px;
-	margin-bottom: 136px;
-}
-
-.personal-settings-group-box,
-.personal-settings-language-box {
-	margin-top: 20px;
- }
-
 .icon-federation-menu {
-	width: 44px;
-	margin: -6px;
+	width: 16px;
 	float: right;
-	text-align: right;
-}
-
-.icon-avatar-federation-menu {
-	position: absolute;
-	width: 46px;
-	top: -6px;
-	left: 128px;
-	text-align: right;
 }
 
 /* icons for sidebar */
@@ -62,7 +42,7 @@ input#openid, input#webdav {
 }
 
 #avatarform .avatardiv {
-	margin-bottom: 10px;
+	margin: 10px auto;
 }
 
 #avatarform .warning {
@@ -84,8 +64,7 @@ input#openid, input#webdav {
 #uploadavatarbutton,
 #selectavatar,
 #removeavatar {
-	width: 33px;
-	height: 33px;
+	padding: 21px;
 }
 
 .jcrop-holder {
@@ -134,13 +113,14 @@ input#openid, input#webdav {
 #personal-settings-group-container {
 	display: inline-block;
 	vertical-align: top;
-	min-width: 205px;
+	width: 225px;
 }
 
 .profile-settings-container,
 .personal-settings-container {
 	display: inline-block;
 	max-width: 600px;
+	margin-bottom: 20px;
 }
 
 .personal-settings-container:after {
@@ -164,10 +144,9 @@ input#openid, input#webdav {
 
 .personal-settings-container > div h2 span[class^="icon-"],
 #personal-settings-avatar-container h2 span[class^="icon-"] {
-	padding: 8px;
-	margin-left: -8px;
-	margin-bottom: -10px;
+	padding-left: 16px;
 	background-size: 16px;
+	background-position: left 8px;
 	opacity: .3;
 	cursor: pointer;
 }
@@ -254,22 +233,6 @@ input#passwordbutton {
 	opacity: .75;
 }
 
-#lostpassword,
-#groups {
-	display: inline-block;
-	margin-bottom: 10px;
-	padding-bottom: 0;
-	padding-right: 0;
-	min-width: 60%;
-}
-
-#groups {
-	overflow-wrap: break-word;
-	width: 125px;
-	display: block;
-	clear: both;
-}
-
 #groups-groups {
 	padding-top: 5px;
 }
@@ -972,8 +935,8 @@ span.version {
 	margin: 8px 0;
 }
 
-form.section {
-	padding: 0 30px;
+.section {
+	padding: 10px 30px;
 	margin-bottom: 0;
 }
 
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index e0655b393d2..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-avatar-federation-menu icon-password">&#9662;<span/>
+				<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>
@@ -284,6 +283,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			</div>
 		</div>
 	</div>
+	
 	<div class="profile-settings-container">
 		<div class="personal-settings-setting-box personal-settings-language-box">
 			<?php if (isset($_['activelanguage'])) { ?>