diff --git a/api/main.py b/api/main.py
index 692b0e1..7da84d0 100644
--- a/api/main.py
+++ b/api/main.py
@@ -3,6 +3,7 @@ Mailing List Management API
FastAPI-based REST API for managing mailing lists and members
"""
from fastapi import FastAPI, HTTPException, Depends, Header
+from fastapi.middleware.cors import CORSMiddleware
from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
from pydantic import BaseModel, EmailStr
from typing import List, Optional
@@ -26,6 +27,15 @@ app = FastAPI(
version="1.0.0"
)
+# Add CORS middleware
+app.add_middleware(
+ CORSMiddleware,
+ allow_origins=["*"], # In production, specify your frontend domain
+ allow_credentials=True,
+ allow_methods=["*"],
+ allow_headers=["*"],
+)
+
security = HTTPBearer()
# Database connection
diff --git a/docker-compose.yaml b/docker-compose.yaml
index f3d1423..5667de8 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -48,5 +48,15 @@ services:
networks:
- maillist-internal
+ web:
+ build: ./web
+ container_name: maillist-web
+ depends_on:
+ - api
+ ports:
+ - "3000:80"
+ networks:
+ - maillist-internal
+
volumes:
mysql_data:
diff --git a/web/Dockerfile b/web/Dockerfile
new file mode 100644
index 0000000..00acdee
--- /dev/null
+++ b/web/Dockerfile
@@ -0,0 +1,14 @@
+# Use nginx to serve the static files
+FROM nginx:alpine
+
+# Copy the web files to nginx html directory
+COPY . /usr/share/nginx/html/
+
+# Copy custom nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/web/README.md b/web/README.md
new file mode 100644
index 0000000..336a5c0
--- /dev/null
+++ b/web/README.md
@@ -0,0 +1,127 @@
+# Web Frontend for Mailing List Manager
+
+This directory contains the web frontend for the Mailing List Manager - a clean, modern web interface for managing mailing lists and members.
+
+## Features
+
+- 🔐 **Token-based Authentication** - Secure access using API tokens
+- 📧 **Mailing List Management** - Create, edit, and delete mailing lists
+- 👥 **Member Management** - Add, edit, and remove members
+- 🔗 **Subscription Management** - Subscribe/unsubscribe members to/from lists
+- 📱 **Responsive Design** - Works on desktop, tablet, and mobile devices
+- 🎨 **Clean UI** - Modern, professional interface with intuitive navigation
+- ⚡ **Real-time Updates** - Immediate feedback and data refresh
+
+## Architecture
+
+### Frontend Stack
+- **HTML5** - Semantic markup with accessibility features
+- **CSS3** - Modern styling with CSS Grid/Flexbox and custom properties
+- **Vanilla JavaScript** - No frameworks, just clean ES6+ code
+- **Nginx** - Static file serving with compression and caching
+
+### File Structure
+```
+web/
+├── index.html # Main HTML interface
+├── static/
+│ ├── css/
+│ │ └── style.css # Complete styling system
+│ └── js/
+│ ├── api.js # API client for backend communication
+│ ├── ui.js # UI helpers and modal management
+│ └── app.js # Main application controller
+├── Dockerfile # Container configuration
+├── nginx.conf # Nginx server configuration
+└── README.md # This file
+```
+
+## Usage
+
+### Development
+1. Ensure the API is running on port 8000
+2. Open `index.html` in a web browser
+3. Enter your API token to authenticate
+4. Start managing your mailing lists!
+
+### Production (Docker)
+The web frontend is served using Nginx and included in the Docker Compose setup.
+
+```bash
+# Build and start all services
+docker-compose up --build
+
+# Access the web interface
+open http://localhost:3000
+```
+
+## Features Overview
+
+### Authentication
+- Secure token-based authentication
+- Token persistence in browser storage
+- Automatic logout on authentication errors
+
+### Mailing Lists
+- View all mailing lists in a clean table
+- Create new lists with name, email, and description
+- Edit existing list details
+- Delete lists with confirmation
+- View member count for each list
+- Status indicators (Active/Inactive)
+
+### Members
+- View all members with their details
+- Add new members with name and email
+- Edit member information
+- Delete members with confirmation
+- See which lists each member is subscribed to
+- Status management
+
+### Subscriptions
+- Visual subscription management interface
+- Add members to mailing lists
+- Remove members from lists
+- See all subscriptions organized by list
+- Quick unsubscribe functionality
+
+### User Experience
+- **Responsive Design** - Works seamlessly on all device sizes
+- **Loading States** - Visual feedback during API operations
+- **Error Handling** - Clear error messages and graceful degradation
+- **Notifications** - Success/error notifications with auto-dismiss
+- **Confirmation Dialogs** - Prevent accidental deletions
+- **Keyboard Shortcuts** - Enter key support in forms
+- **Accessibility** - Semantic HTML and ARIA labels
+
+## API Integration
+
+The frontend communicates with the FastAPI backend through a comprehensive API client:
+
+- **Authentication** - Bearer token authentication
+- **Error Handling** - Automatic error parsing and user-friendly messages
+- **Loading States** - Integrated loading indicators
+- **Data Validation** - Client-side form validation before API calls
+
+## Customization
+
+### Styling
+The CSS uses CSS custom properties (variables) for easy theming:
+
+```css
+:root {
+ --primary-color: #2563eb;
+ --success-color: #10b981;
+ --danger-color: #ef4444;
+ /* ... more variables */
+}
+```
+
+### Configuration
+The API client automatically detects the backend URL based on the current hostname and can be configured for different environments.
+
+## Browser Support
+
+- Modern browsers (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+)
+- Mobile browsers (iOS Safari 12+, Chrome Mobile 60+)
+- Progressive enhancement for older browsers
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..320f4ec
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,271 @@
+
+
+
+ Mailing List Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name
+ Email
+ Description
+ Members
+ Status
+ Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name
+ Email
+ Lists
+ Status
+ Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Are you sure you want to perform this action?
+
+
+ Cancel
+ Confirm
+
+
+
+
+ No mailing lists found. Create your first list
+
+
+ `;
+
+ document.getElementById('createFirstList').addEventListener('click', (e) => {
+ e.preventDefault();
+ uiManager.showListModal();
+ });
+ return;
+ }
+
+ this.lists.forEach(list => {
+ const row = document.createElement('tr');
+ const memberCount = this.subscriptions.get(list.list_id)?.length || 0;
+
+ row.innerHTML = `
+
+ ${uiManager.escapeHtml(list.list_name)}
+
+
+
+ ${uiManager.escapeHtml(list.list_email)}
+
+
+
+
+ ${list.description ? uiManager.escapeHtml(list.description) : 'No description '}
+
+
+
+ ${memberCount}
+ ${memberCount === 1 ? 'member' : 'members'}
+
+
+
+
+ `;
+
+ // Add status badge
+ const statusCell = row.cells[4];
+ statusCell.appendChild(uiManager.createStatusBadge(list.active));
+
+ // Add action buttons
+ const actionsCell = row.cells[5].querySelector('.action-buttons');
+
+ 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);
+ tbody.appendChild(row);
+ });
+ }
+
+ /**
+ * Render members table
+ */
+ renderMembers() {
+ const tbody = document.getElementById('membersTableBody');
+ tbody.innerHTML = '';
+
+ if (this.members.length === 0) {
+ tbody.innerHTML = `
+
+
+ No members found. Add your first member
+
+
+ `;
+
+ document.getElementById('createFirstMember').addEventListener('click', (e) => {
+ e.preventDefault();
+ uiManager.showMemberModal();
+ });
+ return;
+ }
+
+ this.members.forEach(member => {
+ const row = document.createElement('tr');
+
+ // Find lists this member belongs to
+ const memberLists = [];
+ this.subscriptions.forEach((members, listId) => {
+ if (members.some(m => m.member_id === member.member_id)) {
+ const list = this.lists.find(l => l.list_id === listId);
+ if (list) {
+ memberLists.push(list.list_name);
+ }
+ }
+ });
+
+ row.innerHTML = `
+
+ ${uiManager.escapeHtml(member.name)}
+
+
+
+ ${uiManager.escapeHtml(member.email)}
+
+
+
+
+ ${memberLists.length > 0
+ ? memberLists.map(name => `${uiManager.escapeHtml(name)} `).join(', ')
+ : 'No subscriptions '
+ }
+
+
+
+
+
+ `;
+
+ // Add status badge
+ const statusCell = row.cells[3];
+ statusCell.appendChild(uiManager.createStatusBadge(member.active));
+
+ // Add action buttons
+ const actionsCell = row.cells[4].querySelector('.action-buttons');
+
+ 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(editBtn);
+ actionsCell.appendChild(deleteBtn);
+ tbody.appendChild(row);
+ });
+ }
+
+ /**
+ * Render subscriptions view
+ */
+ renderSubscriptions() {
+ const container = document.getElementById('subscriptionsGrid');
+ container.innerHTML = '';
+
+ if (this.lists.length === 0) {
+ container.innerHTML = `
+
+
No mailing lists available.
+
+
+
+
No members subscribed to this list.
+
+
${uiManager.escapeHtml(member.name)}
+
${uiManager.escapeHtml(member.email)}
+
+
+ `;
+
+ // Add unsubscribe functionality
+ const unsubscribeBtn = memberItem.querySelector('.btn-danger');
+ unsubscribeBtn.addEventListener('click', () => {
+ uiManager.showConfirmation(
+ `Unsubscribe ${member.name} from ${list.list_name}?`,
+ async () => {
+ await this.unsubscribeMember(list.list_email, member.email);
+ }
+ );
+ });
+
+ membersList.appendChild(memberItem);
+ });
+ }
+
+ container.appendChild(listCard);
+ });
+ }
+
+ /**
+ * Delete a mailing list
+ */
+ async deleteList(listId) {
+ try {
+ uiManager.setLoading(true);
+ await apiClient.deleteList(listId);
+ uiManager.showNotification('Mailing list deleted successfully', 'success');
+ await this.loadData();
+ } catch (error) {
+ uiManager.handleError(error, 'Failed to delete mailing list');
+ } finally {
+ uiManager.setLoading(false);
+ }
+ }
+
+ /**
+ * Delete a member
+ */
+ async deleteMember(memberId) {
+ try {
+ uiManager.setLoading(true);
+ await apiClient.deleteMember(memberId);
+ uiManager.showNotification('Member deleted successfully', 'success');
+ await this.loadData();
+ } catch (error) {
+ uiManager.handleError(error, 'Failed to delete member');
+ } finally {
+ uiManager.setLoading(false);
+ }
+ }
+
+ /**
+ * Unsubscribe member from list
+ */
+ async unsubscribeMember(listEmail, memberEmail) {
+ try {
+ uiManager.setLoading(true);
+ await apiClient.deleteSubscription(listEmail, memberEmail);
+ uiManager.showNotification('Member unsubscribed successfully', 'success');
+ await this.loadData();
+ } catch (error) {
+ uiManager.handleError(error, 'Failed to unsubscribe member');
+ } finally {
+ uiManager.setLoading(false);
+ }
+ }
+}
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+ window.app = new MailingListApp();
+});
\ No newline at end of file
diff --git a/web/static/js/ui.js b/web/static/js/ui.js
new file mode 100644
index 0000000..5034734
--- /dev/null
+++ b/web/static/js/ui.js
@@ -0,0 +1,462 @@
+/**
+ * UI Helper Functions and Components
+ * Handles DOM manipulation, notifications, modals, and UI state
+ */
+
+class UIManager {
+ constructor() {
+ this.currentTab = 'lists';
+ this.currentEditingItem = null;
+ this.isLoading = false;
+ this.confirmCallback = null;
+
+ this.initializeEventListeners();
+ }
+
+ /**
+ * Initialize all event listeners
+ */
+ initializeEventListeners() {
+ // Tab navigation
+ document.querySelectorAll('.tab-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ this.switchTab(e.target.dataset.tab);
+ });
+ });
+
+ // Modal close buttons
+ document.querySelectorAll('.modal-close, .modal .btn-secondary').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ this.closeModal(e.target.closest('.modal'));
+ });
+ });
+
+ // Click outside modal to close
+ document.querySelectorAll('.modal').forEach(modal => {
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ this.closeModal(modal);
+ }
+ });
+ });
+
+ // Notification close
+ document.getElementById('notificationClose').addEventListener('click', () => {
+ this.hideNotification();
+ });
+
+ // Add buttons
+ document.getElementById('addListBtn').addEventListener('click', () => {
+ this.showListModal();
+ });
+
+ document.getElementById('addMemberBtn').addEventListener('click', () => {
+ this.showMemberModal();
+ });
+
+ document.getElementById('addSubscriptionBtn').addEventListener('click', () => {
+ this.showSubscriptionModal();
+ });
+
+ // Form submissions
+ document.getElementById('listForm').addEventListener('submit', (e) => {
+ e.preventDefault();
+ this.handleListFormSubmit();
+ });
+
+ document.getElementById('memberForm').addEventListener('submit', (e) => {
+ e.preventDefault();
+ this.handleMemberFormSubmit();
+ });
+
+ document.getElementById('subscriptionForm').addEventListener('submit', (e) => {
+ e.preventDefault();
+ this.handleSubscriptionFormSubmit();
+ });
+
+ // Confirmation modal
+ document.getElementById('confirmOkBtn').addEventListener('click', () => {
+ if (this.confirmCallback) {
+ this.confirmCallback();
+ this.confirmCallback = null;
+ }
+ this.closeModal(document.getElementById('confirmModal'));
+ });
+
+ document.getElementById('confirmCancelBtn').addEventListener('click', () => {
+ this.confirmCallback = null;
+ this.closeModal(document.getElementById('confirmModal'));
+ });
+ }
+
+ /**
+ * Show/hide loading overlay
+ */
+ setLoading(loading) {
+ this.isLoading = loading;
+ const overlay = document.getElementById('loadingOverlay');
+ if (loading) {
+ overlay.style.display = 'flex';
+ } else {
+ overlay.style.display = 'none';
+ }
+ }
+
+ /**
+ * Show notification
+ */
+ showNotification(message, type = 'info') {
+ const notification = document.getElementById('notification');
+ const messageEl = document.getElementById('notificationMessage');
+
+ notification.className = `notification ${type}`;
+ messageEl.textContent = message;
+ notification.style.display = 'flex';
+
+ // Auto-hide after 5 seconds
+ setTimeout(() => {
+ this.hideNotification();
+ }, 5000);
+ }
+
+ /**
+ * Hide notification
+ */
+ hideNotification() {
+ document.getElementById('notification').style.display = 'none';
+ }
+
+ /**
+ * Show confirmation dialog
+ */
+ showConfirmation(message, callback) {
+ document.getElementById('confirmMessage').textContent = message;
+ this.confirmCallback = callback;
+ this.showModal(document.getElementById('confirmModal'));
+ }
+
+ /**
+ * Switch between tabs
+ */
+ switchTab(tabName) {
+ this.currentTab = tabName;
+
+ // Update tab buttons
+ document.querySelectorAll('.tab-btn').forEach(btn => {
+ btn.classList.toggle('active', btn.dataset.tab === tabName);
+ });
+
+ // Update tab content
+ document.querySelectorAll('.tab-content').forEach(content => {
+ content.classList.toggle('active', content.id === `${tabName}-tab`);
+ });
+ }
+
+ /**
+ * Show modal
+ */
+ showModal(modal) {
+ modal.classList.add('active');
+ // Focus first input
+ const firstInput = modal.querySelector('input, select, textarea');
+ if (firstInput) {
+ setTimeout(() => firstInput.focus(), 100);
+ }
+ }
+
+ /**
+ * Close modal
+ */
+ closeModal(modal) {
+ modal.classList.remove('active');
+ this.currentEditingItem = null;
+
+ // Reset forms
+ const form = modal.querySelector('form');
+ if (form) {
+ form.reset();
+ }
+ }
+
+ /**
+ * Show list modal (add/edit)
+ */
+ showListModal(listData = null) {
+ const modal = document.getElementById('listModal');
+ const title = document.getElementById('listModalTitle');
+ const form = document.getElementById('listForm');
+
+ if (listData) {
+ // Edit mode
+ title.textContent = 'Edit Mailing List';
+ document.getElementById('listName').value = listData.list_name;
+ document.getElementById('listEmail').value = listData.list_email;
+ document.getElementById('listDescription').value = listData.description || '';
+ document.getElementById('listActive').checked = listData.active;
+ this.currentEditingItem = listData;
+ } else {
+ // Add mode
+ title.textContent = 'Add Mailing List';
+ form.reset();
+ document.getElementById('listActive').checked = true;
+ this.currentEditingItem = null;
+ }
+
+ this.showModal(modal);
+ }
+
+ /**
+ * Show member modal (add/edit)
+ */
+ showMemberModal(memberData = null) {
+ const modal = document.getElementById('memberModal');
+ const title = document.getElementById('memberModalTitle');
+ const form = document.getElementById('memberForm');
+
+ if (memberData) {
+ // Edit mode
+ title.textContent = 'Edit Member';
+ document.getElementById('memberName').value = memberData.name;
+ document.getElementById('memberEmail').value = memberData.email;
+ document.getElementById('memberActive').checked = memberData.active;
+ this.currentEditingItem = memberData;
+ } else {
+ // Add mode
+ title.textContent = 'Add Member';
+ form.reset();
+ document.getElementById('memberActive').checked = true;
+ this.currentEditingItem = null;
+ }
+
+ this.showModal(modal);
+ }
+
+ /**
+ * Show subscription modal
+ */
+ async showSubscriptionModal() {
+ const modal = document.getElementById('subscriptionModal');
+
+ try {
+ // Populate dropdowns
+ await this.populateSubscriptionDropdowns();
+ this.showModal(modal);
+ } catch (error) {
+ this.showNotification('Failed to load subscription data', 'error');
+ }
+ }
+
+ /**
+ * Populate subscription modal dropdowns
+ */
+ async populateSubscriptionDropdowns() {
+ const listSelect = document.getElementById('subscriptionList');
+ const memberSelect = document.getElementById('subscriptionMember');
+
+ // Clear existing options
+ listSelect.innerHTML = 'Select a list... ';
+ memberSelect.innerHTML = 'Select a member... ';
+
+ try {
+ const [lists, members] = await Promise.all([
+ apiClient.getLists(),
+ apiClient.getMembers()
+ ]);
+
+ // Populate lists
+ lists.forEach(list => {
+ if (list.active) {
+ const option = document.createElement('option');
+ option.value = list.list_email;
+ option.textContent = `${list.list_name} (${list.list_email})`;
+ listSelect.appendChild(option);
+ }
+ });
+
+ // Populate members
+ members.forEach(member => {
+ if (member.active) {
+ const option = document.createElement('option');
+ option.value = member.email;
+ option.textContent = `${member.name} (${member.email})`;
+ memberSelect.appendChild(option);
+ }
+ });
+ } catch (error) {
+ throw error;
+ }
+ }
+
+ /**
+ * Handle list form submission
+ */
+ async handleListFormSubmit() {
+ const form = document.getElementById('listForm');
+ const formData = new FormData(form);
+
+ const listData = {
+ list_name: formData.get('listName'),
+ list_email: formData.get('listEmail'),
+ description: formData.get('listDescription') || null,
+ active: formData.get('listActive') === 'on'
+ };
+
+ try {
+ this.setLoading(true);
+
+ if (this.currentEditingItem) {
+ // Update existing list
+ await apiClient.updateList(this.currentEditingItem.list_id, listData);
+ this.showNotification('Mailing list updated successfully', 'success');
+ } else {
+ // Create new list
+ await apiClient.createList(listData);
+ this.showNotification('Mailing list created successfully', 'success');
+ }
+
+ this.closeModal(document.getElementById('listModal'));
+ await window.app.loadData();
+ } catch (error) {
+ this.handleError(error, 'Failed to save mailing list');
+ } finally {
+ this.setLoading(false);
+ }
+ }
+
+ /**
+ * Handle member form submission
+ */
+ async handleMemberFormSubmit() {
+ const form = document.getElementById('memberForm');
+ const formData = new FormData(form);
+
+ const memberData = {
+ name: formData.get('memberName'),
+ email: formData.get('memberEmail'),
+ active: formData.get('memberActive') === 'on'
+ };
+
+ try {
+ this.setLoading(true);
+
+ if (this.currentEditingItem) {
+ // Update existing member
+ await apiClient.updateMember(this.currentEditingItem.member_id, memberData);
+ this.showNotification('Member updated successfully', 'success');
+ } else {
+ // Create new member
+ await apiClient.createMember(memberData);
+ this.showNotification('Member created successfully', 'success');
+ }
+
+ this.closeModal(document.getElementById('memberModal'));
+ await window.app.loadData();
+ } catch (error) {
+ this.handleError(error, 'Failed to save member');
+ } finally {
+ this.setLoading(false);
+ }
+ }
+
+ /**
+ * Handle subscription form submission
+ */
+ async handleSubscriptionFormSubmit() {
+ const form = document.getElementById('subscriptionForm');
+ const formData = new FormData(form);
+
+ const subscriptionData = {
+ list_email: formData.get('subscriptionList'),
+ member_email: formData.get('subscriptionMember'),
+ active: true
+ };
+
+ try {
+ this.setLoading(true);
+
+ await apiClient.createSubscription(subscriptionData);
+ this.showNotification('Subscription created successfully', 'success');
+
+ this.closeModal(document.getElementById('subscriptionModal'));
+ await window.app.loadData();
+ } catch (error) {
+ this.handleError(error, 'Failed to create subscription');
+ } finally {
+ this.setLoading(false);
+ }
+ }
+
+ /**
+ * Handle API errors
+ */
+ handleError(error, defaultMessage = 'An error occurred') {
+ let message = defaultMessage;
+
+ if (error instanceof APIError) {
+ if (error.isAuthError()) {
+ message = 'Authentication failed. Please check your API token.';
+ window.app.logout();
+ } else if (error.isBadRequest()) {
+ message = error.message || 'Invalid request data';
+ } else if (error.isNotFound()) {
+ message = 'Resource not found';
+ } else if (error.isServerError()) {
+ message = 'Server error. Please try again later.';
+ } else {
+ message = error.message || defaultMessage;
+ }
+ } else {
+ message = error.message || defaultMessage;
+ }
+
+ this.showNotification(message, 'error');
+ console.error('Error:', error);
+ }
+
+ /**
+ * Create action button
+ */
+ createActionButton(text, icon, className, onClick) {
+ const button = document.createElement('button');
+ button.className = `btn btn-sm ${className}`;
+ button.innerHTML = `