jamesp/sasa-maillist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added web front end

Browse Source
This commit is contained in:
James Pattinson
2025-10-12 20:55:13 +00:00
parent b8a91103e9
commit ba1bf32393
10 changed files with 2315 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
api/main.py
View File

@@ -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

10
docker-compose.yaml
View File

@@ -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:

14
web/Dockerfile Normal file
View File

@@ -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;"]

127
web/README.md Normal file
View File

@@ -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

271
web/index.html Normal file
View File

@@ -0,0 +1,271 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mailing List Manager</title>
<link rel="stylesheet" href="static/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<div class="header-content">
<h1 class="logo">
<i class="fas fa-envelope"></i>
Mailing List Manager
</h1>
<div class="auth-section">
<div class="auth-controls" id="authControls">
<input type="password" id="apiToken" placeholder="Enter API Token" class="token-input">
<button class="btn btn-primary" id="loginBtn">Login</button>
</div>
<div class="user-info" id="userInfo" style="display: none;">
<span class="status-indicator">
<i class="fas fa-check-circle"></i>
Connected
</span>
<button class="btn btn-secondary" id="logoutBtn">Logout</button>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main-content" id="mainContent" style="display: none;">
<div class="container">
<!-- Navigation Tabs -->
<nav class="tab-nav">
<button class="tab-btn active" data-tab="lists">
<i class="fas fa-list"></i>
Mailing Lists
</button>
<button class="tab-btn" data-tab="members">
<i class="fas fa-users"></i>
Members
</button>
<button class="tab-btn" data-tab="subscriptions">
<i class="fas fa-link"></i>
Subscriptions
</button>
</nav>
<!-- Notification Area -->
<div class="notification" id="notification" style="display: none;">
<span class="notification-message" id="notificationMessage"></span>
<button class="notification-close" id="notificationClose">
<i class="fas fa-times"></i>
</button>
</div>
<!-- Mailing Lists Tab -->
<div class="tab-content active" id="lists-tab">
<div class="section-header">
<h2>Mailing Lists</h2>
<button class="btn btn-primary" id="addListBtn">
<i class="fas fa-plus"></i>
Add List
</button>
</div>
<div class="data-table">
<table class="table" id="listsTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Description</th>
<th>Members</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="listsTableBody">
<!-- Dynamic content -->
</tbody>
</table>
</div>
</div>
<!-- Members Tab -->
<div class="tab-content" id="members-tab">
<div class="section-header">
<h2>Members</h2>
<button class="btn btn-primary" id="addMemberBtn">
<i class="fas fa-plus"></i>
Add Member
</button>
</div>
<div class="data-table">
<table class="table" id="membersTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Lists</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="membersTableBody">
<!-- Dynamic content -->
</tbody>
</table>
</div>
</div>
<!-- Subscriptions Tab -->
<div class="tab-content" id="subscriptions-tab">
<div class="section-header">
<h2>Manage Subscriptions</h2>
<button class="btn btn-primary" id="addSubscriptionBtn">
<i class="fas fa-plus"></i>
Add Subscription
</button>
</div>
<div class="subscriptions-grid" id="subscriptionsGrid">
<!-- Dynamic content -->
</div>
</div>
</div>
</main>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
<div class="loading-spinner">
<i class="fas fa-spinner fa-spin"></i>
<p>Loading...</p>
</div>
</div>
<!-- Modals -->
<!-- Add/Edit List Modal -->
<div class="modal" id="listModal">
<div class="modal-content">
<div class="modal-header">
<h3 id="listModalTitle">Add Mailing List</h3>
<button class="modal-close" id="listModalClose">
<i class="fas fa-times"></i>
</button>
</div>
<form id="listForm">
<div class="form-group">
<label for="listName">List Name *</label>
<input type="text" id="listName" name="listName" required>
</div>
<div class="form-group">
<label for="listEmail">List Email *</label>
<input type="email" id="listEmail" name="listEmail" required>
</div>
<div class="form-group">
<label for="listDescription">Description</label>
<textarea id="listDescription" name="listDescription" rows="3"></textarea>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="listActive" name="listActive" checked>
<span class="checkmark"></span>
Active
</label>
</div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary" id="listCancelBtn">Cancel</button>
<button type="submit" class="btn btn-primary" id="listSubmitBtn">Save</button>
</div>
</form>
</div>
</div>
<!-- Add/Edit Member Modal -->
<div class="modal" id="memberModal">
<div class="modal-content">
<div class="modal-header">
<h3 id="memberModalTitle">Add Member</h3>
<button class="modal-close" id="memberModalClose">
<i class="fas fa-times"></i>
</button>
</div>
<form id="memberForm">
<div class="form-group">
<label for="memberName">Member Name *</label>
<input type="text" id="memberName" name="memberName" required>
</div>
<div class="form-group">
<label for="memberEmail">Email Address *</label>
<input type="email" id="memberEmail" name="memberEmail" required>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="memberActive" name="memberActive" checked>
<span class="checkmark"></span>
Active
</label>
</div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary" id="memberCancelBtn">Cancel</button>
<button type="submit" class="btn btn-primary" id="memberSubmitBtn">Save</button>
</div>
</form>
</div>
</div>
<!-- Add Subscription Modal -->
<div class="modal" id="subscriptionModal">
<div class="modal-content">
<div class="modal-header">
<h3>Add Subscription</h3>
<button class="modal-close" id="subscriptionModalClose">
<i class="fas fa-times"></i>
</button>
</div>
<form id="subscriptionForm">
<div class="form-group">
<label for="subscriptionList">Mailing List *</label>
<select id="subscriptionList" name="subscriptionList" required>
<option value="">Select a list...</option>
</select>
</div>
<div class="form-group">
<label for="subscriptionMember">Member *</label>
<select id="subscriptionMember" name="subscriptionMember" required>
<option value="">Select a member...</option>
</select>
</div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary" id="subscriptionCancelBtn">Cancel</button>
<button type="submit" class="btn btn-primary">Add Subscription</button>
</div>
</form>
</div>
</div>
<!-- Confirmation Modal -->
<div class="modal" id="confirmModal">
<div class="modal-content">
<div class="modal-header">
<h3>Confirm Action</h3>
<button class="modal-close" id="confirmModalClose">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<p id="confirmMessage">Are you sure you want to perform this action?</p>
</div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary" id="confirmCancelBtn">Cancel</button>
<button type="button" class="btn btn-danger" id="confirmOkBtn">Confirm</button>
</div>
</div>
</div>
<script src="static/js/api.js"></script>
<script src="static/js/ui.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>

