first commit
This commit is contained in:
Ashim Kumar
703
templates/admin.html
Normal file
703
templates/admin.html
Normal file
@@ -0,0 +1,703 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Admin Dashboard - Audio Transcription Editor</title>
|
||||
|
||||
<!-- External CSS Libraries -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--accent-primary: #667eea;
|
||||
--accent-secondary: #764ba2;
|
||||
--bg-gradient-start: #f0f4f8;
|
||||
--bg-gradient-end: #e2e8f0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
||||
color: white;
|
||||
padding: 24px 32px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
|
||||
margin-bottom: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-header {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-header:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.85rem;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #f8fafc;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.user-table th {
|
||||
background: #f8fafc;
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.user-table td {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.user-table tr:hover td {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.badge-admin {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-user {
|
||||
background: #e2e8f0;
|
||||
color: #64748b;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.btn-action-edit {
|
||||
background: #e0e7ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.btn-action-edit:hover {
|
||||
background: #c7d2fe;
|
||||
}
|
||||
|
||||
.btn-action-delete {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.btn-action-delete:hover {
|
||||
background: #fecaca;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select:focus {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.text-muted-custom {
|
||||
color: #94a3b8;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div class="loading-overlay" id="loader">
|
||||
<div class="spinner-border text-primary mb-3" role="status"></div>
|
||||
<h5 class="text-muted">Loading...</h5>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit User Modal -->
|
||||
<div class="modal fade" id="userModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="userModalTitle">Create User</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="userForm">
|
||||
<input type="hidden" id="userId">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Username</label>
|
||||
<input type="text" class="form-control" id="userUsername" required minlength="3">
|
||||
<div class="text-muted-custom mt-1">At least 3 characters</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="userPassword">
|
||||
<div class="text-muted-custom mt-1" id="passwordHint">At least 4 characters</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="userIsAdmin">
|
||||
<label class="form-check-label fw-bold" for="userIsAdmin">Administrator</label>
|
||||
</div>
|
||||
<div class="text-muted-custom mt-1">Admins can manage users</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-create" id="saveUserBtn" onclick="saveUser()">Save User</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Delete Modal -->
|
||||
<div class="modal fade" id="deleteModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Confirm Delete</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete user <strong id="deleteUsername"></strong>?</p>
|
||||
<p class="text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>This will also delete all their projects and data.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger btn-sm" id="confirmDeleteBtn">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<!-- Admin Header -->
|
||||
<div class="admin-header">
|
||||
<div>
|
||||
<h1><i class="bi bi-shield-lock me-2"></i>Admin Dashboard</h1>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="/" class="btn btn-header">
|
||||
<i class="bi bi-arrow-left me-2"></i>Back to Editor
|
||||
</a>
|
||||
<button class="btn btn-header" onclick="logout()">
|
||||
<i class="bi bi-box-arrow-right me-2"></i>Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="statUsers">0</div>
|
||||
<div class="stat-label">Users</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="statProjects">0</div>
|
||||
<div class="stat-label">Projects</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="statSections">0</div>
|
||||
<div class="stat-label">Sections</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="statUploads">0</div>
|
||||
<div class="stat-label">Uploads</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="statGenerations">0</div>
|
||||
<div class="stat-label">Generations</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="statDbSize">0</div>
|
||||
<div class="stat-label">Database (MB)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Users Table -->
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<h2><i class="bi bi-people me-2"></i>User Management</h2>
|
||||
<button class="btn btn-create" onclick="openCreateUserModal()">
|
||||
<i class="bi bi-plus-lg me-2"></i>Create User
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="alertContainer"></div>
|
||||
<div id="usersContainer">
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
<p>Loading users...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
let userModal = null;
|
||||
let deleteModal = null;
|
||||
let currentDeleteUserId = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
userModal = new bootstrap.Modal(document.getElementById('userModal'));
|
||||
deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
|
||||
|
||||
loadStats();
|
||||
loadUsers();
|
||||
});
|
||||
|
||||
function showLoader(show) {
|
||||
document.getElementById('loader').style.display = show ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
function showAlert(message, type = 'success') {
|
||||
const container = document.getElementById('alertContainer');
|
||||
container.innerHTML = `
|
||||
<div class="alert alert-${type} alert-dismissible fade show" role="alert">
|
||||
<i class="bi bi-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
`;
|
||||
setTimeout(() => container.innerHTML = '', 5000);
|
||||
}
|
||||
|
||||
async function loadStats() {
|
||||
try {
|
||||
const res = await fetch('/api/admin/stats');
|
||||
const data = await res.json();
|
||||
|
||||
document.getElementById('statUsers').textContent = data.users;
|
||||
document.getElementById('statProjects').textContent = data.projects;
|
||||
document.getElementById('statSections').textContent = data.sections;
|
||||
document.getElementById('statUploads').textContent = data.uploads;
|
||||
document.getElementById('statGenerations').textContent = data.generations;
|
||||
document.getElementById('statDbSize').textContent = data.database_size_mb;
|
||||
} catch (e) {
|
||||
console.error('Failed to load stats:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const res = await fetch('/api/admin/users');
|
||||
const data = await res.json();
|
||||
|
||||
const container = document.getElementById('usersContainer');
|
||||
|
||||
if (data.users.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
<p>No users found</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<table class="user-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Role</th>
|
||||
<th>Projects</th>
|
||||
<th>Created</th>
|
||||
<th>Last Login</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${data.users.map(user => `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="user-avatar">${user.username.charAt(0).toUpperCase()}</div>
|
||||
<div>
|
||||
<div class="fw-bold">${escapeHtml(user.username)}</div>
|
||||
<div class="text-muted-custom">ID: ${user.id}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="${user.is_admin ? 'badge-admin' : 'badge-user'}">
|
||||
${user.is_admin ? 'Admin' : 'User'}
|
||||
</span>
|
||||
</td>
|
||||
<td>${user.project_count}</td>
|
||||
<td class="text-muted-custom">${formatDate(user.created_at)}</td>
|
||||
<td class="text-muted-custom">${user.last_login ? formatDate(user.last_login) : 'Never'}</td>
|
||||
<td>
|
||||
<button class="btn-action btn-action-edit" title="Edit" onclick="openEditUserModal(${user.id}, '${escapeHtml(user.username)}', ${user.is_admin})">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button class="btn-action btn-action-delete" title="Delete" onclick="confirmDelete(${user.id}, '${escapeHtml(user.username)}')">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
} catch (e) {
|
||||
console.error('Failed to load users:', e);
|
||||
document.getElementById('usersContainer').innerHTML = `
|
||||
<div class="alert alert-danger">Failed to load users. Please refresh the page.</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function openCreateUserModal() {
|
||||
document.getElementById('userModalTitle').textContent = 'Create User';
|
||||
document.getElementById('userId').value = '';
|
||||
document.getElementById('userUsername').value = '';
|
||||
document.getElementById('userPassword').value = '';
|
||||
document.getElementById('userPassword').required = true;
|
||||
document.getElementById('passwordHint').textContent = 'At least 4 characters';
|
||||
document.getElementById('userIsAdmin').checked = false;
|
||||
document.getElementById('saveUserBtn').textContent = 'Create User';
|
||||
userModal.show();
|
||||
}
|
||||
|
||||
function openEditUserModal(id, username, isAdmin) {
|
||||
document.getElementById('userModalTitle').textContent = 'Edit User';
|
||||
document.getElementById('userId').value = id;
|
||||
document.getElementById('userUsername').value = username;
|
||||
document.getElementById('userPassword').value = '';
|
||||
document.getElementById('userPassword').required = false;
|
||||
document.getElementById('passwordHint').textContent = 'Leave blank to keep current password';
|
||||
document.getElementById('userIsAdmin').checked = isAdmin;
|
||||
document.getElementById('saveUserBtn').textContent = 'Save Changes';
|
||||
userModal.show();
|
||||
}
|
||||
|
||||
async function saveUser() {
|
||||
const userId = document.getElementById('userId').value;
|
||||
const username = document.getElementById('userUsername').value.trim();
|
||||
const password = document.getElementById('userPassword').value;
|
||||
const isAdmin = document.getElementById('userIsAdmin').checked;
|
||||
|
||||
if (!username || username.length < 3) {
|
||||
showAlert('Username must be at least 3 characters', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!userId && (!password || password.length < 4)) {
|
||||
showAlert('Password must be at least 4 characters', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoader(true);
|
||||
|
||||
try {
|
||||
const url = userId ? `/api/admin/users/${userId}` : '/api/admin/users';
|
||||
const method = userId ? 'PUT' : 'POST';
|
||||
|
||||
const body = { username, is_admin: isAdmin };
|
||||
if (password) body.password = password;
|
||||
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
userModal.hide();
|
||||
showAlert(userId ? 'User updated successfully' : 'User created successfully');
|
||||
loadUsers();
|
||||
loadStats();
|
||||
} else {
|
||||
showAlert(data.error || 'Operation failed', 'danger');
|
||||
}
|
||||
} catch (e) {
|
||||
showAlert('Connection error. Please try again.', 'danger');
|
||||
} finally {
|
||||
showLoader(false);
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(userId, username) {
|
||||
currentDeleteUserId = userId;
|
||||
document.getElementById('deleteUsername').textContent = username;
|
||||
document.getElementById('confirmDeleteBtn').onclick = () => deleteUser(userId);
|
||||
deleteModal.show();
|
||||
}
|
||||
|
||||
async function deleteUser(userId) {
|
||||
showLoader(true);
|
||||
deleteModal.hide();
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/admin/users/${userId}`, { method: 'DELETE' });
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
showAlert('User deleted successfully');
|
||||
loadUsers();
|
||||
loadStats();
|
||||
} else {
|
||||
showAlert(data.error || 'Delete failed', 'danger');
|
||||
}
|
||||
} catch (e) {
|
||||
showAlert('Connection error. Please try again.', 'danger');
|
||||
} finally {
|
||||
showLoader(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
try {
|
||||
await fetch('/api/logout', { method: 'POST' });
|
||||
window.location.href = '/login';
|
||||
} catch (e) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
493
templates/index.html
Normal file
493
templates/index.html
Normal file
@@ -0,0 +1,493 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Audio Transcription Editor & Reader</title>
|
||||
|
||||
<!-- External CSS Libraries -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:wght@500;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Quill Rich Text Editor -->
|
||||
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div class="loading-overlay" id="loader">
|
||||
<div class="spinner-border text-primary mb-3" role="status"></div>
|
||||
<h4 id="loadingText" class="fw-bold text-muted">Thinking...</h4>
|
||||
<p class="text-muted small" id="loadingSubtext">Generating audio or aligning text...</p>
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Buttons -->
|
||||
<div class="floating-controls" id="floatingControls">
|
||||
<button class="floating-btn chapter-btn" onclick="insertChapterMarker()" title="Add Chapter Marker">
|
||||
<i class="bi bi-bookmark-star"></i>
|
||||
<span class="tooltip-text">Add Chapter</span>
|
||||
</button>
|
||||
<button class="floating-btn section-btn" onclick="insertSectionMarker()" title="Add Section Marker">
|
||||
<i class="bi bi-file-earmark-text"></i>
|
||||
<span class="tooltip-text">Add Section</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TTS Text Edit Modal -->
|
||||
<div class="modal fade" id="ttsEditModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light">
|
||||
<h5 class="modal-title fw-bold"><i class="bi bi-soundwave me-2"></i>Edit Text for TTS Generation</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="text-muted small mb-2">
|
||||
<i class="bi bi-info-circle-fill me-1"></i>
|
||||
This text will be used to <strong>generate audio</strong>. The original text in the editor will still be used for the Reader and Export.
|
||||
</p>
|
||||
<textarea id="ttsTextInput" class="form-control" rows="10" style="font-family: 'Lora', serif; font-size: 1.1em;"></textarea>
|
||||
<input type="hidden" id="currentMarkerId">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary fw-bold" onclick="saveTTSText()">Save TTS Text</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Library Modal -->
|
||||
<div class="modal fade" id="libraryModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light">
|
||||
<h5 class="modal-title fw-bold"><i class="bi bi-archive me-2"></i>My Library</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Database Stats -->
|
||||
<div class="db-stats mb-4" id="dbStats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value" id="statUploads">0</div>
|
||||
<div class="stat-label">Uploads</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value" id="statGenerations">0</div>
|
||||
<div class="stat-label">Generations</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value" id="statProjects">0</div>
|
||||
<div class="stat-label">Projects</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value" id="statSections">0</div>
|
||||
<div class="stat-label">Sections</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value" id="statDbSize">0 MB</div>
|
||||
<div class="stat-label">Database Size</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Library Tabs -->
|
||||
<ul class="nav nav-pills mb-3" id="libraryTabs">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" data-bs-toggle="pill" data-bs-target="#uploadsTab">Uploads</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#generationsTab">Generations</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#projectsTab">Projects</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Library Tab Content -->
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="uploadsTab">
|
||||
<div id="uploadsList"></div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="generationsTab">
|
||||
<div id="generationsList"></div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="projectsTab">
|
||||
<div id="projectsList"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="main-container">
|
||||
|
||||
<!-- App Header with User Menu -->
|
||||
<div class="app-header">
|
||||
<div><h1 class="m-0" style="font-size: 24px;"><i class="bi bi-soundwave me-2"></i>Audio Editor & Reader</h1></div>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<button class="btn btn-light fw-bold" onclick="openLibrary()">
|
||||
<i class="bi bi-archive me-2"></i>Library
|
||||
</button>
|
||||
|
||||
<!-- User Menu Dropdown -->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-light fw-bold dropdown-toggle" type="button" data-bs-toggle="dropdown" id="userMenuBtn">
|
||||
<i class="bi bi-person-circle me-2"></i><span id="currentUsername">User</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li class="px-3 py-2 text-muted small" id="userInfoHeader">
|
||||
<i class="bi bi-info-circle me-1"></i>Logged in as <strong id="userInfoName">User</strong>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li id="adminLinkItem" style="display: none;">
|
||||
<a class="dropdown-item" href="/admin">
|
||||
<i class="bi bi-shield-lock me-2"></i>Admin Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li id="adminDivider" style="display: none;"><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-item text-danger" href="#" onclick="logout(); return false;">
|
||||
<i class="bi bi-box-arrow-right me-2"></i>Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<span class="version-badge">Kokoro AI Edition</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Input Card with Tabs -->
|
||||
<div class="input-card">
|
||||
<!-- Tab Navigation -->
|
||||
<ul class="nav nav-tabs px-4 pt-3" id="inputTabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload-panel" type="button">
|
||||
<i class="bi bi-upload me-2"></i>Upload File
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" id="write-tab" data-bs-toggle="tab" data-bs-target="#write-panel" type="button">
|
||||
<i class="bi bi-pen me-2"></i>Write & Generate
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" id="bulk-tab" data-bs-toggle="tab" data-bs-target="#bulk-panel" type="button">
|
||||
<i class="bi bi-layers-half me-2"></i>Bulk Audio Processing
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content">
|
||||
|
||||
<!-- Upload Tab Panel -->
|
||||
<div class="tab-pane fade show active p-5" id="upload-panel">
|
||||
<form id="uploadForm" class="row g-3 align-items-end">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-bold small text-uppercase text-muted">Audio File</label>
|
||||
<input class="form-control form-control-lg" type="file" id="audioFile" accept=".mp3, .wav">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-bold small text-uppercase text-muted">Story Text</label>
|
||||
<input class="form-control form-control-lg" type="file" id="txtFile" accept=".txt">
|
||||
</div>
|
||||
<div class="col-12 mt-4">
|
||||
<button type="submit" class="btn btn-dark w-100 py-3 fw-bold">Upload & Align</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Write & Generate Tab Panel -->
|
||||
<div class="tab-pane fade" id="write-panel">
|
||||
<div id="quill-editor"></div>
|
||||
<div class="editor-actions">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<div>
|
||||
<label class="small fw-bold text-muted d-block mb-1">VOICE</label>
|
||||
<select class="form-select form-select-sm" id="voiceSelect" style="width: 220px;">
|
||||
<option value="af_heart" selected>Heart (Fem)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary fw-bold px-4 py-2" onclick="generateAudio()">
|
||||
<i class="bi bi-magic me-2"></i>Generate Audio
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bulk Audio Processing Tab Panel -->
|
||||
<div class="tab-pane fade" id="bulk-panel">
|
||||
<div class="notion-editor-wrapper">
|
||||
<div id="bulk-editor" contenteditable="true" spellcheck="false">
|
||||
<p><br></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-actions">
|
||||
<div class="d-flex align-items-center gap-3 w-100 justify-content-between">
|
||||
<!-- Left side: Project name and Save button -->
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="input-group" style="max-width: 300px;">
|
||||
<span class="input-group-text bg-white fw-bold">Project Name</span>
|
||||
<input type="text" id="bulkProjectName" class="form-control" placeholder="Book-1" value="Book-1">
|
||||
</div>
|
||||
<button class="btn save-project-btn" onclick="saveProject()" title="Save project without generating audio">
|
||||
<i class="bi bi-save me-2"></i>Save Project
|
||||
</button>
|
||||
</div>
|
||||
<!-- Right side: Export button -->
|
||||
<button class="btn btn-dark fw-bold px-4 py-2" onclick="exportEverything()">
|
||||
<i class="bi bi-box-arrow-up-right me-2"></i>Export Everything
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Help text for bulk editor -->
|
||||
<div class="px-4 pb-3">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
<strong>Tips:</strong> Use floating buttons (right side) to add Chapter/Section markers.
|
||||
Each section can have an image (drag & drop, browse, or paste from clipboard).
|
||||
Click <strong>Save Project</strong> to save without generating audio, or <strong>Export Everything</strong> to save and download as ZIP.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Editor Section (Timeline & Reader) -->
|
||||
<div id="editorSection" class="d-none animate-fade-in">
|
||||
|
||||
<!-- Playlist Navigator -->
|
||||
<div class="card mb-4 border-0 shadow-sm bg-light" id="playlistNavigator" style="display: none;">
|
||||
<div class="card-body py-2">
|
||||
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-dark fw-bold" style="letter-spacing: 1px;">PLAYLIST</span>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-white border" title="Previous" onclick="playPrevTrack()"><i class="bi bi-skip-backward-fill"></i></button>
|
||||
<button class="btn btn-sm btn-white border" title="Next" onclick="playNextTrack()"><i class="bi bi-skip-forward-fill"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1" style="max-width: 500px;">
|
||||
<select class="form-select form-select-sm fw-bold text-dark" id="trackSelect" onchange="loadTrackFromPlaylist(this.value)">
|
||||
<option>No tracks generated yet...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="small text-muted fw-bold" id="trackInfo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audio Control Panel -->
|
||||
<div class="control-panel">
|
||||
<!-- Playback Controls -->
|
||||
<div class="d-flex flex-wrap gap-3 align-items-center">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-light border fw-bold" onclick="togglePlayPause()">
|
||||
<i class="bi bi-play-fill text-primary" id="playIcon"></i> <span id="playText">Play</span>
|
||||
</button>
|
||||
<button class="btn btn-light border" onclick="stopAudio()"><i class="bi bi-stop-fill"></i></button>
|
||||
</div>
|
||||
|
||||
<!-- Pill Insert/Delete -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-outline-primary fw-bold" onclick="insertPillAtPlayhead()"><i class="bi bi-plus-lg me-1"></i>Insert</button>
|
||||
<button class="btn btn-outline-danger fw-bold" id="deleteBtn" onclick="deleteSelectedPill()" disabled><i class="bi bi-trash me-1"></i>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Export Controls -->
|
||||
<div class="d-flex align-items-center gap-2 border-start ps-3" id="singleExportGroup">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-white fw-bold">Filename</span>
|
||||
<input type="text" id="exportFilename" class="form-control" placeholder="1.1_task-1" value="1.1_task-1" style="max-width: 150px;">
|
||||
<button class="btn btn-dark fw-bold" onclick="exportSingle()">
|
||||
<i class="bi bi-box-arrow-up-right me-2"></i>Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Speed & Zoom Controls -->
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="text-muted small fw-bold">SPEED</span>
|
||||
<input type="range" class="form-range" id="speedSlider" min="0.5" max="2.0" step="0.1" value="1.0" style="width: 80px;">
|
||||
<span id="speedDisplay" class="badge bg-secondary">1.0x</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="text-muted small fw-bold">ZOOM</span>
|
||||
<input type="range" class="form-range" id="zoomSlider" min="50" max="500" value="100" style="width: 100px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline/Waveform Editor -->
|
||||
<div class="timeline-wrapper" id="timelineWrapper">
|
||||
<div class="timeline-content" id="timelineContent">
|
||||
<div id="custom-playhead"></div>
|
||||
<div id="timeline-ruler"></div>
|
||||
<div class="audio-track-container">
|
||||
<div class="track-label">Audio</div>
|
||||
<div id="waveform"></div>
|
||||
</div>
|
||||
<div class="transcription-track-container" id="transcriptionTrack">
|
||||
<div class="track-label">Transcript</div>
|
||||
<div id="transcription-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Reader -->
|
||||
<div class="reader-section">
|
||||
<div class="reader-header">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<span>Interactive Reader</span>
|
||||
<span id="syncStatus" class="badge bg-secondary fs-6">Not Loaded</span>
|
||||
</div>
|
||||
<div class="form-check form-switch fs-6">
|
||||
<input class="form-check-input" type="checkbox" id="mismatchToggle" onchange="toggleMismatches()">
|
||||
<label class="form-check-label fw-bold text-muted" for="mismatchToggle">Show Mismatches</label>
|
||||
</div>
|
||||
</div>
|
||||
<article class="story-text-container" id="readerContent"></article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- External JS Libraries -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>
|
||||
<script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/timeline.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.6/dist/quill.min.js"></script>
|
||||
|
||||
<!-- Application JS Modules -->
|
||||
<script src="/static/js/editor.js"></script>
|
||||
<script src="/static/js/timeline.js"></script>
|
||||
<script src="/static/js/interactive-reader.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
|
||||
<!-- User Authentication & Tab Change Handling -->
|
||||
<script>
|
||||
// ==========================================
|
||||
// USER AUTHENTICATION
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Load current user info and update UI
|
||||
*/
|
||||
async function loadCurrentUser() {
|
||||
try {
|
||||
const res = await fetch('/api/me');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
const username = data.user.username;
|
||||
|
||||
// Update username displays
|
||||
document.getElementById('currentUsername').textContent = username;
|
||||
document.getElementById('userInfoName').textContent = username;
|
||||
|
||||
// Show admin link if user is admin
|
||||
if (data.user.is_admin) {
|
||||
document.getElementById('adminLinkItem').style.display = 'block';
|
||||
document.getElementById('adminDivider').style.display = 'block';
|
||||
}
|
||||
|
||||
console.log(`👤 Logged in as: ${username} ${data.user.is_admin ? '(Admin)' : ''}`);
|
||||
} else if (res.status === 401) {
|
||||
// Not authenticated, redirect to login
|
||||
console.log('🔒 Not authenticated, redirecting to login...');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load user info:', e);
|
||||
// On error, redirect to login as a safety measure
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Logout and redirect to login page
|
||||
*/
|
||||
async function logout() {
|
||||
try {
|
||||
await fetch('/api/logout', { method: 'POST' });
|
||||
console.log('👋 Logged out successfully');
|
||||
} catch (e) {
|
||||
console.error('Logout error:', e);
|
||||
}
|
||||
window.location.href = '/login';
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// TAB CHANGE EVENT HANDLING
|
||||
// ==========================================
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Load current user info
|
||||
loadCurrentUser();
|
||||
|
||||
// Handle tab switching for floating controls
|
||||
const tabElements = document.querySelectorAll('#inputTabs button[data-bs-toggle="tab"]');
|
||||
|
||||
tabElements.forEach(tab => {
|
||||
tab.addEventListener('shown.bs.tab', function(event) {
|
||||
const targetId = event.target.getAttribute('data-bs-target');
|
||||
|
||||
if (targetId === '#bulk-panel') {
|
||||
// Show floating controls for bulk processing
|
||||
toggleFloatingControls(true);
|
||||
// Re-initialize image handlers
|
||||
setTimeout(initializeImageHandlers, 100);
|
||||
} else {
|
||||
// Hide floating controls for other tabs
|
||||
toggleFloatingControls(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Initial state - hide floating controls since Upload tab is active by default
|
||||
toggleFloatingControls(false);
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// SESSION CHECK (Periodic)
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Periodically check if session is still valid
|
||||
*/
|
||||
function startSessionCheck() {
|
||||
// Check session every 5 minutes
|
||||
setInterval(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/me');
|
||||
if (res.status === 401) {
|
||||
console.log('🔒 Session expired, redirecting to login...');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
} catch (e) {
|
||||
// Network error - don't redirect, might be temporary
|
||||
console.warn('Session check failed:', e);
|
||||
}
|
||||
}, 5 * 60 * 1000); // 5 minutes
|
||||
}
|
||||
|
||||
// Start session checking
|
||||
startSessionCheck();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
275
templates/login.html
Normal file
275
templates/login.html
Normal file
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - Audio Transcription Editor</title>
|
||||
|
||||
<!-- External CSS Libraries -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--accent-primary: #667eea;
|
||||
--accent-secondary: #764ba2;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
||||
color: white;
|
||||
padding: 40px 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.login-body {
|
||||
padding: 40px 30px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background: #f9fafb;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-right: none;
|
||||
border-radius: 12px 0 0 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.input-group .form-control {
|
||||
border-radius: 0 12px 12px 0;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.input-group:focus-within .input-group-text {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
width: 100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-login:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-login:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.version-badge {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<div class="login-icon">
|
||||
<i class="bi bi-soundwave"></i>
|
||||
</div>
|
||||
<h1>Audio Transcription Editor</h1>
|
||||
<p>Sign in to access your projects</p>
|
||||
</div>
|
||||
|
||||
<div class="login-body">
|
||||
<div id="errorAlert" class="alert alert-danger d-none" role="alert">
|
||||
<i class="bi bi-exclamation-circle me-2"></i>
|
||||
<span id="errorMessage"></span>
|
||||
</div>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
||||
<input type="text" class="form-control" id="username" placeholder="Enter your username" required autofocus>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Password</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
||||
<input type="password" class="form-control" id="password" placeholder="Enter your password" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-login" id="loginBtn">
|
||||
<span id="loginText">Sign In</span>
|
||||
<span id="loginSpinner" class="d-none">
|
||||
<span class="spinner-border spinner-border-sm me-2"></span>
|
||||
Signing in...
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="version-badge">
|
||||
<i class="bi bi-shield-lock me-1"></i> Secure Login • Kokoro AI Edition
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('loginForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const username = document.getElementById('username').value.trim();
|
||||
const password = document.getElementById('password').value;
|
||||
const loginBtn = document.getElementById('loginBtn');
|
||||
const loginText = document.getElementById('loginText');
|
||||
const loginSpinner = document.getElementById('loginSpinner');
|
||||
const errorAlert = document.getElementById('errorAlert');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
|
||||
// Show loading state
|
||||
loginBtn.disabled = true;
|
||||
loginText.classList.add('d-none');
|
||||
loginSpinner.classList.remove('d-none');
|
||||
errorAlert.classList.add('d-none');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
// Redirect to main app
|
||||
window.location.href = '/';
|
||||
} else {
|
||||
// Show error
|
||||
errorMessage.textContent = data.error || 'Login failed. Please try again.';
|
||||
errorAlert.classList.remove('d-none');
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage.textContent = 'Connection error. Please try again.';
|
||||
errorAlert.classList.remove('d-none');
|
||||
} finally {
|
||||
// Reset button state
|
||||
loginBtn.disabled = false;
|
||||
loginText.classList.remove('d-none');
|
||||
loginSpinner.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
// Focus username field on load
|
||||
document.getElementById('username').focus();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user