working on front end

2025-06-07 10:48:03 +01:00
parent 9172e18ffb
commit 7053b82d30
34 changed files with 8045 additions and 5 deletions
--- a/README_unified.md
+++ b/README_unified.md
@@ -0,0 +1,417 @@
 # SMTP Server with Web Management Frontend
 A comprehensive SMTP server with an integrated Flask-based web management interface. This application provides both a fully functional SMTP server and a modern web interface for managing domains, users, DKIM keys, and server settings.
 ## Features
 ### SMTP Server
 - **Full SMTP Server**: Send and receive emails with authentication
 - **DKIM Support**: Automatic DKIM key generation and email signing
 - **TLS/SSL Encryption**: Secure email transmission
 - **Domain Management**: Support for multiple domains
 - **User Authentication**: Per-user and per-domain authentication
 - **IP Whitelisting**: Allow specific IPs to send without authentication
 - **Email Relay**: Forward emails to external servers
 - **Comprehensive Logging**: Track all email and authentication activities
 ### Web Management Interface
 - **Modern Dark UI**: Bootstrap-based responsive interface
 - **Domain Management**: Add, configure, and manage email domains
 - **User Management**: Create and manage email users with permissions
 - **DKIM Management**: Generate keys, view DNS records, verify setup
 - **IP Whitelist Management**: Configure IP-based access controls
 - **Server Settings**: Web-based configuration management
 - **Real-time Logs**: View email and authentication logs with filtering
 - **DNS Verification**: Built-in DNS record checking for DKIM and SPF
 - **Health Monitoring**: Server status and performance metrics
 ## Quick Start
 ### Prerequisites
 - Python 3.9 or higher
 - Linux/macOS (Windows with WSL)
 ### Installation
 1. **Clone or navigate to the project directory:**
   ```bash
   cd /home/nahaku/Documents/Projects/SMTP_Server
   ```
 2. **Run the setup script:**
   ```bash
   chmod +x email_frontend/setup.sh
   ./email_frontend/setup.sh
   ```
 3. **Initialize sample data (optional):**
   ```bash
   .venv/bin/python app.py --init-data
   ```
 4. **Start the unified application:**
   ```bash
   .venv/bin/python app.py
   ```
 The application will start both the SMTP server and web interface:
 - **Web Interface**: http://127.0.0.1:5000
 - **SMTP Server**: Port 25 (plain), Port 587 (TLS)
 ## Usage Modes
 ### Unified Mode (Default)
 Run both SMTP server and web interface together:
 ```bash
 .venv/bin/python app.py
 ```
 ### SMTP Server Only
 Run only the SMTP server without web interface:
 ```bash
 .venv/bin/python app.py --smtp-only
 ```
 ### Web Frontend Only
 Run only the web management interface:
 ```bash
 .venv/bin/python app.py --web-only
 ```
 ### Development Mode
 Enable debug mode with auto-reload:
 ```bash
 .venv/bin/python app.py --debug
 ```
 ### Custom Host and Port
 Specify custom web server settings:
 ```bash
 .venv/bin/python app.py --host 0.0.0.0 --port 8080
 ```
 ## Configuration
 ### Main Configuration File: `settings.ini`
 The server uses a comprehensive configuration file with the following sections:
 #### Server Settings
 ```ini
 [Server]
 SMTP_PORT = 25
 SMTP_TLS_PORT = 587
 hostname = your-domain.com
 BIND_IP = 0.0.0.0
 helo_hostname = your-domain.com
 ```
 #### Database Settings
 ```ini
 [Database]
 database_path = email_server/server_data/smtp_server.db
 ```
 #### TLS/SSL Settings
 ```ini
 [TLS]
 enable_tls = true
 cert_file = email_server/ssl_certs/server.crt
 key_file = email_server/ssl_certs/server.key
 ```
 #### DKIM Settings
 ```ini
 [DKIM]
 enable_dkim = true
 default_selector = default
 key_size = 2048
 ```
 ### Web Interface Configuration
 The web interface can be configured through the settings page or by editing `settings.ini`. Changes require a server restart to take effect.
 ## Web Interface Features
 ### Dashboard
 - Server status overview
 - Domain, user, and DKIM key counts
 - Recent email and authentication activity
 - Quick access to all management functions
 ### Domain Management
 - Add and remove email domains
 - Enable/disable domains
 - Automatic DKIM key generation
 - Domain-specific settings
 ### User Management
 - Create email users with passwords
 - Assign users to domains
 - Set user permissions (regular user vs domain admin)
 - Manage user access levels
 ### DKIM Management
 - View and generate DKIM keys
 - DNS record display with copy-to-clipboard
 - Real-time DNS verification
 - SPF record recommendations
 - Selector management
 ### IP Whitelist Management
 - Add IP addresses or ranges
 - Domain-specific whitelisting
 - Current IP detection
 - Use case documentation
 ### Server Settings
 - Web-based configuration editor
 - All settings sections accessible
 - Form validation and help text
 - Export/import configuration
 ### Logs and Monitoring
 - Real-time email logs
 - Authentication logs
 - Filtering and pagination
 - Auto-refresh functionality
 - Error details and troubleshooting
 ## API Endpoints
 The web interface provides REST API endpoints for integration:
 ### Health Check
 ```
 GET /health
 ```
 Returns server health status and basic information.
 ### Server Status
 ```
 GET /api/server/status
 ```
 Returns detailed server status including SMTP server state, database counts, and configuration.
 ### Server Restart
 ```
 POST /api/server/restart
 ```
 Restarts the SMTP server component.
 ## Database Schema
 The application uses SQLite with the following main tables:
 - **domains**: Email domain configuration
 - **users**: User accounts and authentication
 - **whitelisted_ips**: IP-based access control
 - **dkim_keys**: DKIM signing keys
 - **email_logs**: Email transaction records
 - **auth_logs**: Authentication attempts
 - **custom_headers**: Custom email headers
 ## Security Features
 ### Authentication
 - User-based authentication for email sending
 - Domain-specific user management
 - IP-based whitelisting
 - Secure password hashing
 ### Email Security
 - DKIM signing for email authentication
 - SPF record support and verification
 - TLS encryption for secure transmission
 - DNS record validation
 ### Web Interface Security
 - Session management
 - CSRF protection
 - Input validation and sanitization
 - Secure configuration handling
 ## DNS Configuration
 ### Required DNS Records
 For each domain, configure the following DNS records:
 #### DKIM Record
 ```
 default._domainkey.yourdomain.com. IN TXT "v=DKIM1; k=rsa; p=YOUR_PUBLIC_KEY"
 ```
 #### SPF Record
 ```
 yourdomain.com. IN TXT "v=spf1 ip4:YOUR_SERVER_IP ~all"
 ```
 #### MX Record
 ```
 yourdomain.com. IN MX 10 your-server.com.
 ```
 The web interface provides the exact DNS records needed and can verify their configuration.
 ## Troubleshooting
 ### Common Issues
 #### Port Permission Issues
 If you get permission denied errors on ports 25 or 587:
 ```bash
 sudo setcap 'cap_net_bind_service=+ep' .venv/bin/python
 ```
 #### Database Issues
 Reset the database:
 ```bash
 rm email_server/server_data/smtp_server.db
 .venv/bin/python app.py --init-data
 ```
 #### SSL Certificate Issues
 Generate new self-signed certificates:
 ```bash
 .venv/bin/python -c "from email_server.tls_utils import generate_self_signed_cert; generate_self_signed_cert()"
 ```
 #### DNS Verification Fails
 - Ensure DNS records are properly configured
 - Wait for DNS propagation (up to 24 hours)
 - Check with online DNS checkers
 - Verify your domain's nameservers
 ### Log Files
 Check logs for detailed error information:
 - **Application logs**: Console output or systemd logs
 - **Email logs**: Available in web interface
 - **Authentication logs**: Available in web interface
 ### Web Interface Issues
 If the web interface is not accessible:
 1. Check that Flask is running on the correct host/port
 2. Verify firewall settings
 3. Check browser console for JavaScript errors
 4. Review Flask application logs
 ## Development
 ### Project Structure
 ```
 ├── app.py                      # Unified application entry point
 ├── main.py                     # SMTP server only entry point
 ├── settings.ini                # Configuration file
 ├── requirements.txt            # Python dependencies
 ├── email_server/               # SMTP server implementation
 │   ├── models.py              # Database models
 │   ├── smtp_handler.py        # SMTP protocol handling
 │   ├── dkim_manager.py        # DKIM key management
 │   ├── settings_loader.py     # Configuration loader
 │   └── ...
 ├── email_frontend/             # Web management interface
 │   ├── blueprint.py           # Flask Blueprint
 │   ├── templates/             # HTML templates
 │   ├── static/               # CSS/JS assets
 │   └── ...
 └── tests/                     # Test files
 ```
 ### Adding Features
 To add new features to the web interface:
 1. **Add routes** to `email_frontend/blueprint.py`
 2. **Create templates** in `email_frontend/templates/`
 3. **Add static assets** in `email_frontend/static/`
 4. **Update navigation** in `sidebar_email.html`
 ### Testing
 Run tests manually:
 ```bash
 cd tests
 ./custom_test.sh
 ```
 Send test emails:
 ```bash
 .venv/bin/python tests/send_email.py
 ```
 ## Production Deployment
 ### Systemd Service
 Create a systemd service for production deployment:
 ```ini
 [Unit]
 Description=SMTP Server with Web Management
 After=network.target
 [Service]
 Type=simple
 User=smtp-user
 WorkingDirectory=/path/to/SMTP_Server
 ExecStart=/path/to/SMTP_Server/.venv/bin/python app.py --host 0.0.0.0
 Restart=always
 RestartSec=5
 [Install]
 WantedBy=multi-user.target
 ```
 ### Reverse Proxy
 For production web interface, use nginx or Apache as a reverse proxy:
 ```nginx
 server {
    listen 80;
    server_name your-domain.com;
    location / {
        proxy_pass http://127.0.0.1:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
 }
 ```
 ### Security Considerations
 1. **Change default secrets** in configuration
 2. **Use proper SSL certificates** for web interface
 3. **Configure firewall** to restrict access
 4. **Regular backups** of database and configuration
 5. **Monitor logs** for suspicious activity
 6. **Keep dependencies updated**
 ## Support
 For issues and questions:
 1. Check the troubleshooting section above
 2. Review log files for error details
 3. Verify DNS and network configuration
 4. Test with sample data using `--init-data`
 ## License
 This project is licensed under the MIT License. See the LICENSE file for details.
 ## Contributing
 Contributions are welcome! Please:
 1. Follow the existing code style
 2. Add tests for new features
 3. Update documentation
 4. Submit pull requests for review
 ---
 **Note**: This application is designed for educational and development purposes. For production use, ensure proper security configuration, monitoring, and maintenance.
--- a/app.py
+++ b/app.py
@@ -0,0 +1,427 @@
 #!/usr/bin/env python3
 """
 Unified SMTP Server with Web Management Frontend
 This application runs both the SMTP server and the Flask web frontend
 in a single integrated application.
 Usage:
    python app.py                    # Run with default settings
    python app.py --smtp-only        # Run SMTP server only
    python app.py --web-only         # Run web frontend only
    python app.py --debug            # Enable debug mode
    python app.py --init-data        # Initialize sample data and exit
 """
 import os
 import sys
 import asyncio
 import threading
 import signal
 import argparse
 from datetime import datetime
 from flask import Flask, render_template, redirect, url_for, jsonify
 from flask_sqlalchemy import SQLAlchemy
 # Add the project root to Python path
 sys.path.append(os.path.dirname(os.path.abspath(__file__)))
 # Import SMTP server components
 from email_server.server_runner import start_server
 from email_server.models import create_tables, Session, Domain, User, WhitelistedIP, DKIMKey, hash_password
 from email_server.settings_loader import load_settings
 from email_server.tool_box import get_logger
 from email_server.dkim_manager import DKIMManager
 # Import Flask frontend
 from email_frontend.blueprint import email_bp
 logger = get_logger()
 class SMTPServerApp:
    """Unified SMTP Server and Web Frontend Application"""
    def __init__(self, config_file='settings.ini'):
        self.config_file = config_file
        self.settings = load_settings()
        self.flask_app = None
        self.smtp_task = None
        self.loop = None
        self.shutdown_requested = False
        # Setup signal handlers
        signal.signal(signal.SIGINT, self._signal_handler)
        signal.signal(signal.SIGTERM, self._signal_handler)
    def _signal_handler(self, signum, frame):
        """Handle shutdown signals gracefully"""
        logger.info(f"Received signal {signum}, initiating shutdown...")
        self.shutdown_requested = True
        if self.loop and self.loop.is_running():
            self.loop.call_soon_threadsafe(self._stop_smtp_server)
    def _stop_smtp_server(self):
        """Stop the SMTP server"""
        if self.smtp_task and not self.smtp_task.done():
            self.smtp_task.cancel()
            logger.info("SMTP server stopped")
    def create_flask_app(self):
        """Create and configure the Flask application"""
        app = Flask(__name__, 
                   static_folder='email_frontend/static',
                   template_folder='email_frontend/templates')
        # Flask configuration
        app.config.update({
            'SECRET_KEY': self.settings.get('Flask', 'secret_key', fallback='change-this-secret-key-in-production'),
            'SQLALCHEMY_DATABASE_URI': f"sqlite:///{self.settings.get('Database', 'database_path', fallback='email_server/server_data/smtp_server.db')}",
            'SQLALCHEMY_TRACK_MODIFICATIONS': False,
            'TEMPLATES_AUTO_RELOAD': True,
            'SEND_FILE_MAX_AGE_DEFAULT': 0  # Disable caching for development
        })
        # Initialize database
        db = SQLAlchemy(app)
        # Create database tables if they don't exist
        with app.app_context():
            create_tables()
        # Register the email management blueprint
        app.register_blueprint(email_bp)
        # Main application routes
        @app.route('/')
        def index():
            """Redirect root to email dashboard"""
            return redirect(url_for('email.dashboard'))
        @app.route('/health')
        def health_check():
            """Health check endpoint"""
            return jsonify({
                'status': 'healthy',
                'timestamp': datetime.utcnow().isoformat(),
                'services': {
                    'smtp_server': 'running' if self.smtp_task and not self.smtp_task.done() else 'stopped',
                    'web_frontend': 'running'
                },
                'version': '1.0.0'
            })
        @app.route('/api/server/status')
        def server_status():
            """Get detailed server status"""
            session = Session()
            try:
                status = {
                    'smtp_server': {
                        'running': self.smtp_task and not self.smtp_task.done(),
                        'port': int(self.settings.get('Server', 'SMTP_PORT', fallback=25)),
                        'tls_port': int(self.settings.get('Server', 'SMTP_TLS_PORT', fallback=587)),
                        'hostname': self.settings.get('Server', 'hostname', fallback='localhost')
                    },
                    'database': {
                        'domains': session.query(Domain).filter_by(is_active=True).count(),
                        'users': session.query(User).filter_by(is_active=True).count(),
                        'dkim_keys': session.query(DKIMKey).filter_by(is_active=True).count(),
                        'whitelisted_ips': session.query(WhitelistedIP).filter_by(is_active=True).count()
                    },
                    'settings': {
                        'relay_enabled': self.settings.getboolean('Relay', 'enable_relay', fallback=False),
                        'tls_enabled': self.settings.getboolean('TLS', 'enable_tls', fallback=True),
                        'dkim_enabled': self.settings.getboolean('DKIM', 'enable_dkim', fallback=True)
                    }
                }
                return jsonify(status)
            finally:
                session.close()
        @app.route('/api/server/restart', methods=['POST'])
        def restart_server():
            """Restart the SMTP server (API endpoint)"""
            try:
                if self.smtp_task and not self.smtp_task.done():
                    self._stop_smtp_server()
                # Start SMTP server in a new task
                if self.loop:
                    self.smtp_task = asyncio.create_task(start_server())
                    return jsonify({'status': 'success', 'message': 'SMTP server restarted'})
                else:
                    return jsonify({'status': 'error', 'message': 'Event loop not available'}), 500
            except Exception as e:
                logger.error(f"Error restarting server: {e}")
                return jsonify({'status': 'error', 'message': str(e)}), 500
        # Error handlers
        @app.errorhandler(404)
        def not_found_error(error):
            """Handle 404 errors"""
            return render_template('error.html', 
                                 error_code=404,
                                 error_message="Page not found",
                                 error_details="The requested page could not be found."), 404
        @app.errorhandler(500)
        def internal_error(error):
            """Handle 500 errors"""
            logger.error(f"Internal error: {error}")
            return render_template('error.html',
                                 error_code=500,
                                 error_message="Internal server error",
                                 error_details=str(error)), 500
        # Context processors for templates
        @app.context_processor
        def utility_processor():
            """Add utility functions to template context"""
            return {
                'moment': datetime,
                'len': len,
                'enumerate': enumerate,
                'zip': zip,
                'str': str,
                'int': int,
            }
        self.flask_app = app
        return app
    def init_sample_data(self):
        """Initialize the database with sample data for testing"""
        try:
            # Initialize database
            create_tables()
            session = Session()
            try:
                # Add sample domains
                sample_domains = [
                    'example.com',
                    'testdomain.org',
                    'mydomain.net'
                ]
                for domain_name in sample_domains:
                    existing = session.query(Domain).filter_by(domain_name=domain_name).first()
                    if not existing:
                        domain = Domain(domain_name=domain_name)
                        session.add(domain)
                        logger.info(f"Added sample domain: {domain_name}")
                session.commit()
                # Generate DKIM keys for new domains
                dkim_manager = DKIMManager()
                for domain_name in sample_domains:
                    dkim_manager.generate_dkim_keypair(domain_name)
                # Add sample users
                sample_users = [
                    ('admin@example.com', 'example.com', 'admin123', True),
                    ('user@example.com', 'example.com', 'user123', False),
                    ('test@testdomain.org', 'testdomain.org', 'test123', False)
                ]
                for email, domain_name, password, can_send_as_domain in sample_users:
                    existing = session.query(User).filter_by(email=email).first()
                    if not existing:
                        domain = session.query(Domain).filter_by(domain_name=domain_name).first()
                        if domain:
                            user = User(
                                email=email,
                                password_hash=hash_password(password),
                                domain_id=domain.id,
                                can_send_as_domain=can_send_as_domain
                            )
                            session.add(user)
                            logger.info(f"Added sample user: {email}")
                # Add sample whitelisted IPs
                sample_ips = [
                    ('127.0.0.1', 'example.com'),
                    ('192.168.1.0/24', 'example.com'),
                    ('10.0.0.0/8', 'testdomain.org')
                ]
                for ip, domain_name in sample_ips:
                    domain = session.query(Domain).filter_by(domain_name=domain_name).first()
                    if domain:
                        existing = session.query(WhitelistedIP).filter_by(
                            ip_address=ip, domain_id=domain.id
                        ).first()
                        if not existing:
                            whitelist = WhitelistedIP(
                                ip_address=ip,
                                domain_id=domain.id
                            )
                            session.add(whitelist)
                            logger.info(f"Added sample whitelisted IP: {ip} for {domain_name}")
                session.commit()
                logger.info("Sample data initialized successfully!")
            finally:
                session.close()
        except Exception as e:
            logger.error(f"Error initializing sample data: {e}")
            raise
    async def start_smtp_server(self):
        """Start the SMTP server in async context"""
        try:
            logger.info("Starting SMTP server...")
            await start_server()
        except Exception as e:
            logger.error(f"SMTP server error: {e}")
            if not self.shutdown_requested:
                raise
    def run_smtp_server(self):
        """Run SMTP server in a separate thread"""
        try:
            self.loop = asyncio.new_event_loop()
            asyncio.set_event_loop(self.loop)
            self.smtp_task = self.loop.create_task(self.start_smtp_server())
            self.loop.run_until_complete(self.smtp_task)
        except asyncio.CancelledError:
            logger.info("SMTP server task was cancelled")
        except Exception as e:
            if not self.shutdown_requested:
                logger.error(f"SMTP server thread error: {e}")
        finally:
            if self.loop:
                self.loop.close()
    def run(self, smtp_only=False, web_only=False, debug=False, host='127.0.0.1', port=5000):
        """Run the unified application"""
        if web_only:
            # Run only Flask web frontend
            logger.info("Starting web frontend only...")
            app = self.create_flask_app()
            try:
                logger.info(f"Web frontend starting at http://{host}:{port}")
                app.run(host=host, port=port, debug=debug, threaded=True, use_reloader=False)
            except KeyboardInterrupt:
                logger.info("Web server interrupted by user")
            return
        if smtp_only:
            # Run only SMTP server
            logger.info("Starting SMTP server only...")
            try:
                asyncio.run(self.start_smtp_server())
            except KeyboardInterrupt:
                logger.info("SMTP server interrupted by user")
            return
        # Run both SMTP server and web frontend
        logger.info("Starting unified SMTP server with web management frontend...")
        # Start SMTP server in a separate thread
        smtp_thread = threading.Thread(target=self.run_smtp_server, daemon=True)
        smtp_thread.start()
        # Give SMTP server time to start
        import time
        time.sleep(2)
        # Start Flask web frontend in main thread
        try:
            app = self.create_flask_app()
            logger.info(f"Web frontend starting at http://{host}:{port}")
            logger.info("SMTP server running in background")
            app.run(host=host, port=port, debug=debug, threaded=True, use_reloader=False)
        except KeyboardInterrupt:
            logger.info("Application interrupted by user")
        finally:
            self.shutdown_requested = True
            if self.loop:
                self.loop.call_soon_threadsafe(self._stop_smtp_server)
 def main():
    """Main function"""
    parser = argparse.ArgumentParser(description='Unified SMTP Server with Web Management')
    parser.add_argument('--smtp-only', action='store_true', help='Run SMTP server only')
    parser.add_argument('--web-only', action='store_true', help='Run web frontend only')
    parser.add_argument('--host', default='127.0.0.1', help='Web server host (default: 127.0.0.1)')
    parser.add_argument('--port', type=int, default=5000, help='Web server port (default: 5000)')
    parser.add_argument('--debug', action='store_true', help='Enable debug mode')
    parser.add_argument('--init-data', action='store_true', help='Initialize sample data and exit')
    parser.add_argument('--config', default='settings.ini', help='Configuration file path')
    args = parser.parse_args()
    # Create application instance
    try:
        app = SMTPServerApp(args.config)
        # Initialize sample data if requested
        if args.init_data:
            logger.info("Initializing sample data...")
            app.init_sample_data()
            logger.info("Sample data initialization complete")
            return
        # Print startup information
        settings = load_settings()
        smtp_port = settings.get('Server', 'SMTP_PORT', fallback='25')
        smtp_tls_port = settings.get('Server', 'SMTP_TLS_PORT', fallback='587')
        print(f"""
 ╔══════════════════════════════════════════════════════════════════════════════╗
 ║                    SMTP Server with Web Management                            ║
 ╚══════════════════════════════════════════════════════════════════════════════╝
 Configuration:
  • Configuration file: {args.config}
  • SMTP Server ports: {smtp_port} (plain), {smtp_tls_port} (TLS)
  • Web Interface: http://{args.host}:{args.port}
  • Debug mode: {'ON' if args.debug else 'OFF'}
 Services:
  • SMTP Server: {'Starting...' if not args.web_only else 'Disabled'}
  • Web Frontend: {'Starting...' if not args.smtp_only else 'Disabled'}
 Available web routes:
  • /                     → Dashboard
  • /email/domains        → Domain management
  • /email/users          → User management
  • /email/ips            → IP whitelist management
  • /email/dkim           → DKIM management
  • /email/settings       → Server settings
  • /email/logs           → Server logs
  • /health               → Health check
  • /api/server/status    → Server status API
 To initialize sample data:
  python app.py --init-data
 Press Ctrl+C to stop the server
        """)
        # Run the application
        app.run(
            smtp_only=args.smtp_only,
            web_only=args.web_only,
            debug=args.debug,
            host=args.host,
            port=args.port
        )
    except KeyboardInterrupt:
        logger.info("Application shutdown requested")
    except Exception as e:
        logger.error(f"Application error: {e}")
        sys.exit(1)
 if __name__ == '__main__':
    main()