44
web/nginx.conf Normal file
View File

@@ -0,0 +1,44 @@
server {
listen 80;
server_name localhost;
# Cache static assets - this needs to come BEFORE the main location block
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
root /usr/share/nginx/html;
expires 1y;
add_header Cache-Control "public, no-transform";
}
# Serve static files
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
# Enable gzip compression
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied expired no-cache no-store private auth;
gzip_types
text/plain
text/css
text/xml
text/javascript
application/javascript
application/xml+rss
application/json;
# Security headers
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
# Prevent access to hidden files
location ~ /\. {
deny all;
}
}

681
web/static/css/style.css Normal file
View File

@@ -0,0 +1,681 @@
/* CSS Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Color Palette */
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--secondary-color: #64748b;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--info-color: #3b82f6;
/* Neutral Colors */
--white: #ffffff;
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
/* Border Radius */
--radius-sm: 0.375rem;
--radius: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--transition: all 0.2s ease-in-out;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--gray-800);
background-color: var(--gray-50);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-4);
}
/* Header */
.header {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4) 0;
}
.logo {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--primary-color);
display: flex;
align-items: center;
gap: var(--space-2);
}
.logo i {
font-size: var(--font-size-2xl);
}
/* Authentication */
.auth-section {
display: flex;
align-items: center;
gap: var(--space-4);
}
.auth-controls {
display: flex;
align-items: center;
gap: var(--space-3);
}
.token-input {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--gray-300);
border-radius: var(--radius);
font-size: var(--font-size-sm);
min-width: 200px;
transition: var(--transition);
}
.token-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}
.user-info {
display: flex;
align-items: center;
gap: var(--space-3);
}
.status-indicator {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--success-color);
font-size: var(--font-size-sm);
font-weight: 500;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
font-weight: 500;
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
white-space: nowrap;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
}
.btn-primary:hover:not(:disabled) {
background: var(--primary-hover);
border-color: var(--primary-hover);
}
.btn-secondary {
background: var(--white);
color: var(--gray-700);
border-color: var(--gray-300);
}
.btn-secondary:hover:not(:disabled) {
background: var(--gray-50);
border-color: var(--gray-400);
}
.btn-danger {
background: var(--danger-color);
color: var(--white);
border-color: var(--danger-color);
}
.btn-danger:hover:not(:disabled) {
background: #dc2626;
border-color: #dc2626;
}
.btn-sm {
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
}
/* Main Content */
.main-content {
padding: var(--space-6) 0;
}
/* Tab Navigation */
.tab-nav {
display: flex;
gap: var(--space-1);
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--space-1);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-8);
}
.tab-btn {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: transparent;
border: none;
border-radius: var(--radius);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--gray-600);
cursor: pointer;
transition: var(--transition);
flex: 1;
justify-content: center;
}
.tab-btn:hover {
background: var(--gray-100);
color: var(--gray-800);
}
.tab-btn.active {
background: var(--primary-color);
color: var(--white);
}
/* Tab Content */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Section Header */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-6);
}
.section-header h2 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--gray-900);
}
/* Notifications */
.notification {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4);
margin-bottom: var(--space-6);
border-radius: var(--radius);
font-weight: 500;
}
.notification.success {
background: #dcfce7;
color: #166534;
border: 1px solid #bbf7d0;
}
.notification.error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.notification.info {
background: #dbeafe;
color: #1e40af;
border: 1px solid #bfdbfe;
}
.notification-close {
background: none;
border: none;
cursor: pointer;
padding: var(--space-1);
border-radius: var(--radius-sm);
opacity: 0.7;
transition: var(--transition);
}
.notification-close:hover {
opacity: 1;
}
/* Tables */
.data-table {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th {
background: var(--gray-50);
padding: var(--space-4);
text-align: left;
font-weight: 600;
color: var(--gray-700);
border-bottom: 1px solid var(--gray-200);
font-size: var(--font-size-sm);
}
.table td {
padding: var(--space-4);
border-bottom: 1px solid var(--gray-100);
font-size: var(--font-size-sm);
}
.table tbody tr:hover {
background: var(--gray-50);
}
.table tbody tr:last-child td {
border-bottom: none;
}
/* Status badges */
.status-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 500;
}
.status-badge.active {
background: #dcfce7;
color: #166534;
}
.status-badge.inactive {
background: var(--gray-100);
color: var(--gray-600);
}
/* Action buttons in tables */
.action-buttons {
display: flex;
gap: var(--space-2);
}
/* Subscriptions Grid */
.subscriptions-grid {
display: grid;
gap: var(--space-6);
}
.subscription-list {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
}
.subscription-header {
background: var(--gray-50);
padding: var(--space-4);
border-bottom: 1px solid var(--gray-200);
}
.subscription-header h3 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--gray-900);
margin-bottom: var(--space-1);
}
.subscription-header p {
color: var(--gray-600);
font-size: var(--font-size-sm);
}
.subscription-members {
padding: var(--space-4);
}
.member-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--gray-100);
}
.member-item:last-child {
border-bottom: none;
}
.member-info {
flex: 1;
}
.member-name {
font-weight: 500;
color: var(--gray-900);
margin-bottom: var(--space-1);
}
.member-email {
color: var(--gray-600);
font-size: var(--font-size-sm);
}
/* Modals */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.modal.active {
display: flex;
}
.modal-content {
background: var(--white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-6) var(--space-6) var(--space-4);
border-bottom: 1px solid var(--gray-200);
}
.modal-header h3 {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--gray-900);
}
.modal-close {
background: none;
border: none;
cursor: pointer;
padding: var(--space-2);
border-radius: var(--radius);
color: var(--gray-400);
transition: var(--transition);
}
.modal-close:hover {
background: var(--gray-100);
color: var(--gray-600);
}
.modal-body {
padding: var(--space-4) var(--space-6);
}
.modal-actions {
display: flex;
gap: var(--space-3);
justify-content: flex-end;
padding: var(--space-4) var(--space-6) var(--space-6);
}
/* Forms */
.form-group {
margin-bottom: var(--space-5);
}
.form-group label {
display: block;
margin-bottom: var(--space-2);
font-weight: 500;
color: var(--gray-700);
font-size: var(--font-size-sm);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--space-3);
border: 1px solid var(--gray-300);
border-radius: var(--radius);
font-size: var(--font-size-sm);
transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
/* Checkbox */
.checkbox-label {
display: flex !important;
align-items: center;
gap: var(--space-2);
cursor: pointer;
font-weight: 400 !important;
}
.checkbox-label input[type="checkbox"] {
width: auto !important;
margin: 0;
}
.checkmark {
font-size: var(--font-size-sm);
}
/* Loading Overlay */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
z-index: 2000;
align-items: center;
justify-content: center;
}
.loading-overlay.active {
display: flex;
}
.loading-spinner {
text-align: center;
color: var(--primary-color);
}
.loading-spinner i {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-4);
}
.loading-spinner p {
font-weight: 500;
color: var(--gray-600);
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 0 var(--space-3);
}
.header-content {
flex-direction: column;
gap: var(--space-4);
align-items: stretch;
}
.auth-controls {
flex-direction: column;
gap: var(--space-2);
}
.token-input {
min-width: auto;
}
.tab-nav {
flex-direction: column;
}
.section-header {
flex-direction: column;
gap: var(--space-4);
align-items: stretch;
}
.table-responsive {
overflow-x: auto;
}
.table {
min-width: 600px;
}
.modal-content {
margin: var(--space-4);
max-width: calc(100vw - 2rem);
}
.modal-actions {
flex-direction: column;
}
.action-buttons {
flex-direction: column;
}
}
/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--gray-600); }
.text-sm { font-size: var(--font-size-sm); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
.hidden { display: none; }
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.3s ease-out;
}

