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>
This commit is contained in:
parent
2f1aa25130
commit
7f6b27aef7
|
@ -149,6 +149,11 @@ input[type='reset'] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: nc-darken($color-main-background, 3%);
|
background-color: nc-darken($color-main-background, 3%);
|
||||||
|
&.icon-confirm:not(:empty),
|
||||||
|
&.icon-confirm[value]:not([value=""]) {
|
||||||
|
background-position: calc(100% - 6px) center;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
|
|
|
@ -491,9 +491,12 @@ table.grid {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td, th {
|
||||||
&.name {
|
&.name {
|
||||||
padding-left: .8em;
|
padding-left: .8em;
|
||||||
|
width: 10em;
|
||||||
|
min-width: 10em;
|
||||||
|
max-width: 10em;
|
||||||
}
|
}
|
||||||
&.password {
|
&.password {
|
||||||
padding-left: .8em;
|
padding-left: .8em;
|
||||||
|
@ -504,8 +507,12 @@ td {
|
||||||
&.displayName > img {
|
&.displayName > img {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
&.password, &.displayName {
|
&.password,
|
||||||
|
&.displayName,
|
||||||
|
&.mailAddress {
|
||||||
width: 12em;
|
width: 12em;
|
||||||
|
min-width: 12em;
|
||||||
|
max-width: 12em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
&.mailAddress {
|
&.mailAddress {
|
||||||
|
@ -524,7 +531,7 @@ span.usersLastLoginTooltip {
|
||||||
/* dropdowns will be relative to this element */
|
/* dropdowns will be relative to this element */
|
||||||
#userlist {
|
#userlist {
|
||||||
position: relative;
|
position: relative;
|
||||||
.mailAddress, .storageLocation, .userBackend, .lastLogin {
|
.storageLocation, .userBackend, .lastLogin {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
th.name {
|
th.name {
|
||||||
|
@ -545,17 +552,7 @@ span.usersLastLoginTooltip {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* because of accessibility the name cell is <th> - therefore we enforce the black color */
|
|
||||||
/* use same height as in files app */
|
|
||||||
#newuser {
|
#newuser {
|
||||||
/* positioning fixes */
|
|
||||||
margin: 2px 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.groups {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
.groupsListContainer.hidden {
|
.groupsListContainer.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -564,18 +561,8 @@ span.usersLastLoginTooltip {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
}
|
}
|
||||||
input:not([type='submit']) {
|
#newuserHeader input:not([type="submit"]) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 2px 0;
|
|
||||||
}
|
|
||||||
input[type='submit'] {
|
|
||||||
flex-grow: 2;
|
|
||||||
}
|
|
||||||
> div {
|
|
||||||
display: inline-flex;
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,7 +32,13 @@ var UserList = {
|
||||||
// initially the list might already contain user entries (not fully ajaxified yet)
|
// initially the list might already contain user entries (not fully ajaxified yet)
|
||||||
// initialize these entries
|
// initialize these entries
|
||||||
this.$el.find('.quota-user').singleSelect().on('change', this.onQuotaSelect);
|
this.$el.find('.quota-user').singleSelect().on('change', this.onQuotaSelect);
|
||||||
OC.registerMenu($('.app-navigation-new > button'), $('#newuser'))
|
OC.registerMenu(
|
||||||
|
$('#new-user-button'),
|
||||||
|
$('#newuserHeader'),
|
||||||
|
function() {
|
||||||
|
$('#newusername').focus();
|
||||||
|
}
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1136,24 +1142,6 @@ $(document).ready(function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if ($('#CheckboxEmailAddress').is(':checked')) {
|
|
||||||
$("#userlist .mailAddress").show();
|
|
||||||
}
|
|
||||||
// Option to display/hide the "Mail Address" column
|
|
||||||
$('#CheckboxEmailAddress').click(function () {
|
|
||||||
if ($('#CheckboxEmailAddress').is(':checked')) {
|
|
||||||
$("#userlist .mailAddress").show();
|
|
||||||
if (OC.isUserAdmin()) {
|
|
||||||
OCP.AppConfig.setValue('core', 'umgmt_show_email', 'true');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
$("#userlist .mailAddress").hide();
|
|
||||||
if (OC.isUserAdmin()) {
|
|
||||||
OCP.AppConfig.setValue('core', 'umgmt_show_email', 'false');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if ($('#CheckboxUserBackend').is(':checked')) {
|
if ($('#CheckboxUserBackend').is(':checked')) {
|
||||||
$("#userlist .userBackend").show();
|
$("#userlist .userBackend").show();
|
||||||
}
|
}
|
||||||
|
@ -1172,24 +1160,6 @@ $(document).ready(function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if ($('#CheckboxMailOnUserCreate').is(':checked')) {
|
|
||||||
$("#newemail").show();
|
|
||||||
}
|
|
||||||
// Option to display/hide the "E-Mail" input field
|
|
||||||
$('#CheckboxMailOnUserCreate').click(function () {
|
|
||||||
if ($('#CheckboxMailOnUserCreate').is(':checked')) {
|
|
||||||
$("#newemail").show();
|
|
||||||
if (OC.isUserAdmin()) {
|
|
||||||
OCP.AppConfig.setValue('core', 'umgmt_send_email', 'true');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
$("#newemail").hide();
|
|
||||||
if (OC.isUserAdmin()) {
|
|
||||||
OCP.AppConfig.setValue('core', 'umgmt_send_email', 'false');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// calculate initial limit of users to load
|
// calculate initial limit of users to load
|
||||||
var initialUserCountLimit = UserList.initialUsersToLoad,
|
var initialUserCountLimit = UserList.initialUsersToLoad,
|
||||||
containerHeight = $('#app-content').height();
|
containerHeight = $('#app-content').height();
|
||||||
|
|
|
@ -67,20 +67,6 @@ translation('settings');
|
||||||
<?php p($l->t('Show last login')) ?>
|
<?php p($l->t('Show last login')) ?>
|
||||||
</label>
|
</label>
|
||||||
</p>
|
</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">
|
<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.')) ?>
|
<?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>
|
</p>
|
||||||
|
|
|
@ -1,37 +1,3 @@
|
||||||
<div class="app-navigation-new">
|
<div class="app-navigation-new">
|
||||||
<button type="button" class="icon-add"><?php p($l->t('New user'))?></button>
|
<button type="button" id="new-user-button" class="icon-add"><?php p($l->t('Add 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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
<form class="newUserMenu" id="newuser" autocomplete="off">
|
||||||
<table id="userlist" class="grid" data-groups="<?php p($_['allGroups']);?>">
|
<table id="userlist" class="grid" data-groups="<?php p($_['allGroups']);?>">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -9,6 +10,9 @@
|
||||||
<th id="headerGroups" scope="col"><?php p($l->t( 'Groups' )); ?></th>
|
<th id="headerGroups" scope="col"><?php p($l->t( 'Groups' )); ?></th>
|
||||||
<?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
|
<?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
|
||||||
<th id="headerSubAdmins" scope="col"><?php p($l->t('Group admin for')); ?></th>
|
<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; ?>
|
<?php endif; ?>
|
||||||
<th id="headerQuota" scope="col"><?php p($l->t('Quota')); ?></th>
|
<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="storageLocation" scope="col"><?php p($l->t('Storage location')); ?></th>
|
||||||
|
@ -16,19 +20,67 @@
|
||||||
<th class="lastLogin" scope="col"><?php p($l->t('Last login')); ?></th>
|
<th class="lastLogin" scope="col"><?php p($l->t('Last login')); ?></th>
|
||||||
<th class="userActions"></th>
|
<th class="userActions"></th>
|
||||||
</tr>
|
</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>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<!-- the following <tr> is used as a template for the JS part -->
|
<!-- the following <tr> is used as a template for the JS part -->
|
||||||
<tr style="display:none">
|
<tr style="display:none">
|
||||||
<td class="avatar"><div class="avatardiv"></div></td>
|
<td class="avatar"><div class="avatardiv"></div></td>
|
||||||
<th class="name" scope="row"></th>
|
<td class="name" scope="row"></td>
|
||||||
<td class="displayName"><span></span> <img class="action"
|
<td class="displayName"><span></span> <img class="action"
|
||||||
src="<?php p(image_path('core', 'actions/rename.svg'))?>"
|
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"))?>"/>
|
alt="<?php p($l->t('change full name'))?>" title="<?php p($l->t('change full name'))?>"/>
|
||||||
</td>
|
</td>
|
||||||
<td class="password"><span>●●●●●●●</span> <img class="action"
|
<td class="password"><span>●●●●●●●</span> <img class="action"
|
||||||
src="<?php print_unescaped(image_path('core', 'actions/rename.svg'))?>"
|
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"))?>"/>
|
alt="<?php p($l->t('set new password'))?>" title="<?php p($l->t('set new password'))?>"/>
|
||||||
</td>
|
</td>
|
||||||
<td class="mailAddress"><span></span><div class="loading-small hidden"></div> <img class="action"
|
<td class="mailAddress"><span></span><div class="loading-small hidden"></div> <img class="action"
|
||||||
src="<?php p(image_path('core', 'actions/rename.svg'))?>"
|
src="<?php p(image_path('core', 'actions/rename.svg'))?>"
|
||||||
|
@ -41,6 +93,9 @@
|
||||||
<td class="subadmins"><div class="groupsListContainer multiselect button"
|
<td class="subadmins"><div class="groupsListContainer multiselect button"
|
||||||
><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
|
><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
|
||||||
</td>
|
</td>
|
||||||
|
<?php endif;?>
|
||||||
|
<?php if((bool)$_['recoveryAdminEnabled']): ?>
|
||||||
|
<td></td>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<td class="quota">
|
<td class="quota">
|
||||||
<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">
|
<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">
|
||||||
|
@ -85,6 +140,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</form>
|
||||||
|
|
||||||
<div class="emptycontent" style="display:none">
|
<div class="emptycontent" style="display:none">
|
||||||
<div class="icon-search"></div>
|
<div class="icon-search"></div>
|
||||||
|
|
Loading…
Reference in New Issue