--- a/email_frontend/README.md
+++ b/email_frontend/README.md
@@ -0,0 +1,329 @@
 # SMTP Server Management Frontend
 A comprehensive Flask-based web interface for managing SMTP server operations, including domain management, user authentication, DKIM configuration, IP whitelisting, and email monitoring.
 ## Features
 ### 🏠 Dashboard
 - Server statistics and health monitoring  
 - Recent activity overview
 - Quick access to all management sections
 - Real-time server status indicators
 ### 🌐 Domain Management
 - Add, edit, and remove domains
 - Domain status monitoring
 - Bulk domain operations
 - Domain-specific statistics
 ### 👥 User Management
 - Create and manage email users
 - Password management
 - Domain-based user organization
 - User permission levels (regular user vs domain admin)
 - Email validation and verification
 ### 🔒 IP Whitelist Management
 - Add/remove whitelisted IP addresses
 - Support for single IPs and CIDR notation
 - Current IP detection
 - Domain-specific IP restrictions
 - Security notes and best practices
 ### 🔐 DKIM Management
 - Generate and manage DKIM keys
 - DNS record verification
 - SPF record management
 - Real-time DNS checking
 - Copy-to-clipboard functionality for DNS records
 ### ⚙️ Server Settings
 - Configure all server parameters via web interface
 - Real-time settings.ini file updates
 - Settings validation and error checking
 - Export/import configuration
 - Sections: Server, Database, Logging, Relay, TLS, DKIM
 ### 📊 Logs & Monitoring
 - Email logs with detailed filtering
 - Authentication logs
 - Error tracking and debugging
 - Real-time log updates
 - Export log data
 - Advanced search and filtering
 ## Installation
 ### Prerequisites
 - Python 3.9 or higher
 - Flask 2.3+
 - Access to the SMTP server database
 - Web browser with JavaScript enabled
 ### Setup
 1. **Clone or navigate to the SMTP server directory:**
   ```bash
   cd /path/to/SMTP_Server
   ```
 2. **Install frontend dependencies:**
   ```bash
   # Create virtual environment if it doesn't exist
   python3 -m venv .venv
   # Activate virtual environment
   source .venv/bin/activate  # Linux/macOS
   # or
   .venv\Scripts\activate     # Windows
   # Install frontend requirements
   .venv/bin/pip install -r email_frontend/requirements.txt
   ```
 3. **Initialize sample data (optional):**
   ```bash
   .venv/bin/python email_frontend/example_app.py --init-data
   ```
 4. **Run the example application:**
   ```bash
   .venv/bin/python email_frontend/example_app.py
   ```
 5. **Access the web interface:**
   Open your browser and navigate to `http://127.0.0.1:5000`
 ## Integration
 ### Using as a Flask Blueprint
 The frontend is designed as a Flask Blueprint that can be integrated into existing Flask applications:
 ```python
 from flask import Flask
 from email_frontend.blueprint import email_bp
 app = Flask(__name__)
 app.config['SECRET_KEY'] = 'your-secret-key'
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///smtp_server.db'
 # Register the blueprint
 app.register_blueprint(email_bp, url_prefix='/email')
 if __name__ == '__main__':
    app.run(debug=True)
 ```
 ### Blueprint Routes
 The blueprint provides the following routes under the `/email` prefix:
 - `/` or `/dashboard` - Main dashboard
 - `/domains` - Domain management
 - `/domains/add` - Add new domain
 - `/users` - User management  
 - `/users/add` - Add new user
 - `/ips` - IP whitelist management
 - `/ips/add` - Add whitelisted IP
 - `/dkim` - DKIM management
 - `/settings` - Server configuration
 - `/logs` - Email and authentication logs
 ### Configuration
 The frontend requires access to your SMTP server's database and configuration files:
 1. **Database Access:** Ensure the Flask app can connect to your SMTP server database
 2. **Settings File:** The frontend reads from `settings.ini` in the project root
 3. **Static Files:** CSS and JavaScript files are served from `email_frontend/static/`
 ## Customization
 ### Templates
 All templates extend `base.html` and use the dark Bootstrap theme. Key templates:
 - `base.html` - Base layout with navigation
 - `sidebar_email.html` - Navigation sidebar
 - `email/dashboard.html` - Main dashboard
 - `email/*.html` - Feature-specific pages
 ### Styling
 Custom CSS is located in `static/css/smtp-management.css` and includes:
 - Dark theme enhancements
 - Custom form styling
 - DNS record display formatting
 - Log entry styling
 - Responsive design tweaks
 ### JavaScript
 Interactive features are implemented in `static/js/smtp-management.js`:
 - Form validation
 - AJAX requests for DNS checking
 - Copy-to-clipboard functionality
 - Auto-refresh for logs
 - Real-time IP detection
 ## API Endpoints
 The frontend provides several AJAX endpoints for enhanced functionality:
 ### DNS Verification
 ```
 POST /email/check-dns
 Content-Type: application/json
 {
    "domain": "example.com",
    "record_type": "TXT", 
    "expected_value": "v=DKIM1; k=rsa; p=..."
 }
 ```
 ### Settings Updates
 ```
 POST /email/settings
 Content-Type: application/x-www-form-urlencoded
 section=server&key=smtp_port&value=587
 ```
 ### Log Filtering  
 ```
 GET /email/logs?filter=email&page=1&per_page=50
 ```
 ## Security Considerations
 ### Authentication
 - Implement proper authentication before deploying to production
 - Use strong session keys
 - Consider implementing role-based access control
 ### Network Security
 - Run behind a reverse proxy (nginx/Apache) in production
 - Use HTTPS for all connections
 - Implement rate limiting
 - Restrict access to management interface
 ### Data Protection
 - Sanitize all user inputs
 - Use parameterized queries
 - Implement CSRF protection
 - Regular security updates
 ## Development
 ### Project Structure
 ```
 email_frontend/
 ├── __init__.py              # Package initialization
 ├── blueprint.py             # Main Flask Blueprint
 ├── example_app.py           # Example Flask application
 ├── requirements.txt         # Python dependencies
 ├── static/                  # Static assets
 │   ├── css/
 │   │   └── smtp-management.css
 │   └── js/
 │       └── smtp-management.js
 └── templates/               # Jinja2 templates
    ├── base.html           # Base template
    ├── sidebar_email.html  # Navigation sidebar
    └── email/              # Feature templates
        ├── dashboard.html
        ├── domains.html
        ├── users.html
        ├── ips.html
        ├── dkim.html
        ├── settings.html
        ├── logs.html
        └── error.html
 ```
 ### Adding New Features
 1. **Add routes to `blueprint.py`**
 2. **Create corresponding templates in `templates/email/`**
 3. **Update navigation in `sidebar_email.html`**
 4. **Add custom styling to `smtp-management.css`**
 5. **Implement JavaScript interactions in `smtp-management.js`**
 ### Testing
 Run the example application with debug mode:
 ```bash
 .venv/bin/python email_frontend/example_app.py --debug
 ```
 Initialize test data:
 ```bash
 .venv/bin/python email_frontend/example_app.py --init-data
 ```
 ## Troubleshooting
 ### Common Issues
 **Database Connection Errors:**
 - Verify database file exists and is accessible
 - Check file permissions
 - Ensure SQLAlchemy is properly configured
 **Template Not Found Errors:**
 - Verify templates are in the correct directory structure
 - Check template inheritance and block names
 - Ensure blueprint is registered with correct static folder
 **Static Files Not Loading:**
 - Check Flask static file configuration
 - Verify CSS/JS files exist in static directories
 - Clear browser cache
 **DNS Verification Not Working:**
 - Ensure `dnspython` is installed
 - Check network connectivity
 - Verify DNS server accessibility
 ### Debug Mode
 Enable debug mode for detailed error information:
 ```python
 app.run(debug=True)
 ```
 Or via command line:
 ```bash
 .venv/bin/python email_frontend/example_app.py --debug
 ```
 ## Contributing
 1. Fork the repository
 2. Create a feature branch
 3. Make your changes
 4. Test thoroughly
 5. Submit a pull request
 ## License
 This project is part of the SMTP Server suite. Please refer to the main project license.
 ## Support
 For issues and questions:
 1. Check the troubleshooting section
 2. Review the example application
 3. Create an issue in the project repository
 ---
 **Note:** This frontend is designed specifically for the SMTP Server project and requires the associated database models and configuration files to function properly.
--- a/email_frontend/init.py
+++ b/email_frontend/init.py
@@ -0,0 +1 @@
 # Email frontend module
--- a/email_frontend/blueprint.py
+++ b/email_frontend/blueprint.py
@@ -0,0 +1,646 @@
 """
 Flask Blueprint for Email Server Management Frontend
 This module provides a comprehensive web interface for managing the SMTP server:
 - Domain management
 - User authentication and authorization
 - DKIM key management with DNS record verification
 - Server settings configuration
 - Email logs and monitoring
 Security features:
 - Authentication management per domain
 - IP whitelisting capabilities
 - SPF and DKIM DNS validation
 """
 from flask import Blueprint, render_template, request, redirect, url_for, flash, jsonify
 import socket
 import requests
 import dns.resolver
 import re
 from datetime import datetime
 from typing import Optional, Dict, List, Tuple
 # Import email server modules
 import sys
 import os
 sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 from email_server.models import (
    Session, Domain, User, WhitelistedIP, DKIMKey, CustomHeader, EmailLog, AuthLog,
    hash_password, create_tables, get_user_by_email, get_domain_by_name, get_whitelisted_ip
 )
 from email_server.dkim_manager import DKIMManager
 from email_server.settings_loader import load_settings, generate_settings_ini, SETTINGS_PATH
 from email_server.tool_box import get_logger
 logger = get_logger()
 # Create Blueprint
 email_bp = Blueprint('email', __name__, 
                    template_folder='templates',
                    static_folder='static',
                    url_prefix='/email')
 def get_public_ip() -> str:
    """Get the public IP address of the server."""
    try:
        response = requests.get('https://api.ipify.org', timeout=5)
        return response.text.strip()
    except Exception:
        try:
            # Fallback method
            response = requests.get('https://httpbin.org/ip', timeout=5)
            return response.json()['origin'].split(',')[0].strip()
        except Exception:
            return 'unknown'
 def check_dns_record(domain: str, record_type: str, expected_value: str = None) -> Dict:
    """Check DNS record for a domain."""
    try:
        answers = dns.resolver.resolve(domain, record_type)
        records = [str(answer) for answer in answers]
        if expected_value:
            found = any(expected_value in record for record in records)
            return {
                'success': True,
                'found': found,
                'records': records,
                'message': f"Record {'found' if found else 'not found'}"
            }
        else:
            return {
                'success': True,
                'records': records,
                'message': f"Found {len(records)} {record_type} record(s)"
            }
    except dns.resolver.NXDOMAIN:
        return {'success': False, 'message': 'Domain not found'}
    except dns.resolver.NoAnswer:
        return {'success': False, 'message': f'No {record_type} records found'}
    except Exception as e:
        return {'success': False, 'message': f'DNS lookup error: {str(e)}'}
 def generate_spf_record(domain: str, public_ip: str, existing_spf: str = None) -> str:
    """Generate SPF record including the current server IP."""
    base_mechanisms = []
    if existing_spf:
        # Parse existing SPF record
        spf_clean = existing_spf.replace('"', '').strip()
        if spf_clean.startswith('v=spf1'):
            parts = spf_clean.split()
            base_mechanisms = [part for part in parts[1:] if not part.startswith('ip4:') and part != 'all' and part != '-all' and part != '~all']
    # Add our server IP
    our_ip = f"ip4:{public_ip}"
    if our_ip not in base_mechanisms:
        base_mechanisms.append(our_ip)
    # Construct SPF record
    spf_parts = ['v=spf1'] + base_mechanisms + ['~all']
    return ' '.join(spf_parts)
@email_bp.route('/')
 def dashboard():
    """Main dashboard showing overview of the email server."""
    session = Session()
    try:
        # Get counts
        domain_count = session.query(Domain).filter_by(is_active=True).count()
        user_count = session.query(User).filter_by(is_active=True).count()
        dkim_count = session.query(DKIMKey).filter_by(is_active=True).count()
        # Get recent email logs
        recent_emails = session.query(EmailLog).order_by(EmailLog.created_at.desc()).limit(10).all()
        # Get recent auth logs
        recent_auths = session.query(AuthLog).order_by(AuthLog.created_at.desc()).limit(10).all()
        return render_template('dashboard.html',
                             domain_count=domain_count,
                             user_count=user_count,
                             dkim_count=dkim_count,
                             recent_emails=recent_emails,
                             recent_auths=recent_auths)
    finally:
        session.close()
@email_bp.route('/domains')
 def domains_list():
    """List all domains."""
    session = Session()
    try:
        domains = session.query(Domain).order_by(Domain.domain_name).all()
        return render_template('domains.html', domains=domains)
    finally:
        session.close()
@email_bp.route('/domains/add', methods=['GET', 'POST'])
 def add_domain():
    """Add new domain."""
    if request.method == 'POST':
        domain_name = request.form.get('domain_name', '').strip().lower()
        if not domain_name:
            flash('Domain name is required', 'error')
            return redirect(url_for('email.add_domain'))
        session = Session()
        try:
            # Check if domain already exists
            existing = session.query(Domain).filter_by(domain_name=domain_name).first()
            if existing:
                flash(f'Domain {domain_name} already exists', 'error')
                return redirect(url_for('email.domains_list'))
            # Create domain
            domain = Domain(domain_name=domain_name)
            session.add(domain)
            session.commit()
            # Generate DKIM key for the domain
            dkim_manager = DKIMManager()
            dkim_manager.generate_dkim_keypair(domain_name)
            flash(f'Domain {domain_name} added successfully with DKIM key', 'success')
            return redirect(url_for('email.domains_list'))
        except Exception as e:
            session.rollback()
            logger.error(f"Error adding domain: {e}")
            flash(f'Error adding domain: {str(e)}', 'error')
            return redirect(url_for('email.add_domain'))
        finally:
            session.close()
    return render_template('add_domain.html')
@email_bp.route('/domains/<int:domain_id>/delete', methods=['POST'])
 def delete_domain(domain_id: int):
    """Delete domain."""
    session = Session()
    try:
        domain = session.query(Domain).get(domain_id)
        if not domain:
            flash('Domain not found', 'error')
            return redirect(url_for('email.domains_list'))
        domain_name = domain.domain_name
        domain.is_active = False
        session.commit()
        flash(f'Domain {domain_name} deactivated', 'success')
        return redirect(url_for('email.domains_list'))
    except Exception as e:
        session.rollback()
        logger.error(f"Error deleting domain: {e}")
        flash(f'Error deleting domain: {str(e)}', 'error')
        return redirect(url_for('email.domains_list'))
    finally:
        session.close()
@email_bp.route('/users')
 def users_list():
    """List all users."""
    session = Session()
    try:
        users = session.query(User, Domain).join(Domain, User.domain_id == Domain.id).order_by(User.email).all()
        return render_template('users.html', users=users)
    finally:
        session.close()
@email_bp.route('/users/add', methods=['GET', 'POST'])
 def add_user():
    """Add new user."""
    session = Session()
    try:
        domains = session.query(Domain).filter_by(is_active=True).order_by(Domain.domain_name).all()
        if request.method == 'POST':
            email = request.form.get('email', '').strip().lower()
            password = request.form.get('password', '').strip()
            domain_id = request.form.get('domain_id', type=int)
            can_send_as_domain = request.form.get('can_send_as_domain') == 'on'
            if not all([email, password, domain_id]):
                flash('All fields are required', 'error')
                return redirect(url_for('email.add_user'))
            # Validate email format
            if '@' not in email:
                flash('Invalid email format', 'error')
                return redirect(url_for('email.add_user'))
            # Check if user already exists
            existing = session.query(User).filter_by(email=email).first()
            if existing:
                flash(f'User {email} already exists', 'error')
                return redirect(url_for('email.users_list'))
            # Create user
            user = User(
                email=email,
                password_hash=hash_password(password),
                domain_id=domain_id,
                can_send_as_domain=can_send_as_domain
            )
            session.add(user)
            session.commit()
            flash(f'User {email} added successfully', 'success')
            return redirect(url_for('email.users_list'))
        return render_template('add_user.html', domains=domains)
    except Exception as e:
        session.rollback()
        logger.error(f"Error adding user: {e}")
        flash(f'Error adding user: {str(e)}', 'error')
        return redirect(url_for('email.add_user'))
    finally:
        session.close()
@email_bp.route('/users/<int:user_id>/delete', methods=['POST'])
 def delete_user(user_id: int):
    """Delete user."""
    session = Session()
    try:
        user = session.query(User).get(user_id)
        if not user:
            flash('User not found', 'error')
            return redirect(url_for('email.users_list'))
        user_email = user.email
        user.is_active = False
        session.commit()
        flash(f'User {user_email} deactivated', 'success')
        return redirect(url_for('email.users_list'))
    except Exception as e:
        session.rollback()
        logger.error(f"Error deleting user: {e}")
        flash(f'Error deleting user: {str(e)}', 'error')
        return redirect(url_for('email.users_list'))
    finally:
        session.close()
@email_bp.route('/ips')
 def ips_list():
    """List all whitelisted IPs."""
    session = Session()
    try:
        ips = session.query(WhitelistedIP, Domain).join(Domain, WhitelistedIP.domain_id == Domain.id).order_by(WhitelistedIP.ip_address).all()
        return render_template('ips.html', ips=ips)
    finally:
        session.close()
@email_bp.route('/ips/add', methods=['GET', 'POST'])
 def add_ip():
    """Add new whitelisted IP."""
    session = Session()
    try:
        domains = session.query(Domain).filter_by(is_active=True).order_by(Domain.domain_name).all()
        if request.method == 'POST':
            ip_address = request.form.get('ip_address', '').strip()
            domain_id = request.form.get('domain_id', type=int)
            if not all([ip_address, domain_id]):
                flash('All fields are required', 'error')
                return redirect(url_for('email.add_ip'))
            # Basic IP validation
            try:
                socket.inet_aton(ip_address)
            except socket.error:
                flash('Invalid IP address format', 'error')
                return redirect(url_for('email.add_ip'))
            # Check if IP already exists for this domain
            existing = session.query(WhitelistedIP).filter_by(ip_address=ip_address, domain_id=domain_id).first()
            if existing:
                flash(f'IP {ip_address} already whitelisted for this domain', 'error')
                return redirect(url_for('email.ips_list'))
            # Create whitelisted IP
            whitelist = WhitelistedIP(
                ip_address=ip_address,
                domain_id=domain_id
            )
            session.add(whitelist)
            session.commit()
            flash(f'IP {ip_address} added to whitelist', 'success')
            return redirect(url_for('email.ips_list'))
        return render_template('add_ip.html', domains=domains)
    except Exception as e:
        session.rollback()
        logger.error(f"Error adding IP: {e}")
        flash(f'Error adding IP: {str(e)}', 'error')
        return redirect(url_for('email.add_ip'))
    finally:
        session.close()
@email_bp.route('/ips/<int:ip_id>/delete', methods=['POST'])
 def delete_ip(ip_id: int):
    """Delete whitelisted IP."""
    session = Session()
    try:
        ip_record = session.query(WhitelistedIP).get(ip_id)
        if not ip_record:
            flash('IP record not found', 'error')
            return redirect(url_for('email.ips_list'))
        ip_address = ip_record.ip_address
        ip_record.is_active = False
        session.commit()
        flash(f'IP {ip_address} removed from whitelist', 'success')
        return redirect(url_for('email.ips_list'))
    except Exception as e:
        session.rollback()
        logger.error(f"Error deleting IP: {e}")
        flash(f'Error deleting IP: {str(e)}', 'error')
        return redirect(url_for('email.ips_list'))
    finally:
        session.close()
@email_bp.route('/dkim')
 def dkim_list():
    """List all DKIM keys and DNS records."""
    session = Session()
    try:
        dkim_keys = session.query(DKIMKey, Domain).join(Domain, DKIMKey.domain_id == Domain.id).order_by(Domain.domain_name).all()
        # Get public IP for SPF records
        public_ip = get_public_ip()
        # Prepare DKIM data with DNS information
        dkim_data = []
        for dkim_key, domain in dkim_keys:
            # Get DKIM DNS record
            dkim_manager = DKIMManager()
            dns_record = dkim_manager.get_dkim_public_key_record(domain.domain_name)
            # Check existing SPF record
            spf_check = check_dns_record(domain.domain_name, 'TXT')
            existing_spf = None
            if spf_check['success']:
                for record in spf_check['records']:
                    if 'v=spf1' in record:
                        existing_spf = record
                        break
            # Generate recommended SPF
            recommended_spf = generate_spf_record(domain.domain_name, public_ip, existing_spf)
            dkim_data.append({
                'dkim_key': dkim_key,
                'domain': domain,
                'dns_record': dns_record,
                'existing_spf': existing_spf,
                'recommended_spf': recommended_spf,
                'public_ip': public_ip
            })
        return render_template('dkim.html', dkim_data=dkim_data)
    finally:
        session.close()
@email_bp.route('/dkim/<int:domain_id>/regenerate', methods=['POST'])
 def regenerate_dkim(domain_id: int):
    """Regenerate DKIM key for domain."""
    session = Session()
    try:
        domain = session.query(Domain).get(domain_id)
        if not domain:
            flash('Domain not found', 'error')
            return redirect(url_for('email.dkim_list'))
        # Deactivate existing keys
        existing_keys = session.query(DKIMKey).filter_by(domain_id=domain_id, is_active=True).all()
        for key in existing_keys:
            key.is_active = False
        # Generate new DKIM key
        dkim_manager = DKIMManager()
        if dkim_manager.generate_dkim_keypair(domain.domain_name):
            session.commit()
            flash(f'DKIM key regenerated for {domain.domain_name}', 'success')
        else:
            session.rollback()
            flash(f'Failed to regenerate DKIM key for {domain.domain_name}', 'error')
        return redirect(url_for('email.dkim_list'))
    except Exception as e:
        session.rollback()
        logger.error(f"Error regenerating DKIM: {e}")
        flash(f'Error regenerating DKIM: {str(e)}', 'error')
        return redirect(url_for('email.dkim_list'))
    finally:
        session.close()
@email_bp.route('/dkim/<int:dkim_id>/update_selector', methods=['POST'])
 def update_dkim_selector(dkim_id: int):
    """Update DKIM selector name."""
    new_selector = request.form.get('selector', '').strip()
    if not new_selector:
        flash('Selector name is required', 'error')
        return redirect(url_for('email.dkim_list'))
    # Validate selector (alphanumeric only)
    if not re.match(r'^[a-zA-Z0-9]+$', new_selector):
        flash('Selector must contain only letters and numbers', 'error')
        return redirect(url_for('email.dkim_list'))
    session = Session()
    try:
        dkim_key = session.query(DKIMKey).get(dkim_id)
        if not dkim_key:
            flash('DKIM key not found', 'error')
            return redirect(url_for('email.dkim_list'))
        old_selector = dkim_key.selector
        dkim_key.selector = new_selector
        session.commit()
        flash(f'DKIM selector updated from {old_selector} to {new_selector}', 'success')
        return redirect(url_for('email.dkim_list'))
    except Exception as e:
        session.rollback()
        logger.error(f"Error updating DKIM selector: {e}")
        flash(f'Error updating DKIM selector: {str(e)}', 'error')
        return redirect(url_for('email.dkim_list'))
    finally:
        session.close()
@email_bp.route('/dkim/check_dns', methods=['POST'])
 def check_dkim_dns():
    """Check DKIM DNS record via AJAX."""
    domain = request.form.get('domain')
    selector = request.form.get('selector')
    expected_value = request.form.get('expected_value')
    if not all([domain, selector, expected_value]):
        return jsonify({'success': False, 'message': 'Missing parameters'})
    dns_name = f"{selector}._domainkey.{domain}"
    result = check_dns_record(dns_name, 'TXT', expected_value)
    return jsonify(result)
@email_bp.route('/dkim/check_spf', methods=['POST'])
 def check_spf_dns():
    """Check SPF DNS record via AJAX."""
    domain = request.form.get('domain')
    if not domain:
        return jsonify({'success': False, 'message': 'Domain is required'})
    result = check_dns_record(domain, 'TXT')
    # Look for SPF record
    spf_record = None
    if result['success']:
        for record in result['records']:
            if 'v=spf1' in record:
                spf_record = record
                break
    if spf_record:
        result['spf_record'] = spf_record
        result['message'] = 'SPF record found'
    else:
        result['success'] = False
        result['message'] = 'No SPF record found'
    return jsonify(result)
@email_bp.route('/settings')
 def settings():
    """Display and edit server settings."""
    settings = load_settings()
    return render_template('settings.html', settings=settings)
@email_bp.route('/settings/update', methods=['POST'])
 def update_settings():
    """Update server settings."""
    try:
        # Load current settings
        config = load_settings()
        # Update settings from form
        for section_name in config.sections():
            for key in config[section_name]:
                if not key.startswith(';'):  # Skip comment lines
                    form_key = f"{section_name}.{key}"
                    if form_key in request.form:
                        config.set(section_name, key, request.form[form_key])
        # Save settings
        with open(SETTINGS_PATH, 'w') as f:
            config.write(f)
        flash('Settings updated successfully. Restart the server to apply changes.', 'success')
        return redirect(url_for('email.settings'))
    except Exception as e:
        logger.error(f"Error updating settings: {e}")
        flash(f'Error updating settings: {str(e)}', 'error')
        return redirect(url_for('email.settings'))
