LOTS of changes
This commit is contained in:
@@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Add User</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Add User</h1>
|
||||
<form method="POST">
|
||||
<label for="mac_address">MAC Address:</label>
|
||||
<input type="text" name="mac_address" required><br><br>
|
||||
<label for="vlan_id">VLAN ID:</label>
|
||||
<input type="text" name="vlan_id" required><br><br>
|
||||
<label for="description">Description:</label>
|
||||
<input type="text" name="description"><br><br>
|
||||
<input type="submit" value="Add User">
|
||||
</form>
|
||||
<a href="{{ url_for('user_list') }}">Back to User List</a>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<style>
|
||||
nav {
|
||||
background-color: #f0f0f0;
|
||||
padding: 10px;
|
||||
}
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{% block title %}FreeRADIUS Manager{% endblock %}</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--fg: #000000;
|
||||
--cell-bg: #f5f5f5;
|
||||
--th-bg: #e0e0e0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin-right: 10px;
|
||||
text-decoration: none;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--bg: #121212;
|
||||
--fg: #e0e0e0;
|
||||
--cell-bg: #1e1e1e;
|
||||
--th-bg: #2c2c2c;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
</style>
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: var(--th-bg);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin-right: 10px;
|
||||
text-decoration: none;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background-color: var(--cell-bg);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: var(--cell-bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.styled-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.styled-table th,
|
||||
.styled-table td {
|
||||
border: 1px solid #444;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.styled-table input,
|
||||
.styled-table select {
|
||||
background-color: var(--cell-bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid #666;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.styled-table input:focus,
|
||||
.styled-table select:focus {
|
||||
background-color: #555;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.styled-table thead {
|
||||
background-color: var(--th-bg);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.styled-table tbody tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
background-color: var(--cell-bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid #666;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background-color: #555;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.icon-button.pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(50, 205, 50, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(50, 205, 50, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(50, 205, 50, 0); }
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.merged-cell {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 10px 16px;
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.2);
|
||||
opacity: 0.95;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; right: 0; }
|
||||
to { opacity: 0.95; }
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from { opacity: 0.95; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/" {% if request.path == '/' %}class="active"{% endif %}>Home</a>
|
||||
<a href="/user_list" {% if request.path == '/user_list' %}class="active"{% endif %}>User List</a>
|
||||
<a href="/groups" {% if request.path == '/groups' %}class="active"{% endif %}>Group List</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<a href="/" {% if request.path == '/' %}class="active"{% endif %}>Home</a>
|
||||
<a href="/user/user_list" {% if request.path.startswith('/user') %}class="active"{% endif %}>User List</a>
|
||||
<a href="/group/groups" {% if request.path.startswith('/group') %}class="active"{% endif %}>Group List</a>
|
||||
<a href="/stats" {% if request.path.startswith('/stats') %}class="active"{% endif %}>Stats</a>
|
||||
<button id="theme-toggle" onclick="toggleTheme()">🌓</button>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<div class="content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<div id="toast-container"></div>
|
||||
|
||||
<script>
|
||||
function showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.textContent = message;
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--cell-bg, #333);
|
||||
color: var(--fg, #fff);
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
z-index: 9999;
|
||||
font-weight: bold;
|
||||
`;
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(() => toast.remove(), 3000);
|
||||
}
|
||||
function toggleTheme() {
|
||||
const current = document.body.dataset.theme || 'light';
|
||||
const next = current === 'light' ? 'dark' : 'light';
|
||||
document.body.dataset.theme = next;
|
||||
localStorage.setItem('theme', next);
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
document.body.dataset.theme = localStorage.getItem('theme') || 'light';
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
showToast("{{ message }}");
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Edit Attribute</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Edit Attribute</h1>
|
||||
|
||||
<form method="POST">
|
||||
<label for="attribute">Attribute:</label><br>
|
||||
<input type="text" id="attribute" name="attribute" value="{{ attribute_data.attribute }}"><br><br>
|
||||
|
||||
<label for="op">Op:</label><br>
|
||||
<input type="text" id="op" name="op" value="{{ attribute_data.op }}"><br><br>
|
||||
|
||||
<label for="value">Value:</label><br>
|
||||
<input type="text" id="value" name="value" value="{{ attribute_data.value }}"><br><br>
|
||||
|
||||
<input type="submit" value="Save Changes">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,26 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Edit Group</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Edit Group: {{ group.id }}</h1>
|
||||
|
||||
<form method="POST">
|
||||
<label for="groupname">Group Name:</label><br>
|
||||
<input type="text" id="groupname" name="groupname" value="{{ group.groupname }}"><br><br>
|
||||
|
||||
<label for="attribute">Attribute:</label><br>
|
||||
<input type="text" id="attribute" name="attribute" value="{{ group.attribute }}"><br><br>
|
||||
|
||||
<label for="op">Op:</label><br>
|
||||
<input type="text" id="op" name="op" value="{{ group.op }}"><br><br>
|
||||
|
||||
<label for="value">Value:</label><br>
|
||||
<input type="text" id="value" name="value" value="{{ group.value }}"><br><br>
|
||||
|
||||
<input type="submit" value="Save Changes">
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Edit Group Name</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Edit Group Name: {{ old_groupname }}</h1>
|
||||
|
||||
<form method="POST">
|
||||
<label for="groupname">New Group Name:</label><br>
|
||||
<input type="text" id="groupname" name="groupname" value="{{ old_groupname }}"><br><br>
|
||||
|
||||
<input type="submit" value="Save Changes">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Edit User</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Edit User: {{ user.mac_address }}</h1>
|
||||
|
||||
<form method="POST">
|
||||
<label for="description">Description:</label><br>
|
||||
<input type="text" id="description" name="description" value="{{ user.description }}"><br><br>
|
||||
|
||||
<label for="vlan_id">VLAN ID:</label><br>
|
||||
<input type="text" id="vlan_id" name="vlan_id" value="{{ user.vlan_id }}"><br><br>
|
||||
|
||||
<input type="submit" value="Save Changes">
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Group List</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Group List</h1>
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Group Name</th>
|
||||
<th>Attribute</th>
|
||||
<th>Op</th>
|
||||
<th>Value</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for group in results %}
|
||||
<tr>
|
||||
<td>{{ group.id }}</td>
|
||||
<td>{{ group.groupname }}</td>
|
||||
<td>{{ group.attribute }}</td>
|
||||
<td>{{ group.op }}</td>
|
||||
<td>{{ group.value }}</td>
|
||||
<td>
|
||||
<a href="/edit_group/{{ group.id }}">Edit</a> |
|
||||
<a href="/delete_group/{{ group.id }}">Delete</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,364 +1,183 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}Group List{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Group List</h1>
|
||||
<h1 class="page-title">Group List</h1>
|
||||
|
||||
<table class="styled-table fade-in">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Group Name</th>
|
||||
<th>Attribute</th>
|
||||
<th>Op</th>
|
||||
<th>Value</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="group-body">
|
||||
<!-- New Group Entry Row -->
|
||||
<tr class="new-row">
|
||||
<td rowspan="1"><input type="text" id="new-groupname" placeholder="New group" /></td>
|
||||
<td><input type="text" class="new-attribute" placeholder="Attribute"></td>
|
||||
<td>
|
||||
<select class="new-op">
|
||||
<option value="">Op</option>
|
||||
<option value="=">=</option>
|
||||
<option value="!=">!=</option>
|
||||
<option value=">">></option>
|
||||
<option value="<"><</option>
|
||||
<option value=">=">>=</option>
|
||||
<option value="<="><=</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" class="new-value" placeholder="Value"></td>
|
||||
<td>
|
||||
<button class="icon-button pulse" onclick="saveNewGroup()" title="Save Group">💾</button>
|
||||
<button class="icon-button" onclick="addAttributeRow()" title="Add Attribute">➕</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{% for groupname, attributes in grouped_results.items() %}
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Group Name</th>
|
||||
<th>Attributes</th>
|
||||
<th>Op</th>
|
||||
<th>Value</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" id="groupname-{{ groupname }}" value="{{ groupname }}">
|
||||
</td>
|
||||
<td colspan="3" class="merged-cell">
|
||||
<button onclick="addRow('{{ groupname }}')">➕</button>
|
||||
</td>
|
||||
<td>
|
||||
<button onclick="updateGroupName('{{ groupname }}')">✅ Rename Group</button>
|
||||
<button onclick="location.reload()">❌</button>
|
||||
<a href="/delete_group_rows/{{ groupname }}" onclick="saveScrollPosition()">🗑️</a>
|
||||
<button onclick="duplicateGroup('{{ groupname }}')">Duplicate</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% for attribute in attributes %}
|
||||
<tr>
|
||||
<td class="merged-cell"></td>
|
||||
<td><input type="text" id="attribute-{{ attribute.id }}" value="{{ attribute.attribute }}"></td>
|
||||
<td>
|
||||
<select id="op-{{ attribute.id }}">
|
||||
<option value="=" ${attribute.op === '=' ? 'selected' : ''}>=</option>
|
||||
<option value="!=" ${attribute.op === '!=' ? 'selected' : ''}>!=</option>
|
||||
<option value=">" ${attribute.op === '>' ? 'selected' : ''}>></option>
|
||||
<option value="<" ${attribute.op === '<' ? 'selected' : ''}><</option>
|
||||
<option value=">=" ${attribute.op === '>=' ? 'selected' : ''}>>=</option>
|
||||
<option value="<=" ${attribute.op === '<=' ? 'selected' : ''}><=</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" id="value-{{ attribute.id }}" value="{{ attribute.value }}"></td>
|
||||
<td>
|
||||
<button onclick="updateAttribute('{{ attribute.id }}')">✅</button>
|
||||
<button onclick="location.reload()">❌</button>
|
||||
<a href="/delete_group/{{ attribute.id }}" onclick="saveScrollPosition()">🗑️</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<tr>
|
||||
<td><input type="text" id="groupname-{{ groupname }}" value="{{ groupname }}" disabled></td>
|
||||
<td colspan="3" class="merged-cell"></td>
|
||||
<td>
|
||||
<button class="icon-button" onclick="enableEdit('{{ groupname }}')" title="Edit">✏️</button>
|
||||
<button class="icon-button" onclick="updateGroupName('{{ groupname }}')" title="Save">💾</button>
|
||||
<button class="icon-button" onclick="location.reload()" title="Cancel">❌</button>
|
||||
<a class="icon-button" href="{{ url_for('group.delete_group_rows', groupname=groupname) }}" onclick="saveScrollPosition()" title="Delete Group">🗑️</a>
|
||||
<button class="icon-button" onclick="duplicateToNewGroup('{{ groupname }}')" title="Duplicate">📄</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% for attribute in attributes %}
|
||||
<tr>
|
||||
<td class="merged-cell"></td>
|
||||
<td><input type="text" id="attribute-{{ attribute.id }}" value="{{ attribute.attribute }}"></td>
|
||||
<td>
|
||||
<select id="op-{{ attribute.id }}">
|
||||
<option value="=" {% if attribute.op == '=' %}selected{% endif %}>=</option>
|
||||
<option value="!=" {% if attribute.op == '!=' %}selected{% endif %}>!=</option>
|
||||
<option value=">" {% if attribute.op == '>' %}selected{% endif %}>></option>
|
||||
<option value="<" {% if attribute.op == '<' %}selected{% endif %}><</option>
|
||||
<option value=">=" {% if attribute.op == '>=' %}selected{% endif %}>>=</option>
|
||||
<option value="<=" {% if attribute.op == '<=' %}selected{% endif %}><=</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" id="value-{{ attribute.id }}" value="{{ attribute.value }}"></td>
|
||||
<td>
|
||||
<button class="icon-button" onclick="updateAttribute('{{ attribute.id }}')" title="Save">💾</button>
|
||||
<button class="icon-button" onclick="location.reload()" title="Reset">❌</button>
|
||||
<a class="icon-button" href="{{ url_for('group.delete_group', group_id=attribute.id) }}" onclick="saveScrollPosition()" title="Delete">🗑️</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Group Name</th>
|
||||
<th>Attributes</th>
|
||||
<th>Op</th>
|
||||
<th>Value</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" id="new-groupname" value="">
|
||||
</td>
|
||||
<td colspan="3" class="merged-cell"></td>
|
||||
<td>
|
||||
<button onclick="addNewGroup()">Add New Group</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<script>
|
||||
function enableEdit(groupname) {
|
||||
const input = document.getElementById(`groupname-${groupname}`);
|
||||
input.disabled = false;
|
||||
input.focus();
|
||||
}
|
||||
|
||||
<dialog id="duplicate-dialog">
|
||||
<div id="duplicate-dialog-content"></div>
|
||||
<button id="close-dialog">❌</button>
|
||||
<button id="save-duplicated-group">Save</button>
|
||||
</dialog>
|
||||
function saveScrollPosition() {
|
||||
sessionStorage.setItem("scrollPosition", window.scrollY);
|
||||
}
|
||||
|
||||
<style>
|
||||
.merged-cell {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
function addAttributeRow() {
|
||||
const table = document.getElementById("group-body");
|
||||
const row = document.createElement("tr");
|
||||
row.classList.add("new-attribute-row");
|
||||
row.innerHTML = `
|
||||
<td class="merged-cell"></td>
|
||||
<td><input type="text" class="new-attribute" placeholder="Attribute"></td>
|
||||
<td>
|
||||
<select class="new-op">
|
||||
<option value="">Op</option>
|
||||
<option value="=">=</option>
|
||||
<option value="!=">!=</option>
|
||||
<option value=">">></option>
|
||||
<option value="<"><</option>
|
||||
<option value=">=">>=</option>
|
||||
<option value="<="><=</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" class="new-value" placeholder="Value"></td>
|
||||
<td><button class="icon-button" onclick="this.closest('tr').remove()" title="Remove">🗑️</button></td>
|
||||
`;
|
||||
table.insertBefore(row, table.querySelector(".new-row").nextSibling);
|
||||
}
|
||||
|
||||
<script>
|
||||
function updateAttribute(attributeId) {
|
||||
const attribute = document.getElementById(`attribute-${attributeId}`).value;
|
||||
const op = document.getElementById(`op-${attributeId}`).value;
|
||||
const value = document.getElementById(`value-${attributeId}`).value;
|
||||
function saveNewGroup() {
|
||||
const groupname = document.getElementById("new-groupname").value;
|
||||
const attributes = [];
|
||||
const attrInputs = document.querySelectorAll(".new-attribute");
|
||||
|
||||
fetch('/update_attribute', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `attributeId=${attributeId}&attribute=${attribute}&op=${op}&value=${value}`
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error updating attribute: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
attrInputs.forEach((attrInput, index) => {
|
||||
const attribute = attrInput.value;
|
||||
const op = document.querySelectorAll(".new-op")[index].value;
|
||||
const value = document.querySelectorAll(".new-value")[index].value;
|
||||
|
||||
function updateGroupName(oldGroupName) {
|
||||
const newGroupName = document.getElementById(`groupname-${oldGroupName}`).value;
|
||||
if (attribute && op && value) {
|
||||
attributes.push({ attribute, op, value });
|
||||
}
|
||||
});
|
||||
|
||||
fetch('/update_group_name', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `oldGroupName=${oldGroupName}&newGroupName=${newGroupName}`
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error updating group name: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!groupname || attributes.length === 0) {
|
||||
showToast("Group name and at least one attribute required.");
|
||||
return;
|
||||
}
|
||||
|
||||
function addRow(groupName) {
|
||||
const table = event.target.closest('table').querySelector('tbody');
|
||||
const newRow = table.insertRow(table.rows.length);
|
||||
fetch("/group/save_group", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ groupname, attributes })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showToast("Group saved.");
|
||||
setTimeout(() => location.reload(), 800);
|
||||
} else {
|
||||
showToast("Error: " + data.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const cell1 = newRow.insertCell(0);
|
||||
const cell2 = newRow.insertCell(1);
|
||||
const cell3 = newRow.insertCell(2);
|
||||
const cell4 = newRow.insertCell(3);
|
||||
const cell5 = newRow.insertCell(4);
|
||||
function duplicateToNewGroup(groupname) {
|
||||
fetch("/group/duplicate_group", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: `groupname=${groupname}`
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
document.getElementById("new-groupname").value = data.new_groupname;
|
||||
|
||||
cell1.classList.add('merged-cell');
|
||||
cell2.innerHTML = '<input type="text" id="new-attribute" value="">';
|
||||
cell3.innerHTML = `
|
||||
<select id="new-op">
|
||||
<option value="=">=</option>
|
||||
<option value="!=">!=</option>
|
||||
<option value=">">></option>
|
||||
<option value="<"><</option>
|
||||
<option value=">=">>=</option>
|
||||
<option value="<="><=</option>
|
||||
</select>
|
||||
`;
|
||||
cell4.innerHTML = '<input type="text" id="new-value" value="">';
|
||||
cell5.innerHTML = '<button onclick="saveNewRow(\'' + groupName + '\', this)">✅</button> <button onclick="removeRow(this)">❌</button>';
|
||||
}
|
||||
const oldAttrRows = document.querySelectorAll(".new-attribute-row");
|
||||
oldAttrRows.forEach(row => row.remove());
|
||||
|
||||
function saveNewRow(groupName, button) {
|
||||
const row = button.parentNode.parentNode;
|
||||
const attribute = row.querySelector('#new-attribute').value;
|
||||
const op = row.querySelector('#new-op').value;
|
||||
const value = row.querySelector('#new-value').value;
|
||||
data.attributes.forEach(attr => {
|
||||
addAttributeRow();
|
||||
const index = document.querySelectorAll(".new-attribute").length - 1;
|
||||
document.querySelectorAll(".new-attribute")[index].value = attr.attribute;
|
||||
document.querySelectorAll(".new-op")[index].value = attr.op;
|
||||
document.querySelectorAll(".new-value")[index].value = attr.value;
|
||||
});
|
||||
|
||||
fetch('/add_attribute', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `groupname=${groupName}&attribute=${attribute}&op=${op}&value=${value}`
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error adding attribute: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
document.getElementById("new-groupname").scrollIntoView({ behavior: 'smooth' });
|
||||
showToast("Fields populated from duplicated group.");
|
||||
});
|
||||
}
|
||||
|
||||
function removeRow(button) {
|
||||
const row = button.parentNode.parentNode;
|
||||
row.parentNode.removeChild(row);
|
||||
}
|
||||
|
||||
function addNewGroup() {
|
||||
const newGroupName = document.getElementById('new-groupname').value;
|
||||
|
||||
fetch('/add_group', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `groupname=${newGroupName}`
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error adding group: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function saveScrollPosition() {
|
||||
sessionStorage.setItem('scrollPosition', window.scrollY);
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
const scrollPosition = sessionStorage.getItem('scrollPosition');
|
||||
if (scrollPosition) {
|
||||
window.scrollTo(0, scrollPosition);
|
||||
sessionStorage.removeItem('scrollPosition');
|
||||
}
|
||||
}
|
||||
|
||||
function duplicateGroup(groupName) {
|
||||
fetch('/duplicate_group', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `groupname=${groupName}`
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const newGroupName = 'Copy of ' + groupName;
|
||||
let newTable = `<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Group Name</th>
|
||||
<th>Attributes</th>
|
||||
<th>Op</th>
|
||||
<th>Value</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" id="new-groupname" value="${newGroupName}">
|
||||
</td>
|
||||
<td colspan="3" class="merged-cell"></td>
|
||||
<td></td>
|
||||
</tr>`;
|
||||
|
||||
data.forEach((attribute, index) => {
|
||||
newTable += `<tr>
|
||||
<td class="merged-cell"></td>
|
||||
<td><input type="text" class="new-attribute" value="${attribute.attribute}"></td>
|
||||
<td>
|
||||
<select class="new-op">
|
||||
<option value="=" ${attribute.op === '=' ? 'selected' : ''}>=</option>
|
||||
<option value="!=" ${attribute.op === '!=' ? 'selected' : ''}>!=</option>
|
||||
<option value=">" ${attribute.op === '>' ? 'selected' : ''}>></option>
|
||||
<option value="<" ${attribute.op === '<' ? 'selected' : ''}><</option>
|
||||
<option value=">=" ${attribute.op === '>=' ? 'selected' : ''}>>=</option>
|
||||
<option value="<=" ${attribute.op === '<=' ? 'selected' : ''}><=</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" class="new-value" value="${attribute.value}"></td>
|
||||
<td><button onclick="removeDuplicatedRow(this)">🗑️</button></td>
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
newTable += `<tr>
|
||||
<td class="merged-cell"></td>
|
||||
<td colspan="3">
|
||||
<button onclick="addDuplicatedRow()">➕</button>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr></tbody></table>`;
|
||||
|
||||
document.getElementById('duplicate-dialog-content').innerHTML = newTable;
|
||||
document.getElementById('duplicate-dialog').showModal();
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('close-dialog').addEventListener('click', () => {
|
||||
document.getElementById('duplicate-dialog').close();
|
||||
});
|
||||
|
||||
document.getElementById('save-duplicated-group').addEventListener('click', () => {
|
||||
saveDuplicatedGroup();
|
||||
});
|
||||
|
||||
function saveDuplicatedGroup() {
|
||||
let rows = document.querySelectorAll('#duplicate-dialog-content table tbody tr');
|
||||
let groupname = rows[0].querySelector('#new-groupname').value;
|
||||
let attributes = [];
|
||||
for (let i = 1; i < rows.length - 1; i++) {
|
||||
const attributeInput = rows[i].querySelector(`.new-attribute`);
|
||||
const opInput = rows[i].querySelector(`.new-op`);
|
||||
const valueInput = rows[i].querySelector(`.new-value`);
|
||||
|
||||
if (attributeInput && opInput && valueInput) {
|
||||
attributes.push({
|
||||
attribute: attributeInput.value,
|
||||
op: opInput.value,
|
||||
value: valueInput.value
|
||||
});
|
||||
} else {
|
||||
console.warn(`Input elements not found for row ${i}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
fetch('/save_duplicated_group', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ groupname: groupname, attributes: attributes })
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
document.getElementById('duplicate-dialog').close();
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error saving duplicated group: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addDuplicatedRow() {
|
||||
const table = document.querySelector('#duplicate-dialog-content table tbody');
|
||||
const newRow = table.insertRow(table.rows.length - 1);
|
||||
|
||||
const cell1 = newRow.insertCell(0);
|
||||
const cell2 = newRow.insertCell(1);
|
||||
const cell3 = newRow.insertCell(2);
|
||||
const cell4 = newRow.insertCell(3);
|
||||
const cell5 = newRow.insertCell(4);
|
||||
|
||||
cell1.classList.add('merged-cell');
|
||||
cell2.innerHTML = `<input type="text" class="new-attribute" value="">`;
|
||||
cell3.innerHTML = `
|
||||
<select class="new-op">
|
||||
<option value="=">=</option>
|
||||
<option value="!=">!=</option>
|
||||
<option value=">">></option>
|
||||
<option value="<"><</option>
|
||||
<option value=">=">>=</option>
|
||||
<option value="<="><=</option>
|
||||
</select>
|
||||
`;
|
||||
cell4.innerHTML = `<input type="text" class="new-value" value="">`;
|
||||
cell5.innerHTML = `<button onclick="removeDuplicatedRow(this)">🗑️</button>`;
|
||||
}
|
||||
|
||||
function removeDuplicatedRow(button) {
|
||||
const row = button.parentNode.parentNode;
|
||||
row.parentNode.removeChild(row);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
window.onload = function () {
|
||||
const scrollPosition = sessionStorage.getItem("scrollPosition");
|
||||
if (scrollPosition) {
|
||||
window.scrollTo(0, parseInt(scrollPosition) - 100);
|
||||
sessionStorage.removeItem("scrollPosition");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,43 +1,125 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}FreeRADIUS Manager{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>FreeRADIUS Manager</h1>
|
||||
<h1 class="page-title">FreeRADIUS Manager</h1>
|
||||
|
||||
<h2>Statistics:</h2>
|
||||
<p>Total Users: {{ total_users }}</p>
|
||||
<p>Total Groups: {{ total_groups }}</p>
|
||||
<div class="stats-cards">
|
||||
<div class="card neutral">
|
||||
<strong>Total Users</strong>
|
||||
<p>{{ total_users }}</p>
|
||||
</div>
|
||||
<div class="card neutral">
|
||||
<strong>Total Groups</strong>
|
||||
<p>{{ total_groups }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>SQL Query Tool:</h2>
|
||||
<form method="POST" action="/sql">
|
||||
<textarea name="query" rows="5" cols="50"></textarea><br>
|
||||
<button type="submit">Execute Query</button>
|
||||
</form>
|
||||
<h2>Recent Access Accepts</h2>
|
||||
<ul class="event-list green">
|
||||
{% for entry in latest_accept %}
|
||||
<li>
|
||||
<strong>{{ entry.username }}</strong>
|
||||
{% if entry.description %} ({{ entry.description }}){% endif %}
|
||||
— {{ entry.ago }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% if sql_results %}
|
||||
<h2>Query Results:</h2>
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for key in sql_results[0].keys() %}
|
||||
<th>{{ key }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in sql_results %}
|
||||
<tr>
|
||||
{% for value in row.values() %}
|
||||
<td>{{ value }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
<h2>Recent Access Rejects</h2>
|
||||
<ul class="event-list red">
|
||||
{% for entry in latest_reject %}
|
||||
<li>
|
||||
<strong>{{ entry.username }}</strong>
|
||||
{% if entry.description %} ({{ entry.description }}){% endif %}
|
||||
— {{ entry.ago }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% if sql_error %}
|
||||
<p style="color: red;">{{ sql_error }}</p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
<hr>
|
||||
|
||||
<h2>MAC Vendor Lookup</h2>
|
||||
<form id="mac-lookup-form" method="POST" action="/lookup_mac">
|
||||
<input type="text" name="mac" id="mac-input" placeholder="Enter MAC address" required>
|
||||
<button type="submit">🔍 Lookup</button>
|
||||
</form>
|
||||
|
||||
<pre id="mac-result" class="debug-output" style="margin-top: 1em;"></pre>
|
||||
|
||||
<script>
|
||||
document.getElementById('mac-lookup-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const data = new URLSearchParams(new FormData(form));
|
||||
const resultBox = document.getElementById('mac-result');
|
||||
resultBox.textContent = "Querying...";
|
||||
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
resultBox.textContent = JSON.stringify(data, null, 2);
|
||||
})
|
||||
.catch(err => {
|
||||
resultBox.textContent = `Error: ${err}`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-title {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.stats-cards {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--cell-bg);
|
||||
border: 1px solid #666;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.card.neutral {
|
||||
background-color: #444;
|
||||
}
|
||||
.event-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.event-list li {
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px dashed #666;
|
||||
}
|
||||
.event-list.green li { color: #4caf50; }
|
||||
.event-list.red li { color: #ff4d4d; }
|
||||
|
||||
#mac-lookup-form input {
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #999;
|
||||
width: 250px;
|
||||
}
|
||||
#mac-lookup-form button {
|
||||
padding: 6px 12px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.debug-output {
|
||||
background-color: #222;
|
||||
color: #b6fcd5;
|
||||
border: 1px solid #333;
|
||||
padding: 1em;
|
||||
font-size: 0.9rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
100
app/templates/stats.html
Normal file
100
app/templates/stats.html
Normal file
@@ -0,0 +1,100 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Authentication Stats{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="page-title">Authentication Stats</h1>
|
||||
|
||||
<div class="stats-container">
|
||||
<div class="card success-card">
|
||||
<h2>Last Access-Accept Events</h2>
|
||||
<table class="styled-table small-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>Vendor</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in accept_entries %}
|
||||
<tr>
|
||||
<td>{{ entry.username }}</td>
|
||||
<td>{{ entry.description or '' }}</td>
|
||||
<td>{{ entry.vendor }}</td>
|
||||
<td>{{ entry.ago }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card error-card">
|
||||
<h2>Last Access-Reject Events</h2>
|
||||
<table class="styled-table small-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>Vendor</th>
|
||||
<th>Time</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in reject_entries %}
|
||||
<tr>
|
||||
<td>{{ entry.username }}</td>
|
||||
<td>{{ entry.description or '' }}</td>
|
||||
<td>{{ entry.vendor }}</td>
|
||||
<td>{{ entry.ago }}</td>
|
||||
<td>
|
||||
{% if entry.already_exists %}
|
||||
<span style="color: limegreen;">Already exists in {{ entry.existing_vlan or 'unknown VLAN' }}</span>
|
||||
{% else %}
|
||||
<form method="POST" action="/user/add_from_reject" style="display: flex; gap: 4px;">
|
||||
<input type="hidden" name="username" value="{{ entry.username }}">
|
||||
<select name="groupname" required>
|
||||
<option value="">Select VLAN</option>
|
||||
{% for group in available_groups %}
|
||||
<option value="{{ group }}">{{ group }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" title="Add User">💾</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stats-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
.card {
|
||||
flex: 1;
|
||||
min-width: 45%;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background-color: var(--card-bg);
|
||||
color: var(--fg);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
.success-card {
|
||||
border-left: 6px solid limegreen;
|
||||
}
|
||||
.error-card {
|
||||
border-left: 6px solid crimson;
|
||||
}
|
||||
.styled-table.small-table td, .styled-table.small-table th {
|
||||
padding: 6px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -1,364 +0,0 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}User List{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>User List</h1>
|
||||
|
||||
{% for username, attributes in grouped_users.items() %}
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User Name</th>
|
||||
<th>Attributes</th>
|
||||
<th>Op</th>
|
||||
<th>Value</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" id="username-{{ username }}" value="{{ username }}">
|
||||
</td>
|
||||
<td colspan="3" class="merged-cell">
|
||||
<button onclick="addUserRow('{{ username }}')">➕</button>
|
||||
</td>
|
||||
<td>
|
||||
<button onclick="updateUserName('{{ username }}')">✅ Rename User</button>
|
||||
<button onclick="location.reload()">❌</button>
|
||||
<a href="/delete_user_rows/{{ username }}" onclick="saveScrollPosition()">🗑️</a>
|
||||
<button onclick="duplicateUser('{{ username }}')">Duplicate</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% for attribute in attributes %}
|
||||
<tr>
|
||||
<td class="merged-cell"></td>
|
||||
<td><input type="text" id="attribute-{{ attribute.id }}" value="{{ attribute.attribute }}"></td>
|
||||
<td>
|
||||
<select id="op-{{ attribute.id }}">
|
||||
<option value="=" ${attribute.op === '=' ? 'selected' : ''}>=</option>
|
||||
<option value="!=" ${attribute.op === '!=' ? 'selected' : ''}>!=</option>
|
||||
<option value=">" ${attribute.op === '>' ? 'selected' : ''}>></option>
|
||||
<option value="<" ${attribute.op === '<' ? 'selected' : ''}><</option>
|
||||
<option value=">=" ${attribute.op === '>=' ? 'selected' : ''}>>=</option>
|
||||
<option value="<=" ${attribute.op === '<=' ? 'selected' : ''}><=</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" id="value-{{ attribute.id }}" value="{{ attribute.value }}"></td>
|
||||
<td>
|
||||
<button onclick="updateAttribute('{{ attribute.id }}')">✅</button>
|
||||
<button onclick="location.reload()">❌</button>
|
||||
<a href="/delete_user/{{ attribute.id }}" onclick="saveScrollPosition()">🗑️</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endfor %}
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User Name</th>
|
||||
<th>Attributes</th>
|
||||
<th>Op</th>
|
||||
<th>Value</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" id="new-username" value="">
|
||||
</td>
|
||||
<td colspan="3" class="merged-cell"></td>
|
||||
<td>
|
||||
<button onclick="addNewUser()">Add New User</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<dialog id="duplicate-dialog">
|
||||
<div id="duplicate-dialog-content"></div>
|
||||
<button id="close-dialog">❌</button>
|
||||
<button id="save-duplicated-user">Save</button>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
.merged-cell {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function updateAttribute(attributeId) {
|
||||
const attribute = document.getElementById(`attribute-${attributeId}`).value;
|
||||
const op = document.getElementById(`op-${attributeId}`).value;
|
||||
const value = document.getElementById(`value-${attributeId}`).value;
|
||||
|
||||
fetch('/update_user_attribute', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `attributeId=${attributeId}&attribute=${attribute}&op=${op}&value=${value}`
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error updating attribute: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateUserName(oldUserName) {
|
||||
const newUserName = document.getElementById(`username-${oldUserName}`).value;
|
||||
|
||||
fetch('/update_user_name', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `oldUserName=${oldUserName}&newUserName=${newUserName}`
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error updating user name: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addUserRow(userName) {
|
||||
const table = event.target.closest('table').querySelector('tbody');
|
||||
const newRow = table.insertRow(table.rows.length);
|
||||
|
||||
const cell1 = newRow.insertCell(0);
|
||||
const cell2 = newRow.insertCell(1);
|
||||
const cell3 = newRow.insertCell(2);
|
||||
const cell4 = newRow.insertCell(3);
|
||||
const cell5 = newRow.insertCell(4);
|
||||
|
||||
cell1.classList.add('merged-cell');
|
||||
cell2.innerHTML = '<input type="text" id="new-attribute" value="">';
|
||||
cell3.innerHTML = `
|
||||
<select id="new-op">
|
||||
<option value="=">=</option>
|
||||
<option value="!=">!=</option>
|
||||
<option value=">">></option>
|
||||
<option value="<"><</option>
|
||||
<option value=">=">>=</option>
|
||||
<option value="<="><=</option>
|
||||
</select>
|
||||
`;
|
||||
cell4.innerHTML = '<input type="text" id="new-value" value="">';
|
||||
cell5.innerHTML = '<button onclick="saveNewUserRow(\'' + userName + '\', this)">✅</button> <button onclick="removeUserRow(this)">❌</button>';
|
||||
}
|
||||
|
||||
function saveNewUserRow(userName, button) {
|
||||
const row = button.parentNode.parentNode;
|
||||
const attribute = row.querySelector('#new-attribute').value;
|
||||
const op = row.querySelector('#new-op').value;
|
||||
const value = row.querySelector('#new-value').value;
|
||||
|
||||
fetch('/add_user_attribute', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `username=${userName}&attribute=${attribute}&op=${op}&value=${value}`
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error adding attribute: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeUserRow(button) {
|
||||
const row = button.parentNode.parentNode;
|
||||
row.parentNode.removeChild(row);
|
||||
}
|
||||
|
||||
function addNewUser() {
|
||||
const newUserName = document.getElementById('new-username').value;
|
||||
|
||||
fetch('/add_user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `username=${newUserName}`
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error adding user: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function saveScrollPosition() {
|
||||
sessionStorage.setItem('scrollPosition', window.scrollY);
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
const scrollPosition = sessionStorage.getItem('scrollPosition');
|
||||
if (scrollPosition) {
|
||||
window.scrollTo(0, scrollPosition);
|
||||
sessionStorage.removeItem('scrollPosition');
|
||||
}
|
||||
}
|
||||
|
||||
function duplicateUser(userName) {
|
||||
fetch('/duplicate_user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `username=${userName}`
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const newUserName = 'Copy of ' + userName;
|
||||
let newTable = `<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User Name</th>
|
||||
<th>Attributes</th>
|
||||
<th>Op</th>
|
||||
<th>Value</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" id="new-username" value="${newUserName}">
|
||||
</td>
|
||||
<td colspan="3" class="merged-cell"></td>
|
||||
<td></td>
|
||||
</tr>`;
|
||||
|
||||
data.forEach((attribute, index) => {
|
||||
newTable += `<tr>
|
||||
<td class="merged-cell"></td>
|
||||
<td><input type="text" class="new-attribute" value="${attribute.attribute}"></td>
|
||||
<td>
|
||||
<select class="new-op">
|
||||
<option value="=" ${attribute.op === '=' ? 'selected' : ''}>=</option>
|
||||
<option value="!=" ${attribute.op === '!=' ? 'selected' : ''}>!=</option>
|
||||
<option value=">" ${attribute.op === '>' ? 'selected' : ''}>></option>
|
||||
<option value="<" ${attribute.op === '<' ? 'selected' : ''}><</option>
|
||||
<option value=">=" ${attribute.op === '>=' ? 'selected' : ''}>>=</option>
|
||||
<option value="<=" ${attribute.op === '<=' ? 'selected' : ''}><=</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" class="new-value" value="${attribute.value}"></td>
|
||||
<td><button onclick="removeDuplicatedUserRow(this)">🗑️</button></td>
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
newTable += `<tr>
|
||||
<td class="merged-cell"></td>
|
||||
<td colspan="3">
|
||||
<button onclick="addDuplicatedUserRow()">➕</button>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr></tbody></table>`;
|
||||
|
||||
document.getElementById('duplicate-dialog-content').innerHTML = newTable;
|
||||
document.getElementById('duplicate-dialog').showModal();
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('close-dialog').addEventListener('click', () => {
|
||||
document.getElementById('duplicate-dialog').close();
|
||||
});
|
||||
|
||||
document.getElementById('save-duplicated-user').addEventListener('click', () => {
|
||||
saveDuplicatedUser();
|
||||
});
|
||||
|
||||
function saveDuplicatedUser() {
|
||||
let rows = document.querySelectorAll('#duplicate-dialog-content table tbody tr');
|
||||
let username = rows[0].querySelector('#new-username').value;
|
||||
let attributes = [];
|
||||
for (let i = 1; i < rows.length - 1; i++) {
|
||||
const attributeInput = rows[i].querySelector(`.new-attribute`);
|
||||
const opInput = rows[i].querySelector(`.new-op`);
|
||||
const valueInput = rows[i].querySelector(`.new-value`);
|
||||
|
||||
if (attributeInput && opInput && valueInput) {
|
||||
attributes.push({
|
||||
attribute: attributeInput.value,
|
||||
op: opInput.value,
|
||||
value: valueInput.value
|
||||
});
|
||||
} else {
|
||||
console.warn(`Input elements not found for row ${i}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
fetch('/save_duplicated_user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ username: username, attributes: attributes })
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (data === 'success') {
|
||||
document.getElementById('duplicate-dialog').close();
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error saving duplicated user: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addDuplicatedUserRow() {
|
||||
const table = document.querySelector('#duplicate-dialog-content table tbody');
|
||||
const newRow = table.insertRow(table.rows.length - 1);
|
||||
|
||||
const cell1 = newRow.insertCell(0);
|
||||
const cell2 = newRow.insertCell(1);
|
||||
const cell3 = newRow.insertCell(2);
|
||||
const cell4 = newRow.insertCell(3);
|
||||
const cell5 = newRow.insertCell(4);
|
||||
|
||||
cell1.classList.add('merged-cell');
|
||||
cell2.innerHTML = `<input type="text" class="new-attribute" value="">`;
|
||||
cell3.innerHTML = `
|
||||
<select class="new-op">
|
||||
<option value="=">=</option>
|
||||
<option value="!=">!=</option>
|
||||
<option value=">">></option>
|
||||
<option value="<"><</option>
|
||||
<option value=">=">>=</option>
|
||||
<option value="<="><=</option>
|
||||
</select>
|
||||
`;
|
||||
cell4.innerHTML = `<input type="text" class="new-value" value="">`;
|
||||
cell5.innerHTML = `<button onclick="removeDuplicatedUserRow(this)">🗑️</button>`;
|
||||
}
|
||||
|
||||
function removeDuplicatedUserRow(button) {
|
||||
const row = button.parentNode.parentNode;
|
||||
row.parentNode.removeChild(row);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -1,262 +1,179 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}User List{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>User List</h1>
|
||||
<h1 class="page-title">User List</h1>
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>VLAN ID</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in results %}
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" id="mac_address-{{ user.mac_address }}" value="{{ user.mac_address }}" maxlength="12" pattern="^[0-9a-fA-F]{12}$">
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" id="description-{{ user.mac_address }}" value="{{ user.description }}" maxlength="200">
|
||||
</td>
|
||||
<td>
|
||||
<select id="vlan_id-{{ user.mac_address }}">
|
||||
{% for group in groups %}
|
||||
<option value="{{ group.groupname }}" {% if user.vlan_id == group.groupname %} selected {% endif %}>
|
||||
{{ group.groupname }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<button onclick="updateUser('{{ user.mac_address }}')">✅</button>
|
||||
<a href="/delete_user/{{ user.mac_address }}" onclick="saveScrollPosition()">🗑️</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<button onclick="addNewUserRow()">➕ Add User</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="styled-table fade-in">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>
|
||||
Vendor
|
||||
<button class="icon-button" onclick="refreshVendors(this)" title="Refresh Vendor">🔄</button>
|
||||
</th>
|
||||
<th>Description</th>
|
||||
<th>Group</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="user-body">
|
||||
<!-- New User Row -->
|
||||
<tr class="new-row">
|
||||
<td><input type="text" id="new-mac" placeholder="MAC address"></td>
|
||||
<td><em>(auto)</em></td>
|
||||
<td><input type="text" id="new-description" placeholder="Description"></td>
|
||||
<td>
|
||||
<select id="new-vlan">
|
||||
<option value="">-- Select Group --</option>
|
||||
{% for group in groups %}
|
||||
<option value="{{ group.groupname }}">{{ group.groupname }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<button class="icon-button pulse" onclick="addUser()" title="Save User">💾</button>
|
||||
<button class="icon-button" onclick="clearUserFields()" title="Reset">❌</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<dialog id="add-user-dialog">
|
||||
<div id="add-user-dialog-content">
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>VLAN ID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="text" id="new-mac" maxlength="12" pattern="^[0-9a-fA-F]{12}$"></td>
|
||||
<td><input type="text" id="new-description" maxlength="200"></td>
|
||||
<td>
|
||||
<select id="new-vlan_id">
|
||||
{% for group in groups %}
|
||||
<option value="{{ group.groupname }}">
|
||||
{{ group.groupname }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end; margin-top: 10px;">
|
||||
<button id="cancel-add-user-dialog">Cancel</button>
|
||||
<button id="save-new-user">Save</button>
|
||||
</div>
|
||||
</dialog>
|
||||
{% for row in results %}
|
||||
<tr>
|
||||
<td><input type="text" value="{{ row.mac_address }}" id="mac-{{ loop.index }}" disabled></td>
|
||||
<td>{{ row.vendor or 'Unknown Vendor' }}</td>
|
||||
<td><input type="text" value="{{ row.description }}" id="desc-{{ loop.index }}"></td>
|
||||
<td>
|
||||
<select id="vlan-{{ loop.index }}">
|
||||
{% for group in groups %}
|
||||
<option value="{{ group.groupname }}" {% if group.groupname == row.vlan_id %}selected{% endif %}>
|
||||
{{ group.groupname }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<button class="icon-button" onclick="enableUserEdit({{ loop.index }})" title="Edit">✏️</button>
|
||||
<button class="icon-button" onclick="updateUser({{ loop.index }}, '{{ row.mac_address }}')" title="Save">💾</button>
|
||||
<button class="icon-button" onclick="location.reload()" title="Cancel">❌</button>
|
||||
<a class="icon-button" href="/user/delete_user/{{ row.mac_address }}" onclick="saveScrollPosition()" title="Delete">🗑️</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<style>
|
||||
#cancel-add-user-dialog {
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
<script>
|
||||
function enableUserEdit(index) {
|
||||
const input = document.getElementById(`mac-${index}`);
|
||||
input.disabled = false;
|
||||
input.focus();
|
||||
}
|
||||
|
||||
function clearUserFields() {
|
||||
document.getElementById("new-mac").value = "";
|
||||
document.getElementById("new-description").value = "";
|
||||
document.getElementById("new-vlan").selectedIndex = 0;
|
||||
}
|
||||
|
||||
function addUser() {
|
||||
const mac = document.getElementById("new-mac").value;
|
||||
const desc = document.getElementById("new-description").value;
|
||||
const vlan = document.getElementById("new-vlan").value;
|
||||
|
||||
if (!mac || !vlan) {
|
||||
showToast("MAC address and group are required.");
|
||||
return;
|
||||
}
|
||||
|
||||
fetch("/user/add_user", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ mac_address: mac, description: desc, vlan_id: vlan })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showToast("User added.");
|
||||
setTimeout(() => location.reload(), 800);
|
||||
} else {
|
||||
showToast("Error: " + data.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateUser(index, originalMac) {
|
||||
const macInput = document.getElementById(`mac-${index}`);
|
||||
const desc = document.getElementById(`desc-${index}`).value;
|
||||
const vlan = document.getElementById(`vlan-${index}`).value;
|
||||
|
||||
fetch("/user/update_user", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: `mac_address=${originalMac}&new_mac_address=${macInput.value}&description=${desc}&vlan_id=${vlan}`
|
||||
})
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
if (data === "success") {
|
||||
showToast("User updated.");
|
||||
setTimeout(() => location.reload(), 800);
|
||||
} else {
|
||||
showToast("Update failed: " + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// function refreshVendors() {
|
||||
// showToast("Refreshing vendor info...");
|
||||
// fetch("/user/refresh_vendors", {
|
||||
// method: "POST"
|
||||
// })
|
||||
// .then(res => res.json())
|
||||
// .then(data => {
|
||||
// showToast(data.message || "Refreshed.");
|
||||
// setTimeout(() => location.reload(), 1200);
|
||||
// })
|
||||
// .catch(() => showToast("Failed to refresh vendor info."));
|
||||
// }
|
||||
|
||||
function refreshVendors(btn) {
|
||||
btn.disabled = true;
|
||||
showToast("Refreshing vendor info...");
|
||||
|
||||
function refreshCycle() {
|
||||
fetch("/user/refresh_vendors", { method: "POST" })
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showToast(`Updated ${data.updated} vendors`);
|
||||
if (data.remaining) {
|
||||
setTimeout(refreshCycle, 1500); // Pause before next batch
|
||||
} else {
|
||||
showToast("Vendor refresh complete.");
|
||||
setTimeout(() => location.reload(), 1000);
|
||||
}
|
||||
} else {
|
||||
showToast("Refresh failed: " + data.message);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
showToast("Error during vendor refresh.");
|
||||
});
|
||||
}
|
||||
|
||||
#cancel-add-user-dialog:hover {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
refreshCycle();
|
||||
}
|
||||
|
||||
#save-new-user {
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
function saveScrollPosition() {
|
||||
sessionStorage.setItem("scrollPosition", window.scrollY);
|
||||
}
|
||||
|
||||
#save-new-user:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
#add-user-dialog-content + div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Data from Flask (VLAN groups)
|
||||
const groups = {{ groups | tojson | safe }};
|
||||
|
||||
/**
|
||||
* Updates a user's MAC address, description, and VLAN ID.
|
||||
* @param {string} mac_address - The original MAC address of the user.
|
||||
*/
|
||||
function updateUser(mac_address) {
|
||||
const descriptionInput = document.getElementById('description-' + mac_address);
|
||||
const macInput = document.getElementById('mac_address-' + mac_address);
|
||||
const vlan_id = document.getElementById('vlan_id-' + mac_address).value;
|
||||
const new_mac_address = macInput.value;
|
||||
const description = descriptionInput.value;
|
||||
|
||||
// Client-side validation for MAC address
|
||||
if (new_mac_address.length !== 12 || !/^[0-9a-fA-F]{12}$/.test(new_mac_address)) {
|
||||
alert("MAC Address must be 12 hexadecimal characters.");
|
||||
macInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
// Client-side validation for description
|
||||
if (description.length > 200) {
|
||||
alert("Description must be 200 characters or less.");
|
||||
descriptionInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Updating user:", mac_address, description, vlan_id, new_mac_address);
|
||||
|
||||
// Send update request to server
|
||||
fetch('/update_user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `mac_address=${mac_address}&description=${description}&vlan_id=${vlan_id}&new_mac_address=${new_mac_address}`
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
console.log("Server response:", data);
|
||||
if (data === 'success') {
|
||||
// Update UI on success
|
||||
macInput.value = new_mac_address;
|
||||
descriptionInput.value = description;
|
||||
document.getElementById('vlan_id-' + mac_address).value = vlan_id;
|
||||
macInput.id = 'mac_address-' + new_mac_address;
|
||||
descriptionInput.id = 'description-' + new_mac_address;
|
||||
document.getElementById('vlan_id-' + mac_address).id = 'vlan_id-' + new_mac_address;
|
||||
} else {
|
||||
alert('Error updating user: ' + data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves the current scroll position in session storage.
|
||||
*/
|
||||
function saveScrollPosition() {
|
||||
sessionStorage.setItem('scrollPosition', window.scrollY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Restores the scroll position from session storage on page load.
|
||||
*/
|
||||
window.onload = function () {
|
||||
const scrollPosition = sessionStorage.getItem('scrollPosition');
|
||||
if (scrollPosition) {
|
||||
window.scrollTo(0, scrollPosition);
|
||||
sessionStorage.removeItem('scrollPosition');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the "Add User" dialog.
|
||||
*/
|
||||
function addNewUserRow() {
|
||||
document.getElementById('add-user-dialog').showModal();
|
||||
}
|
||||
|
||||
// Close dialog on cancel button click
|
||||
document.getElementById('cancel-add-user-dialog').addEventListener('click', () => {
|
||||
document.getElementById('add-user-dialog').close();
|
||||
});
|
||||
|
||||
// Save new user on save button click
|
||||
document.getElementById('save-new-user').addEventListener('click', () => {
|
||||
saveNewUser();
|
||||
});
|
||||
|
||||
/**
|
||||
* Saves a new user to the database.
|
||||
*/
|
||||
function saveNewUser() {
|
||||
const macInput = document.getElementById('new-mac');
|
||||
const descriptionInput = document.getElementById('new-description');
|
||||
const vlan_id = document.getElementById('new-vlan_id').value;
|
||||
const mac = macInput.value;
|
||||
const description = descriptionInput.value;
|
||||
|
||||
// Client-side validation for MAC address
|
||||
if (mac.length !== 12 || !/^[0-9a-fA-F]{12}$/.test(mac)) {
|
||||
alert("MAC Address must be 12 hexadecimal characters.");
|
||||
macInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
// Client-side validation for description
|
||||
if (description.length > 200) {
|
||||
alert("Description must be 200 characters or less.");
|
||||
descriptionInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
// Send add user request to server
|
||||
fetch('/add_user', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ mac_address: mac, description: description, vlan_id: vlan_id }),
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.text().then(text => {
|
||||
throw new Error(`HTTP error! status: ${response.status}, body: ${text}`);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data && data.success) {
|
||||
document.getElementById('add-user-dialog').close();
|
||||
location.reload(); // Refresh the page to show the new user
|
||||
} else {
|
||||
alert('Error adding user: ' + (data && data.message ? data.message : 'Unknown error'));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fetch error:', error);
|
||||
alert('Error adding user: ' + error.message);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
window.onload = function () {
|
||||
const scroll = sessionStorage.getItem("scrollPosition");
|
||||
if (scroll) {
|
||||
window.scrollTo(0, parseInt(scroll) - 100);
|
||||
sessionStorage.removeItem("scrollPosition");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user