Remove database credentials from customer model and interface

app/auth.py

@@ -100,7 +100,7 @@ async def create_customer(
     """Create a new customer"""
     try:
         # Validate required fields
-        required_fields = ["name", "company_name", "email", "db_host", "db_port", "db_user", "db_password", "db_name"]
+        required_fields = ["name", "company_name", "email"]
         missing_fields = [field for field in required_fields if field not in customer_data]
         if missing_fields:
             raise HTTPException(
@@ -121,29 +121,9 @@ async def create_customer(
             name=customer_data["name"],
             company_name=customer_data["company_name"],
             email=customer_data["email"],
-            api_key=str(secrets.token_urlsafe(32)),
-            db_host=customer_data["db_host"],
-            db_port=customer_data["db_port"],
-            db_user=customer_data["db_user"],
-            db_password=customer_data["db_password"],
-            db_name=customer_data["db_name"]
+            api_key=str(secrets.token_urlsafe(32))
         )
         
-        # Test database connection
-        engine = customer.get_db_engine()
-        if not engine:
-            raise HTTPException(
-                status_code=status.HTTP_400_BAD_REQUEST,
-                detail="Invalid database credentials or connection failed"
-            )
-        
-        # Create tables in customer's database
-        if not customer.create_tables():
-            raise HTTPException(
-                status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-                detail="Failed to create database tables"
-            )
-        
         db.add(customer)
         db.commit()
         db.refresh(customer)

app/models.py

@@ -33,6 +33,10 @@ class Customer(Base):
     # Relationship with call records
     call_records = relationship("CallRecord", back_populates="customer", cascade="all, delete-orphan")
 
+    def get_db_url(self) -> str:
+        """Get the database URL for this customer"""
+        return f"mysql+pymysql://{self.db_user}:{self.db_password}@{self.db_host}:{self.db_port}/{self.db_name}"
+
     def get_db_engine(self):
         """Create SQLAlchemy engine for customer's database"""
         try:
@@ -104,12 +108,6 @@ class Customer(Base):
         finally:
             session.close()
 
-    def get_db_url(self) -> Optional[str]:
-        """Get database URL if credentials are configured"""
-        if all([self.db_host, self.db_port, self.db_name, self.db_user, self.db_password]):
-            return f"mysql+pymysql://{self.db_user}:{self.db_password}@{self.db_host}:{self.db_port}/{self.db_name}"
-        return None
-
     def get_db_engine(self):
         """Get SQLAlchemy engine for customer's database"""
         db_url = self.get_db_url()

app/static/admin.html

@@ -5,31 +5,230 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>vBot Admin Interface</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
-        .container { max-width: 800px; margin-top: 2rem; }
-        .customer-list { margin-top: 2rem; }
-        .token-section { margin-bottom: 2rem; }
-        .hidden { display: none; }
+        :root {
+            --primary-color: #2c3e50;
+            --secondary-color: #3498db;
+            --accent-color: #e74c3c;
+            --background-color: #f8f9fa;
+            --card-background: #ffffff;
+        }
+
+        body {
+            background-color: var(--background-color);
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin-top: 2rem;
+            padding: 0 1rem;
+        }
+
+        .page-header {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 2rem 0;
+            margin-bottom: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .page-header h1 {
+            margin: 0;
+            font-size: 2.5rem;
+            font-weight: 600;
+        }
+
+        .card {
+            border: none;
+            border-radius: 15px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+            background: var(--card-background);
+            transition: transform 0.3s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+        }
+
+        .card-header {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border-radius: 15px 15px 0 0 !important;
+            padding: 1.5rem;
+        }
+
+        .card-header h5 {
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .card-body {
+            padding: 2rem;
+        }
+
+        .form-control {
+            border-radius: 8px;
+            border: 1px solid #dee2e6;
+            padding: 0.75rem;
+            transition: all 0.3s ease;
+        }
+
+        .form-control:focus {
+            border-color: var(--secondary-color);
+            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
+        }
+
+        .btn {
+            border-radius: 8px;
+            padding: 0.75rem 1.5rem;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary {
+            background: var(--secondary-color);
+            border: none;
+        }
+
+        .btn-primary:hover {
+            background: #2980b9;
+            transform: translateY(-2px);
+        }
+
+        .btn-success {
+            background: #2ecc71;
+            border: none;
+        }
+
+        .btn-success:hover {
+            background: #27ae60;
+            transform: translateY(-2px);
+        }
+
+        .table {
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        .table thead th {
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 1rem;
+        }
+
+        .table tbody td {
+            padding: 1rem;
+            vertical-align: middle;
+        }
+
+        .badge {
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-weight: 500;
+        }
+
+        .alert {
+            border-radius: 10px;
+            border: none;
+            padding: 1rem;
+        }
+
+        .token-section {
+            max-width: 500px;
+            margin: 0 auto;
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .form-label {
+            font-weight: 500;
+            color: var(--primary-color);
+        }
+
+        .customer-list {
+            margin-top: 2rem;
+        }
+
+        .api-key {
+            background: #f8f9fa;
+            padding: 0.5rem;
+            border-radius: 5px;
+            font-family: monospace;
+            font-size: 0.9rem;
+        }
+
+        .status-badge {
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-weight: 500;
+        }
+
+        .status-active {
+            background: #2ecc71;
+            color: white;
+        }
+
+        .status-inactive {
+            background: #e74c3c;
+            color: white;
+        }
+
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 2rem;
+        }
+
+        .loading i {
+            font-size: 2rem;
+            color: var(--secondary-color);
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1 class="mb-4">vBot Admin Interface</h1>
+        <div class="page-header text-center">
+            <h1><i class="fas fa-robot me-2"></i>vBot Admin Interface</h1>
+        </div>
         
         <!-- Login Section -->
         <div class="card token-section" id="loginSection">
+            <div class="card-header">
+                <h5><i class="fas fa-lock me-2"></i>Admin Login</h5>
+            </div>
             <div class="card-body">
-                <h5 class="card-title">Admin Login</h5>
                 <form id="loginForm">
                     <div class="mb-3">
                         <label for="username" class="form-label">Username</label>
-                        <input type="text" class="form-control" id="username" required>
+                        <div class="input-group">
+                            <span class="input-group-text"><i class="fas fa-user"></i></span>
+                            <input type="text" class="form-control" id="username" required>
+                        </div>
                     </div>
                     <div class="mb-3">
                         <label for="password" class="form-label">Password</label>
-                        <input type="password" class="form-control" id="password" required>
+                        <div class="input-group">
+                            <span class="input-group-text"><i class="fas fa-key"></i></span>
+                            <input type="password" class="form-control" id="password" required>
+                        </div>
                     </div>
-                    <button type="submit" class="btn btn-primary">Login</button>
+                    <button type="submit" class="btn btn-primary w-100">
+                        <i class="fas fa-sign-in-alt me-2"></i>Login
+                    </button>
                 </form>
                 <div id="tokenStatus" class="mt-3"></div>
             </div>
@@ -39,42 +238,37 @@
         <div id="mainContent" class="hidden">
             <!-- Add Customer Section -->
             <div class="card">
+                <div class="card-header">
+                    <h5><i class="fas fa-user-plus me-2"></i>Add New Customer</h5>
+                </div>
                 <div class="card-body">
-                    <h5 class="card-title">Add New Customer</h5>
                     <form id="customerForm">
-                        <div class="mb-3">
-                            <label for="name" class="form-label">Name</label>
-                            <input type="text" class="form-control" id="name" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="company_name" class="form-label">Company Name</label>
-                            <input type="text" class="form-control" id="company_name" required>
+                        <div class="row">
+                            <div class="col-md-6 mb-3">
+                                <label for="name" class="form-label">Name</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
+                                    <input type="text" class="form-control" id="name" required>
+                                </div>
+                            </div>
+                            <div class="col-md-6 mb-3">
+                                <label for="company_name" class="form-label">Company Name</label>
+                                <div class="input-group">
+                                    <span class="input-group-text"><i class="fas fa-building"></i></span>
+                                    <input type="text" class="form-control" id="company_name" required>
+                                </div>
+                            </div>
                         </div>
                         <div class="mb-3">
                             <label for="email" class="form-label">Email</label>
-                            <input type="email" class="form-control" id="email" required>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="fas fa-envelope"></i></span>
+                                <input type="email" class="form-control" id="email" required>
+                            </div>
                         </div>
-                        <div class="mb-3">
-                            <label for="db_host" class="form-label">Database Host</label>
-                            <input type="text" class="form-control" id="db_host" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="db_port" class="form-label">Database Port</label>
-                            <input type="number" class="form-control" id="db_port" value="3306" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="db_user" class="form-label">Database Username</label>
-                            <input type="text" class="form-control" id="db_user" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="db_password" class="form-label">Database Password</label>
-                            <input type="password" class="form-control" id="db_password" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="db_name" class="form-label">Database Name</label>
-                            <input type="text" class="form-control" id="db_name" required>
-                        </div>
-                        <button type="submit" class="btn btn-success">Add Customer</button>
+                        <button type="submit" class="btn btn-success w-100">
+                            <i class="fas fa-plus-circle me-2"></i>Add Customer
+                        </button>
                     </form>
                     <div id="customerStatus" class="mt-3"></div>
                 </div>
@@ -82,8 +276,13 @@
 
             <!-- Customer List Section -->
             <div class="card customer-list">
+                <div class="card-header">
+                    <h5><i class="fas fa-users me-2"></i>Customer List</h5>
+                </div>
                 <div class="card-body">
-                    <h5 class="card-title">Customer List</h5>
+                    <div class="loading">
+                        <i class="fas fa-spinner"></i>
+                    </div>
                     <div id="customerList" class="table-responsive">
                         <table class="table">
                             <thead>
@@ -125,18 +324,18 @@
                     const data = await response.json();
                     accessToken = data.access_token;
                     document.getElementById('tokenStatus').innerHTML = 
-                        '<div class="alert alert-success">Login successful!</div>';
+                        '<div class="alert alert-success"><i class="fas fa-check-circle me-2"></i>Login successful!</div>';
                     // Show main content and hide login section
                     document.getElementById('loginSection').classList.add('hidden');
                     document.getElementById('mainContent').classList.remove('hidden');
                     loadCustomers();
                 } else {
                     document.getElementById('tokenStatus').innerHTML = 
-                        '<div class="alert alert-danger">Login failed. Please check your credentials.</div>';
+                        '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>Login failed. Please check your credentials.</div>';
                 }
             } catch (error) {
                 document.getElementById('tokenStatus').innerHTML = 
-                    '<div class="alert alert-danger">Error connecting to server.</div>';
+                    '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>Error connecting to server.</div>';
             }
         });
 
@@ -145,19 +344,14 @@
             e.preventDefault();
             if (!accessToken) {
                 document.getElementById('customerStatus').innerHTML = 
-                    '<div class="alert alert-danger">Please login first.</div>';
+                    '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>Please login first.</div>';
                 return;
             }
 
             const customerData = {
                 name: document.getElementById('name').value,
                 company_name: document.getElementById('company_name').value,
-                email: document.getElementById('email').value,
-                db_host: document.getElementById('db_host').value,
-                db_port: parseInt(document.getElementById('db_port').value),
-                db_user: document.getElementById('db_user').value,
-                db_password: document.getElementById('db_password').value,
-                db_name: document.getElementById('db_name').value
+                email: document.getElementById('email').value
             };
 
             try {
@@ -176,17 +370,17 @@
 
                 if (response.ok) {
                     document.getElementById('customerStatus').innerHTML = 
-                        '<div class="alert alert-success">Customer added successfully!</div>';
+                        '<div class="alert alert-success"><i class="fas fa-check-circle me-2"></i>Customer added successfully!</div>';
                     document.getElementById('customerForm').reset();
                     loadCustomers();
                 } else {
                     document.getElementById('customerStatus').innerHTML = 
-                        `<div class="alert alert-danger">Error: ${data.detail || 'Unknown error occurred'}</div>`;
+                        `<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>Error: ${data.detail || 'Unknown error occurred'}</div>`;
                 }
             } catch (error) {
                 console.error('Error creating customer:', error);
                 document.getElementById('customerStatus').innerHTML = 
-                    `<div class="alert alert-danger">Error connecting to server: ${error.message}</div>`;
+                    `<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>Error connecting to server: ${error.message}</div>`;
             }
         });
 
@@ -194,6 +388,9 @@
         async function loadCustomers() {
             if (!accessToken) return;
 
+            const loading = document.querySelector('.loading');
+            loading.style.display = 'block';
+
             try {
                 const response = await fetch('/api/v1/customers', {
                     headers: {
@@ -221,8 +418,12 @@
                             <td>${customer.name}</td>
                             <td>${customer.company_name}</td>
                             <td>${customer.email}</td>
-                            <td><code>${customer.api_key}</code></td>
-                            <td>${customer.is_active ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-danger">Inactive</span>'}</td>
+                            <td><code class="api-key">${customer.api_key}</code></td>
+                            <td>
+                                <span class="status-badge ${customer.is_active ? 'status-active' : 'status-inactive'}">
+                                    ${customer.is_active ? '<i class="fas fa-check-circle me-1"></i>Active' : '<i class="fas fa-times-circle me-1"></i>Inactive'}
+                                </span>
+                            </td>
                         `;
                         tbody.appendChild(tr);
                     });
@@ -231,6 +432,7 @@
                     console.error('Error loading customers:', error);
                     document.getElementById('customerList').innerHTML = `
                         <div class="alert alert-danger">
+                            <i class="fas fa-exclamation-circle me-2"></i>
                             Error loading customers: ${error.detail || 'Unknown error'}
                         </div>
                     `;
@@ -239,9 +441,12 @@
                 console.error('Error loading customers:', error);
                 document.getElementById('customerList').innerHTML = `
                     <div class="alert alert-danger">
+                        <i class="fas fa-exclamation-circle me-2"></i>
                         Error connecting to server
                     </div>
                 `;
+            } finally {
+                loading.style.display = 'none';
             }
         }
     </script>