@email_bp.route('/logs')
 def logs():
    """Display email and authentication logs."""
    session = Session()
    try:
        # Get filter parameters
        filter_type = request.args.get('type', 'all')
        page = request.args.get('page', 1, type=int)
        per_page = 50
        if filter_type == 'emails':
            # Email logs only
            total_query = session.query(EmailLog)
            logs_query = session.query(EmailLog).order_by(EmailLog.created_at.desc())
        elif filter_type == 'auth':
            # Auth logs only
            total_query = session.query(AuthLog)
            logs_query = session.query(AuthLog).order_by(AuthLog.created_at.desc())
        else:
            # Combined view (default)
            email_logs = session.query(EmailLog).order_by(EmailLog.created_at.desc()).limit(per_page//2).all()
            auth_logs = session.query(AuthLog).order_by(AuthLog.created_at.desc()).limit(per_page//2).all()
            # Convert to unified format
            combined_logs = []
            for log in email_logs:
                combined_logs.append({
                    'type': 'email',
                    'timestamp': log.created_at,
                    'data': log
                })
            for log in auth_logs:
                combined_logs.append({
                    'type': 'auth',
                    'timestamp': log.created_at,
                    'data': log
                })
            # Sort by timestamp
            combined_logs.sort(key=lambda x: x['timestamp'], reverse=True)
            return render_template('logs.html', 
                                 logs=combined_logs[:per_page], 
                                 filter_type=filter_type,
                                 page=page,
                                 has_next=len(combined_logs) > per_page,
                                 has_prev=page > 1)
        # Pagination for single type logs
        offset = (page - 1) * per_page
        total = total_query.count()
        logs = logs_query.offset(offset).limit(per_page).all()
        has_next = offset + per_page < total
        has_prev = page > 1
        return render_template('logs.html', 
                             logs=logs, 
                             filter_type=filter_type,
                             page=page,
                             has_next=has_next,
                             has_prev=has_prev)
    finally:
        session.close()
 # Error handlers
@email_bp.errorhandler(404)
 def not_found(error):
    """Handle 404 errors."""
    from datetime import datetime
    return render_template('error.html', 
                         error_code=404,
                         error_message='Page not found',
                         current_time=datetime.now()), 404
@email_bp.errorhandler(500)
 def internal_error(error):
    """Handle 500 errors."""
    from datetime import datetime
    logger.error(f"Internal error: {error}")
    return render_template('error.html',
                         error_code=500,
                         error_message='Internal server error',
                         current_time=datetime.now()), 500
--- a/email_frontend/example_app.py
+++ b/email_frontend/example_app.py
@@ -0,0 +1,209 @@
 #!/usr/bin/env python3
 """
 Example Flask Application demonstrating SMTP Management Frontend
 This example shows how to integrate the email_frontend Blueprint
 """
 import os
 import sys
 from datetime import datetime
 from flask import Flask, render_template, request, redirect, url_for, flash, jsonify
 from flask_sqlalchemy import SQLAlchemy
 # Add the project root to Python path
 sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 # Import the SMTP server models and utilities
 try:
    from database import Database, Domain, User, WhitelistedIP, DKIMKey, EmailLog, AuthLog
    from email_frontend.blueprint import email_bp
 except ImportError as e:
    print(f"Error importing modules: {e}")
    print("Make sure you're running this from the SMTP_Server directory")
    sys.exit(1)
 def create_app(config_file='settings.ini'):
    """Create and configure the Flask application."""
    app = Flask(__name__)
    # Basic Flask configuration
    app.config['SECRET_KEY'] = 'your-secret-key-change-this-in-production'
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///smtp_server.db'
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
    # Initialize database
    db = SQLAlchemy(app)
    # Create database tables if they don't exist
    with app.app_context():
        db.create_all()
    # Register the email management blueprint
    app.register_blueprint(email_bp, url_prefix='/email')
    # Main application routes
    @app.route('/')
    def index():
        """Main application dashboard."""
        return redirect(url_for('email.dashboard'))
    @app.route('/health')
    def health_check():
        """Simple health check endpoint."""
        return jsonify({
            'status': 'healthy',
            'timestamp': datetime.utcnow().isoformat(),
            'service': 'SMTP Management Frontend'
        })
    # Error handlers
    @app.errorhandler(404)
    def not_found_error(error):
        """Handle 404 errors."""
        return render_template('error.html', 
                             error_code=404,
                             error_message="Page not found",
                             error_details="The requested page could not be found."), 404
    @app.errorhandler(500)
    def internal_error(error):
        """Handle 500 errors."""
        return render_template('error.html',
                             error_code=500,
                             error_message="Internal server error",
                             error_details=str(error)), 500
    @app.errorhandler(403)
    def forbidden_error(error):
        """Handle 403 errors."""
        return render_template('error.html',
                             error_code=403,
                             error_message="Access forbidden",
                             error_details="You don't have permission to access this resource."), 403
    # Context processors for templates
    @app.context_processor
    def utility_processor():
        """Add utility functions to template context."""
        return {
            'moment': datetime,
            'len': len,
            'enumerate': enumerate,
            'zip': zip,
            'str': str,
            'int': int,
        }
    return app
 def init_sample_data():
    """Initialize the database with sample data for testing."""
    try:
        # Initialize database connection
        db = Database('settings.ini')
        # Add sample domains
        sample_domains = [
            'example.com',
            'testdomain.org',
            'mydomain.net'
        ]
        for domain_name in sample_domains:
            if not db.get_domain(domain_name):
                domain = Domain(domain_name)
                db.add_domain(domain)
                print(f"Added sample domain: {domain_name}")
        # Add sample users
        sample_users = [
            ('admin@example.com', 'example.com', 'admin123'),
            ('user@example.com', 'example.com', 'user123'),
            ('test@testdomain.org', 'testdomain.org', 'test123')
        ]
        for email, domain, password in sample_users:
            if not db.get_user(email):
                user = User(email, domain, password)
                db.add_user(user)
                print(f"Added sample user: {email}")
        # Add sample whitelisted IPs
        sample_ips = [
            ('127.0.0.1', 'example.com', 'localhost'),
            ('192.168.1.0/24', 'example.com', 'local network'),
            ('10.0.0.0/8', 'testdomain.org', 'private network')
        ]
        for ip, domain, description in sample_ips:
            if not db.get_whitelisted_ip(ip, domain):
                whitelisted_ip = WhitelistedIP(ip, domain, description)
                db.add_whitelisted_ip(whitelisted_ip)
                print(f"Added sample whitelisted IP: {ip} for {domain}")
        print("Sample data initialized successfully!")
    except Exception as e:
        print(f"Error initializing sample data: {e}")
 def main():
    """Main function to run the example application."""
    import argparse
    parser = argparse.ArgumentParser(description='SMTP Management Frontend Example')
    parser.add_argument('--host', default='127.0.0.1', help='Host to bind to')
    parser.add_argument('--port', type=int, default=5000, help='Port to bind to')
    parser.add_argument('--debug', action='store_true', help='Enable debug mode')
    parser.add_argument('--init-data', action='store_true', help='Initialize sample data')
    parser.add_argument('--config', default='settings.ini', help='Configuration file path')
    args = parser.parse_args()
    # Initialize sample data if requested
    if args.init_data:
        print("Initializing sample data...")
        init_sample_data()
        return
    # Create Flask application
    app = create_app(args.config)
    print(f"""
    SMTP Management Frontend Example
    ================================
    Starting server on http://{args.host}:{args.port}
    Available routes:
    - /                     -> Dashboard (redirects to /email/dashboard)
    - /email/dashboard      -> Main dashboard
    - /email/domains        -> Domain management
    - /email/users          -> User management  
    - /email/ips            -> IP whitelist management
    - /email/dkim           -> DKIM management
    - /email/settings       -> Server settings
    - /email/logs           -> Email and authentication logs
    - /health               -> Health check endpoint
    Debug mode: {'ON' if args.debug else 'OFF'}
    To initialize sample data, run:
    python example_app.py --init-data
    """)
    # Run the Flask application
    try:
        app.run(
            host=args.host,
            port=args.port,
            debug=args.debug,
            threaded=True
        )
    except KeyboardInterrupt:
        print("\nShutting down gracefully...")
    except Exception as e:
        print(f"Error starting server: {e}")
        sys.exit(1)
 if __name__ == '__main__':
    main()
--- a/email_frontend/requirements.txt
+++ b/email_frontend/requirements.txt
@@ -0,0 +1,7 @@
 Flask
 Flask-SQLAlchemy
 Jinja2
 Werkzeug
 dnspython
 cryptography
 requests
--- a/email_frontend/static/css/smtp-management.css
+++ b/email_frontend/static/css/smtp-management.css
@@ -0,0 +1,260 @@
 /* Custom CSS for SMTP Management Frontend */
 /* Enhanced dark theme tweaks */
 .card {
    border: 1px solid #404040;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 .card-header {
    border-bottom: 1px solid #404040;
 }
 .table-dark {
    --bs-table-bg: #2d3748;
    --bs-table-striped-bg: #374151;
 }
 /* Status badges */
 .status-active {
    background-color: #10b981 !important;
 }
 .status-inactive {
    background-color: #ef4444 !important;
 }
 .status-pending {
    background-color: #f59e0b !important;
 }
 /* Custom form styling */
 .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
 }
 .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
 }
 /* Copy button styling */
 .copy-btn {
    position: relative;
    overflow: hidden;
 }
 .copy-btn::after {
    content: "Copied!";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #10b981;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
 }
 .copy-btn.copied::after {
    opacity: 1;
 }
 /* DNS record styling */
 .dns-record {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    padding: 12px;
    margin: 8px 0;
 }
 .dns-record-header {
    color: #9ca3af;
    font-weight: bold;
    margin-bottom: 4px;
 }
 .dns-record-value {
    color: #e5e7eb;
    word-break: break-all;
 }
 /* Log entry styling */
 .log-entry {
    border-left: 4px solid #374151;
    padding-left: 12px;
    margin-bottom: 8px;
 }
 .log-entry.log-error {
    border-left-color: #ef4444;
 }
 .log-entry.log-warning {
    border-left-color: #f59e0b;
 }
 .log-entry.log-info {
    border-left-color: #3b82f6;
 }
 .log-entry.log-success {
    border-left-color: #10b981;
 }
 /* Statistics cards */
 .stat-card {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border: 1px solid #4b5563;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
 }
 .stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #3b82f6;
 }
 .stat-label {
    color: #9ca3af;
    font-size: 0.9rem;
    margin-top: 8px;
 }
 /* Loading states */
 .loading {
    opacity: 0.6;
    pointer-events: none;
 }
 .spinner-border-sm {
    width: 1rem;
    height: 1rem;
 }
 /* Responsive table wrapper */
 .table-responsive {
    border-radius: 8px;
    border: 1px solid #404040;
 }
 /* Alert styling */
 .alert {
    border: none;
    border-radius: 8px;
 }
 .alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-left: 4px solid #10b981;
 }
 .alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-left: 4px solid #ef4444;
 }
 .alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-left: 4px solid #f59e0b;
 }
 .alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-left: 4px solid #3b82f6;
 }
 /* Custom scrollbar */
 .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #1f2937;
 }
 .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 4px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
 }
 /* Animation classes */
 .fade-in {
    animation: fadeIn 0.3s ease-in;
 }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
 }
 .slide-in {
    animation: slideIn 0.3s ease-out;
 }
@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
 }
 /* Tooltip styling */
 .tooltip {
    font-size: 12px;
 }
 .tooltip-inner {
    background-color: #1f2937;
    border: 1px solid #374151;
 }
 .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #374151;
 }
 .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #374151;
 }
 /* Mobile responsiveness */
@media (max-width: 768px) {
    .stat-number {
        font-size: 1.8rem;
    }
    .dns-record {
        font-size: 12px;
        padding: 8px;
    }
    .table-responsive {
        font-size: 14px;
    }
 }
--- a/email_frontend/static/js/smtp-management.js
+++ b/email_frontend/static/js/smtp-management.js
@@ -0,0 +1,285 @@
 /* Custom JavaScript for SMTP Management Frontend */
 // Global utilities
 const SMTPManagement = {
    // Copy text to clipboard
    copyToClipboard: function(text, button) {
        navigator.clipboard.writeText(text).then(() => {
            this.showCopySuccess(button);
        }).catch(err => {
            console.error('Failed to copy: ', err);
            this.showCopyError(button);
        });
    },
    // Show copy success feedback
    showCopySuccess: function(button) {
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
        button.classList.remove('btn-outline-light');
        button.classList.add('btn-success');
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('btn-success');
            button.classList.add('btn-outline-light');
        }, 2000);
    },
    // Show copy error feedback
    showCopyError: function(button) {
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-times me-1"></i>Failed!';
        button.classList.remove('btn-outline-light');
        button.classList.add('btn-danger');
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('btn-danger');
            button.classList.add('btn-outline-light');
        }, 2000);
    },
    // Format timestamps
    formatTimestamp: function(timestamp) {
        const date = new Date(timestamp);
        return date.toLocaleString();
    },
    // Validate email address
    validateEmail: function(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    },
    // Validate IP address
    validateIP: function(ip) {
        const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
        const ipv6Regex = /^(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/;
        return ipv4Regex.test(ip) || ipv6Regex.test(ip);
    },
    // Show loading state
    showLoading: function(element) {
        element.classList.add('loading');
        const spinner = element.querySelector('.spinner-border');
        if (spinner) {
            spinner.style.display = 'inline-block';
        }
    },
    // Hide loading state
    hideLoading: function(element) {
        element.classList.remove('loading');
        const spinner = element.querySelector('.spinner-border');
        if (spinner) {
            spinner.style.display = 'none';
        }
    },
    // Show toast notification
    showToast: function(message, type = 'info') {
        const toastContainer = document.getElementById('toast-container') || this.createToastContainer();
        const toast = this.createToast(message, type);
        toastContainer.appendChild(toast);
        // Auto-remove after 5 seconds
        setTimeout(() => {
            toast.remove();
        }, 5000);
    },
    // Create toast container
    createToastContainer: function() {
        const container = document.createElement('div');
        container.id = 'toast-container';
        container.className = 'position-fixed top-0 end-0 p-3';
        container.style.zIndex = '1056';
        document.body.appendChild(container);
        return container;
    },
    // Create toast element
    createToast: function(message, type) {
        const toast = document.createElement('div');
        toast.className = `toast align-items-center text-white bg-${type} border-0`;
        toast.setAttribute('role', 'alert');
        toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">${message}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        `;
        // Initialize Bootstrap toast
        const bsToast = new bootstrap.Toast(toast);
        bsToast.show();
        return toast;
    },
    // Auto-refresh functionality
    autoRefresh: function(url, interval = 30000) {
        setInterval(() => {
            fetch(url, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const newContent = doc.querySelector('#refresh-content');
                const currentContent = document.querySelector('#refresh-content');
                if (newContent && currentContent) {
                    currentContent.innerHTML = newContent.innerHTML;
                }
            })
            .catch(error => {
                console.error('Auto-refresh failed:', error);
            });
        }, interval);
    }
 };
 // DNS verification functionality
 const DNSVerification = {
    // Check DNS record
    checkDNSRecord: function(domain, recordType, expectedValue) {
        return fetch('/email/check-dns', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({
                domain: domain,
                record_type: recordType,
                expected_value: expectedValue
            })
        })
        .then(response => response.json());
    },
    // Update DNS status indicator
    updateDNSStatus: function(element, status, message) {
        const statusIcon = element.querySelector('.dns-status-icon');
        const statusText = element.querySelector('.dns-status-text');
        if (statusIcon && statusText) {
            statusIcon.className = `dns-status-icon fas ${status === 'valid' ? 'fa-check-circle text-success' : 'fa-times-circle text-danger'}`;
            statusText.textContent = message;
        }
    }
 };
 // Form validation
 const FormValidation = {
    // Real-time email validation
    validateEmailField: function(input) {
        const isValid = SMTPManagement.validateEmail(input.value);
        this.updateFieldStatus(input, isValid, 'Please enter a valid email address');
        return isValid;
    },
    // Real-time IP validation
    validateIPField: function(input) {
        const isValid = SMTPManagement.validateIP(input.value);
        this.updateFieldStatus(input, isValid, 'Please enter a valid IP address');
        return isValid;
    },
    // Update field validation status
    updateFieldStatus: function(input, isValid, errorMessage) {
        const feedback = input.parentNode.querySelector('.invalid-feedback');
        if (isValid) {
            input.classList.remove('is-invalid');
            input.classList.add('is-valid');
            if (feedback) feedback.textContent = '';
        } else {
            input.classList.remove('is-valid');
            input.classList.add('is-invalid');
            if (feedback) feedback.textContent = errorMessage;
        }
    }
 };
 // Initialize on DOM load
 document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    // Initialize form validation
    const emailInputs = document.querySelectorAll('input[type="email"]');
    emailInputs.forEach(input => {
        input.addEventListener('blur', () => FormValidation.validateEmailField(input));
    });
    const ipInputs = document.querySelectorAll('input[data-validate="ip"]');
    ipInputs.forEach(input => {
        input.addEventListener('blur', () => FormValidation.validateIPField(input));
    });
    // Initialize auto-refresh for logs page
    if (document.querySelector('#logs-page')) {
        SMTPManagement.autoRefresh(window.location.href, 30000);
    }
    // Initialize current IP detection
    const currentIPSpan = document.querySelector('#current-ip');
    if (currentIPSpan) {
        fetch('https://api.ipify.org?format=json')
            .then(response => response.json())
            .then(data => {
                currentIPSpan.textContent = data.ip;
            })
            .catch(() => {
                currentIPSpan.textContent = 'Unable to detect';
            });
    }
    // Initialize copy buttons
    const copyButtons = document.querySelectorAll('.copy-btn');
    copyButtons.forEach(button => {
        button.addEventListener('click', function() {
            const textToCopy = this.getAttribute('data-copy') || this.nextElementSibling.textContent;
            SMTPManagement.copyToClipboard(textToCopy, this);
        });
    });
    // Initialize DNS check buttons
    const dnsCheckButtons = document.querySelectorAll('.dns-check-btn');
    dnsCheckButtons.forEach(button => {
        button.addEventListener('click', function() {
            const domain = this.getAttribute('data-domain');
            const recordType = this.getAttribute('data-record-type');
            const expectedValue = this.getAttribute('data-expected-value');
            const statusElement = this.closest('.dns-record').querySelector('.dns-status');
            SMTPManagement.showLoading(this);
            DNSVerification.checkDNSRecord(domain, recordType, expectedValue)
                .then(result => {
                    DNSVerification.updateDNSStatus(statusElement, result.status, result.message);
                    SMTPManagement.hideLoading(this);
                })
                .catch(error => {
                    console.error('DNS check failed:', error);
                    DNSVerification.updateDNSStatus(statusElement, 'error', 'DNS check failed');
                    SMTPManagement.hideLoading(this);
                });
        });
    });
 });
 // Export for use in other scripts
 window.SMTPManagement = SMTPManagement;
 window.DNSVerification = DNSVerification;
 window.FormValidation = FormValidation;
