🚸 (admin): rework user pages

This commit is contained in:
Kazhnuz 2025-01-18 16:11:19 +01:00
parent 6a39877747
commit 466afdbbf4
3 changed files with 129 additions and 106 deletions

View file

@ -2,24 +2,26 @@
<?php echo Bootstrap::formOpen(array('id' => 'jsform', 'class' => 'tab-content')); ?> <?php echo Bootstrap::formOpen(array('id' => 'jsform', 'class' => 'tab-content')); ?>
<div class="align-middle"> <div class="d-flex justify-content-between mb-2">
<div class="float-right mt-1">
<button type="submit" class="btn btn-primary btn-sm" name="save"><?php $L->p('Save') ?></button>
<a class="btn btn-secondary btn-sm" href="<?php echo HTML_PATH_ADMIN_ROOT . 'users' ?>" role="button"><?php $L->p('Cancel') ?></a>
</div>
<?php echo Bootstrap::pageTitle(array('title' => $L->g('Edit user'), 'icon' => 'user')); ?> <?php echo Bootstrap::pageTitle(array('title' => $L->g('Edit user'), 'icon' => 'user')); ?>
<div>
<button type="submit" class="btn btn-primary" name="save"><?php $L->p('Save') ?></button>
<a class="btn btn-secondary" href="<?php echo HTML_PATH_ADMIN_ROOT . 'users' ?>" role="button"><?php $L->p('Cancel') ?></a>
</div>
</div> </div>
<div class="d-flex align-items-start">
<div>
<!-- TABS --> <!-- TABS -->
<nav class="mb-3"> <nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist"> <div class="nav flex-column nav-pills me-3" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="nav-profile" aria-selected="false"><?php $L->p('Profile') ?></a> <a class="nav-item nav-link active" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="nav-profile" aria-selected="false"><?php $L->p('Profile') ?></a>
<a class="nav-item nav-link" id="nav-picture-tab" data-toggle="tab" href="#picture" role="tab" aria-controls="nav-picture" aria-selected="false"><?php $L->p('Profile picture') ?></a> <a class="nav-item nav-link" id="nav-picture-tab" data-bs-toggle="tab" data-bs-target="#picture" role="tab" aria-controls="nav-picture" aria-selected="false"><?php $L->p('Profile picture') ?></a>
<a class="nav-item nav-link" id="nav-security-tab" data-toggle="tab" href="#security" role="tab" aria-controls="nav-security" aria-selected="false"><?php $L->p('Security') ?></a> <a class="nav-item nav-link" id="nav-security-tab" data-bs-toggle="tab" data-bs-target="#security" role="tab" aria-controls="nav-security" aria-selected="false"><?php $L->p('Security') ?></a>
<a class="nav-item nav-link" id="nav-social-tab" data-toggle="tab" href="#social" role="tab" aria-controls="nav-social" aria-selected="false"><?php $L->p('Social Networks') ?></a> <a class="nav-item nav-link" id="nav-social-tab" data-bs-toggle="tab" data-bs-target="#social" role="tab" aria-controls="nav-social" aria-selected="false"><?php $L->p('Social Networks') ?></a>
</div> </div>
</nav> </nav>
</div>
<?php <?php
// Token CSRF // Token CSRF
echo Bootstrap::formInputHidden(array( echo Bootstrap::formInputHidden(array(
@ -34,12 +36,12 @@ echo Bootstrap::formInputHidden(array(
)); ));
?> ?>
<div class="tab-content" id="nav-tabContent"> <div class="tab-content w-100" id="nav-tabContent">
<!-- Profile tab --> <!-- Profile tab -->
<div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<?php <?php
echo Bootstrap::formTitle(array('title' => $L->g('Base Infos'))); echo Bootstrap::cardBegin($L->g('Base Infos'));
// Display username but disable the field // Display username but disable the field
echo Bootstrap::formInputText(array( echo Bootstrap::formInputText(array(
@ -72,7 +74,8 @@ echo Bootstrap::formInputHidden(array(
'tip' => '' 'tip' => ''
)); ));
echo Bootstrap::formTitle(array('title' => $L->g('Name'))); echo Bootstrap::cardEnd();
echo Bootstrap::cardBegin($L->g('Name'));
echo Bootstrap::formInputText(array( echo Bootstrap::formInputText(array(
'name' => 'nickname', 'name' => 'nickname',
@ -109,8 +112,8 @@ echo Bootstrap::formInputHidden(array(
'class' => '', 'class' => '',
'tip' => $L->g('if-not-present-fallback-on-username') 'tip' => $L->g('if-not-present-fallback-on-username')
)); ));
echo Bootstrap::cardEnd();
echo Bootstrap::formTitle(array('title' => $L->g('More Infos'))); echo Bootstrap::cardBegin($L->g('More Infos'));
echo Bootstrap::formInputText(array( echo Bootstrap::formInputText(array(
'name' => 'pronouns', 'name' => 'pronouns',
@ -138,16 +141,19 @@ echo Bootstrap::formInputHidden(array(
'placeholder' => '', 'placeholder' => '',
'tip' => '' 'tip' => ''
)); ));
echo Bootstrap::cardEnd();
?> ?>
</div> </div>
<!-- Profile picture tab --> <!-- Profile picture tab -->
<div class="tab-pane fade" id="picture" role="tabpanel" aria-labelledby="nav-picture-tab"> <div class="tab-pane fade" id="picture" role="tabpanel" aria-labelledby="nav-picture-tab">
<div class="container"> <div class="card">
<h6 class="card-header"><?php echo $L->g('Profile picture'); ?></h6>
<div class="container card-body">
<div class="row"> <div class="row">
<div class="col-lg-4 col-sm-12 p-0 pr-2"> <div class="col-lg-4 col-sm-12 p-0 pr-2">
<div class="custom-file"> <div class="custom-file">
<input type="file" class="custom-file-input" id="jsprofilePictureInputFile" name="profilePictureInputFile"> <input type="file" class="form-control custom-file-input" id="jsprofilePictureInputFile" name="profilePictureInputFile">
<label class="custom-file-label" for="jsprofilePictureInputFile"><?php $L->p('Upload image'); ?></label> <label class="custom-file-label" for="jsprofilePictureInputFile"><?php $L->p('Upload image'); ?></label>
</div> </div>
<!-- <button id="jsbuttonRemovePicture" type="button" class="btn btn-primary w-100 mt-4 mb-4"><i class="fa fa-trash"></i> Remove picture</button> --> <!-- <button id="jsbuttonRemovePicture" type="button" class="btn btn-primary w-100 mt-4 mb-4"><i class="fa fa-trash"></i> Remove picture</button> -->
@ -157,6 +163,7 @@ echo Bootstrap::formInputHidden(array(
</div> </div>
</div> </div>
</div> </div>
</div>
<script> <script>
// $("#jsbuttonRemovePicture").on("click", function() { // $("#jsbuttonRemovePicture").on("click", function() {
// var username = $("#jsusername").val(); // var username = $("#jsusername").val();
@ -190,7 +197,7 @@ echo Bootstrap::formInputHidden(array(
<!-- Security tab --> <!-- Security tab -->
<div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="nav-security-tab"> <div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="nav-security-tab">
<?php <?php
echo Bootstrap::formTitle(array('title' => $L->g('Password'))); echo Bootstrap::cardBegin($L->g('Password'));
echo ' echo '
<div class="form-group"> <div class="form-group">
@ -208,8 +215,9 @@ echo Bootstrap::formInputHidden(array(
'tip' => $L->g('this-token-is-similar-to-a-password-it-should-not-be-shared') 'tip' => $L->g('this-token-is-similar-to-a-password-it-should-not-be-shared')
)); ));
echo Bootstrap::cardEnd();
if (checkRole(array('admin'), false)) { if (checkRole(array('admin'), false)) {
echo Bootstrap::formTitle(array('title' => $L->g('Status'))); echo Bootstrap::cardBegin($L->g('Status'));
echo Bootstrap::formInputText(array( echo Bootstrap::formInputText(array(
'name' => 'status', 'name' => 'status',
@ -225,13 +233,14 @@ echo Bootstrap::formInputHidden(array(
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-2"></div> <div class="col-sm-2"></div>
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-warning mr-2" id="jsdisableUser" name="disableUser">' . $L->g('Disable user') . '</button> <button type="submit" class="btn btn-warning me-2" id="jsdisableUser" name="disableUser">' . $L->g('Disable user') . '</button>
<button type="submit" class="btn btn-danger mr-2" id="jsdeleteUserAndKeepContent" name="deleteUserAndKeepContent">' . $L->g('Delete user and keep content') . '</button> <button type="submit" class="btn btn-danger me-2" id="jsdeleteUserAndKeepContent" name="deleteUserAndKeepContent">' . $L->g('Delete user and keep content') . '</button>
<button type="submit" class="btn btn-danger mr-2" id="jsdeleteUserAndDeleteContent" name="deleteUserAndDeleteContent">' . $L->g('Delete user and delete content') . '</button> <button type="submit" class="btn btn-danger me-2" id="jsdeleteUserAndDeleteContent" name="deleteUserAndDeleteContent">' . $L->g('Delete user and delete content') . '</button>
</div> </div>
</div> </div>
'; ';
} }
echo Bootstrap::cardEnd();
} }
?> ?>
</div> </div>
@ -239,6 +248,7 @@ echo Bootstrap::formInputHidden(array(
<!-- Social Networks tab --> <!-- Social Networks tab -->
<div class="tab-pane fade" id="social" role="tabpanel" aria-labelledby="nav-social-tab"> <div class="tab-pane fade" id="social" role="tabpanel" aria-labelledby="nav-social-tab">
<?php <?php
echo Bootstrap::cardBegin($L->g('Social Networks'));
echo Bootstrap::formInputText(array( echo Bootstrap::formInputText(array(
'name' => 'twitter', 'name' => 'twitter',
'label' => 'Twitter', 'label' => 'Twitter',
@ -337,6 +347,7 @@ echo Bootstrap::formInputHidden(array(
'placeholder' => '', 'placeholder' => '',
'tip' => '' 'tip' => ''
)); ));
echo Bootstrap::cardEnd();
?> ?>
</div> </div>
</div> </div>
@ -357,3 +368,4 @@ echo Bootstrap::formInputHidden(array(
} }
}); });
</script> </script>
</div>

View file

@ -2,14 +2,16 @@
<?php echo Bootstrap::formOpen(array('id'=>'jsform', 'class'=>'tab-content')); ?> <?php echo Bootstrap::formOpen(array('id'=>'jsform', 'class'=>'tab-content')); ?>
<div class="align-middle"> <div class="d-flex justify-content-between mb-2">
<div class="float-right mt-1">
<button type="submit" class="btn btn-primary btn-sm" name="save"><?php $L->p('Save') ?></button>
<a class="btn btn-secondary btn-sm" href="<?php echo HTML_PATH_ADMIN_ROOT.'users' ?>" role="button"><?php $L->p('Cancel') ?></a>
</div>
<?php echo Bootstrap::pageTitle(array('title'=>$L->g('Add a new user'), 'icon'=>'user')); ?> <?php echo Bootstrap::pageTitle(array('title'=>$L->g('Add a new user'), 'icon'=>'user')); ?>
<div>
<button type="submit" class="btn btn-primary" name="save"><?php $L->p('Save') ?></button>
<a class="btn btn-secondary" href="<?php echo HTML_PATH_ADMIN_ROOT.'users' ?>" role="button"><?php $L->p('Cancel') ?></a>
</div>
</div> </div>
<div class="card">
<div class="card-body">
<?php <?php
echo Bootstrap::formInputHidden(array( echo Bootstrap::formInputHidden(array(
'name'=>'tokenCSRF', 'name'=>'tokenCSRF',
@ -65,3 +67,5 @@
?> ?>
<?php echo Bootstrap::formClose(); ?> <?php echo Bootstrap::formClose(); ?>
</div>
</div>

View file

@ -2,20 +2,26 @@
<?php <?php
echo "<div class='d-flex justify-content-between align-content-center'>";
echo Bootstrap::pageTitle(array('title'=>$L->g('Users'), 'icon'=>'users')); echo Bootstrap::pageTitle(array('title'=>$L->g('Users'), 'icon'=>'users'));
echo "<div>";
echo Bootstrap::link(array( echo Bootstrap::link(array(
'title'=>$L->g('add-a-new-user'), 'title'=>$L->g('add-a-new-user'),
'href'=>HTML_PATH_ADMIN_ROOT.'new-user', 'href'=>HTML_PATH_ADMIN_ROOT.'new-user',
'icon'=>'plus' 'icon'=>'plus',
'class'=>'btn btn-outline-success'
)); ));
echo ' echo '
<table class="table table-striped mt-3"> </div></div>
<div class="card">
<table class="table m-0">
<thead> <thead>
<tr> <tr class="card-header">
<th class="border-bottom-0" scope="col">'.$L->g('Username').'</th> <th class="border-bottom-0" scope="col">'.$L->g('User').'</th>
<th class="border-bottom-0 d-none d-lg-table-cell" scope="col">'.$L->g('Nickname').'</th> <th class="border-bottom-0 d-none d-lg-table-cell" scope="col">'.$L->g('Username').'</th>
<th class="border-bottom-0" scope="col">'.$L->g('Email').'</th> <th class="border-bottom-0" scope="col">'.$L->g('Email').'</th>
<th class="border-bottom-0" scope="col">'.$L->g('Status').'</th> <th class="border-bottom-0" scope="col">'.$L->g('Status').'</th>
<th class="border-bottom-0" scope="col">'.$L->g('Role').'</th> <th class="border-bottom-0" scope="col">'.$L->g('Role').'</th>
@ -29,9 +35,9 @@ $list = $users->keys();
foreach ($list as $username) { foreach ($list as $username) {
try { try {
$user = new User($username); $user = new User($username);
echo '<tr>'; echo '<tr class="card-tablebody">';
echo '<td><img class="profilePicture mr-1" alt="" src="'.(Sanitize::pathFile(PATH_UPLOADS_PROFILES.$user->username().'.png')?DOMAIN_UPLOADS_PROFILES.$user->username().'.png':HTML_PATH_CORE_IMG.'default.svg').'" /><a href="'.HTML_PATH_ADMIN_ROOT.'edit-user/'.$username.'">'.$username.'</a></td>'; echo '<td><img class="profilePicture me-1" alt="" src="'.(Sanitize::pathFile(PATH_UPLOADS_PROFILES.$user->username().'.png')?DOMAIN_UPLOADS_PROFILES.$user->username().'.png':HTML_PATH_CORE_IMG.'default.svg').'" /><a href="'.HTML_PATH_ADMIN_ROOT.'edit-user/'.$username.'">'.$user->displayName().'</a></td>';
echo '<td class="d-none d-lg-table-cell">'.$user->nickname().'</td>'; echo '<td class="d-none d-lg-table-cell">'.$user->username().'</td>';
echo '<td>'.$user->email().'</td>'; echo '<td>'.$user->email().'</td>';
echo '<td>'.($user->enabled()?'<b>'.$L->g('Enabled').'</b>':$L->g('Disabled')).'</td>'; echo '<td>'.($user->enabled()?'<b>'.$L->g('Enabled').'</b>':$L->g('Disabled')).'</td>';
if ($user->role()=='admin') { if ($user->role()=='admin') {
@ -53,4 +59,5 @@ foreach ($list as $username) {
echo ' echo '
</tbody> </tbody>
</table> </table>
</div>
'; ';