219
web/static/js/api.js Normal file
View File

@@ -0,0 +1,219 @@
/**
* API Client for Mailing List Manager
* Handles all communication with the FastAPI backend
*/
class APIClient {
constructor() {
this.baseURL = this.getBaseURL();
this.token = null;
this.headers = {
'Content-Type': 'application/json'
};
}
/**
* Get the base URL for API calls
* Automatically detects if running in container or development
*/
getBaseURL() {
const protocol = window.location.protocol;
const hostname = window.location.hostname;
// If running on localhost, assume development mode
if (hostname === 'localhost' || hostname === '127.0.0.1') {
return `${protocol}//${hostname}:8000`;
}
// If running in production, assume API is on port 8000
return `${protocol}//${hostname}:8000`;
}
/**
* Set authentication token
*/
setToken(token) {
this.token = token;
this.headers['Authorization'] = `Bearer ${token}`;
}
/**
* Clear authentication token
*/
clearToken() {
this.token = null;
delete this.headers['Authorization'];
}
/**
* Make HTTP request to API
*/
async request(endpoint, options = {}) {
const url = `${this.baseURL}${endpoint}`;
const config = {
headers: { ...this.headers },
...options
};
try {
const response = await fetch(url, config);
// Handle different response types
if (response.status === 204) {
return null; // No content
}
const contentType = response.headers.get('content-type');
let data;
if (contentType && contentType.includes('application/json')) {
data = await response.json();
} else {
data = await response.text();
}
if (!response.ok) {
throw new APIError(
data.detail || data || `HTTP ${response.status}`,
response.status,
data
);
}
return data;
} catch (error) {
if (error instanceof APIError) {
throw error;
}
// Network or other errors
throw new APIError(
'Network error or API unavailable',
0,
{ originalError: error.message }
);
}
}
// Health and authentication methods
async checkHealth() {
return this.request('/health');
}
async testAuth() {
return this.request('/');
}
// Mailing Lists API
async getLists() {
return this.request('/lists');
}
async getList(listId) {
return this.request(`/lists/${listId}`);
}
async createList(listData) {
return this.request('/lists', {
method: 'POST',
body: JSON.stringify(listData)
});
}
async updateList(listId, listData) {
return this.request(`/lists/${listId}`, {
method: 'PATCH',
body: JSON.stringify(listData)
});
}
async deleteList(listId) {
return this.request(`/lists/${listId}`, {
method: 'DELETE'
});
}
// Members API
async getMembers() {
return this.request('/members');
}
async getMember(memberId) {
return this.request(`/members/${memberId}`);
}
async createMember(memberData) {
return this.request('/members', {
method: 'POST',
body: JSON.stringify(memberData)
});
}
async updateMember(memberId, memberData) {
return this.request(`/members/${memberId}`, {
method: 'PATCH',
body: JSON.stringify(memberData)
});
}
async deleteMember(memberId) {
return this.request(`/members/${memberId}`, {
method: 'DELETE'
});
}
// Subscriptions API
async getListMembers(listId) {
return this.request(`/lists/${listId}/members`);
}
async createSubscription(subscriptionData) {
return this.request('/subscriptions', {
method: 'POST',
body: JSON.stringify(subscriptionData)
});
}
async deleteSubscription(listEmail, memberEmail) {
const params = new URLSearchParams({
list_email: listEmail,
member_email: memberEmail
});
return this.request(`/subscriptions?${params}`, {
method: 'DELETE'
});
}
}
/**
* Custom API Error class
*/
class APIError extends Error {
constructor(message, status = 0, details = null) {
super(message);
this.name = 'APIError';
this.status = status;
this.details = details;
}
isAuthError() {
return this.status === 401;
}
isNotFound() {
return this.status === 404;
}
isBadRequest() {
return this.status === 400;
}
isServerError() {
return this.status >= 500;
}
}
// Create global API client instance
window.apiClient = new APIClient();
window.APIError = APIError;