--- a/email_frontend/templates/add_domain.html
+++ b/email_frontend/templates/add_domain.html
@@ -0,0 +1,112 @@
 {% extends "base.html" %}
 {% block title %}Add Domain - Email Server Management{% endblock %}
 {% block page_title %}Add New Domain{% endblock %}
 {% block content %}
 <div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-plus-circle me-2"></i>
                    Add New Domain
                </h5>
            </div>
            <div class="card-body">
                <form method="post">
                    <div class="mb-3">
                        <label for="domain_name" class="form-label">
                            <i class="bi bi-globe me-1"></i>
                            Domain Name
                        </label>
                        <input type="text" 
                               class="form-control" 
                               id="domain_name" 
                               name="domain_name" 
                               placeholder="example.com"
                               required
                               pattern="^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.?[a-zA-Z]{2,}$">
                        <div class="form-text">
                            Enter the domain name that will be used for sending emails (e.g., example.com)
                        </div>
                    </div>
                    <div class="alert alert-info">
                        <h6 class="alert-heading">
                            <i class="bi bi-info-circle me-2"></i>
                            What happens next?
                        </h6>
                        <ul class="mb-0">
                            <li>Domain will be added to the system</li>
                            <li>DKIM key pair will be automatically generated</li>
                            <li>You'll need to configure DNS records</li>
                            <li>Add users or whitelist IPs for authentication</li>
                        </ul>
                    </div>
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('email.domains_list') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left me-2"></i>
                            Back to Domains
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-2"></i>
                            Add Domain
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-question-circle me-2"></i>
                    Domain Requirements
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-success">
                            <i class="bi bi-check-circle me-1"></i>
                            Valid Examples
                        </h6>
                        <ul class="list-unstyled">
                            <li><code>example.com</code></li>
                            <li><code>mail.example.com</code></li>
                            <li><code>my-domain.org</code></li>
                            <li><code>company.co.uk</code></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-danger">
                            <i class="bi bi-x-circle me-1"></i>
                            Invalid Examples
                        </h6>
                        <ul class="list-unstyled">
                            <li><code>http://example.com</code></li>
                            <li><code>example</code></li>
                            <li><code>.example.com</code></li>
                            <li><code>example..com</code></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    document.getElementById('domain_name').addEventListener('input', function(e) {
        // Convert to lowercase and remove protocol if present
        let value = e.target.value.toLowerCase();
        value = value.replace(/^https?:\/\//, '');
        value = value.replace(/\/$/, '');
        e.target.value = value;
    });
 </script>
 {% endblock %}
--- a/email_frontend/templates/add_ip.html
+++ b/email_frontend/templates/add_ip.html
@@ -0,0 +1,228 @@
 {% extends "base.html" %}
 {% block title %}Add IP Address - Email Server{% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="bi bi-shield-plus me-2"></i>
                        Add IP Address to Whitelist
                    </h4>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="mb-3">
                            <label for="ip_address" class="form-label">IP Address</label>
                            <input type="text" 
                                   class="form-control font-monospace" 
                                   id="ip_address" 
                                   name="ip_address" 
                                   required 
                                   pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
                                   placeholder="192.168.1.100"
                                   value="{{ request.args.get('ip', '') }}">
                            <div class="form-text">
                                IPv4 address that will be allowed to send emails without authentication
                            </div>
                        </div>
                        <div class="mb-4">
                            <label for="domain_id" class="form-label">Authorized Domain</label>
                            <select class="form-select" id="domain_id" name="domain_id" required>
                                <option value="">Select a domain...</option>
                                {% for domain in domains %}
                                <option value="{{ domain.id }}">{{ domain.domain_name }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">
                                This IP will only be able to send emails for the selected domain
                            </div>
                        </div>
                        <div class="alert alert-warning">
                            <h6 class="alert-heading">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                Security Note
                            </h6>
                            <ul class="mb-0">
                                <li>Only whitelist trusted IP addresses</li>
                                <li>This IP can send emails without username/password authentication</li>
                                <li>The IP is restricted to the selected domain only</li>
                                <li>Use static IP addresses for reliable access</li>
                            </ul>
                        </div>
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('email.ips_list') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left me-2"></i>
                                Back to IP List
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-shield-plus me-2"></i>
                                Add to Whitelist
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
 </div>
 <!-- Current IP Detection and Available Domains -->
 <div class="row mt-4">
    <div class="col-md-4 mx-auto">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-geo-alt me-2"></i>
                    Your Current IP
                </h6>
            </div>
            <div class="card-body text-center">
                <div class="fw-bold font-monospace fs-5 mb-2" id="current-ip">
                    <span class="spinner-border spinner-border-sm me-2"></span>
                    Detecting...
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="useCurrentIP()">
                    <i class="bi bi-arrow-up me-1"></i>
                    Use This IP
                </button>
            </div>
        </div>
    </div>
    {% if domains %}
    <div class="col-md-4 mx-auto">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-server me-2"></i>
                    Available Domains
                </h6>
            </div>
            <div class="card-body">
                {% for domain in domains %}
                <div class="mb-2">
                    <div class="fw-bold">{{ domain.domain_name }}</div>
                    <small class="text-muted">
                        Created: {{ domain.created_at.strftime('%Y-%m-%d') }}
                    </small>
                </div>
                {% if not loop.last %}<hr class="my-2">{% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
 </div>
 <!-- Example Use Cases -->
 <div class="row mt-4">
    <div class="col-md-8 mx-auto">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-lightbulb me-2"></i>
                    Common Use Cases
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary">
                            <i class="bi bi-server me-1"></i>
                            Application Servers
                        </h6>
                        <p class="text-muted small">
                            Web applications that need to send transactional emails 
                            (password resets, notifications, etc.)
                        </p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-success">
                            <i class="bi bi-clock me-1"></i>
                            Scheduled Tasks
                        </h6>
                        <p class="text-muted small">
                            Cron jobs or scheduled scripts that send automated 
                            reports or alerts
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-warning">
                            <i class="bi bi-monitor me-1"></i>
                            Monitoring Systems
                        </h6>
                        <p class="text-muted small">
                            Monitoring tools that send alerts and status updates 
                            to administrators
                        </p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-info">
                            <i class="bi bi-cloud me-1"></i>
                            Cloud Services
                        </h6>
                        <p class="text-muted small">
                            Cloud-based applications or services that need to 
                            send emails on behalf of your domain
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    // Detect current IP address
    async function detectCurrentIP() {
        try {
            const response = await fetch('https://api.ipify.org?format=json');
            const data = await response.json();
            document.getElementById('current-ip').innerHTML = 
                `<span class="text-primary">${data.ip}</span>`;
        } catch (error) {
            document.getElementById('current-ip').innerHTML = 
                '<span class="text-muted">Unable to detect</span>';
        }
    }
    function useCurrentIP() {
        const currentIPElement = document.getElementById('current-ip');
        const ip = currentIPElement.textContent.trim();
        if (ip && ip !== 'Detecting...' && ip !== 'Unable to detect') {
            document.getElementById('ip_address').value = ip;
            // Focus on domain selection
            document.getElementById('domain_id').focus();
        } else {
            alert('Unable to detect current IP address');
        }
    }
    // IP address validation
    document.getElementById('ip_address').addEventListener('input', function(e) {
        const ip = e.target.value;
        const ipPattern = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
        if (ip && !ipPattern.test(ip)) {
            e.target.setCustomValidity('Please enter a valid IPv4 address');
        } else {
            e.target.setCustomValidity('');
        }
    });
    // Auto-detect IP on page load
    detectCurrentIP();
 </script>
 {% endblock %}
--- a/email_frontend/templates/add_user.html
+++ b/email_frontend/templates/add_user.html
@@ -0,0 +1,176 @@
 {% extends "base.html" %}
 {% block title %}Add User - Email Server{% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="bi bi-person-plus me-2"></i>
                        Add New User
                    </h4>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" 
                                   class="form-control" 
                                   id="email" 
                                   name="email" 
                                   required 
                                   placeholder="user@example.com">
                            <div class="form-text">
                                The email address for authentication and sending
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" 
                                   class="form-control" 
                                   id="password" 
                                   name="password" 
                                   required 
                                   minlength="6">
                            <div class="form-text">
                                Minimum 6 characters
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="domain_id" class="form-label">Domain</label>
                            <select class="form-select" id="domain_id" name="domain_id" required>
                                <option value="">Select a domain...</option>
                                {% for domain in domains %}
                                <option value="{{ domain.id }}">{{ domain.domain_name }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">
                                The domain this user belongs to
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="can_send_as_domain" 
                                       name="can_send_as_domain">
                                <label class="form-check-label" for="can_send_as_domain">
                                    <strong>Domain Administrator</strong>
                                </label>
                                <div class="form-text">
                                    If checked, user can send emails as any address in their domain.
                                    Otherwise, user can only send as their own email address.
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-info">
                            <h6 class="alert-heading">
                                <i class="bi bi-info-circle me-2"></i>
                                Permission Levels
                            </h6>
                            <ul class="mb-0">
                                <li><strong>Regular User:</strong> Can only send emails from their own email address</li>
                                <li><strong>Domain Admin:</strong> Can send emails from any address in their domain (e.g., noreply@domain.com, support@domain.com)</li>
                            </ul>
                        </div>
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('email.users_list') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left me-2"></i>
                                Back to Users
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-person-plus me-2"></i>
                                Add User
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
 </div>
 <!-- Domain information sidebar -->
 <div class="row mt-4">
    {% if domains %}
    <div class="col-md-6 mx-auto">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    Available Domains
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for domain in domains %}
                    <div class="col-md-6 mb-2">
                        <div class="border rounded p-2">
                            <div class="fw-bold">{{ domain.domain_name }}</div>
                            <small class="text-muted">
                                Created: {{ domain.created_at.strftime('%Y-%m-%d') }}
                            </small>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    // Auto-fill domain based on email input
    document.getElementById('email').addEventListener('input', function(e) {
        const email = e.target.value;
        const atIndex = email.indexOf('@');
        if (atIndex > -1) {
            const domain = email.substring(atIndex + 1).toLowerCase();
            const domainSelect = document.getElementById('domain_id');
            // Try to find matching domain in select options
            for (let option of domainSelect.options) {
                if (option.text.toLowerCase() === domain) {
                    domainSelect.value = option.value;
                    break;
                }
            }
        }
    });
    // Show/hide domain admin explanation
    document.getElementById('can_send_as_domain').addEventListener('change', function(e) {
        const isChecked = e.target.checked;
        const domainSelect = document.getElementById('domain_id');
        const selectedDomain = domainSelect.options[domainSelect.selectedIndex]?.text || 'domain.com';
        // Update help text dynamically
        const helpText = e.target.closest('.form-check').querySelector('.form-text');
        if (isChecked) {
            helpText.innerHTML = `User can send as any address in ${selectedDomain} (e.g., noreply@${selectedDomain}, support@${selectedDomain})`;
        } else {
            helpText.innerHTML = 'User can only send as their own email address.';
        }
    });
    // Update help text when domain changes
    document.getElementById('domain_id').addEventListener('change', function(e) {
        const checkbox = document.getElementById('can_send_as_domain');
        if (checkbox.checked) {
            checkbox.dispatchEvent(new Event('change'));
        }
    });
 </script>
 {% endblock %}
--- a/email_frontend/templates/base.html
+++ b/email_frontend/templates/base.html
@@ -0,0 +1,227 @@
 <!DOCTYPE html>
 <html lang="en" data-bs-theme="dark">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Email Server Management{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <!-- Custom CSS -->
    <style>
        :root {
            --sidebar-width: 280px;
        }
        body {
            background-color: #1a1a1a;
            color: #e0e0e0;
        }
        .main-container {
            display: flex;
            min-height: 100vh;
        }
        .content-area {
            flex: 1;
            margin-left: var(--sidebar-width);
            padding: 20px;
            transition: margin-left 0.3s ease;
        }
        .navbar-brand {
            color: #fff !important;
        }
        .card {
            background-color: #2d2d2d;
            border: 1px solid #404040;
        }
        .table-dark {
            --bs-table-bg: #2d2d2d;
            --bs-table-border-color: #404040;
        }
        .btn-outline-light:hover {
            background-color: #495057;
        }
        .alert-success {
            background-color: #0f5132;
            border-color: #146c43;
            color: #75b798;
        }
        .alert-danger {
            background-color: #58151c;
            border-color: #842029;
            color: #ea868f;
        }
        .alert-warning {
            background-color: #664d03;
            border-color: #997404;
            color: #ffda6a;
        }
        .alert-info {
            background-color: #055160;
            border-color: #087990;
            color: #6edff6;
        }
        .form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        .form-select:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        .text-muted {
            color: #adb5bd !important;
        }
        .border-success {
            border-color: #198754 !important;
        }
        .border-danger {
            border-color: #dc3545 !important;
        }
        .text-success {
            color: #75b798 !important;
        }
        .text-danger {
            color: #ea868f !important;
        }
        .text-warning {
            color: #ffda6a !important;
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #2d2d2d;
        }
        ::-webkit-scrollbar-thumb {
            background: #495057;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #6c757d;
        }
    </style>
    <!-- Custom SMTP Management CSS -->
    <link href="{{ url_for('email.static', filename='css/smtp-management.css') }}" rel="stylesheet">
    {% block extra_css %}{% endblock %}
 </head>
 <body>
    <div class="main-container">
        <!-- Sidebar -->
        {% include 'sidebar_email.html' %}
        <!-- Main content -->
        <div class="content-area">
            <!-- Top navbar -->
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
                <div class="container-fluid">
                    <span class="navbar-brand mb-0 h1">
                        <i class="bi bi-envelope-fill me-2"></i>
                        {% block page_title %}Email Server Management{% endblock %}
                    </span>
                    <div class="navbar-nav ms-auto">
                        <span class="navbar-text">
                            <i class="bi bi-clock-fill me-1"></i>
                            <span id="current-time"></span>
                        </span>
                    </div>
                </div>
            </nav>
            <!-- Flash messages -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <div class="row">
                        <div class="col-12">
                            {% for category, message in messages %}
                                <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                                    <i class="bi bi-{{ 'exclamation-triangle' if category == 'error' else 'check-circle' if category == 'success' else 'info-circle' }} me-2"></i>
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            {% endwith %}
            <!-- Page content -->
            <main>
                {% block content %}{% endblock %}
            </main>
        </div>
    </div>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Custom JS -->
    <script>
        // Update current time
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString();
            const dateString = now.toLocaleDateString();
            document.getElementById('current-time').textContent = `${dateString} ${timeString}`;
        }
        // Update time every second
        setInterval(updateTime, 1000);
        updateTime(); // Initial call
        // Auto-dismiss alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert:not(.alert-permanent)');
            alerts.forEach(function(alert) {
                const bootstrapAlert = new bootstrap.Alert(alert);
                bootstrapAlert.close();
            });
        }, 5000);
        // Confirmation dialogs for delete actions
        document.addEventListener('DOMContentLoaded', function() {
            const deleteButtons = document.querySelectorAll('[data-confirm]');
            deleteButtons.forEach(function(button) {
                button.addEventListener('click', function(e) {
                    if (!confirm(this.getAttribute('data-confirm'))) {
                        e.preventDefault();
                    }
                });
            });
        });
    </script>
    <!-- Custom SMTP Management JavaScript -->
    <script src="{{ url_for('email.static', filename='js/smtp-management.js') }}"></script>
    {% block extra_js %}{% endblock %}
 </body>
 </html>
--- a/email_frontend/templates/dashboard.html
+++ b/email_frontend/templates/dashboard.html
@@ -0,0 +1,285 @@
 {% extends "base.html" %}
 {% block title %}Dashboard - Email Server Management{% endblock %}
 {% block page_title %}Dashboard{% endblock %}
 {% block content %}
 <div class="row">
    <!-- Statistics Cards -->
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card border-primary">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h5 class="card-title text-primary mb-1">
                            <i class="bi bi-globe me-2"></i>
                            Domains
                        </h5>
                        <h3 class="mb-0">{{ domain_count }}</h3>
                        <small class="text-muted">Active domains</small>
                    </div>
                    <div class="fs-2 text-primary opacity-50">
                        <i class="bi bi-globe"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card border-success">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h5 class="card-title text-success mb-1">
                            <i class="bi bi-people me-2"></i>
                            Users
                        </h5>
                        <h3 class="mb-0">{{ user_count }}</h3>
                        <small class="text-muted">Authenticated users</small>
                    </div>
                    <div class="fs-2 text-success opacity-50">
                        <i class="bi bi-people"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card border-warning">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h5 class="card-title text-warning mb-1">
                            <i class="bi bi-shield-check me-2"></i>
                            DKIM Keys
                        </h5>
                        <h3 class="mb-0">{{ dkim_count }}</h3>
                        <small class="text-muted">Active DKIM keys</small>
                    </div>
                    <div class="fs-2 text-warning opacity-50">
                        <i class="bi bi-shield-check"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card border-info">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h5 class="card-title text-info mb-1">
                            <i class="bi bi-activity me-2"></i>
                            Status
                        </h5>
                        <h6 class="text-success mb-0">
                            <i class="bi bi-circle-fill me-1" style="font-size: 0.5rem;"></i>
                            Online
                        </h6>
                        <small class="text-muted">Server running</small>
                    </div>
                    <div class="fs-2 text-info opacity-50">
                        <i class="bi bi-activity"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <div class="row">
    <!-- Recent Email Activity -->
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-envelope me-2"></i>
                    Recent Email Activity
                </h5>
                <a href="{{ url_for('email.logs', type='emails') }}" class="btn btn-outline-light btn-sm">
                    View All
                </a>
            </div>
            <div class="card-body p-0">
                {% if recent_emails %}
                    <div class="table-responsive">
                        <table class="table table-dark table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Status</th>
                                    <th>DKIM</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for email in recent_emails %}
                                <tr>
                                    <td>
                                        <small class="text-muted">
                                            {{ email.created_at.strftime('%H:%M:%S') }}
                                        </small>
                                    </td>
                                    <td>
                                        <span class="text-truncate d-inline-block" style="max-width: 150px;" title="{{ email.mail_from }}">
                                            {{ email.mail_from }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="text-truncate d-inline-block" style="max-width: 150px;" title="{{ email.to_address }}">
                                            {{ email.to_address }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if email.status == 'relayed' %}
                                            <span class="badge bg-success">
                                                <i class="bi bi-check-circle me-1"></i>
                                                Sent
                                            </span>
                                        {% else %}
                                            <span class="badge bg-danger">
                                                <i class="bi bi-x-circle me-1"></i>
                                                Failed
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if email.dkim_signed %}
                                            <span class="text-success">
                                                <i class="bi bi-shield-check" title="DKIM Signed"></i>
                                            </span>
                                        {% else %}
                                            <span class="text-muted">
                                                <i class="bi bi-shield-x" title="Not DKIM Signed"></i>
                                            </span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-envelope text-muted fs-1"></i>
                        <p class="text-muted mt-2">No email activity yet</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <!-- Recent Authentication Activity -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-shield-lock me-2"></i>
                    Recent Auth Activity
                </h5>
                <a href="{{ url_for('email.logs', type='auth') }}" class="btn btn-outline-light btn-sm">
                    View All
                </a>
            </div>
            <div class="card-body p-0">
                {% if recent_auths %}
                    <div class="list-group list-group-flush">
                        {% for auth in recent_auths %}
                        <div class="list-group-item list-group-item-dark d-flex justify-content-between align-items-start">
                            <div class="ms-2 me-auto">
                                <div class="fw-bold">
                                    {% if auth.success %}
                                        <i class="bi bi-check-circle text-success me-1"></i>
                                    {% else %}
                                        <i class="bi bi-x-circle text-danger me-1"></i>
                                    {% endif %}
                                    {{ auth.auth_type|title }}
                                </div>
                                <small class="text-muted">
                                    {{ auth.identifier }}
                                </small>
                                <br>
                                <small class="text-muted">
                                    {{ auth.created_at.strftime('%H:%M:%S') }}
                                </small>
                            </div>
                            <small class="text-muted">
                                {{ auth.ip_address }}
                            </small>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-shield-lock text-muted fs-1"></i>
                        <p class="text-muted mt-2">No authentication activity yet</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
 </div>
 <!-- Quick Actions -->
 <div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-lightning me-2"></i>
                    Quick Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <div class="d-grid">
                            <a href="{{ url_for('email.add_domain') }}" class="btn btn-outline-primary">
                                <i class="bi bi-plus-circle me-2"></i>
                                Add Domain
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="d-grid">
                            <a href="{{ url_for('email.add_user') }}" class="btn btn-outline-success">
                                <i class="bi bi-person-plus me-2"></i>
                                Add User
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="d-grid">
                            <a href="{{ url_for('email.add_ip') }}" class="btn btn-outline-warning">
                                <i class="bi bi-shield-plus me-2"></i>
                                Whitelist IP
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="d-grid">
                            <a href="{{ url_for('email.settings') }}" class="btn btn-outline-info">
                                <i class="bi bi-gear me-2"></i>
                                Settings
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    // Auto-refresh dashboard every 30 seconds
    setTimeout(function() {
        location.reload();
    }, 30000);
 </script>
 {% endblock %}
--- a/email_frontend/templates/dkim.html
+++ b/email_frontend/templates/dkim.html
@@ -0,0 +1,318 @@
 {% extends "base.html" %}
 {% block title %}DKIM Keys - Email Server{% endblock %}
 {% block extra_css %}
 <style>
    .dns-record {
        font-family: 'Courier New', monospace;
        background-color: var(--bs-gray-100);
        border-radius: 0.375rem;
        padding: 0.75rem;
        border: 1px solid var(--bs-border-color);
        word-break: break-all;
    }
    .status-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 0.5rem;
    }
    .status-success { background-color: #28a745; }
    .status-warning { background-color: #ffc107; }
    .status-danger { background-color: #dc3545; }
 </style>
 {% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-shield-check me-2"></i>
            DKIM Key Management
        </h2>
        <div class="btn-group">
            <button class="btn btn-outline-info" onclick="checkAllDNS()">
                <i class="bi bi-arrow-clockwise me-2"></i>
                Check All DNS
            </button>
        </div>
    </div>
    {% for item in dkim_data %}
    <div class="card mb-4" id="domain-{{ item.domain.id }}">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-server me-2"></i>
                    {{ item.domain.domain_name }}
                    {% if item.dkim_key.is_active %}
                        <span class="badge bg-success ms-2">Active</span>
                    {% else %}
                        <span class="badge bg-secondary ms-2">Inactive</span>
                    {% endif %}
                </h5>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary" onclick="checkDomainDNS('{{ item.domain.domain_name }}', '{{ item.dkim_key.selector }}')">
                        <i class="bi bi-search me-1"></i>
                        Check DNS
                    </button>
                    <form method="post" action="{{ url_for('email.regenerate_dkim', domain_id=item.domain.id) }}" class="d-inline">
                        <button type="submit" 
                                class="btn btn-outline-warning"
                                onclick="return confirm('Regenerate DKIM key for {{ item.domain.domain_name }}? This will require updating DNS records.')">
                            <i class="bi bi-arrow-clockwise me-1"></i>
                            Regenerate
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- DKIM DNS Record -->
                <div class="col-lg-6 mb-3">
                    <h6>
                        <i class="bi bi-key me-2"></i>
                        DKIM DNS Record
                        <span class="dns-status" id="dkim-status-{{ item.domain.id }}">
                            <span class="status-indicator status-warning"></span>
                            <small class="text-muted">Not checked</small>
                        </span>
                    </h6>
                    <div class="mb-2">
                        <strong>Name:</strong>
                        <div class="dns-record">{{ item.dns_record.name }}</div>
                    </div>
                    <div class="mb-2">
                        <strong>Type:</strong> TXT
                    </div>
                    <div class="mb-2">
                        <strong>Value:</strong>
                        <div class="dns-record">{{ item.dns_record.value }}</div>
                    </div>
                    <button class="btn btn-outline-secondary btn-sm" onclick="copyToClipboard('{{ item.dns_record.value }}')">
                        <i class="bi bi-clipboard me-1"></i>
                        Copy Value
                    </button>
                </div>
                <!-- SPF DNS Record -->
                <div class="col-lg-6 mb-3">
                    <h6>
                        <i class="bi bi-shield-lock me-2"></i>
                        SPF DNS Record
                        <span class="dns-status" id="spf-status-{{ item.domain.id }}">
                            <span class="status-indicator status-warning"></span>
                            <small class="text-muted">Not checked</small>
                        </span>
                    </h6>
                    <div class="mb-2">
                        <strong>Name:</strong>
                        <div class="dns-record">{{ item.domain.domain_name }}</div>
                    </div>
                    <div class="mb-2">
                        <strong>Type:</strong> TXT
                    </div>
                    {% if item.existing_spf %}
                    <div class="mb-2">
                        <strong>Current SPF:</strong>
                        <div class="dns-record text-info">{{ item.existing_spf }}</div>
                    </div>
                    {% endif %}
                    <div class="mb-2">
                        <strong>Recommended SPF:</strong>
                        <div class="dns-record text-success">{{ item.recommended_spf }}</div>
                    </div>
                    <button class="btn btn-outline-secondary btn-sm" onclick="copyToClipboard('{{ item.recommended_spf }}')">
                        <i class="bi bi-clipboard me-1"></i>
                        Copy SPF
                    </button>
                </div>
            </div>
            <!-- Key Information -->
            <div class="row">
                <div class="col-12">
                    <h6><i class="bi bi-info-circle me-2"></i>Key Information</h6>
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Selector:</strong><br>
                            <code>{{ item.dkim_key.selector }}</code>
                        </div>
                        <div class="col-md-3">
                            <strong>Created:</strong><br>
                            {{ item.dkim_key.created_at.strftime('%Y-%m-%d %H:%M') }}
                        </div>
                        <div class="col-md-3">
                            <strong>Server IP:</strong><br>
                            <code>{{ item.public_ip }}</code>
                        </div>
                        <div class="col-md-3">
                            <strong>Status:</strong><br>
                            {% if item.dkim_key.is_active %}
                                <span class="text-success">Active</span>
                            {% else %}
                                <span class="text-secondary">Inactive</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    {% if not dkim_data %}
    <div class="card">
        <div class="card-body text-center py-5">
            <i class="bi bi-shield-x text-muted" style="font-size: 4rem;"></i>
            <h4 class="text-muted mt-3">No DKIM Keys Found</h4>
            <p class="text-muted">Add domains first to automatically generate DKIM keys</p>
            <a href="{{ url_for('email.add_domain') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-2"></i>
                Add Domain
            </a>
        </div>
    </div>
    {% endif %}
 </div>
 <!-- DNS Check Results Modal -->
 <div class="modal fade" id="dnsResultModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">DNS Check Results</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="dnsResults">
                <!-- Results will be populated here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    async function checkDomainDNS(domain, selector) {
        const dkimStatus = document.getElementById(`dkim-status-${domain.replace('.', '-')}`);
        const spfStatus = document.getElementById(`spf-status-${domain.replace('.', '-')}`);
        // Show loading state
        dkimStatus.innerHTML = '<span class="status-indicator status-warning"></span><small class="text-muted">Checking...</small>';
        spfStatus.innerHTML = '<span class="status-indicator status-warning"></span><small class="text-muted">Checking...</small>';
        try {
            // Check DKIM DNS
            const dkimResponse = await fetch('{{ url_for("email.check_dkim_dns") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `domain=${encodeURIComponent(domain)}&selector=${encodeURIComponent(selector)}`
            });
            const dkimResult = await dkimResponse.json();
            // Check SPF DNS
            const spfResponse = await fetch('{{ url_for("email.check_spf_dns") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `domain=${encodeURIComponent(domain)}`
            });
            const spfResult = await spfResponse.json();
            // Update DKIM status
            if (dkimResult.success) {
                dkimStatus.innerHTML = '<span class="status-indicator status-success"></span><small class="text-success">✓ Configured</small>';
            } else {
                dkimStatus.innerHTML = '<span class="status-indicator status-danger"></span><small class="text-danger">✗ Not found</small>';
            }
            // Update SPF status
            if (spfResult.success) {
                spfStatus.innerHTML = '<span class="status-indicator status-success"></span><small class="text-success">✓ Found</small>';
            } else {
                spfStatus.innerHTML = '<span class="status-indicator status-danger"></span><small class="text-danger">✗ Not found</small>';
            }
            // Show detailed results in modal
            showDNSResults(domain, dkimResult, spfResult);
        } catch (error) {
            console.error('DNS check error:', error);
            dkimStatus.innerHTML = '<span class="status-indicator status-danger"></span><small class="text-danger">Error</small>';
            spfStatus.innerHTML = '<span class="status-indicator status-danger"></span><small class="text-danger">Error</small>';
        }
    }
    function showDNSResults(domain, dkimResult, spfResult) {
        const resultsHtml = `
            <h6>DNS Check Results for ${domain}</h6>
            <div class="mb-3">
                <h6 class="text-primary">DKIM Record</h6>
                <div class="alert ${dkimResult.success ? 'alert-success' : 'alert-danger'}">
                    <strong>Status:</strong> ${dkimResult.success ? 'Found' : 'Not Found'}<br>
                    <strong>Message:</strong> ${dkimResult.message}
                    ${dkimResult.records ? `<br><strong>Records:</strong> ${dkimResult.records.join(', ')}` : ''}
                </div>
            </div>
            <div class="mb-3">
                <h6 class="text-primary">SPF Record</h6>
                <div class="alert ${spfResult.success ? 'alert-success' : 'alert-danger'}">
                    <strong>Status:</strong> ${spfResult.success ? 'Found' : 'Not Found'}<br>
                    <strong>Message:</strong> ${spfResult.message}
                    ${spfResult.spf_record ? `<br><strong>Current SPF:</strong> <code>${spfResult.spf_record}</code>` : ''}
                </div>
            </div>
        `;
        document.getElementById('dnsResults').innerHTML = resultsHtml;
        new bootstrap.Modal(document.getElementById('dnsResultModal')).show();
    }
    async function checkAllDNS() {
        const domains = document.querySelectorAll('[id^="domain-"]');
        for (const domainCard of domains) {
            const domainId = domainCard.id.split('-')[1];
            // Extract domain name and selector from the card
            const domainName = domainCard.querySelector('h5').textContent.trim().split('\n')[0].trim();
            const selectorElement = domainCard.querySelector('code');
            if (selectorElement) {
                const selector = selectorElement.textContent;
                await checkDomainDNS(domainName, selector);
                // Small delay between checks to avoid overwhelming the DNS server
                await new Promise(resolve => setTimeout(resolve, 500));
            }
        }
    }
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            // Show temporary success message
            const button = event.target.closest('button');
            const originalText = button.innerHTML;
            button.innerHTML = '<i class="bi bi-check me-1"></i>Copied!';
            button.classList.add('btn-success');
            button.classList.remove('btn-outline-secondary');
            setTimeout(() => {
                button.innerHTML = originalText;
                button.classList.remove('btn-success');
                button.classList.add('btn-outline-secondary');
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy: ', err);
        });
    }
 </script>
 {% endblock %}
--- a/email_frontend/templates/domains.html
+++ b/email_frontend/templates/domains.html
@@ -0,0 +1,174 @@
 {% extends "base.html" %}
 {% block title %}Domains - Email Server Management{% endblock %}
 {% block page_title %}Domain Management{% endblock %}
 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="bi bi-globe me-2"></i>
        Domains
    </h2>
    <a href="{{ url_for('email.add_domain') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-2"></i>
        Add Domain
    </a>
 </div>
 <div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="bi bi-list-ul me-2"></i>
            All Domains
        </h5>
    </div>
    <div class="card-body p-0">
        {% if domains %}
            <div class="table-responsive">
                <table class="table table-dark table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Domain Name</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Users</th>
                            <th>DKIM</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for domain in domains %}
                        <tr>
                            <td>
                                <div class="fw-bold">{{ domain.domain_name }}</div>
                            </td>
                            <td>
                                {% if domain.is_active %}
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle me-1"></i>
                                        Active
                                    </span>
                                {% else %}
                                    <span class="badge bg-danger">
                                        <i class="bi bi-x-circle me-1"></i>
                                        Inactive
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <small class="text-muted">
                                    {{ domain.created_at.strftime('%Y-%m-%d %H:%M') }}
                                </small>
                            </td>
                            <td>
                                <span class="badge bg-info">
                                    {{ domain.users|length if domain.users else 0 }} users
                                </span>
                            </td>
                            <td>
                                {% set has_dkim = domain.dkim_keys and domain.dkim_keys|selectattr('is_active')|list %}
                                {% if has_dkim %}
                                    <span class="text-success">
                                        <i class="bi bi-shield-check" title="DKIM Configured"></i>
                                    </span>
                                {% else %}
                                    <span class="text-warning">
                                        <i class="bi bi-shield-exclamation" title="No DKIM Key"></i>
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ url_for('email.dkim_list') }}#domain-{{ domain.id }}" 
                                       class="btn btn-outline-info"
                                       title="Manage DKIM">
                                        <i class="bi bi-key"></i>
                                    </a>
                                    {% if domain.is_active %}
                                        <form method="post" action="{{ url_for('email.delete_domain', domain_id=domain.id) }}" class="d-inline">
                                            <button type="submit" 
                                                    class="btn btn-outline-danger"
                                                    data-confirm="Are you sure you want to deactivate domain '{{ domain.domain_name }}'?"
                                                    title="Deactivate Domain">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="bi bi-globe text-muted" style="font-size: 4rem;"></i>
                <h4 class="text-muted mt-3">No domains configured</h4>
                <p class="text-muted">Get started by adding your first domain</p>
                <a href="{{ url_for('email.add_domain') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-2"></i>
                    Add Your First Domain
                </a>
            </div>
        {% endif %}
    </div>
 </div>
 {% if domains %}
 <div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    Domain Information
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        <strong>Active domains:</strong> {{ domains|selectattr('is_active')|list|length }}
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-shield-check text-warning me-2"></i>
                        <strong>DKIM configured:</strong> {{ domains|selectattr('dkim_keys')|list|length }}
                    </li>
                    <li>
                        <i class="bi bi-people text-info me-2"></i>
                        <strong>Total users:</strong> {{ domains|sum(attribute='users')|length if domains[0].users is defined else 'N/A' }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-lightbulb me-2"></i>
                    Quick Tips
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="bi bi-arrow-right text-primary me-2"></i>
                        DKIM keys are automatically generated for new domains
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-arrow-right text-primary me-2"></i>
                        Configure DNS records after adding domains
                    </li>
                    <li>
                        <i class="bi bi-arrow-right text-primary me-2"></i>
                        Add users or whitelist IPs for authentication
                    </li>
                </ul>
            </div>
        </div>
    </div>
 </div>
 {% endif %}
 {% endblock %}
--- a/email_frontend/templates/email/add_domain.html
+++ b/email_frontend/templates/email/add_domain.html
@@ -0,0 +1,112 @@
 {% extends "base.html" %}
 {% block title %}Add Domain - Email Server Management{% endblock %}
 {% block page_title %}Add New Domain{% endblock %}
 {% block content %}
 <div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-plus-circle me-2"></i>
                    Add New Domain
                </h5>
            </div>
            <div class="card-body">
                <form method="post">
                    <div class="mb-3">
                        <label for="domain_name" class="form-label">
                            <i class="bi bi-globe me-1"></i>
                            Domain Name
                        </label>
                        <input type="text" 
                               class="form-control" 
                               id="domain_name" 
                               name="domain_name" 
                               placeholder="example.com"
                               required
                               pattern="^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.?[a-zA-Z]{2,}$">
                        <div class="form-text">
                            Enter the domain name that will be used for sending emails (e.g., example.com)
                        </div>
                    </div>
                    <div class="alert alert-info">
                        <h6 class="alert-heading">
                            <i class="bi bi-info-circle me-2"></i>
                            What happens next?
                        </h6>
                        <ul class="mb-0">
                            <li>Domain will be added to the system</li>
                            <li>DKIM key pair will be automatically generated</li>
                            <li>You'll need to configure DNS records</li>
                            <li>Add users or whitelist IPs for authentication</li>
                        </ul>
                    </div>
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('email.domains_list') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left me-2"></i>
                            Back to Domains
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-2"></i>
                            Add Domain
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-question-circle me-2"></i>
                    Domain Requirements
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-success">
                            <i class="bi bi-check-circle me-1"></i>
                            Valid Examples
                        </h6>
                        <ul class="list-unstyled">
                            <li><code>example.com</code></li>
                            <li><code>mail.example.com</code></li>
                            <li><code>my-domain.org</code></li>
                            <li><code>company.co.uk</code></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-danger">
                            <i class="bi bi-x-circle me-1"></i>
                            Invalid Examples
                        </h6>
                        <ul class="list-unstyled">
                            <li><code>http://example.com</code></li>
                            <li><code>example</code></li>
                            <li><code>.example.com</code></li>
                            <li><code>example..com</code></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    document.getElementById('domain_name').addEventListener('input', function(e) {
        // Convert to lowercase and remove protocol if present
        let value = e.target.value.toLowerCase();
        value = value.replace(/^https?:\/\//, '');
        value = value.replace(/\/$/, '');
        e.target.value = value;
    });
 </script>
 {% endblock %}
--- a/email_frontend/templates/email/add_ip.html
+++ b/email_frontend/templates/email/add_ip.html
@@ -0,0 +1,228 @@
 {% extends "base.html" %}
 {% block title %}Add IP Address - Email Server{% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="bi bi-shield-plus me-2"></i>
                        Add IP Address to Whitelist
                    </h4>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="mb-3">
                            <label for="ip_address" class="form-label">IP Address</label>
                            <input type="text" 
                                   class="form-control font-monospace" 
                                   id="ip_address" 
                                   name="ip_address" 
                                   required 
                                   pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
                                   placeholder="192.168.1.100"
                                   value="{{ request.args.get('ip', '') }}">
                            <div class="form-text">
                                IPv4 address that will be allowed to send emails without authentication
                            </div>
                        </div>
                        <div class="mb-4">
                            <label for="domain_id" class="form-label">Authorized Domain</label>
                            <select class="form-select" id="domain_id" name="domain_id" required>
                                <option value="">Select a domain...</option>
                                {% for domain in domains %}
                                <option value="{{ domain.id }}">{{ domain.domain_name }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">
                                This IP will only be able to send emails for the selected domain
                            </div>
                        </div>
                        <div class="alert alert-warning">
                            <h6 class="alert-heading">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                Security Note
                            </h6>
                            <ul class="mb-0">
                                <li>Only whitelist trusted IP addresses</li>
                                <li>This IP can send emails without username/password authentication</li>
                                <li>The IP is restricted to the selected domain only</li>
                                <li>Use static IP addresses for reliable access</li>
                            </ul>
                        </div>
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('email.ips_list') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left me-2"></i>
                                Back to IP List
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-shield-plus me-2"></i>
                                Add to Whitelist
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
 </div>
 <!-- Current IP Detection and Available Domains -->
 <div class="row mt-4">
    <div class="col-md-4 mx-auto">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-geo-alt me-2"></i>
                    Your Current IP
                </h6>
            </div>
            <div class="card-body text-center">
                <div class="fw-bold font-monospace fs-5 mb-2" id="current-ip">
                    <span class="spinner-border spinner-border-sm me-2"></span>
                    Detecting...
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="useCurrentIP()">
                    <i class="bi bi-arrow-up me-1"></i>
                    Use This IP
                </button>
            </div>
        </div>
    </div>
    {% if domains %}
    <div class="col-md-4 mx-auto">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-server me-2"></i>
                    Available Domains
                </h6>
            </div>
            <div class="card-body">
                {% for domain in domains %}
                <div class="mb-2">
                    <div class="fw-bold">{{ domain.domain_name }}</div>
                    <small class="text-muted">
                        Created: {{ domain.created_at.strftime('%Y-%m-%d') }}
                    </small>
                </div>
                {% if not loop.last %}<hr class="my-2">{% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
 </div>
 <!-- Example Use Cases -->
 <div class="row mt-4">
    <div class="col-md-8 mx-auto">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-lightbulb me-2"></i>
                    Common Use Cases
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary">
                            <i class="bi bi-server me-1"></i>
                            Application Servers
                        </h6>
                        <p class="text-muted small">
                            Web applications that need to send transactional emails 
                            (password resets, notifications, etc.)
                        </p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-success">
                            <i class="bi bi-clock me-1"></i>
                            Scheduled Tasks
                        </h6>
                        <p class="text-muted small">
                            Cron jobs or scheduled scripts that send automated 
                            reports or alerts
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-warning">
                            <i class="bi bi-monitor me-1"></i>
                            Monitoring Systems
                        </h6>
                        <p class="text-muted small">
                            Monitoring tools that send alerts and status updates 
                            to administrators
                        </p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-info">
                            <i class="bi bi-cloud me-1"></i>
                            Cloud Services
                        </h6>
                        <p class="text-muted small">
                            Cloud-based applications or services that need to 
                            send emails on behalf of your domain
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    // Detect current IP address
    async function detectCurrentIP() {
        try {
            const response = await fetch('https://api.ipify.org?format=json');
            const data = await response.json();
            document.getElementById('current-ip').innerHTML = 
                `<span class="text-primary">${data.ip}</span>`;
        } catch (error) {
            document.getElementById('current-ip').innerHTML = 
                '<span class="text-muted">Unable to detect</span>';
        }
    }
    function useCurrentIP() {
        const currentIPElement = document.getElementById('current-ip');
        const ip = currentIPElement.textContent.trim();
        if (ip && ip !== 'Detecting...' && ip !== 'Unable to detect') {
            document.getElementById('ip_address').value = ip;
            // Focus on domain selection
            document.getElementById('domain_id').focus();
        } else {
            alert('Unable to detect current IP address');
        }
    }
    // IP address validation
    document.getElementById('ip_address').addEventListener('input', function(e) {
        const ip = e.target.value;
        const ipPattern = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
        if (ip && !ipPattern.test(ip)) {
            e.target.setCustomValidity('Please enter a valid IPv4 address');
        } else {
            e.target.setCustomValidity('');
        }
    });
    // Auto-detect IP on page load
    detectCurrentIP();
 </script>
 {% endblock %}
--- a/email_frontend/templates/email/add_user.html
+++ b/email_frontend/templates/email/add_user.html
@@ -0,0 +1,176 @@
 {% extends "base.html" %}
 {% block title %}Add User - Email Server{% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="bi bi-person-plus me-2"></i>
                        Add New User
                    </h4>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" 
                                   class="form-control" 
                                   id="email" 
                                   name="email" 
                                   required 
                                   placeholder="user@example.com">
                            <div class="form-text">
                                The email address for authentication and sending
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" 
                                   class="form-control" 
                                   id="password" 
                                   name="password" 
                                   required 
                                   minlength="6">
                            <div class="form-text">
                                Minimum 6 characters
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="domain_id" class="form-label">Domain</label>
                            <select class="form-select" id="domain_id" name="domain_id" required>
                                <option value="">Select a domain...</option>
                                {% for domain in domains %}
                                <option value="{{ domain.id }}">{{ domain.domain_name }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">
                                The domain this user belongs to
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="can_send_as_domain" 
                                       name="can_send_as_domain">
                                <label class="form-check-label" for="can_send_as_domain">
                                    <strong>Domain Administrator</strong>
                                </label>
                                <div class="form-text">
                                    If checked, user can send emails as any address in their domain.
                                    Otherwise, user can only send as their own email address.
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-info">
                            <h6 class="alert-heading">
                                <i class="bi bi-info-circle me-2"></i>
                                Permission Levels
                            </h6>
                            <ul class="mb-0">
                                <li><strong>Regular User:</strong> Can only send emails from their own email address</li>
                                <li><strong>Domain Admin:</strong> Can send emails from any address in their domain (e.g., noreply@domain.com, support@domain.com)</li>
                            </ul>
                        </div>
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('email.users_list') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left me-2"></i>
                                Back to Users
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-person-plus me-2"></i>
                                Add User
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
 </div>
 <!-- Domain information sidebar -->
 <div class="row mt-4">
    {% if domains %}
    <div class="col-md-6 mx-auto">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    Available Domains
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for domain in domains %}
                    <div class="col-md-6 mb-2">
                        <div class="border rounded p-2">
                            <div class="fw-bold">{{ domain.domain_name }}</div>
                            <small class="text-muted">
                                Created: {{ domain.created_at.strftime('%Y-%m-%d') }}
                            </small>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    // Auto-fill domain based on email input
    document.getElementById('email').addEventListener('input', function(e) {
        const email = e.target.value;
        const atIndex = email.indexOf('@');
        if (atIndex > -1) {
            const domain = email.substring(atIndex + 1).toLowerCase();
            const domainSelect = document.getElementById('domain_id');
            // Try to find matching domain in select options
            for (let option of domainSelect.options) {
                if (option.text.toLowerCase() === domain) {
                    domainSelect.value = option.value;
                    break;
                }
            }
        }
    });
    // Show/hide domain admin explanation
    document.getElementById('can_send_as_domain').addEventListener('change', function(e) {
        const isChecked = e.target.checked;
        const domainSelect = document.getElementById('domain_id');
        const selectedDomain = domainSelect.options[domainSelect.selectedIndex]?.text || 'domain.com';
        // Update help text dynamically
        const helpText = e.target.closest('.form-check').querySelector('.form-text');
        if (isChecked) {
            helpText.innerHTML = `User can send as any address in ${selectedDomain} (e.g., noreply@${selectedDomain}, support@${selectedDomain})`;
        } else {
            helpText.innerHTML = 'User can only send as their own email address.';
        }
    });
    // Update help text when domain changes
    document.getElementById('domain_id').addEventListener('change', function(e) {
        const checkbox = document.getElementById('can_send_as_domain');
        if (checkbox.checked) {
            checkbox.dispatchEvent(new Event('change'));
        }
    });
 </script>
 {% endblock %}
--- a/email_frontend/templates/email/dashboard.html
+++ b/email_frontend/templates/email/dashboard.html
@@ -0,0 +1,285 @@
 {% extends "base.html" %}
 {% block title %}Dashboard - Email Server Management{% endblock %}
 {% block page_title %}Dashboard{% endblock %}
 {% block content %}
 <div class="row">
    <!-- Statistics Cards -->
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card border-primary">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h5 class="card-title text-primary mb-1">
                            <i class="bi bi-globe me-2"></i>
                            Domains
                        </h5>
                        <h3 class="mb-0">{{ domain_count }}</h3>
                        <small class="text-muted">Active domains</small>
                    </div>
                    <div class="fs-2 text-primary opacity-50">
                        <i class="bi bi-globe"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card border-success">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h5 class="card-title text-success mb-1">
                            <i class="bi bi-people me-2"></i>
                            Users
                        </h5>
                        <h3 class="mb-0">{{ user_count }}</h3>
                        <small class="text-muted">Authenticated users</small>
                    </div>
                    <div class="fs-2 text-success opacity-50">
                        <i class="bi bi-people"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card border-warning">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h5 class="card-title text-warning mb-1">
                            <i class="bi bi-shield-check me-2"></i>
                            DKIM Keys
                        </h5>
                        <h3 class="mb-0">{{ dkim_count }}</h3>
                        <small class="text-muted">Active DKIM keys</small>
                    </div>
                    <div class="fs-2 text-warning opacity-50">
                        <i class="bi bi-shield-check"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="card border-info">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h5 class="card-title text-info mb-1">
                            <i class="bi bi-activity me-2"></i>
                            Status
                        </h5>
                        <h6 class="text-success mb-0">
                            <i class="bi bi-circle-fill me-1" style="font-size: 0.5rem;"></i>
                            Online
                        </h6>
                        <small class="text-muted">Server running</small>
                    </div>
                    <div class="fs-2 text-info opacity-50">
                        <i class="bi bi-activity"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <div class="row">
    <!-- Recent Email Activity -->
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-envelope me-2"></i>
                    Recent Email Activity
                </h5>
                <a href="{{ url_for('email.logs', type='emails') }}" class="btn btn-outline-light btn-sm">
                    View All
                </a>
            </div>
            <div class="card-body p-0">
                {% if recent_emails %}
                    <div class="table-responsive">
                        <table class="table table-dark table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Status</th>
                                    <th>DKIM</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for email in recent_emails %}
                                <tr>
                                    <td>
                                        <small class="text-muted">
                                            {{ email.created_at.strftime('%H:%M:%S') }}
                                        </small>
                                    </td>
                                    <td>
                                        <span class="text-truncate d-inline-block" style="max-width: 150px;" title="{{ email.mail_from }}">
                                            {{ email.mail_from }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="text-truncate d-inline-block" style="max-width: 150px;" title="{{ email.to_address }}">
                                            {{ email.to_address }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if email.status == 'relayed' %}
                                            <span class="badge bg-success">
                                                <i class="bi bi-check-circle me-1"></i>
                                                Sent
                                            </span>
                                        {% else %}
                                            <span class="badge bg-danger">
                                                <i class="bi bi-x-circle me-1"></i>
                                                Failed
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if email.dkim_signed %}
                                            <span class="text-success">
                                                <i class="bi bi-shield-check" title="DKIM Signed"></i>
                                            </span>
                                        {% else %}
                                            <span class="text-muted">
                                                <i class="bi bi-shield-x" title="Not DKIM Signed"></i>
                                            </span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-envelope text-muted fs-1"></i>
                        <p class="text-muted mt-2">No email activity yet</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <!-- Recent Authentication Activity -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-shield-lock me-2"></i>
                    Recent Auth Activity
                </h5>
                <a href="{{ url_for('email.logs', type='auth') }}" class="btn btn-outline-light btn-sm">
                    View All
                </a>
            </div>
            <div class="card-body p-0">
                {% if recent_auths %}
                    <div class="list-group list-group-flush">
                        {% for auth in recent_auths %}
                        <div class="list-group-item list-group-item-dark d-flex justify-content-between align-items-start">
                            <div class="ms-2 me-auto">
                                <div class="fw-bold">
                                    {% if auth.success %}
                                        <i class="bi bi-check-circle text-success me-1"></i>
                                    {% else %}
                                        <i class="bi bi-x-circle text-danger me-1"></i>
                                    {% endif %}
                                    {{ auth.auth_type|title }}
                                </div>
                                <small class="text-muted">
                                    {{ auth.identifier }}
                                </small>
                                <br>
                                <small class="text-muted">
                                    {{ auth.timestamp.strftime('%H:%M:%S') }}
                                </small>
                            </div>
                            <small class="text-muted">
                                {{ auth.ip_address }}
                            </small>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-shield-lock text-muted fs-1"></i>
                        <p class="text-muted mt-2">No authentication activity yet</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
 </div>
 <!-- Quick Actions -->
 <div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-lightning me-2"></i>
                    Quick Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <div class="d-grid">
                            <a href="{{ url_for('email.add_domain') }}" class="btn btn-outline-primary">
                                <i class="bi bi-plus-circle me-2"></i>
                                Add Domain
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="d-grid">
                            <a href="{{ url_for('email.add_user') }}" class="btn btn-outline-success">
                                <i class="bi bi-person-plus me-2"></i>
                                Add User
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="d-grid">
                            <a href="{{ url_for('email.add_ip') }}" class="btn btn-outline-warning">
                                <i class="bi bi-shield-plus me-2"></i>
                                Whitelist IP
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="d-grid">
                            <a href="{{ url_for('email.settings') }}" class="btn btn-outline-info">
                                <i class="bi bi-gear me-2"></i>
                                Settings
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    // Auto-refresh dashboard every 30 seconds
    setTimeout(function() {
        location.reload();
    }, 30000);
 </script>
 {% endblock %}
--- a/email_frontend/templates/email/dkim.html
+++ b/email_frontend/templates/email/dkim.html
@@ -0,0 +1,318 @@
 {% extends "base.html" %}
 {% block title %}DKIM Keys - Email Server{% endblock %}
 {% block extra_css %}
 <style>
    .dns-record {
        font-family: 'Courier New', monospace;
        background-color: var(--bs-gray-100);
        border-radius: 0.375rem;
        padding: 0.75rem;
        border: 1px solid var(--bs-border-color);
        word-break: break-all;
    }
    .status-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 0.5rem;
    }
    .status-success { background-color: #28a745; }
    .status-warning { background-color: #ffc107; }
    .status-danger { background-color: #dc3545; }
 </style>
 {% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-shield-check me-2"></i>
            DKIM Key Management
        </h2>
        <div class="btn-group">
            <button class="btn btn-outline-info" onclick="checkAllDNS()">
                <i class="bi bi-arrow-clockwise me-2"></i>
                Check All DNS
            </button>
        </div>
    </div>
    {% for item in dkim_data %}
    <div class="card mb-4" id="domain-{{ item.domain.id }}">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-server me-2"></i>
                    {{ item.domain.domain_name }}
                    {% if item.dkim_key.is_active %}
                        <span class="badge bg-success ms-2">Active</span>
                    {% else %}
                        <span class="badge bg-secondary ms-2">Inactive</span>
                    {% endif %}
                </h5>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary" onclick="checkDomainDNS('{{ item.domain.domain_name }}', '{{ item.dkim_key.selector }}')">
                        <i class="bi bi-search me-1"></i>
                        Check DNS
                    </button>
                    <form method="post" action="{{ url_for('email.regenerate_dkim', domain_id=item.domain.id) }}" class="d-inline">
                        <button type="submit" 
                                class="btn btn-outline-warning"
                                onclick="return confirm('Regenerate DKIM key for {{ item.domain.domain_name }}? This will require updating DNS records.')">
                            <i class="bi bi-arrow-clockwise me-1"></i>
                            Regenerate
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- DKIM DNS Record -->
                <div class="col-lg-6 mb-3">
                    <h6>
                        <i class="bi bi-key me-2"></i>
                        DKIM DNS Record
                        <span class="dns-status" id="dkim-status-{{ item.domain.id }}">
                            <span class="status-indicator status-warning"></span>
                            <small class="text-muted">Not checked</small>
                        </span>
                    </h6>
                    <div class="mb-2">
                        <strong>Name:</strong>
                        <div class="dns-record">{{ item.dns_record.name }}</div>
                    </div>
                    <div class="mb-2">
                        <strong>Type:</strong> TXT
                    </div>
                    <div class="mb-2">
                        <strong>Value:</strong>
                        <div class="dns-record">{{ item.dns_record.value }}</div>
                    </div>
                    <button class="btn btn-outline-secondary btn-sm" onclick="copyToClipboard('{{ item.dns_record.value }}')">
                        <i class="bi bi-clipboard me-1"></i>
                        Copy Value
                    </button>
                </div>
                <!-- SPF DNS Record -->
                <div class="col-lg-6 mb-3">
                    <h6>
                        <i class="bi bi-shield-lock me-2"></i>
                        SPF DNS Record
                        <span class="dns-status" id="spf-status-{{ item.domain.id }}">
                            <span class="status-indicator status-warning"></span>
                            <small class="text-muted">Not checked</small>
                        </span>
                    </h6>
                    <div class="mb-2">
                        <strong>Name:</strong>
                        <div class="dns-record">{{ item.domain.domain_name }}</div>
                    </div>
                    <div class="mb-2">
                        <strong>Type:</strong> TXT
                    </div>
                    {% if item.existing_spf %}
                    <div class="mb-2">
                        <strong>Current SPF:</strong>
                        <div class="dns-record text-info">{{ item.existing_spf }}</div>
                    </div>
                    {% endif %}
                    <div class="mb-2">
                        <strong>Recommended SPF:</strong>
                        <div class="dns-record text-success">{{ item.recommended_spf }}</div>
                    </div>
                    <button class="btn btn-outline-secondary btn-sm" onclick="copyToClipboard('{{ item.recommended_spf }}')">
                        <i class="bi bi-clipboard me-1"></i>
                        Copy SPF
                    </button>
                </div>
            </div>
            <!-- Key Information -->
            <div class="row">
                <div class="col-12">
                    <h6><i class="bi bi-info-circle me-2"></i>Key Information</h6>
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Selector:</strong><br>
                            <code>{{ item.dkim_key.selector }}</code>
                        </div>
                        <div class="col-md-3">
                            <strong>Created:</strong><br>
                            {{ item.dkim_key.created_at.strftime('%Y-%m-%d %H:%M') }}
                        </div>
                        <div class="col-md-3">
                            <strong>Server IP:</strong><br>
                            <code>{{ item.public_ip }}</code>
                        </div>
                        <div class="col-md-3">
                            <strong>Status:</strong><br>
                            {% if item.dkim_key.is_active %}
                                <span class="text-success">Active</span>
                            {% else %}
                                <span class="text-secondary">Inactive</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    {% if not dkim_data %}
    <div class="card">
        <div class="card-body text-center py-5">
            <i class="bi bi-shield-x text-muted" style="font-size: 4rem;"></i>
            <h4 class="text-muted mt-3">No DKIM Keys Found</h4>
            <p class="text-muted">Add domains first to automatically generate DKIM keys</p>
            <a href="{{ url_for('email.add_domain') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-2"></i>
                Add Domain
            </a>
        </div>
    </div>
    {% endif %}
 </div>
 <!-- DNS Check Results Modal -->
 <div class="modal fade" id="dnsResultModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">DNS Check Results</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="dnsResults">
                <!-- Results will be populated here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    async function checkDomainDNS(domain, selector) {
        const dkimStatus = document.getElementById(`dkim-status-${domain.replace('.', '-')}`);
        const spfStatus = document.getElementById(`spf-status-${domain.replace('.', '-')}`);
        // Show loading state
        dkimStatus.innerHTML = '<span class="status-indicator status-warning"></span><small class="text-muted">Checking...</small>';
        spfStatus.innerHTML = '<span class="status-indicator status-warning"></span><small class="text-muted">Checking...</small>';
        try {
            // Check DKIM DNS
            const dkimResponse = await fetch('{{ url_for("email.check_dkim_dns") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `domain=${encodeURIComponent(domain)}&selector=${encodeURIComponent(selector)}`
            });
            const dkimResult = await dkimResponse.json();
            // Check SPF DNS
            const spfResponse = await fetch('{{ url_for("email.check_spf_dns") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `domain=${encodeURIComponent(domain)}`
            });
            const spfResult = await spfResponse.json();
            // Update DKIM status
            if (dkimResult.success) {
                dkimStatus.innerHTML = '<span class="status-indicator status-success"></span><small class="text-success">✓ Configured</small>';
            } else {
                dkimStatus.innerHTML = '<span class="status-indicator status-danger"></span><small class="text-danger">✗ Not found</small>';
            }
            // Update SPF status
            if (spfResult.success) {
                spfStatus.innerHTML = '<span class="status-indicator status-success"></span><small class="text-success">✓ Found</small>';
            } else {
                spfStatus.innerHTML = '<span class="status-indicator status-danger"></span><small class="text-danger">✗ Not found</small>';
            }
            // Show detailed results in modal
            showDNSResults(domain, dkimResult, spfResult);
        } catch (error) {
            console.error('DNS check error:', error);
            dkimStatus.innerHTML = '<span class="status-indicator status-danger"></span><small class="text-danger">Error</small>';
            spfStatus.innerHTML = '<span class="status-indicator status-danger"></span><small class="text-danger">Error</small>';
        }
    }
    function showDNSResults(domain, dkimResult, spfResult) {
        const resultsHtml = `
            <h6>DNS Check Results for ${domain}</h6>
            <div class="mb-3">
                <h6 class="text-primary">DKIM Record</h6>
                <div class="alert ${dkimResult.success ? 'alert-success' : 'alert-danger'}">
                    <strong>Status:</strong> ${dkimResult.success ? 'Found' : 'Not Found'}<br>
                    <strong>Message:</strong> ${dkimResult.message}
                    ${dkimResult.records ? `<br><strong>Records:</strong> ${dkimResult.records.join(', ')}` : ''}
                </div>
            </div>
            <div class="mb-3">
                <h6 class="text-primary">SPF Record</h6>
                <div class="alert ${spfResult.success ? 'alert-success' : 'alert-danger'}">
                    <strong>Status:</strong> ${spfResult.success ? 'Found' : 'Not Found'}<br>
                    <strong>Message:</strong> ${spfResult.message}
                    ${spfResult.spf_record ? `<br><strong>Current SPF:</strong> <code>${spfResult.spf_record}</code>` : ''}
                </div>
            </div>
        `;
        document.getElementById('dnsResults').innerHTML = resultsHtml;
        new bootstrap.Modal(document.getElementById('dnsResultModal')).show();
    }
    async function checkAllDNS() {
        const domains = document.querySelectorAll('[id^="domain-"]');
        for (const domainCard of domains) {
            const domainId = domainCard.id.split('-')[1];
            // Extract domain name and selector from the card
            const domainName = domainCard.querySelector('h5').textContent.trim().split('\n')[0].trim();
            const selectorElement = domainCard.querySelector('code');
            if (selectorElement) {
                const selector = selectorElement.textContent;
                await checkDomainDNS(domainName, selector);
                // Small delay between checks to avoid overwhelming the DNS server
                await new Promise(resolve => setTimeout(resolve, 500));
            }
        }
    }
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            // Show temporary success message
            const button = event.target.closest('button');
            const originalText = button.innerHTML;
            button.innerHTML = '<i class="bi bi-check me-1"></i>Copied!';
            button.classList.add('btn-success');
            button.classList.remove('btn-outline-secondary');
            setTimeout(() => {
                button.innerHTML = originalText;
                button.classList.remove('btn-success');
                button.classList.add('btn-outline-secondary');
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy: ', err);
        });
    }
 </script>
 {% endblock %}
--- a/email_frontend/templates/email/domains.html
+++ b/email_frontend/templates/email/domains.html
@@ -0,0 +1,174 @@
 {% extends "base.html" %}
 {% block title %}Domains - Email Server Management{% endblock %}
 {% block page_title %}Domain Management{% endblock %}
 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="bi bi-globe me-2"></i>
        Domains
    </h2>
    <a href="{{ url_for('email.add_domain') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-2"></i>
        Add Domain
    </a>
 </div>
 <div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="bi bi-list-ul me-2"></i>
            All Domains
        </h5>
    </div>
    <div class="card-body p-0">
        {% if domains %}
            <div class="table-responsive">
                <table class="table table-dark table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Domain Name</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Users</th>
                            <th>DKIM</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for domain in domains %}
                        <tr>
                            <td>
                                <div class="fw-bold">{{ domain.domain_name }}</div>
                            </td>
                            <td>
                                {% if domain.is_active %}
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle me-1"></i>
                                        Active
                                    </span>
                                {% else %}
                                    <span class="badge bg-danger">
                                        <i class="bi bi-x-circle me-1"></i>
                                        Inactive
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <small class="text-muted">
                                    {{ domain.created_at.strftime('%Y-%m-%d %H:%M') }}
                                </small>
                            </td>
                            <td>
                                <span class="badge bg-info">
                                    {{ domain.users|length if domain.users else 0 }} users
                                </span>
                            </td>
                            <td>
                                {% set has_dkim = domain.dkim_keys and domain.dkim_keys|selectattr('is_active')|list %}
                                {% if has_dkim %}
                                    <span class="text-success">
                                        <i class="bi bi-shield-check" title="DKIM Configured"></i>
                                    </span>
                                {% else %}
                                    <span class="text-warning">
                                        <i class="bi bi-shield-exclamation" title="No DKIM Key"></i>
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ url_for('email.dkim_list') }}#domain-{{ domain.id }}" 
                                       class="btn btn-outline-info"
                                       title="Manage DKIM">
                                        <i class="bi bi-key"></i>
                                    </a>
                                    {% if domain.is_active %}
                                        <form method="post" action="{{ url_for('email.delete_domain', domain_id=domain.id) }}" class="d-inline">
                                            <button type="submit" 
                                                    class="btn btn-outline-danger"
                                                    data-confirm="Are you sure you want to deactivate domain '{{ domain.domain_name }}'?"
                                                    title="Deactivate Domain">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="bi bi-globe text-muted" style="font-size: 4rem;"></i>
                <h4 class="text-muted mt-3">No domains configured</h4>
                <p class="text-muted">Get started by adding your first domain</p>
                <a href="{{ url_for('email.add_domain') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-2"></i>
                    Add Your First Domain
                </a>
            </div>
        {% endif %}
    </div>
 </div>
 {% if domains %}
 <div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    Domain Information
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        <strong>Active domains:</strong> {{ domains|selectattr('is_active')|list|length }}
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-shield-check text-warning me-2"></i>
                        <strong>DKIM configured:</strong> {{ domains|selectattr('dkim_keys')|list|length }}
                    </li>
                    <li>
                        <i class="bi bi-people text-info me-2"></i>
                        <strong>Total users:</strong> {{ domains|sum(attribute='users')|length if domains[0].users is defined else 'N/A' }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-lightbulb me-2"></i>
                    Quick Tips
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="bi bi-arrow-right text-primary me-2"></i>
                        DKIM keys are automatically generated for new domains
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-arrow-right text-primary me-2"></i>
                        Configure DNS records after adding domains
                    </li>
                    <li>
                        <i class="bi bi-arrow-right text-primary me-2"></i>
                        Add users or whitelist IPs for authentication
                    </li>
                </ul>
            </div>
        </div>
    </div>
 </div>
 {% endif %}
 {% endblock %}
--- a/email_frontend/templates/email/error.html
+++ b/email_frontend/templates/email/error.html
@@ -0,0 +1,173 @@
 {% extends "base.html" %}
 {% block title %}Error - SMTP Management{% endblock %}
 {% block content %}
 <div class="row">
    <div class="col-12">
        <div class="card border-danger">
            <div class="card-header bg-danger text-white">
                <div class="d-flex align-items-center">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <h5 class="mb-0">Error Occurred</h5>
                </div>
            </div>
            <div class="card-body">
                {% if error_code %}
                <div class="row mb-3">
                    <div class="col-sm-3"><strong>Error Code:</strong></div>
                    <div class="col-sm-9">
                        <span class="badge bg-danger fs-6">{{ error_code }}</span>
                    </div>
                </div>
                {% endif %}
                {% if error_message %}
                <div class="row mb-3">
                    <div class="col-sm-3"><strong>Message:</strong></div>
                    <div class="col-sm-9">
                        <div class="alert alert-danger mb-0">
                            {{ error_message }}
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if error_details %}
                <div class="row mb-3">
                    <div class="col-sm-3"><strong>Details:</strong></div>
                    <div class="col-sm-9">
                        <div class="bg-dark text-light p-3 rounded">
                            <pre class="mb-0"><code>{{ error_details }}</code></pre>
                        </div>
                    </div>
                </div>
                {% endif %}
                <div class="row mb-3">
                    <div class="col-sm-3"><strong>Timestamp:</strong></div>
                    <div class="col-sm-9">
                        <span class="text-muted">{{ moment().format('YYYY-MM-DD HH:mm:ss') }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3"><strong>Request URL:</strong></div>
                    <div class="col-sm-9">
                        <code>{{ request.url if request else 'Unknown' }}</code>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <a href="{{ url_for('email_management.dashboard') }}" class="btn btn-primary">
                            <i class="fas fa-home me-1"></i>
                            Return to Dashboard
                        </a>
                        <button onclick="history.back()" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>
                            Go Back
                        </button>
                    </div>
                    <div>
                        <button class="btn btn-outline-light" onclick="copyErrorDetails()">
                            <i class="fas fa-copy me-1"></i>
                            Copy Error Details
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <!-- Common Error Solutions -->
 <div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-lightbulb me-2"></i>
                    Common Solutions
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Database Issues:</h6>
                        <ul class="text-muted small">
                            <li>Check database connection settings</li>
                            <li>Verify database tables exist</li>
                            <li>Check database permissions</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Configuration Issues:</h6>
                        <ul class="text-muted small">
                            <li>Verify settings.ini file exists</li>
                            <li>Check file permissions</li>
                            <li>Validate configuration values</li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6>Network Issues:</h6>
                        <ul class="text-muted small">
                            <li>Check firewall settings</li>
                            <li>Verify DNS resolution</li>
                            <li>Test network connectivity</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Permission Issues:</h6>
                        <ul class="text-muted small">
                            <li>Check file system permissions</li>
                            <li>Verify user authentication</li>
                            <li>Review access controls</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <script>
 function copyErrorDetails() {
    const errorDetails = {
        code: '{{ error_code or "Unknown" }}',
        message: '{{ error_message or "No message" }}',
        details: `{{ error_details or "No details" }}`,
        timestamp: '{{ moment().format("YYYY-MM-DD HH:mm:ss") }}',
        url: '{{ request.url if request else "Unknown" }}'
    };
    const errorText = `Error Report:
 Code: ${errorDetails.code}
 Message: ${errorDetails.message}
 Details: ${errorDetails.details}
 Time: ${errorDetails.timestamp}
 URL: ${errorDetails.url}`;
    navigator.clipboard.writeText(errorText).then(() => {
        // Show success message
        const btn = event.target.closest('button');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
        btn.classList.remove('btn-outline-light');
        btn.classList.add('btn-success');
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-light');
        }, 2000);
    }).catch(err => {
        console.error('Failed to copy: ', err);
        alert('Failed to copy error details to clipboard');
    });
 }
 </script>
 {% endblock %}
--- a/email_frontend/templates/email/ips.html
+++ b/email_frontend/templates/email/ips.html
@@ -0,0 +1,203 @@
 {% extends "base.html" %}
 {% block title %}Whitelisted IPs - Email Server{% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-router me-2"></i>
            Whitelisted IP Addresses
        </h2>
        <a href="{{ url_for('email.add_ip') }}" class="btn btn-success">
            <i class="bi bi-plus-circle me-2"></i>
            Add IP Address
        </a>
    </div>
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-list me-2"></i>
                        Whitelisted IP Addresses
                    </h5>
                </div>
                <div class="card-body">
                    {% if ips %}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>IP Address</th>
                                        <th>Domain</th>
                                        <th>Status</th>
                                        <th>Added</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ip, domain in ips %}
                                    <tr>
                                        <td>
                                            <div class="fw-bold font-monospace">{{ ip.ip_address }}</div>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ domain.domain_name }}</span>
                                        </td>
                                        <td>
                                            {% if ip.is_active %}
                                                <span class="badge bg-success">
                                                    <i class="bi bi-check-circle me-1"></i>
                                                    Active
                                                </span>
                                            {% else %}
                                                <span class="badge bg-danger">
                                                    <i class="bi bi-x-circle me-1"></i>
                                                    Inactive
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ ip.created_at.strftime('%Y-%m-%d %H:%M') }}
                                            </small>
                                        </td>
                                        <td>
                                            {% if ip.is_active %}
                                                <form method="post" action="{{ url_for('email.delete_ip', ip_id=ip.id) }}" class="d-inline">
                                                    <button type="submit" 
                                                            class="btn btn-outline-danger btn-sm"
                                                            onclick="return confirm('Remove {{ ip.ip_address }} from whitelist?')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                            {% else %}
                                                <span class="text-muted">
                                                    <i class="bi bi-dash"></i>
                                                </span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-router text-muted" style="font-size: 4rem;"></i>
                            <h4 class="text-muted mt-3">No IP Addresses Whitelisted</h4>
                            <p class="text-muted">Add IP addresses to allow authentication without username/password</p>
                            <a href="{{ url_for('email.add_ip') }}" class="btn btn-primary">
                                <i class="bi bi-plus-circle me-2"></i>
                                Add First IP Address
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <!-- Information Panel -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        IP Whitelist Information
                    </h6>
                </div>
                <div class="card-body">
                    {% if ips %}
                        <ul class="list-unstyled mb-3">
                            <li class="mb-2">
                                <i class="bi bi-check-circle text-success me-2"></i>
                                <strong>Active IPs:</strong> {{ ips|selectattr('0.is_active')|list|length }}
                            </li>
                            <li class="mb-2">
                                <i class="bi bi-server text-info me-2"></i>
                                <strong>Domains covered:</strong> {{ ips|map(attribute='1.domain_name')|unique|list|length }}
                            </li>
                            <li>
                                <i class="bi bi-calendar text-muted me-2"></i>
                                <strong>Latest addition:</strong> 
                                {% set latest = ips|map(attribute='0')|max(attribute='created_at') %}
                                {{ latest.strftime('%Y-%m-%d') if latest else 'N/A' }}
                            </li>
                        </ul>
                    {% endif %}
                    <div class="alert alert-info">
                        <h6 class="alert-heading">
                            <i class="bi bi-shield-check me-2"></i>
                            How IP Whitelisting Works
                        </h6>
                        <ul class="mb-0 small">
                            <li>Whitelisted IPs can send emails without username/password authentication</li>
                            <li>Each IP is associated with a specific domain</li>
                            <li>IP can only send emails for its authorized domain</li>
                            <li>Useful for server-to-server email sending</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Current IP Detection -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="bi bi-geo-alt me-2"></i>
                        Your Current IP
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <div class="fw-bold font-monospace fs-5" id="current-ip">
                            <span class="spinner-border spinner-border-sm me-2"></span>
                            Detecting...
                        </div>
                        <button class="btn btn-outline-primary btn-sm mt-2" onclick="addCurrentIP()">
                            <i class="bi bi-plus-circle me-1"></i>
                            Add This IP
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    // Detect current IP address
    async function detectCurrentIP() {
        try {
            const response = await fetch('https://api.ipify.org?format=json');
            const data = await response.json();
            document.getElementById('current-ip').innerHTML = 
                `<span class="text-primary">${data.ip}</span>`;
        } catch (error) {
            document.getElementById('current-ip').innerHTML = 
                '<span class="text-muted">Unable to detect</span>';
        }
    }
    function addCurrentIP() {
        const currentIPElement = document.getElementById('current-ip');
        const ip = currentIPElement.textContent.trim();
        if (ip && ip !== 'Detecting...' && ip !== 'Unable to detect') {
            const url = new URL('{{ url_for("email.add_ip") }}', window.location.origin);
            url.searchParams.set('ip', ip);
            window.location.href = url.toString();
        } else {
            alert('Unable to detect current IP address');
        }
    }
    // Auto-detect IP on page load
    detectCurrentIP();
 </script>
 {% endblock %}
