New user form in table

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

Added value and empty check to properly display a confirm button/input

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

w3c html form table compliance and menu fixes

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

Various design fixes

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

Fix wording to consistent 'Add user'

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Focus new username input on toggle

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

Removed  unwanted th after rebase

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

quote fix

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

Th to td

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

🙈

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

Email input to email type

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

Fixed table template cells and fix email input enabling

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

Always show email and fixed min-width of name, username, mail and fullname columns

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

Use button id

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

3 files changed, 142 insertions, 134 deletions

diff --git a/settings/templates/users/main.php b/settings/templates/users/main.php
index 6b75c46d10f..3fc80fca0b9 100644
--- a/settings/templates/users/main.php
+++ b/settings/templates/users/main.php
@@ -67,20 +67,6 @@ translation('settings');
 						<?php p($l->t('Show last login')) ?>
 					</label>
 				</p>
-				<p>
-					<input type="checkbox" name="EmailAddress" value="EmailAddress" id="CheckboxEmailAddress"
-						class="checkbox" <?php if ($_['show_email'] === 'true') print_unescaped('checked="checked"'); ?> />
-					<label for="CheckboxEmailAddress">
-						<?php p($l->t('Show email address')) ?>
-					</label>
-				</p>
-				<p>
-					<input type="checkbox" name="MailOnUserCreate" value="MailOnUserCreate" id="CheckboxMailOnUserCreate"
-						class="checkbox" <?php if ($_['send_email'] === 'true') print_unescaped('checked="checked"'); ?> />
-					<label for="CheckboxMailOnUserCreate">
-						<?php p($l->t('Send email to new user')) ?>
-					</label>
-				</p>
 				<p class="info-text">
 					<?php p($l->t('When the password of a new user is left empty, an activation email with a link to set the password is sent.')) ?>
 				</p>
diff --git a/settings/templates/users/part.createuser.php b/settings/templates/users/part.createuser.php
index fca9ecc0898..57fe8e8b63f 100644
--- a/settings/templates/users/part.createuser.php
+++ b/settings/templates/users/part.createuser.php
@@ -1,37 +1,3 @@
 <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>
+	<button type="button" id="new-user-button" class="icon-add"><?php p($l->t('Add user'))?></button>
 </div>
