updated roles ant permissions
This commit is contained in:
@@ -1,43 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Edit Access Roles{% endblock %}
|
||||
{% block content %}
|
||||
<div class="card" style="max-width: 700px; margin: 32px auto;">
|
||||
<h3>Role Access Management</h3>
|
||||
<p>Configure which roles can view or execute functions on each app page and feature.</p>
|
||||
<table class="scan-table" style="width:100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Role</th>
|
||||
<th>Access Level</th>
|
||||
<th>Editable</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>superadmin</td>
|
||||
<td>Full access to all pages and functions</td>
|
||||
<td><span style="color:#888;">Not editable</span></td>
|
||||
</tr>
|
||||
{% for role in roles %}
|
||||
{% if role != 'superadmin' %}
|
||||
<tr>
|
||||
<td>{{ role }}</td>
|
||||
<td>
|
||||
<form method="POST" action="{{ url_for('main.update_role_access', role=role) }}">
|
||||
<select name="access_level">
|
||||
<option value="view">View Only</option>
|
||||
<option value="execute">View & Execute</option>
|
||||
<option value="none">No Access</option>
|
||||
</select>
|
||||
<button type="submit" class="btn">Save</button>
|
||||
</form>
|
||||
</td>
|
||||
<td>Editable</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin-top:16px; color:#888;">Only superadmin users can view and manage role access.</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
748
py_app/app/templates/role_permissions.html
Normal file
748
py_app/app/templates/role_permissions.html
Normal file
@@ -0,0 +1,748 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Role Permissions Management{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
.permissions-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header-section h2 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-section p {
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.role-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 8px;
|
||||
margin-bottom: 25px;
|
||||
background-color: #f8f9fa;
|
||||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.role-tab {
|
||||
padding: 15px 20px;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.role-tab.active {
|
||||
background: linear-gradient(135deg, #007bff, #0056b3);
|
||||
color: white;
|
||||
border-color: #0056b3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,123,255,0.3);
|
||||
}
|
||||
|
||||
.role-tab:hover:not(.active) {
|
||||
background-color: #e3f2fd;
|
||||
border-color: #007bff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.permission-tree {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.page-section:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 25px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 18px 24px;
|
||||
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.page-header:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.page-header.expanded {
|
||||
background: linear-gradient(135deg, #007bff, #0056b3);
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
transition: transform 0.3s;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.expanded .expand-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-content.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section-item {
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
.section-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 16px 24px;
|
||||
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.section-header:hover {
|
||||
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
|
||||
border-left-color: #2196f3;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.section-header.expanded {
|
||||
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
|
||||
color: #1976d2;
|
||||
border-left-color: #1976d2;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
display: none;
|
||||
padding: 20px 24px;
|
||||
background: linear-gradient(145deg, #ffffff, #f8f9fa);
|
||||
}
|
||||
|
||||
.section-content.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #f1f3f4;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.action-item:hover {
|
||||
border-color: #007bff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,123,255,0.15);
|
||||
}
|
||||
|
||||
.action-item.granted {
|
||||
border-color: #28a745;
|
||||
background: linear-gradient(145deg, #ffffff, #f8fff9);
|
||||
}
|
||||
|
||||
.action-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 12px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.action-view { background-color: #28a745; }
|
||||
.action-create { background-color: #007bff; }
|
||||
.action-edit { background-color: #ffc107; color: #212529; }
|
||||
.action-delete { background-color: #dc3545; }
|
||||
.action-upload { background-color: #6f42c1; }
|
||||
.action-download { background-color: #20c997; }
|
||||
.action-export { background-color: #fd7e14; }
|
||||
.action-import { background-color: #e83e8c; }
|
||||
|
||||
.permission-toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.permission-toggle input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: 0.4s;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.toggle-slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .toggle-slider {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
input:checked + .toggle-slider:before {
|
||||
transform: translateX(25px);
|
||||
}
|
||||
|
||||
.permission-summary {
|
||||
background: linear-gradient(145deg, #ffffff, #f8f9fa);
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 12px;
|
||||
border-left: 5px solid #007bff;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.summary-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: #6c757d;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 30px;
|
||||
padding: 25px;
|
||||
background: linear-gradient(145deg, #ffffff, #f8f9fa);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #007bff, #0056b3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, #0056b3, #004494);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, #6c757d, #545b62);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: linear-gradient(135deg, #545b62, #383d41);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, #28a745, #1e7e34);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: linear-gradient(135deg, #1e7e34, #155724);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.permissions-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.role-tabs {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.permission-tree {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.summary-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="permissions-container">
|
||||
<div class="header-section">
|
||||
<h2>Role Permissions Management</h2>
|
||||
<p>Configure granular access permissions for each role in the system</p>
|
||||
</div>
|
||||
|
||||
<!-- Role Tabs -->
|
||||
<div class="role-tabs">
|
||||
{% for role_name, role_data in roles.items() %}
|
||||
<div class="role-tab {% if loop.first %}active{% endif %}"
|
||||
data-role="{{ role_name }}"
|
||||
onclick="switchRole('{{ role_name }}')">
|
||||
<div>{{ role_data.display_name }}</div>
|
||||
<small>Level {{ role_data.level }}</small>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% for role_name, role_data in roles.items() %}
|
||||
<div class="role-content" id="role-{{ role_name }}"
|
||||
style="{% if not loop.first %}display: none;{% endif %}">
|
||||
|
||||
<!-- Permission Summary -->
|
||||
<div class="permission-summary">
|
||||
<h4>{{ role_data.display_name }} Permissions Summary</h4>
|
||||
<p>{{ role_data.description }}</p>
|
||||
<div class="summary-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="total-permissions-{{ role_name }}">0</div>
|
||||
<div class="stat-label">Total Permissions</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="granted-permissions-{{ role_name }}">0</div>
|
||||
<div class="stat-label">Granted</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="denied-permissions-{{ role_name }}">0</div>
|
||||
<div class="stat-label">Denied</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permission Tree -->
|
||||
<div class="permission-tree">
|
||||
{% for page_key, page_data in pages.items() %}
|
||||
<div class="page-section">
|
||||
<div class="page-header" onclick="togglePage('{{ role_name }}', '{{ page_key }}')">
|
||||
<span>
|
||||
<span class="expand-icon">▶</span>
|
||||
{{ page_data.name }}
|
||||
</span>
|
||||
<span class="page-stats" id="page-stats-{{ role_name }}-{{ page_key }}">0/0</span>
|
||||
</div>
|
||||
<div class="page-content" id="page-content-{{ role_name }}-{{ page_key }}">
|
||||
{% for section_key, section_data in page_data.sections.items() %}
|
||||
<div class="section-item">
|
||||
<div class="section-header" onclick="toggleSection('{{ role_name }}', '{{ page_key }}', '{{ section_key }}')">
|
||||
<span>
|
||||
<span class="expand-icon">▶</span>
|
||||
{{ section_data.name }}
|
||||
</span>
|
||||
<span class="section-stats" id="section-stats-{{ role_name }}-{{ page_key }}-{{ section_key }}">0/{{ section_data.actions|length }}</span>
|
||||
</div>
|
||||
<div class="section-content" id="section-content-{{ role_name }}-{{ page_key }}-{{ section_key }}">
|
||||
<div class="action-grid">
|
||||
{% for action in section_data.actions %}
|
||||
<div class="action-item" id="action-{{ role_name }}-{{ page_key }}-{{ section_key }}-{{ action }}">
|
||||
<div class="action-label">
|
||||
<div class="action-icon action-{{ action }}">
|
||||
{% if action == 'view' %}👁{% elif action == 'create' %}➕{% elif action == 'edit' %}✏️{% elif action == 'delete' %}🗑{% elif action == 'upload' %}📤{% elif action == 'download' %}📥{% elif action == 'export' %}📊{% elif action == 'import' %}📈{% endif %}
|
||||
</div>
|
||||
<span>{{ action_names.get(action, action) }}</span>
|
||||
</div>
|
||||
<label class="permission-toggle">
|
||||
<input type="checkbox"
|
||||
data-role="{{ role_name }}"
|
||||
data-permission="{{ page_key }}.{{ section_key }}.{{ action }}"
|
||||
onchange="updatePermission('{{ role_name }}', '{{ page_key }}.{{ section_key }}.{{ action }}', this.checked)">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-secondary" onclick="resetToDefaults('{{ role_name }}')">Reset to Defaults</button>
|
||||
<button class="btn btn-primary" onclick="savePermissions('{{ role_name }}')">Save Changes</button>
|
||||
<button class="btn btn-success" onclick="copyFromRole('{{ role_name }}')">Copy from Another Role</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentRole = '{{ roles.keys()|first }}';
|
||||
let permissions = {{ permissions_json|safe }};
|
||||
let rolePermissions = {{ role_permissions_json|safe }};
|
||||
|
||||
function switchRole(roleName) {
|
||||
// Hide all role contents
|
||||
document.querySelectorAll('.role-content').forEach(content => {
|
||||
content.style.display = 'none';
|
||||
});
|
||||
|
||||
// Remove active class from all tabs
|
||||
document.querySelectorAll('.role-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show selected role content
|
||||
document.getElementById('role-' + roleName).style.display = 'block';
|
||||
|
||||
// Add active class to selected tab
|
||||
document.querySelector(`[data-role="${roleName}"]`).classList.add('active');
|
||||
|
||||
currentRole = roleName;
|
||||
loadPermissions(roleName);
|
||||
}
|
||||
|
||||
function togglePage(roleName, pageKey) {
|
||||
const header = document.querySelector(`#page-content-${roleName}-${pageKey}`).previousElementSibling;
|
||||
const content = document.getElementById(`page-content-${roleName}-${pageKey}`);
|
||||
|
||||
if (content.classList.contains('expanded')) {
|
||||
content.classList.remove('expanded');
|
||||
header.classList.remove('expanded');
|
||||
} else {
|
||||
content.classList.add('expanded');
|
||||
header.classList.add('expanded');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSection(roleName, pageKey, sectionKey) {
|
||||
const header = document.querySelector(`#section-content-${roleName}-${pageKey}-${sectionKey}`).previousElementSibling;
|
||||
const content = document.getElementById(`section-content-${roleName}-${pageKey}-${sectionKey}`);
|
||||
|
||||
if (content.classList.contains('expanded')) {
|
||||
content.classList.remove('expanded');
|
||||
header.classList.remove('expanded');
|
||||
} else {
|
||||
content.classList.add('expanded');
|
||||
header.classList.add('expanded');
|
||||
}
|
||||
}
|
||||
|
||||
function loadPermissions(roleName) {
|
||||
const rolePerms = rolePermissions[roleName] || [];
|
||||
|
||||
// Reset all checkboxes and update visual feedback
|
||||
document.querySelectorAll(`input[data-role="${roleName}"]`).forEach(checkbox => {
|
||||
const permissionKey = checkbox.getAttribute('data-permission');
|
||||
const isGranted = rolePerms.includes(permissionKey);
|
||||
checkbox.checked = isGranted;
|
||||
|
||||
// Update visual feedback
|
||||
const parts = permissionKey.split('.');
|
||||
const actionElement = document.getElementById(`action-${roleName}-${parts[0]}-${parts[1]}-${parts[2]}`);
|
||||
if (actionElement) {
|
||||
if (isGranted) {
|
||||
actionElement.classList.add('granted');
|
||||
} else {
|
||||
actionElement.classList.remove('granted');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
updateAllStats(roleName);
|
||||
}
|
||||
|
||||
function updatePermission(roleName, permissionKey, granted) {
|
||||
// Update local state
|
||||
if (!rolePermissions[roleName]) {
|
||||
rolePermissions[roleName] = [];
|
||||
}
|
||||
|
||||
if (granted && !rolePermissions[roleName].includes(permissionKey)) {
|
||||
rolePermissions[roleName].push(permissionKey);
|
||||
} else if (!granted) {
|
||||
const index = rolePermissions[roleName].indexOf(permissionKey);
|
||||
if (index > -1) {
|
||||
rolePermissions[roleName].splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Update visual feedback
|
||||
const parts = permissionKey.split('.');
|
||||
const actionElement = document.getElementById(`action-${roleName}-${parts[0]}-${parts[1]}-${parts[2]}`);
|
||||
if (actionElement) {
|
||||
if (granted) {
|
||||
actionElement.classList.add('granted');
|
||||
} else {
|
||||
actionElement.classList.remove('granted');
|
||||
}
|
||||
}
|
||||
|
||||
updateAllStats(roleName);
|
||||
}
|
||||
|
||||
function updateAllStats(roleName) {
|
||||
const totalPerms = document.querySelectorAll(`input[data-role="${roleName}"]`).length;
|
||||
const grantedPerms = document.querySelectorAll(`input[data-role="${roleName}"]:checked`).length;
|
||||
|
||||
document.getElementById(`total-permissions-${roleName}`).textContent = totalPerms;
|
||||
document.getElementById(`granted-permissions-${roleName}`).textContent = grantedPerms;
|
||||
document.getElementById(`denied-permissions-${roleName}`).textContent = totalPerms - grantedPerms;
|
||||
|
||||
// Update page and section stats
|
||||
updatePageStats(roleName);
|
||||
}
|
||||
|
||||
function updatePageStats(roleName) {
|
||||
const pages = {{ pages.keys()|list|tojson }};
|
||||
|
||||
pages.forEach(pageKey => {
|
||||
const pageCheckboxes = document.querySelectorAll(`input[data-role="${roleName}"][data-permission^="${pageKey}."]`);
|
||||
const pageGranted = Array.from(pageCheckboxes).filter(cb => cb.checked).length;
|
||||
const pageTotal = pageCheckboxes.length;
|
||||
|
||||
const pageStatsEl = document.getElementById(`page-stats-${roleName}-${pageKey}`);
|
||||
if (pageStatsEl) {
|
||||
pageStatsEl.textContent = `${pageGranted}/${pageTotal}`;
|
||||
}
|
||||
|
||||
// Update section stats within this page
|
||||
const sections = {{ pages|tojson }};
|
||||
Object.keys(sections[pageKey].sections).forEach(sectionKey => {
|
||||
const sectionCheckboxes = document.querySelectorAll(`input[data-role="${roleName}"][data-permission^="${pageKey}.${sectionKey}."]`);
|
||||
const sectionGranted = Array.from(sectionCheckboxes).filter(cb => cb.checked).length;
|
||||
const sectionTotal = sectionCheckboxes.length;
|
||||
|
||||
const sectionStatsEl = document.getElementById(`section-stats-${roleName}-${pageKey}-${sectionKey}`);
|
||||
if (sectionStatsEl) {
|
||||
sectionStatsEl.textContent = `${sectionGranted}/${sectionTotal}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function savePermissions(roleName) {
|
||||
const permissions = rolePermissions[roleName] || [];
|
||||
|
||||
fetch('/settings/save_role_permissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
role: roleName,
|
||||
permissions: permissions
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('Permissions saved successfully!');
|
||||
} else {
|
||||
alert('Error saving permissions: ' + data.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('Error saving permissions: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
function resetToDefaults(roleName) {
|
||||
if (confirm('Are you sure you want to reset permissions to defaults? This will overwrite all current settings for this role.')) {
|
||||
fetch('/settings/reset_role_permissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
role: roleName
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
rolePermissions[roleName] = data.permissions;
|
||||
loadPermissions(roleName);
|
||||
alert('Permissions reset to defaults!');
|
||||
} else {
|
||||
alert('Error resetting permissions: ' + data.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('Error resetting permissions: ' + error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function copyFromRole(targetRole) {
|
||||
const roles = Object.keys(rolePermissions);
|
||||
const sourceRole = prompt(`Enter the role to copy permissions from:\nAvailable roles: ${roles.join(', ')}`);
|
||||
|
||||
if (sourceRole && roles.includes(sourceRole) && sourceRole !== targetRole) {
|
||||
if (confirm(`Copy all permissions from ${sourceRole} to ${targetRole}?`)) {
|
||||
rolePermissions[targetRole] = [...(rolePermissions[sourceRole] || [])];
|
||||
loadPermissions(targetRole);
|
||||
alert('Permissions copied successfully!');
|
||||
}
|
||||
} else if (sourceRole) {
|
||||
alert('Invalid role name or same as target role.');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadPermissions(currentRole);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -37,9 +37,9 @@
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top: 32px;">
|
||||
<h3>Edit Access Roles</h3>
|
||||
<p>Manage which roles can view or execute functions on each app page and feature.</p>
|
||||
<a href="{{ url_for('main.edit_access_roles') }}" class="btn">Edit Access Roles</a>
|
||||
<h3>Role & Permissions Management</h3>
|
||||
<p>Configure granular permissions for each role in the system with expandable sections and detailed access control.</p>
|
||||
<a href="{{ url_for('main.role_permissions') }}" class="btn">Manage Role Permissions</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -105,6 +105,7 @@ Array.from(document.getElementsByClassName('edit-user-btn')).forEach(function(bt
|
||||
document.getElementById('user-popup-title').innerText = 'Edit User';
|
||||
document.getElementById('user-id').value = btn.getAttribute('data-user-id');
|
||||
document.getElementById('username').value = btn.getAttribute('data-username');
|
||||
document.getElementById('email').value = btn.getAttribute('data-email') || '';
|
||||
document.getElementById('role').value = btn.getAttribute('data-role');
|
||||
document.getElementById('password').value = '';
|
||||
document.getElementById('password').required = false;
|
||||
|
||||
Reference in New Issue
Block a user