--- a/email_frontend/templates/email/logs.html
+++ b/email_frontend/templates/email/logs.html
@@ -0,0 +1,322 @@
 {% extends "base.html" %}
 {% block title %}Logs - Email Server{% endblock %}
 {% block extra_css %}
 <style>
    .log-entry {
        border-left: 4px solid var(--bs-border-color);
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        background-color: var(--bs-body-bg);
        border-radius: 0.375rem;
    }
    .log-email { border-left-color: #0d6efd; }
    .log-auth { border-left-color: #198754; }
    .log-error { border-left-color: #dc3545; }
    .log-success { border-left-color: #198754; }
    .log-failed { border-left-color: #dc3545; }
    .log-content {
        font-family: 'Courier New', monospace;
        font-size: 0.875rem;
        background-color: var(--bs-gray-100);
        border-radius: 0.25rem;
        padding: 0.5rem;
        max-height: 150px;
        overflow-y: auto;
    }
 </style>
 {% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-journal-text me-2"></i>
            Server Logs
        </h2>
        <div class="btn-group">
            <a href="{{ url_for('email.logs', type='all') }}" 
               class="btn {{ 'btn-primary' if filter_type == 'all' else 'btn-outline-primary' }}">
                <i class="bi bi-list-ul me-1"></i>
                All Logs
            </a>
            <a href="{{ url_for('email.logs', type='emails') }}" 
               class="btn {{ 'btn-primary' if filter_type == 'emails' else 'btn-outline-primary' }}">
                <i class="bi bi-envelope me-1"></i>
                Email Logs
            </a>
            <a href="{{ url_for('email.logs', type='auth') }}" 
               class="btn {{ 'btn-primary' if filter_type == 'auth' else 'btn-outline-primary' }}">
                <i class="bi bi-shield-lock me-1"></i>
                Auth Logs
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        {% if filter_type == 'emails' %}
                            <i class="bi bi-envelope me-2"></i>
                            Email Activity
                        {% elif filter_type == 'auth' %}
                            <i class="bi bi-shield-lock me-2"></i>
                            Authentication Activity
                        {% else %}
                            <i class="bi bi-list-ul me-2"></i>
                            Recent Activity
                        {% endif %}
                    </h5>
                    <button class="btn btn-outline-secondary btn-sm" onclick="refreshLogs()">
                        <i class="bi bi-arrow-clockwise me-1"></i>
                        Refresh
                    </button>
                </div>
                <div class="card-body">
                    {% if logs %}
                        {% if filter_type == 'all' %}
                            <!-- Combined logs view -->
                            {% for log_entry in logs %}
                                {% if log_entry.type == 'email' %}
                                    {% set log = log_entry.data %}
                                    <div class="log-entry log-email log-{{ 'success' if log.status == 'relayed' else 'failed' }}">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <div>
                                                <span class="badge bg-primary me-2">EMAIL</span>
                                                <strong>{{ log.mail_from }}</strong> → {{ log.rcpt_tos }}
                                                {% if log.dkim_signed %}
                                                    <span class="badge bg-success ms-2">
                                                        <i class="bi bi-shield-check me-1"></i>
                                                        DKIM
                                                    </span>
                                                {% endif %}
                                            </div>
                                            <small class="text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <strong>Status:</strong> 
                                                {% if log.status == 'relayed' %}
                                                    <span class="text-success">Sent Successfully</span>
                                                {% else %}
                                                    <span class="text-danger">Failed</span>
                                                {% endif %}
                                            </div>
                                            <div class="col-md-6">
                                                <strong>Message ID:</strong> <code>{{ log.message_id }}</code>
                                            </div>
                                        </div>
                                        {% if log.subject %}
                                        <div class="mt-2">
                                            <strong>Subject:</strong> {{ log.subject }}
                                        </div>
                                        {% endif %}
                                    </div>
                                {% else %}
                                    {% set log = log_entry.data %}
                                    <div class="log-entry log-auth log-{{ 'success' if log.success else 'failed' }}">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <div>
                                                <span class="badge bg-success me-2">AUTH</span>
                                                <strong>{{ log.identifier }}</strong>
                                                <span class="badge {{ 'bg-success' if log.success else 'bg-danger' }} ms-2">
                                                    {{ 'Success' if log.success else 'Failed' }}
                                                </span>
                                            </div>
                                            <small class="text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <strong>Type:</strong> {{ log.auth_type.upper() }}
                                            </div>
                                            <div class="col-md-6">
                                                <strong>IP:</strong> <code>{{ log.ip_address or 'N/A' }}</code>
                                            </div>
                                        </div>
                                        {% if log.message %}
                                        <div class="mt-2">
                                            <strong>Message:</strong> {{ log.message }}
                                        </div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% elif filter_type == 'emails' %}
                            <!-- Email logs only -->
                            {% for log in logs %}
                                <div class="log-entry log-email log-{{ 'success' if log.status == 'relayed' else 'failed' }}">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <strong>{{ log.mail_from }}</strong> → {{ log.rcpt_tos }}
                                            {% if log.dkim_signed %}
                                                <span class="badge bg-success ms-2">
                                                    <i class="bi bi-shield-check me-1"></i>
                                                    DKIM
                                                </span>
                                            {% endif %}
                                        </div>
                                        <small class="text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <strong>Status:</strong> 
                                            {% if log.status == 'relayed' %}
                                                <span class="text-success">Sent</span>
                                            {% else %}
                                                <span class="text-danger">Failed</span>
                                            {% endif %}
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Peer:</strong> <code>{{ log.peer }}</code>
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Message ID:</strong> <code>{{ log.message_id }}</code>
                                        </div>
                                    </div>
                                    {% if log.subject %}
                                    <div class="mt-2">
                                        <strong>Subject:</strong> {{ log.subject }}
                                    </div>
                                    {% endif %}
                                    {% if log.content and log.content|length > 50 %}
                                    <div class="mt-2">
                                        <button class="btn btn-outline-secondary btn-sm" type="button" 
                                                data-bs-toggle="collapse" 
                                                data-bs-target="#content-{{ log.id }}">
                                            <i class="bi bi-eye me-1"></i>
                                            View Content
                                        </button>
                                        <div class="collapse mt-2" id="content-{{ log.id }}">
                                            <div class="log-content">{{ log.content }}</div>
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        {% else %}
                            <!-- Auth logs only -->
                            {% for log in logs %}
                                <div class="log-entry log-auth log-{{ 'success' if log.success else 'failed' }}">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <strong>{{ log.identifier }}</strong>
                                            <span class="badge {{ 'bg-success' if log.success else 'bg-danger' }} ms-2">
                                                {{ 'Success' if log.success else 'Failed' }}
                                            </span>
                                        </div>
                                        <small class="text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <strong>Type:</strong> {{ log.auth_type.upper() }}
                                        </div>
                                        <div class="col-md-4">
                                            <strong>IP:</strong> <code>{{ log.ip_address or 'N/A' }}</code>
                                        </div>
                                        <div class="col-md-4">
                                            <strong>Result:</strong> 
                                            {% if log.success %}
                                                <span class="text-success">Authenticated</span>
                                            {% else %}
                                                <span class="text-danger">Rejected</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    {% if log.message %}
                                    <div class="mt-2">
                                        <strong>Details:</strong> {{ log.message }}
                                    </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        {% endif %}
                        <!-- Pagination -->
                        {% if has_prev or has_next %}
                        <nav aria-label="Log pagination" class="mt-4">
                            <ul class="pagination justify-content-center">
                                {% if has_prev %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('email.logs', type=filter_type, page=page-1) }}">
                                        <i class="bi bi-chevron-left"></i>
                                        Previous
                                    </a>
                                </li>
                                {% endif %}
                                <li class="page-item active">
                                    <span class="page-link">Page {{ page }}</span>
                                </li>
                                {% if has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('email.logs', type=filter_type, page=page+1) }}">
                                        Next
                                        <i class="bi bi-chevron-right"></i>
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-journal-text text-muted" style="font-size: 4rem;"></i>
                            <h4 class="text-muted mt-3">No Logs Found</h4>
                            <p class="text-muted">
                                {% if filter_type == 'emails' %}
                                    No email activity has been logged yet.
                                {% elif filter_type == 'auth' %}
                                    No authentication attempts have been logged yet.
                                {% else %}
                                    No activity has been logged yet.
                                {% endif %}
                            </p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    function refreshLogs() {
        window.location.reload();
    }
    // Auto-refresh every 30 seconds
    setInterval(function() {
        // Only auto-refresh if the user is viewing the page
        if (document.visibilityState === 'visible') {
            const button = document.querySelector('[onclick="refreshLogs()"]');
            if (button) {
                // Add visual indicator that refresh is happening
                const originalText = button.innerHTML;
                button.innerHTML = '<i class="bi bi-arrow-clockwise me-1 spin"></i>Refreshing...';
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            }
        }
    }, 30000);
    // Add CSS for spinning icon
    const style = document.createElement('style');
    style.textContent = `
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .spin {
            animation: spin 1s linear infinite;
        }
    `;
    document.head.appendChild(style);
 </script>
 {% endblock %}
--- a/email_frontend/templates/email/settings.html
+++ b/email_frontend/templates/email/settings.html
@@ -0,0 +1,355 @@
 {% extends "base.html" %}
 {% block title %}Server Settings - Email Server{% endblock %}
 {% block extra_css %}
 <style>
    .setting-section {
        border-left: 4px solid var(--bs-primary);
        padding-left: 1rem;
        margin-bottom: 2rem;
    }
    .setting-description {
        font-size: 0.875rem;
        color: var(--bs-secondary);
        margin-bottom: 0.5rem;
    }
 </style>
 {% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-sliders me-2"></i>
            Server Settings
        </h2>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-warning" onclick="resetToDefaults()">
                <i class="bi bi-arrow-clockwise me-2"></i>
                Reset to Defaults
            </button>
            <button type="button" class="btn btn-outline-info" onclick="exportSettings()">
                <i class="bi bi-download me-2"></i>
                Export Config
            </button>
        </div>
    </div>
    <form method="POST" action="{{ url_for('email.update_settings') }}">
        <!-- Server Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-server me-2"></i>
                    Server Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">SMTP Port</label>
                                <div class="setting-description">Port for SMTP connections (standard: 25, 587)</div>
                                <input type="number" 
                                       class="form-control" 
                                       name="Server.SMTP_PORT" 
                                       value="{{ settings['Server']['SMTP_PORT'] }}"
                                       min="1" max="65535">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">SMTP TLS Port</label>
                                <div class="setting-description">Port for SMTP over TLS connections (standard: 465)</div>
                                <input type="number" 
                                       class="form-control" 
                                       name="Server.SMTP_TLS_PORT" 
                                       value="{{ settings['Server']['SMTP_TLS_PORT'] }}"
                                       min="1" max="65535">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Bind IP Address</label>
                                <div class="setting-description">IP address to bind the server to (0.0.0.0 for all interfaces)</div>
                                <input type="text" 
                                       class="form-control" 
                                       name="Server.BIND_IP" 
                                       value="{{ settings['Server']['BIND_IP'] }}"
                                       pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Hostname</label>
                                <div class="setting-description">Server hostname for HELO/EHLO commands</div>
                                <input type="text" 
                                       class="form-control" 
                                       name="Server.hostname" 
                                       value="{{ settings['Server']['hostname'] }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Database Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-database me-2"></i>
                    Database Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="mb-3">
                        <label class="form-label">Database URL</label>
                        <div class="setting-description">SQLite database file path or connection string</div>
                        <input type="text" 
                               class="form-control font-monospace" 
                               name="Database.DATABASE_URL" 
                               value="{{ settings['Database']['DATABASE_URL'] }}">
                    </div>
                </div>
            </div>
        </div>
        <!-- Logging Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-journal-text me-2"></i>
                    Logging Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Log Level</label>
                                <div class="setting-description">Minimum log level to record</div>
                                <select class="form-select" name="Logging.LOG_LEVEL">
                                    <option value="DEBUG" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'DEBUG' else '' }}>DEBUG</option>
                                    <option value="INFO" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'INFO' else '' }}>INFO</option>
                                    <option value="WARNING" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'WARNING' else '' }}>WARNING</option>
                                    <option value="ERROR" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'ERROR' else '' }}>ERROR</option>
                                    <option value="CRITICAL" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'CRITICAL' else '' }}>CRITICAL</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Hide aiosmtpd INFO Messages</label>
                                <div class="setting-description">Reduce verbose logging from aiosmtpd library</div>
                                <select class="form-select" name="Logging.hide_info_aiosmtpd">
                                    <option value="true" {{ 'selected' if settings['Logging']['hide_info_aiosmtpd'] == 'true' else '' }}>Yes</option>
                                    <option value="false" {{ 'selected' if settings['Logging']['hide_info_aiosmtpd'] == 'false' else '' }}>No</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Relay Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-arrow-repeat me-2"></i>
                    Email Relay Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="mb-3">
                        <label class="form-label">Relay Timeout (seconds)</label>
                        <div class="setting-description">Timeout for external SMTP connections when relaying emails</div>
                        <input type="number" 
                               class="form-control" 
                               name="Relay.RELAY_TIMEOUT" 
                               value="{{ settings['Relay']['RELAY_TIMEOUT'] }}"
                               min="5" max="300">
                    </div>
                </div>
            </div>
        </div>
        <!-- TLS Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-shield-lock me-2"></i>
                    TLS/SSL Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">TLS Certificate File</label>
                                <div class="setting-description">Path to SSL certificate file (.crt or .pem)</div>
                                <input type="text" 
                                       class="form-control font-monospace" 
                                       name="TLS.TLS_CERT_FILE" 
                                       value="{{ settings['TLS']['TLS_CERT_FILE'] }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">TLS Private Key File</label>
                                <div class="setting-description">Path to SSL private key file (.key or .pem)</div>
                                <input type="text" 
                                       class="form-control font-monospace" 
                                       name="TLS.TLS_KEY_FILE" 
                                       value="{{ settings['TLS']['TLS_KEY_FILE'] }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- DKIM Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-key me-2"></i>
                    DKIM Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="mb-3">
                        <label class="form-label">DKIM Key Size</label>
                        <div class="setting-description">RSA key size for new DKIM keys (larger = more secure, slower)</div>
                        <select class="form-select" name="DKIM.DKIM_KEY_SIZE">
                            <option value="1024" {{ 'selected' if settings['DKIM']['DKIM_KEY_SIZE'] == '1024' else '' }}>1024 bits</option>
                            <option value="2048" {{ 'selected' if settings['DKIM']['DKIM_KEY_SIZE'] == '2048' else '' }}>2048 bits (Recommended)</option>
                            <option value="4096" {{ 'selected' if settings['DKIM']['DKIM_KEY_SIZE'] == '4096' else '' }}>4096 bits</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <!-- Save Button -->
        <div class="d-flex justify-content-between align-items-center">
            <div class="alert alert-warning d-flex align-items-center mb-0">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <small>Server restart required after changing settings</small>
            </div>
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="bi bi-save me-2"></i>
                Save Settings
            </button>
        </div>
    </form>
 </div>
 <!-- Reset Confirmation Modal -->
 <div class="modal fade" id="resetModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reset Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to reset all settings to their default values?</p>
                <p class="text-warning"><strong>Warning:</strong> This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" onclick="confirmReset()">Reset Settings</button>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    function resetToDefaults() {
        new bootstrap.Modal(document.getElementById('resetModal')).show();
    }
    function confirmReset() {
        // This would need to be implemented as a separate endpoint
        // For now, just redirect to a reset URL
        window.location.href = '{{ url_for("email.settings") }}?reset=true';
    }
    function exportSettings() {
        // Create a downloadable config file
        const settings = {};
        const formData = new FormData(document.querySelector('form'));
        for (let [key, value] of formData.entries()) {
            const [section, setting] = key.split('.');
            if (!settings[section]) {
                settings[section] = {};
            }
            settings[section][setting] = value;
        }
        const configText = generateConfigFile(settings);
        downloadFile('settings.ini', configText);
    }
    function generateConfigFile(settings) {
        let config = '';
        for (const [section, values] of Object.entries(settings)) {
            config += `[${section}]\n`;
            for (const [key, value] of Object.entries(values)) {
                config += `${key} = ${value}\n`;
            }
            config += '\n';
        }
        return config;
    }
    function downloadFile(filename, content) {
        const element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
        element.setAttribute('download', filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }
    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        // Basic validation
        const ports = ['Server.SMTP_PORT', 'Server.SMTP_TLS_PORT'];
        for (const portField of ports) {
            const input = document.querySelector(`[name="${portField}"]`);
            const port = parseInt(input.value);
            if (port < 1 || port > 65535) {
                e.preventDefault();
                alert(`Invalid port number: ${port}. Must be between 1 and 65535.`);
                input.focus();
                return;
            }
        }
        // Check if ports are different
        const smtpPort = document.querySelector('[name="Server.SMTP_PORT"]').value;
        const tlsPort = document.querySelector('[name="Server.SMTP_TLS_PORT"]').value;
        if (smtpPort === tlsPort) {
            e.preventDefault();
            alert('SMTP and TLS ports must be different.');
            return;
        }
    });
 </script>
 {% endblock %}