477
web/static/js/app.js Normal file
View File

@@ -0,0 +1,477 @@
/**
* Main Application Controller
* Handles authentication, data loading, and view rendering
*/
class MailingListApp {
constructor() {
this.isAuthenticated = false;
this.lists = [];
this.members = [];
this.subscriptions = new Map(); // list_id -> members[]
this.initializeApp();
}
/**
* Initialize the application
*/
async initializeApp() {
this.setupEventListeners();
// Check for saved token
const savedToken = localStorage.getItem('apiToken');
if (savedToken) {
await this.login(savedToken, false);
}
}
/**
* Setup event listeners
*/
setupEventListeners() {
// Login/logout
document.getElementById('loginBtn').addEventListener('click', () => {
this.handleLogin();
});
document.getElementById('logoutBtn').addEventListener('click', () => {
this.logout();
});
// Enter key in token input
document.getElementById('apiToken').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.handleLogin();
}
});
}
/**
* Handle login button click
*/
async handleLogin() {
const tokenInput = document.getElementById('apiToken');
const token = tokenInput.value.trim();
if (!token) {
uiManager.showNotification('Please enter an API token', 'error');
return;
}
await this.login(token, true);
}
/**
* Authenticate with API
*/
async login(token, saveToken = true) {
try {
uiManager.setLoading(true);
// Set token and test authentication
apiClient.setToken(token);
await apiClient.testAuth();
// Authentication successful
this.isAuthenticated = true;
if (saveToken) {
localStorage.setItem('apiToken', token);
}
this.showAuthenticatedUI();
await this.loadData();
uiManager.showNotification('Successfully connected to API', 'success');
} catch (error) {
this.isAuthenticated = false;
apiClient.clearToken();
if (saveToken) {
localStorage.removeItem('apiToken');
}
uiManager.handleError(error, 'Authentication failed');
} finally {
uiManager.setLoading(false);
}
}
/**
* Logout
*/
logout() {
this.isAuthenticated = false;
apiClient.clearToken();
localStorage.removeItem('apiToken');
this.showUnauthenticatedUI();
uiManager.showNotification('Logged out successfully', 'info');
}
/**
* Show authenticated UI
*/
showAuthenticatedUI() {
document.getElementById('authControls').style.display = 'none';
document.getElementById('userInfo').style.display = 'flex';
document.getElementById('mainContent').style.display = 'block';
// Clear token input
document.getElementById('apiToken').value = '';
}
/**
* Show unauthenticated UI
*/
showUnauthenticatedUI() {
document.getElementById('authControls').style.display = 'flex';
document.getElementById('userInfo').style.display = 'none';
document.getElementById('mainContent').style.display = 'none';
}
/**
* Load all data from API
*/
async loadData() {
if (!this.isAuthenticated) return;
try {
uiManager.setLoading(true);
// Load lists and members in parallel
const [lists, members] = await Promise.all([
apiClient.getLists(),
apiClient.getMembers()
]);
this.lists = lists;
this.members = members;
// Load subscriptions for each list
await this.loadSubscriptions();
// Render all views
this.renderLists();
this.renderMembers();
this.renderSubscriptions();
} catch (error) {
uiManager.handleError(error, 'Failed to load data');
} finally {
uiManager.setLoading(false);
}
}
/**
* Load subscription data for all lists
*/
async loadSubscriptions() {
this.subscriptions.clear();
const subscriptionPromises = this.lists.map(async (list) => {
try {
const members = await apiClient.getListMembers(list.list_id);
this.subscriptions.set(list.list_id, members);
} catch (error) {
console.warn(`Failed to load members for list ${list.list_id}:`, error);
this.subscriptions.set(list.list_id, []);
}
});
await Promise.all(subscriptionPromises);
}
/**
* Render mailing lists table
*/
renderLists() {
const tbody = document.getElementById('listsTableBody');
tbody.innerHTML = '';
if (this.lists.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="6" class="text-center text-muted">
No mailing lists found. <a href="#" id="createFirstList">Create your first list</a>
</td>
</tr>
`;
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 = `
<td>
<div class="font-medium">${uiManager.escapeHtml(list.list_name)}</div>
</td>
<td>
<a href="mailto:${list.list_email}" style="color: var(--primary-color)">
${uiManager.escapeHtml(list.list_email)}
</a>
</td>
<td>
<div class="text-sm text-muted">
${list.description ? uiManager.escapeHtml(list.description) : '<em>No description</em>'}
</div>
</td>
<td>
<span class="font-medium">${memberCount}</span>
${memberCount === 1 ? 'member' : 'members'}
</td>
<td></td>
<td>
<div class="action-buttons"></div>
</td>
`;
// 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 = `
<tr>
<td colspan="5" class="text-center text-muted">
No members found. <a href="#" id="createFirstMember">Add your first member</a>
</td>
</tr>
`;
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 = `
<td>
<div class="font-medium">${uiManager.escapeHtml(member.name)}</div>
</td>
<td>
<a href="mailto:${member.email}" style="color: var(--primary-color)">
${uiManager.escapeHtml(member.email)}
</a>
</td>
<td>
<div class="text-sm">
${memberLists.length > 0
? memberLists.map(name => `<span class="text-muted">${uiManager.escapeHtml(name)}</span>`).join(', ')
: '<em class="text-muted">No subscriptions</em>'
}
</div>
</td>
<td></td>
<td>
<div class="action-buttons"></div>
</td>
`;
// 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 = `
<div class="text-center text-muted">
<p>No mailing lists available.</p>
<button class="btn btn-primary mt-4" onclick="uiManager.switchTab('lists')">
<i class="fas fa-plus"></i> Create Mailing List
</button>
</div>
`;
return;
}
this.lists.forEach(list => {
const members = this.subscriptions.get(list.list_id) || [];
const listCard = document.createElement('div');
listCard.className = 'subscription-list';
listCard.innerHTML = `
<div class="subscription-header">
<h3>${uiManager.escapeHtml(list.list_name)}</h3>
<p>${uiManager.escapeHtml(list.list_email)}</p>
</div>
<div class="subscription-members">
<div class="members-list"></div>
</div>
`;
const membersList = listCard.querySelector('.members-list');
if (members.length === 0) {
membersList.innerHTML = `
<div class="text-center text-muted">
<p>No members subscribed to this list.</p>
</div>
`;
} else {
members.forEach(member => {
const memberItem = document.createElement('div');
memberItem.className = 'member-item';
memberItem.innerHTML = `
<div class="member-info">
<div class="member-name">${uiManager.escapeHtml(member.name)}</div>
<div class="member-email">${uiManager.escapeHtml(member.email)}</div>
</div>
<button class="btn btn-sm btn-danger" title="Unsubscribe">
<i class="fas fa-times"></i>
</button>
`;
// 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();
});

462
web/static/js/ui.js Normal file
View File

@@ -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 = '<option value="">Select a list...</option>';
memberSelect.innerHTML = '<option value="">Select a member...</option>';
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 = `<i class="fas fa-${icon}"></i> ${text}`;
button.addEventListener('click', onClick);
return button;
}
/**
* Create status badge
*/
createStatusBadge(active) {
const badge = document.createElement('span');
badge.className = `status-badge ${active ? 'active' : 'inactive'}`;
badge.innerHTML = `
<i class="fas fa-${active ? 'check' : 'times'}"></i>
${active ? 'Active' : 'Inactive'}
`;
return badge;
}
/**
* Format email as mailto link
*/
createEmailLink(email) {
const link = document.createElement('a');
link.href = `mailto:${email}`;
link.textContent = email;
link.style.color = 'var(--primary-color)';
return link;
}
/**
* Escape HTML to prevent XSS
*/
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
// Create global UI manager instance
window.uiManager = new UIManager();