re-Made server totally - version 1.0 now come.
This commit is contained in:
Anry Das
266
templates/admin.html
Normal file
266
templates/admin.html
Normal file
@@ -0,0 +1,266 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Admin Panel - Das File Storage{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="nav-tabs">
|
||||
<a href="/dashboard" class="nav-tab">📂 My Files</a>
|
||||
<a href="/settings" class="nav-tab">⚙️ Settings</a>
|
||||
<a href="/admin" class="nav-tab active">👑 Admin Panel</a>
|
||||
</div>
|
||||
|
||||
{% if message %}
|
||||
<div class="alert alert-success">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if error %}
|
||||
<div class="alert alert-error">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<h2>User Management</h2>
|
||||
<button onclick="openCreateUserModal()" class="btn btn-primary">
|
||||
➕ Create New User
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
|
||||
<h3 style="margin-bottom: 15px; color: #374151;">📊 Statistics</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
|
||||
<div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #667eea;">
|
||||
<div style="color: #6b7280; font-size: 12px;">Total Users</div>
|
||||
<div style="font-size: 24px; font-weight: bold; color: #374151;">{{ stats.total_users }}</div>
|
||||
</div>
|
||||
<div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #10b981;">
|
||||
<div style="color: #6b7280; font-size: 12px;">Active Users</div>
|
||||
<div style="font-size: 24px; font-weight: bold; color: #374151;">{{ stats.active_users }}</div>
|
||||
</div>
|
||||
<div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #ef4444;">
|
||||
<div style="color: #6b7280; font-size: 12px;">Blocked Users</div>
|
||||
<div style="font-size: 24px; font-weight: bold; color: #374151;">{{ stats.blocked_users }}</div>
|
||||
</div>
|
||||
<div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #f59e0b;">
|
||||
<div style="color: #6b7280; font-size: 12px;">Total Files</div>
|
||||
<div style="font-size: 24px; font-weight: bold; color: #374151;">{{ stats.total_files }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Role</th>
|
||||
<th>Files</th>
|
||||
<th>Created</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in users %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ user.username }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
{% if user.is_admin %}
|
||||
<span class="admin-badge">Admin</span>
|
||||
{% else %}
|
||||
User
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="file-size">{{ user.file_count }} files</td>
|
||||
<td class="file-size">{{ user.created_at.strftime('%Y-%m-%d') }}</td>
|
||||
<td>
|
||||
{% if user.is_blocked %}
|
||||
<span style="color: #ef4444; font-weight: bold;">🚫 Blocked</span>
|
||||
{% else %}
|
||||
<span style="color: #10b981; font-weight: bold;">✅ Active</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if user.username != username %}
|
||||
{% if user.is_blocked %}
|
||||
<button onclick="unblockUser({{ user.id }}, '{{ user.username }}')" class="btn btn-success btn-small">
|
||||
✅ Unblock
|
||||
</button>
|
||||
{% else %}
|
||||
<button onclick="blockUser({{ user.id }}, '{{ user.username }}')" class="btn btn-secondary btn-small">
|
||||
🚫 Block
|
||||
</button>
|
||||
{% endif %}
|
||||
<button onclick="deleteUser({{ user.id }}, '{{ user.username }}')" class="btn btn-danger btn-small">
|
||||
🗑️ Delete
|
||||
</button>
|
||||
{% else %}
|
||||
<span style="color: #6b7280; font-size: 12px;">Current User</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Create User Modal -->
|
||||
<div id="createUserModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Create New User</div>
|
||||
<form id="createUserForm">
|
||||
<div class="form-group">
|
||||
<label for="new_username">Username</label>
|
||||
<input type="text" id="new_username" name="username" required minlength="3" maxlength="50">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new_password">Password</label>
|
||||
<input type="password" id="new_password" name="password" required minlength="8">
|
||||
<small style="color: #6b7280;">Minimum 8 characters</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirm_new_password">Confirm Password</label>
|
||||
<input type="password" id="confirm_new_password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="is_admin" name="is_admin">
|
||||
<label for="is_admin" style="margin: 0;">Administrator privileges</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" onclick="closeCreateUserModal()" class="btn btn-secondary">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Create User</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
function openCreateUserModal() {
|
||||
document.getElementById('createUserModal').classList.add('active');
|
||||
}
|
||||
|
||||
function closeCreateUserModal() {
|
||||
document.getElementById('createUserModal').classList.remove('active');
|
||||
document.getElementById('createUserForm').reset();
|
||||
}
|
||||
|
||||
document.getElementById('createUserForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const password = document.getElementById('new_password').value;
|
||||
const confirmPassword = document.getElementById('confirm_new_password').value;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
alert('Passwords do not match!');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
username: document.getElementById('new_username').value,
|
||||
password: password,
|
||||
is_admin: document.getElementById('is_admin').checked
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert('Failed to create user: ' + (error.detail || 'Unknown error'));
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to create user: ' + error.message);
|
||||
}
|
||||
});
|
||||
|
||||
async function blockUser(userId, username) {
|
||||
if (!confirm(`Are you sure you want to block user "${username}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/users/${userId}/block?block=true`, {
|
||||
method: 'PATCH'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('Failed to block user');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to block user: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function unblockUser(userId, username) {
|
||||
if (!confirm(`Are you sure you want to unblock user "${username}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/users/${userId}/block?block=false`, {
|
||||
method: 'PATCH'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('Failed to unblock user');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to unblock user: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteUser(userId, username) {
|
||||
if (!confirm(`Are you sure you want to DELETE user "${username}"?\n\nThis will also delete all their files. This action cannot be undone!`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmation = prompt(`Type "${username}" to confirm deletion:`);
|
||||
if (confirmation !== username) {
|
||||
alert('Deletion cancelled - username did not match');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/users/${userId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('Failed to delete user');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to delete user: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Close modals when clicking outside
|
||||
document.querySelectorAll('.modal').forEach(modal => {
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user