--- a/email_frontend/templates/email/users.html
+++ b/email_frontend/templates/email/users.html
@@ -0,0 +1,170 @@
 {% extends "base.html" %}
 {% block title %}Users - Email Server Management{% endblock %}
 {% block page_title %}User Management{% endblock %}
 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="bi bi-people me-2"></i>
        Users
    </h2>
    <a href="{{ url_for('email.add_user') }}" class="btn btn-primary">
        <i class="bi bi-person-plus me-2"></i>
        Add User
    </a>
 </div>
 <div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="bi bi-list-ul me-2"></i>
            All Users
        </h5>
    </div>
    <div class="card-body p-0">
        {% if users %}
            <div class="table-responsive">
                <table class="table table-dark table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Email</th>
                            <th>Domain</th>
                            <th>Permissions</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user, domain in users %}
                        <tr>
                            <td>
                                <div class="fw-bold">{{ user.email }}</div>
                            </td>
                            <td>
                                <span class="badge bg-secondary">{{ domain.domain_name }}</span>
                            </td>
                            <td>
                                {% if user.can_send_as_domain %}
                                    <span class="badge bg-warning">
                                        <i class="bi bi-star me-1"></i>
                                        Domain Admin
                                    </span>
                                    <br>
                                    <small class="text-muted">Can send as *@{{ domain.domain_name }}</small>
                                {% else %}
                                    <span class="badge bg-info">
                                        <i class="bi bi-person me-1"></i>
                                        User
                                    </span>
                                    <br>
                                    <small class="text-muted">Can only send as {{ user.email }}</small>
                                {% endif %}
                            </td>
                            <td>
                                {% if user.is_active %}
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle me-1"></i>
                                        Active
                                    </span>
                                {% else %}
                                    <span class="badge bg-danger">
                                        <i class="bi bi-x-circle me-1"></i>
                                        Inactive
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <small class="text-muted">
                                    {{ user.created_at.strftime('%Y-%m-%d %H:%M') }}
                                </small>
                            </td>
                            <td>
                                {% if user.is_active %}
                                    <form method="post" action="{{ url_for('email.delete_user', user_id=user.id) }}" class="d-inline">
                                        <button type="submit" 
                                                class="btn btn-outline-danger btn-sm"
                                                data-confirm="Are you sure you want to deactivate user '{{ user.email }}'?"
                                                title="Deactivate User">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                {% else %}
                                    <span class="text-muted">
                                        <i class="bi bi-dash-circle"></i>
                                    </span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="bi bi-people text-muted" style="font-size: 4rem;"></i>
                <h4 class="text-muted mt-3">No users configured</h4>
                <p class="text-muted">Add users to enable username/password authentication</p>
                <a href="{{ url_for('email.add_user') }}" class="btn btn-primary">
                    <i class="bi bi-person-plus me-2"></i>
                    Add Your First User
                </a>
            </div>
        {% endif %}
    </div>
 </div>
 {% if users %}
 <div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    User Statistics
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        <strong>Active users:</strong> {{ users|selectattr('0.is_active')|list|length }}
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-star text-warning me-2"></i>
                        <strong>Domain admins:</strong> {{ users|selectattr('0.can_send_as_domain')|list|length }}
                    </li>
                    <li>
                        <i class="bi bi-person text-info me-2"></i>
                        <strong>Regular users:</strong> {{ users|rejectattr('0.can_send_as_domain')|list|length }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-lightbulb me-2"></i>
                    Permission Levels
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <span class="badge bg-warning me-2">Domain Admin</span>
                        Can send as any email address in their domain
                    </li>
                    <li>
                        <span class="badge bg-info me-2">Regular User</span>
                        Can only send as their own email address
                    </li>
                </ul>
            </div>
        </div>
    </div>
 </div>
 {% endif %}
 {% endblock %}
--- a/email_frontend/templates/error.html
+++ b/email_frontend/templates/error.html
@@ -0,0 +1,173 @@
 {% extends "base.html" %}
 {% block title %}Error - SMTP Management{% endblock %}
 {% block content %}
 <div class="row">
    <div class="col-12">
        <div class="card border-danger">
            <div class="card-header bg-danger text-white">
                <div class="d-flex align-items-center">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <h5 class="mb-0">Error Occurred</h5>
                </div>
            </div>
            <div class="card-body">
                {% if error_code %}
                <div class="row mb-3">
                    <div class="col-sm-3"><strong>Error Code:</strong></div>
                    <div class="col-sm-9">
                        <span class="badge bg-danger fs-6">{{ error_code }}</span>
                    </div>
                </div>
                {% endif %}
                {% if error_message %}
                <div class="row mb-3">
                    <div class="col-sm-3"><strong>Message:</strong></div>
                    <div class="col-sm-9">
                        <div class="alert alert-danger mb-0">
                            {{ error_message }}
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if error_details %}
                <div class="row mb-3">
                    <div class="col-sm-3"><strong>Details:</strong></div>
                    <div class="col-sm-9">
                        <div class="bg-dark text-light p-3 rounded">
                            <pre class="mb-0"><code>{{ error_details }}</code></pre>
                        </div>
                    </div>
                </div>
                {% endif %}
                <div class="row mb-3">
                    <div class="col-sm-3"><strong>Timestamp:</strong></div>
                    <div class="col-sm-9">
                        <span class="text-muted">{{ current_time.strftime('%Y-%m-%d %H:%M:%S') if current_time else 'Unknown' }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3"><strong>Request URL:</strong></div>
                    <div class="col-sm-9">
                        <code>{{ request.url if request else 'Unknown' }}</code>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <a href="{{ url_for('email_management.dashboard') }}" class="btn btn-primary">
                            <i class="fas fa-home me-1"></i>
                            Return to Dashboard
                        </a>
                        <button onclick="history.back()" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>
                            Go Back
                        </button>
                    </div>
                    <div>
                        <button class="btn btn-outline-light" onclick="copyErrorDetails()">
                            <i class="fas fa-copy me-1"></i>
                            Copy Error Details
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <!-- Common Error Solutions -->
 <div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-lightbulb me-2"></i>
                    Common Solutions
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Database Issues:</h6>
                        <ul class="text-muted small">
                            <li>Check database connection settings</li>
                            <li>Verify database tables exist</li>
                            <li>Check database permissions</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Configuration Issues:</h6>
                        <ul class="text-muted small">
                            <li>Verify settings.ini file exists</li>
                            <li>Check file permissions</li>
                            <li>Validate configuration values</li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6>Network Issues:</h6>
                        <ul class="text-muted small">
                            <li>Check firewall settings</li>
                            <li>Verify DNS resolution</li>
                            <li>Test network connectivity</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Permission Issues:</h6>
                        <ul class="text-muted small">
                            <li>Check file system permissions</li>
                            <li>Verify user authentication</li>
                            <li>Review access controls</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <script>
 function copyErrorDetails() {
    const errorDetails = {
        code: '{{ error_code or "Unknown" }}',
        message: '{{ error_message or "No message" }}',
        details: `{{ error_details or "No details" }}`,
        timestamp: '{{ current_time.strftime("%Y-%m-%d %H:%M:%S") if current_time else "Unknown" }}',
        url: '{{ request.url if request else "Unknown" }}'
    };
    const errorText = `Error Report:
 Code: ${errorDetails.code}
 Message: ${errorDetails.message}
 Details: ${errorDetails.details}
 Time: ${errorDetails.timestamp}
 URL: ${errorDetails.url}`;
    navigator.clipboard.writeText(errorText).then(() => {
        // Show success message
        const btn = event.target.closest('button');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
        btn.classList.remove('btn-outline-light');
        btn.classList.add('btn-success');
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-light');
        }, 2000);
    }).catch(err => {
        console.error('Failed to copy: ', err);
        alert('Failed to copy error details to clipboard');
    });
 }
 </script>
 {% endblock %}