diff --git a/settings/templates/users/part.userlist.php b/settings/templates/users/part.userlist.php
index 2506dba7fc3..e4e5aa3df7b 100644
--- a/settings/templates/users/part.userlist.php
+++ b/settings/templates/users/part.userlist.php
@@ -1,90 +1,146 @@
-<table id="userlist" class="grid" data-groups="<?php p($_['allGroups']);?>">
-	<thead>
-		<tr>
-			<th id="headerAvatar" scope="col"></th>
-			<th id="headerName" scope="col"><?php p($l->t('Username'))?></th>
-			<th id="headerDisplayName" scope="col"><?php p($l->t( 'Full name' )); ?></th>
-			<th id="headerPassword" scope="col"><?php p($l->t( 'Password' )); ?></th>
-			<th class="mailAddress" scope="col"><?php p($l->t( 'Email' )); ?></th>
-			<th id="headerGroups" scope="col"><?php p($l->t( 'Groups' )); ?></th>
-		<?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
-			<th id="headerSubAdmins" scope="col"><?php p($l->t('Group admin for')); ?></th>
-		<?php endif;?>
-			<th id="headerQuota" scope="col"><?php p($l->t('Quota')); ?></th>
-			<th class="storageLocation" scope="col"><?php p($l->t('Storage location')); ?></th>
-			<th class="userBackend" scope="col"><?php p($l->t('User backend')); ?></th>
-			<th class="lastLogin" scope="col"><?php p($l->t('Last login')); ?></th>
-			<th class="userActions"></th>
-		</tr>
-	</thead>
-	<tbody>
-		<!-- the following <tr> is used as a template for the JS part -->
-		<tr style="display:none">
-			<td class="avatar"><div class="avatardiv"></div></td>
-			<th class="name" scope="row"></th>
-			<td class="displayName"><span></span> <img class="action"
-				src="<?php p(image_path('core', 'actions/rename.svg'))?>"
-				alt="<?php p($l->t("change full name"))?>" title="<?php p($l->t("change full name"))?>"/>
-			</td>
-			<td class="password"><span>●●●●●●●</span> <img class="action"
-				src="<?php print_unescaped(image_path('core', 'actions/rename.svg'))?>"
-				alt="<?php p($l->t("set new password"))?>" title="<?php p($l->t("set new password"))?>"/>
-			</td>
-			<td class="mailAddress"><span></span><div class="loading-small hidden"></div> <img class="action"
-				src="<?php p(image_path('core', 'actions/rename.svg'))?>"
-				alt="<?php p($l->t('change email address'))?>" title="<?php p($l->t('change email address'))?>"/>
-			</td>
-			<td class="groups"><div class="groupsListContainer multiselect button"
-				><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
-			</td>
-		<?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
-			<td class="subadmins"><div class="groupsListContainer multiselect button"
-				><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
-			</td>
-		<?php endif;?>
-			<td class="quota">
-				<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">
-					<option	value='default'>
-						<?php p($l->t('Default'));?>
-					</option>
-					<option value='none'>
-						<?php p($l->t('Unlimited'));?>
-					</option>
-					<?php foreach($_['quota_preset'] as $preset):?>
-						<option value='<?php p($preset);?>'>
-							<?php p($preset);?>
+<form class="newUserMenu" id="newuser" autocomplete="off">
+	<table id="userlist" class="grid" data-groups="<?php p($_['allGroups']);?>">
+		<thead>
+			<tr>
+				<th id="headerAvatar" scope="col"></th>
+				<th id="headerName" scope="col"><?php p($l->t('Username'))?></th>
+				<th id="headerDisplayName" scope="col"><?php p($l->t( 'Full name' )); ?></th>
+				<th id="headerPassword" scope="col"><?php p($l->t( 'Password' )); ?></th>
+				<th class="mailAddress" scope="col"><?php p($l->t( 'Email' )); ?></th>
+				<th id="headerGroups" scope="col"><?php p($l->t( 'Groups' )); ?></th>
+			<?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
+				<th id="headerSubAdmins" scope="col"><?php p($l->t('Group admin for')); ?></th>
+			<?php endif;?>
+			<?php if((bool)$_['recoveryAdminEnabled']): ?>
+				<th id="recoveryPassword" scope="col"><?php p($l->t('Recovery password')); ?></th>
+			<?php endif; ?>
+				<th id="headerQuota" scope="col"><?php p($l->t('Quota')); ?></th>
+				<th class="storageLocation" scope="col"><?php p($l->t('Storage location')); ?></th>
+				<th class="userBackend" scope="col"><?php p($l->t('User backend')); ?></th>
+				<th class="lastLogin" scope="col"><?php p($l->t('Last login')); ?></th>
+				<th class="userActions"></th>
+			</tr>
+			<tr id="newuserHeader" style="display:none">
+				<td class="icon-add"></td>
+				<td class="name">
+					<input id="newusername" type="text" required
+						placeholder="<?php p($l->t('Username'))?>" name="username"
+						autocomplete="off" autocapitalize="none" autocorrect="off" />
+				</td>
+				<td class="displayName">
+					<input id="newdisplayname" type="text"
+						placeholder="<?php p($l->t('Full name'))?>" name="displayname"
+						autocomplete="off" autocapitalize="none" autocorrect="off" />
+				</td>
+				<td class="password">
+					<input id="newuserpassword" type="password" required
+						   placeholder="<?php p($l->t('Password'))?>" name="password"
+						   autocomplete="new-password" autocapitalize="none" autocorrect="off" />
+				</td>
+				<td class="mailAddress">
+					<input id="newemail" type="email"
+						   placeholder="<?php p($l->t('E-Mail'))?>" name="email"
+						   autocomplete="off" autocapitalize="none" autocorrect="off" />
+				</td>
+				<td 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>
+				</td>
+			<?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
+				<td></td>
+			<?php endif;?>
+			<?php if((bool)$_['recoveryAdminEnabled']): ?>
+				<td 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'))?>"/>
+				</td>
+			<?php endif; ?>
+				<td class="quota"></td>
+				<td class="storageLocation" scope="col"></td>
+				<td class="userBackend" scope="col"></td>
+				<td class="lastLogin" scope="col"></td>
+				<td class="userActions">
+					<input type="submit" id="newsubmit" class="button icon-confirm has-tooltip" value="<?php p($l->t('Add user'))?>" />
+				</td>
+			</tr>
+		</thead>
+		<tbody>
+			<!-- the following <tr> is used as a template for the JS part -->
+			<tr style="display:none">
+				<td class="avatar"><div class="avatardiv"></div></td>
+				<td class="name" scope="row"></td>
+				<td class="displayName"><span></span> <img class="action"
+					src="<?php p(image_path('core', 'actions/rename.svg'))?>"
+					alt="<?php p($l->t('change full name'))?>" title="<?php p($l->t('change full name'))?>"/>
+				</td>
+				<td class="password"><span>●●●●●●●</span> <img class="action"
+					src="<?php print_unescaped(image_path('core', 'actions/rename.svg'))?>"
+					alt="<?php p($l->t('set new password'))?>" title="<?php p($l->t('set new password'))?>"/>
+				</td>
+				<td class="mailAddress"><span></span><div class="loading-small hidden"></div> <img class="action"
+					src="<?php p(image_path('core', 'actions/rename.svg'))?>"
+					alt="<?php p($l->t('change email address'))?>" title="<?php p($l->t('change email address'))?>"/>
+				</td>
+				<td class="groups"><div class="groupsListContainer multiselect button"
+					><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
+				</td>
+			<?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
+				<td class="subadmins"><div class="groupsListContainer multiselect button"
+					><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
+				</td>
+			<?php endif;?>
+			<?php if((bool)$_['recoveryAdminEnabled']): ?>
+				<td></td>
+			<?php endif; ?>
+				<td class="quota">
+					<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">
+						<option	value='default'>
+							<?php p($l->t('Default'));?>
+						</option>
+						<option value='none'>
+							<?php p($l->t('Unlimited'));?>
+						</option>
+						<?php foreach($_['quota_preset'] as $preset):?>
+							<option value='<?php p($preset);?>'>
+								<?php p($preset);?>
+							</option>
+						<?php endforeach;?>
+						<option value='other' data-new>
+							<?php p($l->t('Other'));?> ...
 						</option>
