diff --git a/web/static/css/style.css b/web/static/css/style.css
index 8121ff5..9ca10da 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -145,6 +145,25 @@ body {
gap: var(--space-3);
}
+.user-details {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: var(--space-1);
+}
+
+.user-name {
+ font-weight: 500;
+ font-size: var(--font-size-sm);
+ color: var(--gray-900);
+}
+
+.user-role {
+ font-size: var(--font-size-xs);
+ color: var(--gray-500);
+ text-transform: capitalize;
+}
+
.status-indicator {
display: flex;
align-items: center;
@@ -402,6 +421,32 @@ body {
color: var(--gray-600);
}
+/* Role badges */
+.role-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: var(--space-1) var(--space-2);
+ border-radius: var(--radius-sm);
+ font-size: var(--font-size-xs);
+ font-weight: 500;
+ text-transform: capitalize;
+}
+
+.role-badge.role-administrator {
+ background: #fef3c7;
+ color: #92400e;
+}
+
+.role-badge.role-operator {
+ background: #dbeafe;
+ color: #1e40af;
+}
+
+.role-badge.role-read-only {
+ background: var(--gray-100);
+ color: var(--gray-600);
+}
+
/* Action buttons in tables */
.action-buttons {
display: flex;
diff --git a/web/static/js/api.js b/web/static/js/api.js
index 3af37e3..7fac118 100644
--- a/web/static/js/api.js
+++ b/web/static/js/api.js
@@ -104,6 +104,63 @@ class APIClient {
return this.request('/');
}
+ // Authentication API
+ async login(username, password) {
+ const response = await this.request('/auth/login', {
+ method: 'POST',
+ body: JSON.stringify({
+ username: username,
+ password: password
+ })
+ });
+
+ if (response.access_token) {
+ this.setToken(response.access_token);
+ }
+
+ return response;
+ }
+
+ async logout() {
+ try {
+ await this.request('/auth/logout', {
+ method: 'POST'
+ });
+ } catch (error) {
+ // Ignore logout errors, we'll clear the token anyway
+ }
+ this.clearToken();
+ }
+
+ async getCurrentUser() {
+ return this.request('/auth/me');
+ }
+
+ // User management API
+ async getUsers() {
+ return this.request('/users');
+ }
+
+ async createUser(userData) {
+ return this.request('/users', {
+ method: 'POST',
+ body: JSON.stringify(userData)
+ });
+ }
+
+ async updateUser(userId, userData) {
+ return this.request(`/users/${userId}`, {
+ method: 'PATCH',
+ body: JSON.stringify(userData)
+ });
+ }
+
+ async deleteUser(userId) {
+ return this.request(`/users/${userId}`, {
+ method: 'DELETE'
+ });
+ }
+
// Mailing Lists API
async getLists() {
return this.request('/lists');
diff --git a/web/static/js/app.js b/web/static/js/app.js
index 652cf4e..d234f3a 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -6,8 +6,10 @@
class MailingListApp {
constructor() {
this.isAuthenticated = false;
+ this.currentUser = null;
this.lists = [];
this.members = [];
+ this.users = [];
this.subscriptions = new Map(); // list_id -> members[]
this.initializeApp();
@@ -20,9 +22,10 @@ class MailingListApp {
this.setupEventListeners();
// Check for saved token
- const savedToken = localStorage.getItem('apiToken');
+ const savedToken = localStorage.getItem('authToken');
if (savedToken) {
- await this.login(savedToken, false);
+ apiClient.setToken(savedToken);
+ await this.checkCurrentUser();
}
}
@@ -39,8 +42,14 @@ class MailingListApp {
this.logout();
});
- // Enter key in token input
- document.getElementById('apiToken').addEventListener('keypress', (e) => {
+ // Enter key in login inputs
+ document.getElementById('username').addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ this.handleLogin();
+ }
+ });
+
+ document.getElementById('password').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.handleLogin();
}
@@ -50,54 +59,72 @@ class MailingListApp {
document.getElementById('showBulkImportBtn').addEventListener('click', () => {
uiManager.showBulkImportModal();
});
+
+ // Add user button (admin only)
+ document.getElementById('addUserBtn').addEventListener('click', () => {
+ uiManager.showUserModal();
+ });
+ }
+
+ /**
+ * Check if current user is still valid
+ */
+ async checkCurrentUser() {
+ try {
+ const user = await apiClient.getCurrentUser();
+ this.currentUser = user;
+ this.isAuthenticated = true;
+ this.showAuthenticatedUI();
+ await this.loadData();
+ } catch (error) {
+ // Token is invalid, clear it
+ this.logout();
+ }
}
/**
* Handle login button click
*/
async handleLogin() {
- const tokenInput = document.getElementById('apiToken');
- const token = tokenInput.value.trim();
+ const usernameInput = document.getElementById('username');
+ const passwordInput = document.getElementById('password');
+ const username = usernameInput.value.trim();
+ const password = passwordInput.value.trim();
- if (!token) {
- uiManager.showNotification('Please enter an API token', 'error');
+ if (!username || !password) {
+ uiManager.showNotification('Please enter both username and password', 'error');
return;
}
- await this.login(token, true);
+ await this.login(username, password);
}
/**
* Authenticate with API
*/
- async login(token, saveToken = true) {
+ async login(username, password) {
try {
uiManager.setLoading(true);
- // Set token and test authentication
- apiClient.setToken(token);
- await apiClient.testAuth();
-
- // Authentication successful
+ // Login and get token
+ const response = await apiClient.login(username, password);
+ this.currentUser = response.user;
this.isAuthenticated = true;
- if (saveToken) {
- localStorage.setItem('apiToken', token);
- }
+ // Save token
+ localStorage.setItem('authToken', response.access_token);
this.showAuthenticatedUI();
await this.loadData();
- uiManager.showNotification('Successfully connected to API', 'success');
+ uiManager.showNotification(`Welcome back, ${this.currentUser.username}!`, 'success');
} catch (error) {
this.isAuthenticated = false;
+ this.currentUser = null;
apiClient.clearToken();
+ localStorage.removeItem('authToken');
- if (saveToken) {
- localStorage.removeItem('apiToken');
- }
-
- uiManager.handleError(error, 'Authentication failed');
+ uiManager.handleError(error, 'Login failed');
} finally {
uiManager.setLoading(false);
}
@@ -106,10 +133,17 @@ class MailingListApp {
/**
* Logout
*/
- logout() {
+ async logout() {
+ try {
+ await apiClient.logout();
+ } catch (error) {
+ // Ignore logout errors
+ }
+
this.isAuthenticated = false;
+ this.currentUser = null;
apiClient.clearToken();
- localStorage.removeItem('apiToken');
+ localStorage.removeItem('authToken');
this.showUnauthenticatedUI();
uiManager.showNotification('Logged out successfully', 'info');
@@ -123,8 +157,23 @@ class MailingListApp {
document.getElementById('userInfo').style.display = 'flex';
document.getElementById('mainContent').style.display = 'block';
- // Clear token input
- document.getElementById('apiToken').value = '';
+ // Clear login inputs
+ document.getElementById('username').value = '';
+ document.getElementById('password').value = '';
+
+ // Update user info display
+ if (this.currentUser) {
+ document.getElementById('currentUsername').textContent = this.currentUser.username;
+ document.getElementById('currentUserRole').textContent = this.currentUser.role;
+
+ // Show/hide admin-only features
+ const isAdmin = this.currentUser.role === 'administrator';
+ document.getElementById('usersTab').style.display = isAdmin ? 'block' : 'none';
+
+ // Show/hide write access features
+ const hasWriteAccess = this.currentUser.role === 'administrator' || this.currentUser.role === 'operator';
+ this.updateUIForPermissions(hasWriteAccess);
+ }
}
/**
@@ -136,6 +185,22 @@ class MailingListApp {
document.getElementById('mainContent').style.display = 'none';
}
+ /**
+ * Update UI elements based on user permissions
+ */
+ updateUIForPermissions(hasWriteAccess) {
+ // Disable/enable write action buttons
+ const writeButtons = document.querySelectorAll('[data-requires-write]');
+ writeButtons.forEach(button => {
+ button.style.display = hasWriteAccess ? '' : 'none';
+ });
+
+ // Update button attributes for later reference
+ document.getElementById('addListBtn').setAttribute('data-requires-write', '');
+ document.getElementById('addMemberBtn').setAttribute('data-requires-write', '');
+ document.getElementById('showBulkImportBtn').setAttribute('data-requires-write', '');
+ }
+
/**
* Load all data from API
*/
@@ -154,12 +219,25 @@ class MailingListApp {
this.lists = lists;
this.members = members;
+ // Load users if admin
+ if (this.currentUser && this.currentUser.role === 'administrator') {
+ try {
+ this.users = await apiClient.getUsers();
+ } catch (error) {
+ console.warn('Failed to load users:', error);
+ this.users = [];
+ }
+ }
+
// Load subscriptions for each list
await this.loadSubscriptions();
// Render all views
this.renderLists();
this.renderMembers();
+ if (this.currentUser && this.currentUser.role === 'administrator') {
+ this.renderUsers();
+ }
} catch (error) {
uiManager.handleError(error, 'Failed to load data');
@@ -210,6 +288,8 @@ class MailingListApp {
return;
}
+ const hasWriteAccess = this.currentUser && (this.currentUser.role === 'administrator' || this.currentUser.role === 'operator');
+
this.lists.forEach(list => {
const row = document.createElement('tr');
const memberCount = this.subscriptions.get(list.list_id)?.length || 0;
@@ -242,24 +322,27 @@ class MailingListApp {
const statusCell = row.cells[4];
statusCell.appendChild(uiManager.createStatusBadge(list.active));
- // Add action buttons
+ // Add action buttons only for users with write access
const actionsCell = row.cells[5].querySelector('.action-buttons');
- const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
- uiManager.showListModal(list);
- });
+ if (hasWriteAccess) {
+ const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
+ uiManager.showListModal(list);
+ });
+
+ const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
+ uiManager.showConfirmation(
+ `Are you sure you want to delete the mailing list "${list.list_name}"? This action cannot be undone.`,
+ async () => {
+ await this.deleteList(list.list_id);
+ }
+ );
+ });
+
+ actionsCell.appendChild(editBtn);
+ actionsCell.appendChild(deleteBtn);
+ }
- const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
- uiManager.showConfirmation(
- `Are you sure you want to delete the mailing list "${list.list_name}"? This action cannot be undone.`,
- async () => {
- await this.deleteList(list.list_id);
- }
- );
- });
-
- actionsCell.appendChild(editBtn);
- actionsCell.appendChild(deleteBtn);
tbody.appendChild(row);
});
}
@@ -287,6 +370,8 @@ class MailingListApp {
return;
}
+ const hasWriteAccess = this.currentUser && (this.currentUser.role === 'administrator' || this.currentUser.role === 'operator');
+
this.members.forEach(member => {
const row = document.createElement('tr');
@@ -340,23 +425,108 @@ class MailingListApp {
uiManager.showMemberSubscriptionsModal(member);
});
+ // Only show edit/delete buttons for users with write access
+ if (hasWriteAccess) {
+ const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
+ uiManager.showMemberModal(member);
+ });
+
+ const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
+ uiManager.showConfirmation(
+ `Are you sure you want to delete the member "${member.name}"? This will remove them from all mailing lists.`,
+ async () => {
+ await this.deleteMember(member.member_id);
+ }
+ );
+ });
+
+ actionsCell.appendChild(subscriptionsBtn);
+ actionsCell.appendChild(editBtn);
+ actionsCell.appendChild(deleteBtn);
+ } else {
+ actionsCell.appendChild(subscriptionsBtn);
+ }
+
+ tbody.appendChild(row);
+ });
+ }
+
+ /**
+ * Render users table (admin only)
+ */
+ renderUsers() {
+ const tbody = document.getElementById('usersTableBody');
+ tbody.innerHTML = '';
+
+ if (this.users.length === 0) {
+ tbody.innerHTML = `
+
+ |
+ No users found. Create your first user
+ |
+
+ `;
+
+ document.getElementById('createFirstUser').addEventListener('click', (e) => {
+ e.preventDefault();
+ uiManager.showUserModal();
+ });
+ return;
+ }
+
+ this.users.forEach(user => {
+ const row = document.createElement('tr');
+
+ // Format dates
+ const createdAt = new Date(user.created_at).toLocaleDateString();
+ const lastLogin = user.last_login ? new Date(user.last_login).toLocaleDateString() : 'Never';
+
+ row.innerHTML = `
+
+ ${uiManager.escapeHtml(user.username)}
+ |
+
+ ${user.role.replace('-', ' ')}
+ |
+
+ ${createdAt}
+ |
+
+ ${lastLogin}
+ |
+
|
+
+
+ |
+ `;
+
+ // Add status badge
+ const statusCell = row.cells[4];
+ statusCell.appendChild(uiManager.createStatusBadge(user.active));
+
+ // Add action buttons
+ const actionsCell = row.cells[5].querySelector('.action-buttons');
+
const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
- uiManager.showMemberModal(member);
+ uiManager.showUserModal(user);
});
- const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
- uiManager.showConfirmation(
- `Are you sure you want to delete the member "${member.name}"? This will remove them from all mailing lists.`,
- async () => {
- await this.deleteMember(member.member_id);
- }
- );
- });
+ // Don't allow deletion of current user
+ if (user.user_id !== this.currentUser.user_id) {
+ const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
+ uiManager.showConfirmation(
+ `Are you sure you want to delete the user "${user.username}"? This action cannot be undone.`,
+ async () => {
+ await this.deleteUser(user.user_id);
+ }
+ );
+ });
+ actionsCell.appendChild(editBtn);
+ actionsCell.appendChild(deleteBtn);
+ } else {
+ actionsCell.appendChild(editBtn);
+ }
- // Append all buttons
- actionsCell.appendChild(subscriptionsBtn);
- actionsCell.appendChild(editBtn);
- actionsCell.appendChild(deleteBtn);
tbody.appendChild(row);
});
}
@@ -410,6 +580,22 @@ class MailingListApp {
uiManager.setLoading(false);
}
}
+
+ /**
+ * Delete a user
+ */
+ async deleteUser(userId) {
+ try {
+ uiManager.setLoading(true);
+ await apiClient.deleteUser(userId);
+ uiManager.showNotification('User deleted successfully', 'success');
+ await this.loadData();
+ } catch (error) {
+ uiManager.handleError(error, 'Failed to delete user');
+ } finally {
+ uiManager.setLoading(false);
+ }
+ }
}
// Initialize the application when DOM is loaded
diff --git a/web/static/js/ui.js b/web/static/js/ui.js
index 964a811..5932100 100644
--- a/web/static/js/ui.js
+++ b/web/static/js/ui.js
@@ -57,6 +57,10 @@ class UIManager {
this.showMemberModal();
});
+ document.getElementById('addUserBtn').addEventListener('click', () => {
+ this.showUserModal();
+ });
+
// Member subscriptions modal
@@ -88,6 +92,11 @@ class UIManager {
this.handleSubscriptionFormSubmit();
});
+ document.getElementById('userForm').addEventListener('submit', (e) => {
+ e.preventDefault();
+ this.handleUserFormSubmit();
+ });
+
// Confirmation modal
document.getElementById('confirmOkBtn').addEventListener('click', () => {
if (this.confirmCallback) {
@@ -245,6 +254,42 @@ class UIManager {
this.showModal(modal);
}
+ /**
+ * Show user modal (add/edit)
+ */
+ showUserModal(userData = null) {
+ const modal = document.getElementById('userModal');
+ const title = document.getElementById('userModalTitle');
+ const form = document.getElementById('userForm');
+ const passwordHelp = document.getElementById('passwordHelp');
+ const passwordField = document.getElementById('userPassword');
+
+ if (userData) {
+ // Edit mode
+ title.textContent = 'Edit User';
+ document.getElementById('userName').value = userData.username;
+ document.getElementById('userName').readOnly = true; // Can't change username
+ passwordField.placeholder = 'Leave blank to keep current password';
+ passwordField.required = false;
+ passwordHelp.style.display = 'block';
+ document.getElementById('userRole').value = userData.role;
+ document.getElementById('userActive').checked = userData.active;
+ this.currentEditingItem = userData;
+ } else {
+ // Add mode
+ title.textContent = 'Add User';
+ form.reset();
+ document.getElementById('userName').readOnly = false;
+ passwordField.placeholder = 'Password';
+ passwordField.required = true;
+ passwordHelp.style.display = 'none';
+ document.getElementById('userActive').checked = true;
+ this.currentEditingItem = null;
+ }
+
+ this.showModal(modal);
+ }
+
/**
* Show subscription modal
*/
@@ -400,6 +445,50 @@ class UIManager {
}
}
+ /**
+ * Handle user form submission
+ */
+ async handleUserFormSubmit() {
+ const form = document.getElementById('userForm');
+ const formData = new FormData(form);
+
+ const userData = {
+ username: formData.get('userName'),
+ role: formData.get('userRole'),
+ active: formData.get('userActive') === 'on'
+ };
+
+ // Only include password if it's provided (for updates, empty means no change)
+ const password = formData.get('userPassword');
+ if (password) {
+ userData.password = password;
+ }
+
+ try {
+ this.setLoading(true);
+
+ if (this.currentEditingItem) {
+ // Update existing user
+ await apiClient.updateUser(this.currentEditingItem.user_id, userData);
+ this.showNotification('User updated successfully', 'success');
+ } else {
+ // Create new user
+ if (!userData.password) {
+ throw new Error('Password is required for new users');
+ }
+ await apiClient.createUser(userData);
+ this.showNotification('User created successfully', 'success');
+ }
+
+ this.closeModal(document.getElementById('userModal'));
+ await window.app.loadData();
+ } catch (error) {
+ this.handleError(error, 'Failed to save user');
+ } finally {
+ this.setLoading(false);
+ }
+ }
+
/**
* Show member subscriptions modal
*/