--- a/email_frontend/templates/ips.html
+++ b/email_frontend/templates/ips.html
@@ -0,0 +1,203 @@
 {% extends "base.html" %}
 {% block title %}Whitelisted IPs - Email Server{% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-router me-2"></i>
            Whitelisted IP Addresses
        </h2>
        <a href="{{ url_for('email.add_ip') }}" class="btn btn-success">
            <i class="bi bi-plus-circle me-2"></i>
            Add IP Address
        </a>
    </div>
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-list me-2"></i>
                        Whitelisted IP Addresses
                    </h5>
                </div>
                <div class="card-body">
                    {% if ips %}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>IP Address</th>
                                        <th>Domain</th>
                                        <th>Status</th>
                                        <th>Added</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ip, domain in ips %}
                                    <tr>
                                        <td>
                                            <div class="fw-bold font-monospace">{{ ip.ip_address }}</div>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ domain.domain_name }}</span>
                                        </td>
                                        <td>
                                            {% if ip.is_active %}
                                                <span class="badge bg-success">
                                                    <i class="bi bi-check-circle me-1"></i>
                                                    Active
                                                </span>
                                            {% else %}
                                                <span class="badge bg-danger">
                                                    <i class="bi bi-x-circle me-1"></i>
                                                    Inactive
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ ip.created_at.strftime('%Y-%m-%d %H:%M') }}
                                            </small>
                                        </td>
                                        <td>
                                            {% if ip.is_active %}
                                                <form method="post" action="{{ url_for('email.delete_ip', ip_id=ip.id) }}" class="d-inline">
                                                    <button type="submit" 
                                                            class="btn btn-outline-danger btn-sm"
                                                            onclick="return confirm('Remove {{ ip.ip_address }} from whitelist?')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                            {% else %}
                                                <span class="text-muted">
                                                    <i class="bi bi-dash"></i>
                                                </span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-router text-muted" style="font-size: 4rem;"></i>
                            <h4 class="text-muted mt-3">No IP Addresses Whitelisted</h4>
                            <p class="text-muted">Add IP addresses to allow authentication without username/password</p>
                            <a href="{{ url_for('email.add_ip') }}" class="btn btn-primary">
                                <i class="bi bi-plus-circle me-2"></i>
                                Add First IP Address
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <!-- Information Panel -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        IP Whitelist Information
                    </h6>
                </div>
                <div class="card-body">
                    {% if ips %}
                        <ul class="list-unstyled mb-3">
                            <li class="mb-2">
                                <i class="bi bi-check-circle text-success me-2"></i>
                                <strong>Active IPs:</strong> {{ ips|selectattr('0.is_active')|list|length }}
                            </li>
                            <li class="mb-2">
                                <i class="bi bi-server text-info me-2"></i>
                                <strong>Domains covered:</strong> {{ ips|map(attribute='1.domain_name')|unique|list|length }}
                            </li>
                            <li>
                                <i class="bi bi-calendar text-muted me-2"></i>
                                <strong>Latest addition:</strong> 
                                {% set latest = ips|map(attribute='0')|max(attribute='created_at') %}
                                {{ latest.strftime('%Y-%m-%d') if latest else 'N/A' }}
                            </li>
                        </ul>
                    {% endif %}
                    <div class="alert alert-info">
                        <h6 class="alert-heading">
                            <i class="bi bi-shield-check me-2"></i>
                            How IP Whitelisting Works
                        </h6>
                        <ul class="mb-0 small">
                            <li>Whitelisted IPs can send emails without username/password authentication</li>
                            <li>Each IP is associated with a specific domain</li>
                            <li>IP can only send emails for its authorized domain</li>
                            <li>Useful for server-to-server email sending</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Current IP Detection -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="bi bi-geo-alt me-2"></i>
                        Your Current IP
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <div class="fw-bold font-monospace fs-5" id="current-ip">
                            <span class="spinner-border spinner-border-sm me-2"></span>
                            Detecting...
                        </div>
                        <button class="btn btn-outline-primary btn-sm mt-2" onclick="addCurrentIP()">
                            <i class="bi bi-plus-circle me-1"></i>
                            Add This IP
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    // Detect current IP address
    async function detectCurrentIP() {
        try {
            const response = await fetch('https://api.ipify.org?format=json');
            const data = await response.json();
            document.getElementById('current-ip').innerHTML = 
                `<span class="text-primary">${data.ip}</span>`;
        } catch (error) {
            document.getElementById('current-ip').innerHTML = 
                '<span class="text-muted">Unable to detect</span>';
        }
    }
    function addCurrentIP() {
        const currentIPElement = document.getElementById('current-ip');
        const ip = currentIPElement.textContent.trim();
        if (ip && ip !== 'Detecting...' && ip !== 'Unable to detect') {
            const url = new URL('{{ url_for("email.add_ip") }}', window.location.origin);
            url.searchParams.set('ip', ip);
            window.location.href = url.toString();
        } else {
            alert('Unable to detect current IP address');
        }
    }
    // Auto-detect IP on page load
    detectCurrentIP();
 </script>
 {% endblock %}