-					<?php endforeach;?>
-					<option value='other' data-new>
-						<?php p($l->t('Other'));?> ...
-					</option>
-				</select>
-				<progress class="quota-user-progress" value="" max="100"></progress>
-			</td>
-			<td class="storageLocation"></td>
-			<td class="userBackend"></td>
-			<td class="lastLogin"></td>
-			<td class="userActions">
-				<div class="toggleUserActions">
-					<a class="action"><span class="icon-more"></span></a>
-					<div class="popovermenu">
-						<ul class="userActionsMenu">
-							<li>
-								<a href="#" class="menuitem action-togglestate permanent" data-action="togglestate"></a>
-							</li>
-							<li>
-								<a href="#" class="menuitem action-remove permanent" data-action="remove">
-									<span class="icon icon-delete"></span>
-									<span><?php p($l->t('Delete')); ?></span>
-								</a>
-							</li>
-						</ul>
+					</select>
+					<progress class="quota-user-progress" value="" max="100"></progress>
+				</td>
+				<td class="storageLocation"></td>
+				<td class="userBackend"></td>
+				<td class="lastLogin"></td>
+				<td class="userActions">
+					<div class="toggleUserActions">
+						<a class="action"><span class="icon-more"></span></a>
+						<div class="popovermenu">
+							<ul class="userActionsMenu">
+								<li>
+									<a href="#" class="menuitem action-togglestate permanent" data-action="togglestate"></a>
+								</li>
+								<li>
+									<a href="#" class="menuitem action-remove permanent" data-action="remove">
+										<span class="icon icon-delete"></span>
+										<span><?php p($l->t('Delete')); ?></span>
+									</a>
+								</li>
+							</ul>
+						</div>
 					</div>
-				</div>
-			</td>
-		</tr>
-	</tbody>
-</table>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</form>
 
 <div class="emptycontent" style="display:none">
 	<div class="icon-search"></div>