New button standard

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

USer menu in popover

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Multiselect fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Register menu & copyright

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Allow form and label in popover standard

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

New menu NOT in popover

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Stop autofilling user and password...
SHAME TO THEM: https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c100

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Hide men by default

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

4 files changed, 58 insertions, 27 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 05d62423d17..0af440594da 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -549,7 +549,10 @@ span.usersLastLoginTooltip {
 /* use same height as in files app */
 #newuser {
 	/* positioning fixes */
-	padding-left: 3px;
+	margin: 2px 0;
+	display: flex;
+	flex-direction: column;
+
 	.groups {
 		display: inline;
 	}
@@ -561,6 +564,19 @@ span.usersLastLoginTooltip {
 		position: relative;
 		top: -1px;
 	}
+	input:not([type='submit']) {
+		width: 100%;
+		margin: 2px 0;
+	}
+	input[type='submit'] {
+		flex-grow: 2;
+	}
+	> div {
+		display: inline-flex;
+		label {
+			display: block;
+		}
+	}
 }
 
 tr:hover > td {
diff --git a/settings/js/users/users.js b/settings/js/users/users.js
index 0b94401941b..31f9605e48f 100644
--- a/settings/js/users/users.js
+++ b/settings/js/users/users.js
@@ -2,6 +2,7 @@
  * Copyright (c) 2014, Arthur Schiwon <blizzz@owncloud.com>
  * Copyright (c) 2014, Raghu Nayyar <beingminimal@gmail.com>
  * Copyright (c) 2011, Robin Appelman <icewind1991@gmail.com>
+ * Copyright (c) 2017, John Molakvoæ <skjnldsv@protonmail.com>
  * This file is licensed under the Affero General Public License version 3 or later.
  * See the COPYING-README file.
  */
@@ -31,6 +32,7 @@ var UserList = {
 		// initially the list might already contain user entries (not fully ajaxified yet)
 		// initialize these entries
 		this.$el.find('.quota-user').singleSelect().on('change', this.onQuotaSelect);
+		OC.registerMenu($('.app-navigation-new > button'), $('#newuser'))
 	},
 
 	/**
@@ -508,7 +510,7 @@ var UserList = {
 			checked: checked,
 			oncheck: addUserToGroup,
 			onuncheck: removeUserFromGroup,
-			minWidth: 100
+			minWidth: 150
 		});
 	},
 
@@ -542,7 +544,7 @@ var UserList = {
 			checked: checked,
 			oncheck: checkHandler,
 			onuncheck: checkHandler,
-			minWidth: 100
+			minWidth: 150
 		});
 	},
 
diff --git a/settings/templates/users/main.php b/settings/templates/users/main.php
index 3688f2296cd..6b75c46d10f 100644
--- a/settings/templates/users/main.php
+++ b/settings/templates/users/main.php
@@ -1,6 +1,7 @@
 <?php
 /**
  * Copyright (c) 2011, Robin Appelman <icewind1991@gmail.com>
+ * Copyright (c) 2017, John Molakvoæ <skjnldsv@protonmail.com>
  * This file is licensed under the Affero General Public License version 3 or later.
  * See the COPYING-README file.
  */
@@ -35,6 +36,7 @@ translation('settings');
 ?>
 
 <div id="app-navigation">
+	<?php print_unescaped($this->inc('users/part.createuser')); ?>
 	<?php print_unescaped($this->inc('users/part.grouplist')); ?>
 	<div id="app-settings">
 		<div id="app-settings-header">
@@ -88,6 +90,5 @@ translation('settings');
 </div>
 
 <div id="app-content">
-	<?php print_unescaped($this->inc('users/part.createuser')); ?>
 	<?php print_unescaped($this->inc('users/part.userlist', $userlistParams)); ?>
 </div>
diff --git a/settings/templates/users/part.createuser.php b/settings/templates/users/part.createuser.php
index 6a388fc0d88..fca9ecc0898 100644
--- a/settings/templates/users/part.createuser.php
+++ b/settings/templates/users/part.createuser.php
@@ -1,25 +1,37 @@
-<div id="controls">
-	<form id="newuser" autocomplete="off">
-		<input id="newusername" type="text"
-			placeholder="<?php p($l->t('Username'))?>"
-			autocomplete="off" autocapitalize="none" autocorrect="off" />
-		<input
-			type="password" id="newuserpassword"
-			placeholder="<?php p($l->t('Password'))?>"
-			autocomplete="off" autocapitalize="none" autocorrect="off" />
-		<input id="newemail" type="email" style="display:none"
-			   placeholder="<?php p($l->t('E-Mail'))?>"
-			   autocomplete="off" autocapitalize="none" autocorrect="off" />
-		<div class="groups"><div class="groupsListContainer multiselect button" data-placeholder="<?php p($l->t('Groups'))?>"><span class="title groupsList"></span><span class="icon-triangle-s"></span></div></div>
-		<input type="submit" class="button" value="<?php p($l->t('Create'))?>" />
+<div class="app-navigation-new">
+	<button type="button" class="icon-add"><?php p($l->t('New user'))?></button>
+	<form class="newUserMenu" id="newuser" autocomplete="off" style="display: none;">
+		<div>
+			<input id="newusername" type="text" required
+				placeholder="<?php p($l->t('Username'))?>" name="username"
+				autocomplete="off" autocapitalize="none" autocorrect="off" />
+		</div>
+		<div>
+			<input id="newuserpassword" type="password" required
+				   placeholder="<?php p($l->t('Password'))?>" name="password"
+				   autocomplete="new-password" autocapitalize="none" autocorrect="off" />
+		</div>
+		<div>
+			<input id="newemail" type="text" style="display:none"
+				   placeholder="<?php p($l->t('E-Mail'))?>" name="email"
+				   autocomplete="off" autocapitalize="none" autocorrect="off" />
+		</div>
+		<div>
+			<label class="groups" for="newgroup">
+				<div class="groupsListContainer multiselect button" data-placeholder="<?php p($l->t('Groups'))?>"><span class="title groupsList"></span>
+					<span class="icon-triangle-s"></span>
+				</div>
+			</label>
+			<input type="submit" id="newsubmit" class="button icon-confirm has-tooltip" value="" title="<?php p($l->t('Create'))?>" />
+		</div>
+		<?php if((bool)$_['recoveryAdminEnabled']): ?>
+		<div class="recoveryPassword">
+			<input id="recoveryPassword"
+				   type="password"
+				   placeholder="<?php p($l->t('Admin Recovery Password'))?>"
+				   title="<?php p($l->t('Enter the recovery password in order to recover the users files during password change'))?>"
+				   alt="<?php p($l->t('Enter the recovery password in order to recover the users files during password change'))?>"/>
+		</div>
+		<?php endif; ?>
 	</form>
-	<?php if((bool)$_['recoveryAdminEnabled']): ?>
-	<div class="recoveryPassword">
-	<input id="recoveryPassword"
-		   type="password"
-		   placeholder="<?php p($l->t('Admin Recovery Password'))?>"
-		   title="<?php p($l->t('Enter the recovery password in order to recover the users files during password change'))?>"
-		   alt="<?php p($l->t('Enter the recovery password in order to recover the users files during password change'))?>"/>
-	</div>
-	<?php endif; ?>
 </div>