--- a/email_frontend/templates/logs.html
+++ b/email_frontend/templates/logs.html
@@ -0,0 +1,322 @@
 {% extends "base.html" %}
 {% block title %}Logs - Email Server{% endblock %}
 {% block extra_css %}
 <style>
    .log-entry {
        border-left: 4px solid var(--bs-border-color);
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        background-color: var(--bs-body-bg);
        border-radius: 0.375rem;
    }
    .log-email { border-left-color: #0d6efd; }
    .log-auth { border-left-color: #198754; }
    .log-error { border-left-color: #dc3545; }
    .log-success { border-left-color: #198754; }
    .log-failed { border-left-color: #dc3545; }
    .log-content {
        font-family: 'Courier New', monospace;
        font-size: 0.875rem;
        background-color: var(--bs-gray-100);
        border-radius: 0.25rem;
        padding: 0.5rem;
        max-height: 150px;
        overflow-y: auto;
    }
 </style>
 {% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-journal-text me-2"></i>
            Server Logs
        </h2>
        <div class="btn-group">
            <a href="{{ url_for('email.logs', type='all') }}" 
               class="btn {{ 'btn-primary' if filter_type == 'all' else 'btn-outline-primary' }}">
                <i class="bi bi-list-ul me-1"></i>
                All Logs
            </a>
            <a href="{{ url_for('email.logs', type='emails') }}" 
               class="btn {{ 'btn-primary' if filter_type == 'emails' else 'btn-outline-primary' }}">
                <i class="bi bi-envelope me-1"></i>
                Email Logs
            </a>
            <a href="{{ url_for('email.logs', type='auth') }}" 
               class="btn {{ 'btn-primary' if filter_type == 'auth' else 'btn-outline-primary' }}">
                <i class="bi bi-shield-lock me-1"></i>
                Auth Logs
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        {% if filter_type == 'emails' %}
                            <i class="bi bi-envelope me-2"></i>
                            Email Activity
                        {% elif filter_type == 'auth' %}
                            <i class="bi bi-shield-lock me-2"></i>
                            Authentication Activity
                        {% else %}
                            <i class="bi bi-list-ul me-2"></i>
                            Recent Activity
                        {% endif %}
                    </h5>
                    <button class="btn btn-outline-secondary btn-sm" onclick="refreshLogs()">
                        <i class="bi bi-arrow-clockwise me-1"></i>
                        Refresh
                    </button>
                </div>
                <div class="card-body">
                    {% if logs %}
                        {% if filter_type == 'all' %}
                            <!-- Combined logs view -->
                            {% for log_entry in logs %}
                                {% if log_entry.type == 'email' %}
                                    {% set log = log_entry.data %}
                                    <div class="log-entry log-email log-{{ 'success' if log.status == 'relayed' else 'failed' }}">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <div>
                                                <span class="badge bg-primary me-2">EMAIL</span>
                                                <strong>{{ log.mail_from }}</strong> → {{ log.rcpt_tos }}
                                                {% if log.dkim_signed %}
                                                    <span class="badge bg-success ms-2">
                                                        <i class="bi bi-shield-check me-1"></i>
                                                        DKIM
                                                    </span>
                                                {% endif %}
                                            </div>
                                            <small class="text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <strong>Status:</strong> 
                                                {% if log.status == 'relayed' %}
                                                    <span class="text-success">Sent Successfully</span>
                                                {% else %}
                                                    <span class="text-danger">Failed</span>
                                                {% endif %}
                                            </div>
                                            <div class="col-md-6">
                                                <strong>Message ID:</strong> <code>{{ log.message_id }}</code>
                                            </div>
                                        </div>
                                        {% if log.subject %}
                                        <div class="mt-2">
                                            <strong>Subject:</strong> {{ log.subject }}
                                        </div>
                                        {% endif %}
                                    </div>
                                {% else %}
                                    {% set log = log_entry.data %}
                                    <div class="log-entry log-auth log-{{ 'success' if log.success else 'failed' }}">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <div>
                                                <span class="badge bg-success me-2">AUTH</span>
                                                <strong>{{ log.identifier }}</strong>
                                                <span class="badge {{ 'bg-success' if log.success else 'bg-danger' }} ms-2">
                                                    {{ 'Success' if log.success else 'Failed' }}
                                                </span>
                                            </div>
                                            <small class="text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <strong>Type:</strong> {{ log.auth_type.upper() }}
                                            </div>
                                            <div class="col-md-6">
                                                <strong>IP:</strong> <code>{{ log.ip_address or 'N/A' }}</code>
                                            </div>
                                        </div>
                                        {% if log.message %}
                                        <div class="mt-2">
                                            <strong>Message:</strong> {{ log.message }}
                                        </div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% elif filter_type == 'emails' %}
                            <!-- Email logs only -->
                            {% for log in logs %}
                                <div class="log-entry log-email log-{{ 'success' if log.status == 'relayed' else 'failed' }}">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <strong>{{ log.mail_from }}</strong> → {{ log.rcpt_tos }}
                                            {% if log.dkim_signed %}
                                                <span class="badge bg-success ms-2">
                                                    <i class="bi bi-shield-check me-1"></i>
                                                    DKIM
                                                </span>
                                            {% endif %}
                                        </div>
                                        <small class="text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <strong>Status:</strong> 
                                            {% if log.status == 'relayed' %}
                                                <span class="text-success">Sent</span>
                                            {% else %}
                                                <span class="text-danger">Failed</span>
                                            {% endif %}
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Peer:</strong> <code>{{ log.peer }}</code>
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Message ID:</strong> <code>{{ log.message_id }}</code>
                                        </div>
                                    </div>
                                    {% if log.subject %}
                                    <div class="mt-2">
                                        <strong>Subject:</strong> {{ log.subject }}
                                    </div>
                                    {% endif %}
                                    {% if log.content and log.content|length > 50 %}
                                    <div class="mt-2">
                                        <button class="btn btn-outline-secondary btn-sm" type="button" 
                                                data-bs-toggle="collapse" 
                                                data-bs-target="#content-{{ log.id }}">
                                            <i class="bi bi-eye me-1"></i>
                                            View Content
                                        </button>
                                        <div class="collapse mt-2" id="content-{{ log.id }}">
                                            <div class="log-content">{{ log.content }}</div>
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        {% else %}
                            <!-- Auth logs only -->
                            {% for log in logs %}
                                <div class="log-entry log-auth log-{{ 'success' if log.success else 'failed' }}">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <strong>{{ log.identifier }}</strong>
                                            <span class="badge {{ 'bg-success' if log.success else 'bg-danger' }} ms-2">
                                                {{ 'Success' if log.success else 'Failed' }}
                                            </span>
                                        </div>
                                        <small class="text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <strong>Type:</strong> {{ log.auth_type.upper() }}
                                        </div>
                                        <div class="col-md-4">
                                            <strong>IP:</strong> <code>{{ log.ip_address or 'N/A' }}</code>
                                        </div>
                                        <div class="col-md-4">
                                            <strong>Result:</strong> 
                                            {% if log.success %}
                                                <span class="text-success">Authenticated</span>
                                            {% else %}
                                                <span class="text-danger">Rejected</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    {% if log.message %}
                                    <div class="mt-2">
                                        <strong>Details:</strong> {{ log.message }}
                                    </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        {% endif %}
                        <!-- Pagination -->
                        {% if has_prev or has_next %}
                        <nav aria-label="Log pagination" class="mt-4">
                            <ul class="pagination justify-content-center">
                                {% if has_prev %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('email.logs', type=filter_type, page=page-1) }}">
                                        <i class="bi bi-chevron-left"></i>
                                        Previous
                                    </a>
                                </li>
                                {% endif %}
                                <li class="page-item active">
                                    <span class="page-link">Page {{ page }}</span>
                                </li>
                                {% if has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('email.logs', type=filter_type, page=page+1) }}">
                                        Next
                                        <i class="bi bi-chevron-right"></i>
                                    </a>
                                </li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-journal-text text-muted" style="font-size: 4rem;"></i>
                            <h4 class="text-muted mt-3">No Logs Found</h4>
                            <p class="text-muted">
                                {% if filter_type == 'emails' %}
                                    No email activity has been logged yet.
                                {% elif filter_type == 'auth' %}
                                    No authentication attempts have been logged yet.
                                {% else %}
                                    No activity has been logged yet.
                                {% endif %}
                            </p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    function refreshLogs() {
        window.location.reload();
    }
    // Auto-refresh every 30 seconds
    setInterval(function() {
        // Only auto-refresh if the user is viewing the page
        if (document.visibilityState === 'visible') {
            const button = document.querySelector('[onclick="refreshLogs()"]');
            if (button) {
                // Add visual indicator that refresh is happening
                const originalText = button.innerHTML;
                button.innerHTML = '<i class="bi bi-arrow-clockwise me-1 spin"></i>Refreshing...';
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            }
        }
    }, 30000);
    // Add CSS for spinning icon
    const style = document.createElement('style');
    style.textContent = `
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .spin {
            animation: spin 1s linear infinite;
        }
    `;
    document.head.appendChild(style);
 </script>
 {% endblock %}
--- a/email_frontend/templates/settings.html
+++ b/email_frontend/templates/settings.html
@@ -0,0 +1,355 @@
 {% extends "base.html" %}
 {% block title %}Server Settings - Email Server{% endblock %}
 {% block extra_css %}
 <style>
    .setting-section {
        border-left: 4px solid var(--bs-primary);
        padding-left: 1rem;
        margin-bottom: 2rem;
    }
    .setting-description {
        font-size: 0.875rem;
        color: var(--bs-secondary);
        margin-bottom: 0.5rem;
    }
 </style>
 {% endblock %}
 {% block content %}
 <div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-sliders me-2"></i>
            Server Settings
        </h2>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-warning" onclick="resetToDefaults()">
                <i class="bi bi-arrow-clockwise me-2"></i>
                Reset to Defaults
            </button>
            <button type="button" class="btn btn-outline-info" onclick="exportSettings()">
                <i class="bi bi-download me-2"></i>
                Export Config
            </button>
        </div>
    </div>
    <form method="POST" action="{{ url_for('email.update_settings') }}">
        <!-- Server Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-server me-2"></i>
                    Server Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">SMTP Port</label>
                                <div class="setting-description">Port for SMTP connections (standard: 25, 587)</div>
                                <input type="number" 
                                       class="form-control" 
                                       name="Server.SMTP_PORT" 
                                       value="{{ settings['Server']['SMTP_PORT'] }}"
                                       min="1" max="65535">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">SMTP TLS Port</label>
                                <div class="setting-description">Port for SMTP over TLS connections (standard: 465)</div>
                                <input type="number" 
                                       class="form-control" 
                                       name="Server.SMTP_TLS_PORT" 
                                       value="{{ settings['Server']['SMTP_TLS_PORT'] }}"
                                       min="1" max="65535">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Bind IP Address</label>
                                <div class="setting-description">IP address to bind the server to (0.0.0.0 for all interfaces)</div>
                                <input type="text" 
                                       class="form-control" 
                                       name="Server.BIND_IP" 
                                       value="{{ settings['Server']['BIND_IP'] }}"
                                       pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Hostname</label>
                                <div class="setting-description">Server hostname for HELO/EHLO commands</div>
                                <input type="text" 
                                       class="form-control" 
                                       name="Server.hostname" 
                                       value="{{ settings['Server']['hostname'] }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Database Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-database me-2"></i>
                    Database Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="mb-3">
                        <label class="form-label">Database URL</label>
                        <div class="setting-description">SQLite database file path or connection string</div>
                        <input type="text" 
                               class="form-control font-monospace" 
                               name="Database.DATABASE_URL" 
                               value="{{ settings['Database']['DATABASE_URL'] }}">
                    </div>
                </div>
            </div>
        </div>
        <!-- Logging Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-journal-text me-2"></i>
                    Logging Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Log Level</label>
                                <div class="setting-description">Minimum log level to record</div>
                                <select class="form-select" name="Logging.LOG_LEVEL">
                                    <option value="DEBUG" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'DEBUG' else '' }}>DEBUG</option>
                                    <option value="INFO" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'INFO' else '' }}>INFO</option>
                                    <option value="WARNING" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'WARNING' else '' }}>WARNING</option>
                                    <option value="ERROR" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'ERROR' else '' }}>ERROR</option>
                                    <option value="CRITICAL" {{ 'selected' if settings['Logging']['LOG_LEVEL'] == 'CRITICAL' else '' }}>CRITICAL</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Hide aiosmtpd INFO Messages</label>
                                <div class="setting-description">Reduce verbose logging from aiosmtpd library</div>
                                <select class="form-select" name="Logging.hide_info_aiosmtpd">
                                    <option value="true" {{ 'selected' if settings['Logging']['hide_info_aiosmtpd'] == 'true' else '' }}>Yes</option>
                                    <option value="false" {{ 'selected' if settings['Logging']['hide_info_aiosmtpd'] == 'false' else '' }}>No</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Relay Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-arrow-repeat me-2"></i>
                    Email Relay Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="mb-3">
                        <label class="form-label">Relay Timeout (seconds)</label>
                        <div class="setting-description">Timeout for external SMTP connections when relaying emails</div>
                        <input type="number" 
                               class="form-control" 
                               name="Relay.RELAY_TIMEOUT" 
                               value="{{ settings['Relay']['RELAY_TIMEOUT'] }}"
                               min="5" max="300">
                    </div>
                </div>
            </div>
        </div>
        <!-- TLS Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-shield-lock me-2"></i>
                    TLS/SSL Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">TLS Certificate File</label>
                                <div class="setting-description">Path to SSL certificate file (.crt or .pem)</div>
                                <input type="text" 
                                       class="form-control font-monospace" 
                                       name="TLS.TLS_CERT_FILE" 
                                       value="{{ settings['TLS']['TLS_CERT_FILE'] }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">TLS Private Key File</label>
                                <div class="setting-description">Path to SSL private key file (.key or .pem)</div>
                                <input type="text" 
                                       class="form-control font-monospace" 
                                       name="TLS.TLS_KEY_FILE" 
                                       value="{{ settings['TLS']['TLS_KEY_FILE'] }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- DKIM Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-key me-2"></i>
                    DKIM Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="setting-section">
                    <div class="mb-3">
                        <label class="form-label">DKIM Key Size</label>
                        <div class="setting-description">RSA key size for new DKIM keys (larger = more secure, slower)</div>
                        <select class="form-select" name="DKIM.DKIM_KEY_SIZE">
                            <option value="1024" {{ 'selected' if settings['DKIM']['DKIM_KEY_SIZE'] == '1024' else '' }}>1024 bits</option>
                            <option value="2048" {{ 'selected' if settings['DKIM']['DKIM_KEY_SIZE'] == '2048' else '' }}>2048 bits (Recommended)</option>
                            <option value="4096" {{ 'selected' if settings['DKIM']['DKIM_KEY_SIZE'] == '4096' else '' }}>4096 bits</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <!-- Save Button -->
        <div class="d-flex justify-content-between align-items-center">
            <div class="alert alert-warning d-flex align-items-center mb-0">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <small>Server restart required after changing settings</small>
            </div>
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="bi bi-save me-2"></i>
                Save Settings
            </button>
        </div>
    </form>
 </div>
 <!-- Reset Confirmation Modal -->
 <div class="modal fade" id="resetModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reset Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to reset all settings to their default values?</p>
                <p class="text-warning"><strong>Warning:</strong> This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" onclick="confirmReset()">Reset Settings</button>
            </div>
        </div>
    </div>
 </div>
 {% endblock %}
 {% block extra_js %}
 <script>
    function resetToDefaults() {
        new bootstrap.Modal(document.getElementById('resetModal')).show();
    }
    function confirmReset() {
        // This would need to be implemented as a separate endpoint
        // For now, just redirect to a reset URL
        window.location.href = '{{ url_for("email.settings") }}?reset=true';
    }
    function exportSettings() {
        // Create a downloadable config file
        const settings = {};
        const formData = new FormData(document.querySelector('form'));
        for (let [key, value] of formData.entries()) {
            const [section, setting] = key.split('.');
            if (!settings[section]) {
                settings[section] = {};
            }
            settings[section][setting] = value;
        }
        const configText = generateConfigFile(settings);
        downloadFile('settings.ini', configText);
    }
    function generateConfigFile(settings) {
        let config = '';
        for (const [section, values] of Object.entries(settings)) {
            config += `[${section}]\n`;
            for (const [key, value] of Object.entries(values)) {
                config += `${key} = ${value}\n`;
            }
            config += '\n';
        }
        return config;
    }
    function downloadFile(filename, content) {
        const element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
        element.setAttribute('download', filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }
    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        // Basic validation
        const ports = ['Server.SMTP_PORT', 'Server.SMTP_TLS_PORT'];
        for (const portField of ports) {
            const input = document.querySelector(`[name="${portField}"]`);
            const port = parseInt(input.value);
            if (port < 1 || port > 65535) {
                e.preventDefault();
                alert(`Invalid port number: ${port}. Must be between 1 and 65535.`);
                input.focus();
                return;
            }
        }
        // Check if ports are different
        const smtpPort = document.querySelector('[name="Server.SMTP_PORT"]').value;
        const tlsPort = document.querySelector('[name="Server.SMTP_TLS_PORT"]').value;
        if (smtpPort === tlsPort) {
            e.preventDefault();
            alert('SMTP and TLS ports must be different.');
            return;
        }
    });
 </script>
 {% endblock %}
--- a/email_frontend/templates/sidebar_email.html
+++ b/email_frontend/templates/sidebar_email.html
@@ -0,0 +1,187 @@
 <!-- Sidebar Navigation -->
 <nav class="sidebar bg-dark border-end border-secondary position-fixed h-100" style="width: var(--sidebar-width); z-index: 1000;">
    <div class="d-flex flex-column h-100">
        <!-- Sidebar header -->
        <div class="p-3 border-bottom border-secondary">
            <h5 class="text-white mb-0">
                <i class="bi bi-server me-2"></i>
                SMTP Server
            </h5>
            <small class="text-muted">Management Console</small>
        </div>
        <!-- Navigation menu -->
        <div class="flex-grow-1 overflow-auto">
            <ul class="nav nav-pills flex-column p-3">
                <!-- Dashboard -->
                <li class="nav-item mb-2">
                    <a href="{{ url_for('email.dashboard') }}" 
                       class="nav-link text-white {{ 'active' if request.endpoint == 'email.dashboard' else '' }}">
                        <i class="bi bi-speedometer2 me-2"></i>
                        Dashboard
                    </a>
                </li>
                <!-- Domains Section -->
                <li class="nav-item mb-2">
                    <h6 class="text-muted text-uppercase small mb-2 mt-3">
                        <i class="bi bi-globe me-1"></i>
                        Domain Management
                    </h6>
                </li>
                <li class="nav-item mb-1">
                    <a href="{{ url_for('email.domains_list') }}" 
                       class="nav-link text-white {{ 'active' if request.endpoint in ['email.domains_list', 'email.add_domain'] else '' }}">
                        <i class="bi bi-list-ul me-2"></i>
                        Domains
                        <span class="badge bg-secondary ms-auto">{{ domain_count if domain_count is defined else '' }}</span>
                    </a>
                </li>
                <!-- Authentication Section -->
                <li class="nav-item mb-2">
                    <h6 class="text-muted text-uppercase small mb-2 mt-3">
                        <i class="bi bi-shield-lock me-1"></i>
                        Authentication
                    </h6>
                </li>
                <li class="nav-item mb-1">
                    <a href="{{ url_for('email.users_list') }}" 
                       class="nav-link text-white {{ 'active' if request.endpoint in ['email.users_list', 'email.add_user'] else '' }}">
                        <i class="bi bi-people me-2"></i>
                        Users
                        <span class="badge bg-secondary ms-auto">{{ user_count if user_count is defined else '' }}</span>
                    </a>
                </li>
                <li class="nav-item mb-1">
                    <a href="{{ url_for('email.ips_list') }}" 
                       class="nav-link text-white {{ 'active' if request.endpoint in ['email.ips_list', 'email.add_ip'] else '' }}">
                        <i class="bi bi-router me-2"></i>
                        Whitelisted IPs
                        <span class="badge bg-secondary ms-auto">{{ ip_count if ip_count is defined else '' }}</span>
                    </a>
                </li>
                <!-- DKIM Section -->
                <li class="nav-item mb-2">
                    <h6 class="text-muted text-uppercase small mb-2 mt-3">
                        <i class="bi bi-key me-1"></i>
                        Email Security
                    </h6>
                </li>
                <li class="nav-item mb-1">
                    <a href="{{ url_for('email.dkim_list') }}" 
                       class="nav-link text-white {{ 'active' if request.endpoint == 'email.dkim_list' else '' }}">
                        <i class="bi bi-shield-check me-2"></i>
                        DKIM Keys
                        <span class="badge bg-secondary ms-auto">{{ dkim_count if dkim_count is defined else '' }}</span>
                    </a>
                </li>
                <!-- Configuration Section -->
                <li class="nav-item mb-2">
                    <h6 class="text-muted text-uppercase small mb-2 mt-3">
                        <i class="bi bi-gear me-1"></i>
                        Configuration
                    </h6>
                </li>
                <li class="nav-item mb-1">
                    <a href="{{ url_for('email.settings') }}" 
                       class="nav-link text-white {{ 'active' if request.endpoint == 'email.settings' else '' }}">
                        <i class="bi bi-sliders me-2"></i>
                        Server Settings
                    </a>
                </li>
                <!-- Monitoring Section -->
                <li class="nav-item mb-2">
                    <h6 class="text-muted text-uppercase small mb-2 mt-3">
                        <i class="bi bi-activity me-1"></i>
                        Monitoring
                    </h6>
                </li>
                <li class="nav-item mb-1">
                    <a href="{{ url_for('email.logs') }}" 
                       class="nav-link text-white {{ 'active' if request.endpoint == 'email.logs' else '' }}">
                        <i class="bi bi-journal-text me-2"></i>
                        Logs & Activity
                    </a>
                </li>
            </ul>
        </div>
        <!-- Sidebar footer -->
        <div class="p-3 border-top border-secondary">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <small class="text-muted d-block">Server Status</small>
                    <small class="text-success">
                        <i class="bi bi-circle-fill me-1" style="font-size: 0.5rem;"></i>
                        Online
                    </small>
                </div>
                <button class="btn btn-outline-secondary btn-sm" title="Refresh Status">
                    <i class="bi bi-arrow-clockwise"></i>
                </button>
            </div>
        </div>
    </div>
 </nav>
 <style>
 .sidebar .nav-link {
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
 }
 .sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
 }
 .sidebar .nav-link.active {
    background-color: #0d6efd;
    color: white !important;
 }
 .sidebar .nav-link.active:hover {
    background-color: #0b5ed7;
 }
 .sidebar h6 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem !important;
 }
 .sidebar .badge {
    font-size: 0.7rem;
 }
 /* Responsive design */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .sidebar.show {
        transform: translateX(0);
    }
    .content-area {
        margin-left: 0 !important;
    }
 }
 </style>
--- a/email_frontend/templates/users.html
+++ b/email_frontend/templates/users.html
@@ -0,0 +1,170 @@
 {% extends "base.html" %}
 {% block title %}Users - Email Server Management{% endblock %}
 {% block page_title %}User Management{% endblock %}
 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="bi bi-people me-2"></i>
        Users
    </h2>
    <a href="{{ url_for('email.add_user') }}" class="btn btn-primary">
        <i class="bi bi-person-plus me-2"></i>
        Add User
    </a>
 </div>
 <div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="bi bi-list-ul me-2"></i>
            All Users
        </h5>
    </div>
    <div class="card-body p-0">
        {% if users %}
            <div class="table-responsive">
                <table class="table table-dark table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Email</th>
                            <th>Domain</th>
                            <th>Permissions</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user, domain in users %}
                        <tr>
                            <td>
                                <div class="fw-bold">{{ user.email }}</div>
                            </td>
                            <td>
                                <span class="badge bg-secondary">{{ domain.domain_name }}</span>
                            </td>
                            <td>
                                {% if user.can_send_as_domain %}
                                    <span class="badge bg-warning">
                                        <i class="bi bi-star me-1"></i>
                                        Domain Admin
                                    </span>
                                    <br>
                                    <small class="text-muted">Can send as *@{{ domain.domain_name }}</small>
                                {% else %}
                                    <span class="badge bg-info">
                                        <i class="bi bi-person me-1"></i>
                                        User
                                    </span>
                                    <br>
                                    <small class="text-muted">Can only send as {{ user.email }}</small>
                                {% endif %}
                            </td>
                            <td>
                                {% if user.is_active %}
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle me-1"></i>
                                        Active
                                    </span>
                                {% else %}
                                    <span class="badge bg-danger">
                                        <i class="bi bi-x-circle me-1"></i>
                                        Inactive
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <small class="text-muted">
                                    {{ user.created_at.strftime('%Y-%m-%d %H:%M') }}
                                </small>
                            </td>
                            <td>
                                {% if user.is_active %}
                                    <form method="post" action="{{ url_for('email.delete_user', user_id=user.id) }}" class="d-inline">
                                        <button type="submit" 
                                                class="btn btn-outline-danger btn-sm"
                                                data-confirm="Are you sure you want to deactivate user '{{ user.email }}'?"
                                                title="Deactivate User">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                {% else %}
                                    <span class="text-muted">
                                        <i class="bi bi-dash-circle"></i>
                                    </span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="bi bi-people text-muted" style="font-size: 4rem;"></i>
                <h4 class="text-muted mt-3">No users configured</h4>
                <p class="text-muted">Add users to enable username/password authentication</p>
                <a href="{{ url_for('email.add_user') }}" class="btn btn-primary">
                    <i class="bi bi-person-plus me-2"></i>
                    Add Your First User
                </a>
            </div>
        {% endif %}
    </div>
 </div>
 {% if users %}
 <div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    User Statistics
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="bi bi-check-circle text-success me-2"></i>
                        <strong>Active users:</strong> {{ users|selectattr('0.is_active')|list|length }}
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-star text-warning me-2"></i>
                        <strong>Domain admins:</strong> {{ users|selectattr('0.can_send_as_domain')|list|length }}
                    </li>
                    <li>
                        <i class="bi bi-person text-info me-2"></i>
                        <strong>Regular users:</strong> {{ users|rejectattr('0.can_send_as_domain')|list|length }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-lightbulb me-2"></i>
                    Permission Levels
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <span class="badge bg-warning me-2">Domain Admin</span>
                        Can send as any email address in their domain
                    </li>
                    <li>
                        <span class="badge bg-info me-2">Regular User</span>
                        Can only send as their own email address
                    </li>
                </ul>
            </div>
        </div>
    </div>
 </div>
 {% endif %}
 {% endblock %}
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,12 +1,25 @@
-# SMTP MTA server
+# SMTP Server with Web Management Frontend
-# then you can allow run ports < 1024 with 
+# Unified requirements for both SMTP server and Flask web interface
-# create env with `python -m venv .venv --copies` (This will copy the Python binary)
+#
-# for f in /opt/PyMTA-server/.venv/bin/python*; do sudo setcap 'cap_net_bind_service=+ep' "$f"; done
+# For port binding < 1024, create env with `python -m venv .venv --copies` (This will copy the Python binary)
 # Then run: for f in /path/to/.venv/bin/python*; do sudo setcap 'cap_net_bind_service=+ep' "$f"; done
 # Core SMTP Server Dependencies
 aiosmtpd
 sqlalchemy
 pyOpenSSL
 bcrypt
 dnspython
 dkimpy
-cryptography
+cryptography
 # Web Frontend Dependencies
 Flask
 Flask-SQLAlchemy
 Jinja2
 Werkzeug
 requests
 waitress
 # Additional utilities
 alembic