mirror of
https://github.com/itflow-org/itflow
synced 2026-08-24 00:15:12 +00:00
Update UI/UX for Adding and editing roles, Permissions can be set upon role add nice blocker style radios buttons instead of select boxes
This commit is contained in:
johnnyq
@@ -11,52 +11,203 @@ ob_start();
|
|||||||
<span>×</span>
|
<span>×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form action="post.php" method="post" enctype="multipart/form-data" autocomplete="off">
|
<form action="post.php" method="post" enctype="multipart/form-data" autocomplete="off">
|
||||||
<input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>">
|
<input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
|
||||||
|
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
|
||||||
|
<ul class="nav nav-pills nav-justified mb-3">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" data-toggle="pill" href="#pills-role-details">Details</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" data-toggle="pill" href="#pills-role-permissions">Permissions</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
|
|
||||||
<div class="form-group">
|
<!-- DETAILS TAB -->
|
||||||
<label>Name <strong class="text-danger">*</strong></label>
|
<div class="tab-pane fade show active" id="pills-role-details">
|
||||||
<div class="input-group">
|
|
||||||
<div class="input-group-prepend">
|
<div class="form-group">
|
||||||
<span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
|
<label>Name <strong class="text-danger">*</strong></label>
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control" name="role_name" placeholder="Role Name" maxlength="200" required>
|
||||||
</div>
|
</div>
|
||||||
<input type="text" class="form-control" name="role_name" placeholder="Role Name" maxlength="200" required>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Description <strong class="text-danger">*</strong></label>
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<span class="input-group-text"><i class="fa fa-fw fa-chevron-right"></i></span>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control" name="role_description" placeholder="Role Description" maxlength="200" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Admin Access <strong class="text-danger">*</strong></label>
|
||||||
|
|
||||||
|
<div class="custom-control custom-radio mb-2">
|
||||||
|
<input type="radio" class="custom-control-input" id="admin_no" name="role_is_admin" value="0" checked required>
|
||||||
|
<label class="custom-control-label" for="admin_no">
|
||||||
|
No - use permissions on the next tab
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="custom-control custom-radio">
|
||||||
|
<input type="radio" class="custom-control-input" id="admin_yes" name="role_is_admin" value="1" required>
|
||||||
|
<label class="custom-control-label" for="admin_yes">
|
||||||
|
Yes - this role should have full admin access
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<!-- PERMISSIONS TAB -->
|
||||||
<label>Description <strong class="text-danger">*</strong></label>
|
<div class="tab-pane fade" id="pills-role-permissions">
|
||||||
<div class="input-group">
|
|
||||||
<div class="input-group-prepend">
|
|
||||||
<span class="input-group-text"><i class="fa fa-fw fa-chevron-right"></i></span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="form-control" name="role_description" placeholder="Role Description" maxlength="200" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
<?php
|
||||||
<label>Admin Access <strong class="text-danger">*</strong></label>
|
// Enumerate modules
|
||||||
<div class="input-group">
|
$sql_modules = mysqli_query($mysqli, "SELECT * FROM modules");
|
||||||
<div class="input-group-prepend">
|
while ($row_modules = mysqli_fetch_assoc($sql_modules)) {
|
||||||
<span class="input-group-text"><i class="fa fa-fw fa-tools"></i></span>
|
|
||||||
|
$module_id = intval($row_modules['module_id']);
|
||||||
|
|
||||||
|
// raw for name, escaped for display
|
||||||
|
$module_name_raw = $row_modules['module_name'];
|
||||||
|
$module_name_display = ucfirst(str_replace("module_", "", $module_name_raw));
|
||||||
|
|
||||||
|
$module_name_display_safe = nullable_htmlentities($module_name_display);
|
||||||
|
$module_description = nullable_htmlentities($row_modules['module_description']);
|
||||||
|
|
||||||
|
// default for new role
|
||||||
|
$module_permission = 0;
|
||||||
|
|
||||||
|
$field_name = $module_id . "##" . $module_name_raw;
|
||||||
|
$group_id = "perm_group_$module_id";
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label><?= $module_name_display_safe ?> <strong class="text-danger">*</strong></label>
|
||||||
|
|
||||||
|
<div class="btn-group btn-group-toggle btn-block" data-toggle="buttons" role="group"
|
||||||
|
aria-label="Permissions for <?= $module_name_display_safe ?>">
|
||||||
|
|
||||||
|
<label class="btn btn-outline-secondary btn-sm active" title="No Access">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="<?= $field_name ?>"
|
||||||
|
id="<?= $group_id ?>_0"
|
||||||
|
value="0"
|
||||||
|
autocomplete="off"
|
||||||
|
checked
|
||||||
|
required
|
||||||
|
>
|
||||||
|
None
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="btn btn-outline-primary btn-sm" title="Viewing Only">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="<?= $field_name ?>"
|
||||||
|
id="<?= $group_id ?>_1"
|
||||||
|
value="1"
|
||||||
|
autocomplete="off"
|
||||||
|
>
|
||||||
|
<i class="fas fa-fw fa-eye mr-1"></i>Read
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="btn btn-outline-warning btn-sm" title="Read, Edit, Archive">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="<?= $field_name ?>"
|
||||||
|
id="<?= $group_id ?>_2"
|
||||||
|
value="2"
|
||||||
|
autocomplete="off"
|
||||||
|
>
|
||||||
|
<i class="fas fa-fw fa-edit mr-1"></i>Modify
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="btn btn-outline-danger btn-sm" title="Read, Edit, Archive, Delete">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="<?= $field_name ?>"
|
||||||
|
id="<?= $group_id ?>_3"
|
||||||
|
value="3"
|
||||||
|
autocomplete="off"
|
||||||
|
>
|
||||||
|
<i class="fas fa-fw fa-trash mr-1"></i>Full
|
||||||
|
</label>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<small class="form-text text-muted mt-2"><?= $module_description ?></small>
|
||||||
</div>
|
</div>
|
||||||
<select class="form-control select2" name="role_is_admin" required>
|
|
||||||
<option value="0">No - edit after creation to set permissions</option>
|
<?php } // end while ?>
|
||||||
<option value="1">Yes - this role should have full admin access</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="submit" name="add_role" class="btn btn-primary text-bold"><i class="fas fa-check mr-2"></i>Save</button>
|
<button type="submit" name="add_role" class="btn btn-primary text-bold">
|
||||||
<button type="button" class="btn btn-light" data-dismiss="modal"><i class="fas fa-times mr-2"></i>Cancel</button>
|
<i class="fas fa-check mr-2"></i>Create
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-light" data-dismiss="modal">
|
||||||
|
<i class="fas fa-times mr-2"></i>Cancel
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Optional: when Admin Yes is selected, disable permission radios + switch to Details tab
|
||||||
|
(function () {
|
||||||
|
function setPermissionsEnabled(enabled) {
|
||||||
|
const permsTab = document.getElementById('pills-role-permissions');
|
||||||
|
if (!permsTab) return;
|
||||||
|
|
||||||
|
permsTab.querySelectorAll('input[type="radio"]').forEach(function (el) {
|
||||||
|
el.disabled = !enabled;
|
||||||
|
});
|
||||||
|
|
||||||
|
// also visually dim the tab content
|
||||||
|
permsTab.style.opacity = enabled ? '1' : '0.5';
|
||||||
|
}
|
||||||
|
|
||||||
|
const adminYes = document.getElementById('admin_yes');
|
||||||
|
const adminNo = document.getElementById('admin_no');
|
||||||
|
|
||||||
|
function refresh() {
|
||||||
|
const isAdmin = adminYes && adminYes.checked;
|
||||||
|
setPermissionsEnabled(!isAdmin);
|
||||||
|
|
||||||
|
if (isAdmin) {
|
||||||
|
// move user back to Details tab (avoids confusion)
|
||||||
|
const detailsTab = document.querySelector('a[href="#pills-role-details"]');
|
||||||
|
if (detailsTab) detailsTab.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (adminYes && adminNo) {
|
||||||
|
adminYes.addEventListener('change', refresh);
|
||||||
|
adminNo.addEventListener('change', refresh);
|
||||||
|
refresh();
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
require_once '../../../includes/modal_footer.php';
|
require_once '../../../includes/modal_footer.php';
|
||||||
|
|||||||
@@ -31,36 +31,36 @@ if (empty($user_names_string)) {
|
|||||||
$user_names_string = "-";
|
$user_names_string = "-";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Generate the HTML form content using output buffering.
|
|
||||||
ob_start();
|
ob_start();
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<div class="modal-header bg-dark">
|
<div class="modal-header bg-dark">
|
||||||
<h5 class="modal-title"><i class="fas fa-fw fa-user-shield mr-2"></i>Editing role:
|
<h5 class="modal-title"><i class="fas fa-fw fa-user-shield mr-2"></i>Editing role:
|
||||||
<strong><?php echo $role_name; ?></strong></h5>
|
<strong><?= $role_name ?></strong></h5>
|
||||||
<button type="button" class="close text-white" data-dismiss="modal">
|
<button type="button" class="close text-white" data-dismiss="modal">
|
||||||
<span>×</span>
|
<span>×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<form action="post.php" method="post" enctype="multipart/form-data" autocomplete="off">
|
<form action="post.php" method="post" enctype="multipart/form-data" autocomplete="off">
|
||||||
<input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>">
|
<input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
|
||||||
<input type="hidden" name="role_id" value="<?php echo $role_id; ?>">
|
<input type="hidden" name="role_id" value="<?= $role_id ?>">
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
|
||||||
<ul class="nav nav-pills nav-justified mb-3">
|
<ul class="nav nav-pills nav-justified mb-3">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link active" data-toggle="pill" href="#pills-role-details<?php echo $role_id; ?>">Details</a>
|
<a class="nav-link active" data-toggle="pill" href="#pills-role-details">Details</a>
|
||||||
</li>
|
</li>
|
||||||
|
<?php if (!$role_admin) { ?>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" data-toggle="pill" href="#pills-role-access<?php echo $role_id; ?>">Access</a>
|
<a class="nav-link" data-toggle="pill" href="#pills-role-permissions">Permissions</a>
|
||||||
</li>
|
</li>
|
||||||
|
<?php } ?>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
|
|
||||||
<div class="tab-pane fade show active" id="pills-role-details<?php echo $role_id; ?>">
|
<div class="tab-pane fade show active" id="pills-role-details">
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Name <strong class="text-danger">*</strong></label>
|
<label>Name <strong class="text-danger">*</strong></label>
|
||||||
@@ -68,7 +68,7 @@ ob_start();
|
|||||||
<div class="input-group-prepend">
|
<div class="input-group-prepend">
|
||||||
<span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
|
<span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
|
||||||
</div>
|
</div>
|
||||||
<input type="text" class="form-control" name="role_name" placeholder="Role Name" maxlength="200" value="<?php echo $role_name; ?>" required>
|
<input type="text" class="form-control" name="role_name" placeholder="Role Name" maxlength="200" value="<?= $role_name ?>" required>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -78,27 +78,33 @@ ob_start();
|
|||||||
<div class="input-group-prepend">
|
<div class="input-group-prepend">
|
||||||
<span class="input-group-text"><i class="fa fa-fw fa-chevron-right"></i></span>
|
<span class="input-group-text"><i class="fa fa-fw fa-chevron-right"></i></span>
|
||||||
</div>
|
</div>
|
||||||
<input type="text" class="form-control" name="role_description" placeholder="Role Description" maxlength="200" value="<?php echo $role_description; ?>" required>
|
<input type="text" class="form-control" name="role_description" placeholder="Role Description" maxlength="200" value="<?= $role_description ?>" required>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Admin Access <strong class="text-danger">*</strong></label>
|
<label>Admin Access <strong class="text-danger">*</strong></label>
|
||||||
<div class="input-group">
|
<div class="custom-control custom-radio mb-2">
|
||||||
<div class="input-group-prepend">
|
<input type="radio" class="custom-control-input" id="admin_yes" name="role_is_admin" value="1"
|
||||||
<span class="input-group-text"><i class="fa fa-fw fa-tools"></i></span>
|
<?php if ($role_admin) { echo 'checked'; } ?> required>
|
||||||
</div>
|
<label class="custom-control-label" for="admin_yes">
|
||||||
<select class="form-control select2" name="role_is_admin" required>
|
Yes - this role should have full admin access
|
||||||
<option value="1" <?php if ($role_admin) { echo 'selected'; } ?> >Yes - this role should have full admin access</option>
|
</label>
|
||||||
<option value="0" <?php if (!$role_admin) { echo 'selected'; } ?>>No - use permissions on the next tab</option>
|
</div>
|
||||||
</select>
|
|
||||||
|
<div class="custom-control custom-radio">
|
||||||
|
<input type="radio" class="custom-control-input" id="admin_no" name="role_is_admin" value="0"
|
||||||
|
<?php if (!$role_admin) { echo 'checked'; } ?> required>
|
||||||
|
<label class="custom-control-label" for="admin_no">
|
||||||
|
No - use permissions on the next tab
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<?php if (!$role_admin) { ?>
|
||||||
<div class="tab-pane fade" id="pills-role-access<?php echo $role_id; ?>">
|
<div class="tab-pane fade" id="pills-role-permissions">
|
||||||
|
|
||||||
<?php if ($role_admin) { ?>
|
<?php if ($role_admin) { ?>
|
||||||
<div class="alert alert-warning"><strong>Module permissions do not apply to Admins.</strong></div>
|
<div class="alert alert-warning"><strong>Module permissions do not apply to Admins.</strong></div>
|
||||||
@@ -123,22 +129,73 @@ ob_start();
|
|||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label> <?php echo $module_name_display ?> <strong class="text-danger">*</strong></label>
|
<label> <?= $module_name_display ?> <strong class="text-danger">*</strong></label>
|
||||||
<div class="input-group">
|
<?php
|
||||||
<select class="form-control select2" name="<?php echo "$module_id##$module_name" ?>" required>
|
$field_name = "$module_id##$module_name";
|
||||||
<option value="0" <?php if ($module_permission == 0) { echo 'selected'; } ?> >None</option>
|
$group_id = "perm_group_$module_id";
|
||||||
<option value="1" <?php if ($module_permission == 1) { echo 'selected'; } ?> >Read</option>
|
?>
|
||||||
<option value="2" <?php if ($module_permission == 2) { echo 'selected'; } ?>>Modify (Read, Edit, Archive)</option>
|
|
||||||
<option value="3" <?php if ($module_permission == 3) { echo 'selected'; } ?>>Full (Read, Edit, Archive, Delete)</option>
|
<div class="btn-group btn-group-toggle btn-block" data-toggle="buttons" role="group" aria-label="Permissions for <?= $module_name_display ?>">
|
||||||
</select>
|
|
||||||
|
<label class="btn btn-outline-secondary btn-sm <?php if ($module_permission == 0) { echo 'active'; } ?>" title="No Access">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="<?= $field_name ?>"
|
||||||
|
id="<?= $group_id ?>_0"
|
||||||
|
value="0"
|
||||||
|
autocomplete="off"
|
||||||
|
<?php if ($module_permission == 0) { echo 'checked'; } ?>
|
||||||
|
required
|
||||||
|
>
|
||||||
|
None
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="btn btn-outline-primary btn-sm <?php if ($module_permission == 1) { echo 'active'; } ?>" title="Viewing Only">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="<?= $field_name ?>"
|
||||||
|
id="<?= $group_id ?>_1"
|
||||||
|
value="1"
|
||||||
|
autocomplete="off"
|
||||||
|
<?php if ($module_permission == 1) { echo 'checked'; } ?>
|
||||||
|
>
|
||||||
|
<i class="fas fa-fw fa-eye mr-1"></i>Read
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="btn btn-outline-warning btn-sm <?php if ($module_permission == 2) { echo 'active'; } ?>" title="Read, Edit, Archive">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="<?= $field_name ?>"
|
||||||
|
id="<?= $group_id ?>_2"
|
||||||
|
value="2"
|
||||||
|
autocomplete="off"
|
||||||
|
<?php if ($module_permission == 2) { echo 'checked'; } ?>
|
||||||
|
>
|
||||||
|
<i class="fas fa-fw fa-edit mr-1"></i>Modify
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="btn btn-outline-danger btn-sm <?php if ($module_permission == 3) { echo 'active'; } ?>" title="Read, Edit, Archive, Delete">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="<?= $field_name ?>"
|
||||||
|
id="<?= $group_id ?>_3"
|
||||||
|
value="3"
|
||||||
|
autocomplete="off"
|
||||||
|
<?php if ($module_permission == 3) { echo 'checked'; } ?>
|
||||||
|
>
|
||||||
|
<i class="fas fa-fw fa-trash mr-1"></i>Full
|
||||||
|
</label>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<small class="form-text text-muted"><?php echo $module_description ?></small>
|
|
||||||
|
<small class="form-text text-muted mt-2"><?= $module_description ?></small>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php } // End while ?>
|
<?php } // End while ?>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -18,9 +18,23 @@ if (isset($_POST['add_role'])) {
|
|||||||
|
|
||||||
$role_id = mysqli_insert_id($mysqli);
|
$role_id = mysqli_insert_id($mysqli);
|
||||||
|
|
||||||
|
// Insert role permissions (only if not admin)
|
||||||
|
if ($admin == 0) {
|
||||||
|
foreach ($_POST as $key => $value) {
|
||||||
|
if (str_contains($key, '##module_')) {
|
||||||
|
$module_id = intval(explode('##', $key)[0]);
|
||||||
|
$access_level = intval($value);
|
||||||
|
|
||||||
|
if ($access_level > 0) {
|
||||||
|
mysqli_query($mysqli, "INSERT INTO user_role_permissions SET user_role_id = $role_id, module_id = $module_id, user_role_permission_level = $access_level");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
logAction("User Role", "Create", "$session_name created user role $name", 0, $role_id);
|
logAction("User Role", "Create", "$session_name created user role $name", 0, $role_id);
|
||||||
|
|
||||||
flash_alert("User Role <strong$name</strong> created");
|
flash_alert("User Role <strong>$name</strong> created");
|
||||||
|
|
||||||
redirect();
|
redirect();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user