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:
John Molakvoæ (skjnldsv)
Roeland Jago Douma
parent
2f1aa25130
commit
7f6b27aef7
|
|
@ -149,6 +149,11 @@ input[type='reset'] {
|
|||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
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 */
|
||||
|
|
|
|||
|
|
@ -491,9 +491,12 @@ table.grid {
|
|||
}
|
||||
}
|
||||
|
||||
td {
|
||||
td, th {
|
||||
&.name {
|
||||
padding-left: .8em;
|
||||
width: 10em;
|
||||
min-width: 10em;
|
||||
max-width: 10em;
|
||||
}
|
||||
&.password {
|
||||
padding-left: .8em;
|
||||
|
|
@ -504,8 +507,12 @@ td {
|
|||
&.displayName > img {
|
||||
visibility: hidden;
|
||||
}
|
||||
&.password, &.displayName {
|
||||
&.password,
|
||||
&.displayName,
|
||||
&.mailAddress {
|
||||
width: 12em;
|
||||
min-width: 12em;
|
||||
max-width: 12em;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.mailAddress {
|
||||
|
|
@ -524,7 +531,7 @@ span.usersLastLoginTooltip {
|
|||
/* dropdowns will be relative to this element */
|
||||
#userlist {
|
||||
position: relative;
|
||||
.mailAddress, .storageLocation, .userBackend, .lastLogin {
|
||||
.storageLocation, .userBackend, .lastLogin {
|
||||
display: none;
|
||||
}
|
||||
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 {
|
||||
/* positioning fixes */
|
||||
margin: 2px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.groups {
|
||||
display: inline;
|
||||
}
|
||||
.groupsListContainer.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -564,18 +561,8 @@ span.usersLastLoginTooltip {
|
|||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
input:not([type='submit']) {
|
||||
#newuserHeader input:not([type="submit"]) {
|
||||
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)
|
||||
// initialize these entries
|
||||
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')) {
|
||||
$("#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
|
||||
var initialUserCountLimit = UserList.initialUsersToLoad,
|
||||
containerHeight = $('#app-content').height();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);?>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<div class="emptycontent" style="display:none">
|
||||
<div class="icon-search"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue