 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/soundstudiopro.com/private_html/ |
<?php
session_start();
// Check if user is logged in and is admin
if (!isset($_SESSION['user_id']) || !isset($_SESSION['is_admin']) || !$_SESSION['is_admin']) {
header('Location: /auth/login.php');
exit();
}
// Redirect to the integrated admin panel with API management
$api_tab = $_GET['tab'] ?? 'social';
header('Location: /admin.php?tab=api&api_tab=' . $api_tab);
exit();
// Sample API configurations (in real app, these would come from database)
$api_configs = [
'social' => [
'google' => [
'name' => 'Google',
'status' => 'active',
'api_key' => 'sk-google-api-key-123',
'api_secret' => 'google-secret-456',
'webhook_url' => 'https://soundstudiopro.com/webhooks/google',
'last_tested' => '2024-01-15 14:30:00',
'setup_instructions' => 'Configure OAuth 2.0 credentials in Google Cloud Console'
],
'facebook' => [
'name' => 'Facebook',
'status' => 'inactive',
'api_key' => 'fb-app-id-789',
'api_secret' => 'fb-app-secret-012',
'webhook_url' => 'https://soundstudiopro.com/webhooks/facebook',
'last_tested' => '2024-01-10 09:15:00',
'setup_instructions' => 'Create Facebook App and configure login settings'
],
'twitter' => [
'name' => 'Twitter',
'status' => 'active',
'api_key' => 'twitter-api-key-345',
'api_secret' => 'twitter-secret-678',
'webhook_url' => 'https://soundstudiopro.com/webhooks/twitter',
'last_tested' => '2024-01-12 16:45:00',
'setup_instructions' => 'Set up Twitter API v2 credentials and OAuth 2.0'
],
'apple' => [
'name' => 'Apple',
'status' => 'inactive',
'api_key' => 'apple-key-id-901',
'api_secret' => 'apple-private-key-234',
'webhook_url' => 'https://soundstudiopro.com/webhooks/apple',
'last_tested' => '2024-01-08 11:20:00',
'setup_instructions' => 'Configure Sign in with Apple in Apple Developer Console'
],
'discord' => [
'name' => 'Discord',
'status' => 'active',
'api_key' => 'discord-client-id-567',
'api_secret' => 'discord-client-secret-890',
'webhook_url' => 'https://soundstudiopro.com/webhooks/discord',
'last_tested' => '2024-01-14 13:10:00',
'setup_instructions' => 'Create Discord application and configure OAuth2 scopes'
],
'github' => [
'name' => 'GitHub',
'status' => 'inactive',
'api_key' => 'github-client-id-123',
'api_secret' => 'github-client-secret-456',
'webhook_url' => 'https://soundstudiopro.com/webhooks/github',
'last_tested' => '2024-01-06 10:30:00',
'setup_instructions' => 'Register OAuth App in GitHub Developer Settings'
]
],
'payment' => [
'stripe' => [
'name' => 'Stripe',
'status' => 'active',
'api_key' => 'sk_test_stripe_key_789',
'api_secret' => 'pk_test_stripe_publishable_012',
'webhook_url' => 'https://soundstudiopro.com/webhooks/stripe',
'last_tested' => '2024-01-15 15:20:00',
'setup_instructions' => 'Configure Stripe account and webhook endpoints'
],
'paypal' => [
'name' => 'PayPal',
'status' => 'active',
'api_key' => 'paypal-client-id-345',
'api_secret' => 'paypal-secret-678',
'webhook_url' => 'https://soundstudiopro.com/webhooks/paypal',
'last_tested' => '2024-01-13 12:45:00',
'setup_instructions' => 'Set up PayPal Business account and webhook notifications'
]
]
];
// Sample API logs
$api_logs = [
['timestamp' => '2024-01-15 15:30:00', 'api' => 'Stripe', 'action' => 'Payment Success', 'status' => 'success', 'details' => 'Payment processed for $29.99'],
['timestamp' => '2024-01-15 15:25:00', 'api' => 'Google', 'action' => 'OAuth Login', 'status' => 'success', 'details' => 'User authenticated successfully'],
['timestamp' => '2024-01-15 15:20:00', 'api' => 'PayPal', 'action' => 'Webhook Received', 'status' => 'success', 'details' => 'Payment confirmation received'],
['timestamp' => '2024-01-15 15:15:00', 'api' => 'Facebook', 'action' => 'API Call', 'status' => 'error', 'details' => 'Invalid access token'],
['timestamp' => '2024-01-15 15:10:00', 'api' => 'Twitter', 'action' => 'Share Content', 'status' => 'success', 'details' => 'Track shared successfully'],
['timestamp' => '2024-01-15 15:05:00', 'api' => 'Stripe', 'action' => 'Refund Processed', 'status' => 'success', 'details' => 'Refund issued for $15.99'],
['timestamp' => '2024-01-15 15:00:00', 'api' => 'Discord', 'action' => 'Bot Command', 'status' => 'success', 'details' => 'Music bot command executed'],
['timestamp' => '2024-01-15 14:55:00', 'api' => 'PayPal', 'action' => 'Subscription Created', 'status' => 'success', 'details' => 'Monthly subscription activated']
];
// Sample webhook configurations
$webhooks = [
'stripe' => [
'url' => 'https://soundstudiopro.com/webhooks/stripe',
'events' => ['payment_intent.succeeded', 'payment_intent.failed', 'customer.subscription.created'],
'status' => 'active',
'last_triggered' => '2024-01-15 15:30:00'
],
'paypal' => [
'url' => 'https://soundstudiopro.com/webhooks/paypal',
'events' => ['PAYMENT.CAPTURE.COMPLETED', 'BILLING.SUBSCRIPTION.CREATED'],
'status' => 'active',
'last_triggered' => '2024-01-15 15:25:00'
],
'google' => [
'url' => 'https://soundstudiopro.com/webhooks/google',
'events' => ['user.login', 'user.logout'],
'status' => 'active',
'last_triggered' => '2024-01-15 15:20:00'
],
'facebook' => [
'url' => 'https://soundstudiopro.com/webhooks/facebook',
'events' => ['user.login', 'user.logout'],
'status' => 'inactive',
'last_triggered' => '2024-01-15 10:15:00'
]
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Management - Admin Panel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
line-height: 1.6;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header h1 {
font-size: 3rem;
font-weight: 700;
background: linear-gradient(135deg, #fff, #e2e8f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.back-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 1rem 2rem;
border-radius: 12px;
text-decoration: none;
font-size: 1.4rem;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.8rem;
}
.back-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* Tab Navigation */
.tab-nav {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 1rem;
}
.tab-btn {
background: none;
border: none;
color: #a0aec0;
padding: 1rem 2rem;
font-size: 1.6rem;
font-weight: 600;
cursor: pointer;
border-radius: 12px 12px 0 0;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.8rem;
}
.tab-btn.active {
background: rgba(255, 255, 255, 0.1);
color: white;
border-bottom: 3px solid #667eea;
}
.tab-btn:hover:not(.active) {
background: rgba(255, 255, 255, 0.05);
color: white;
}
/* Tab Content */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* API Configuration Cards */
.api-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.api-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
}
.api-card:hover {
border-color: rgba(102, 126, 234, 0.3);
transform: translateY(-2px);
}
.api-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.api-name {
font-size: 2rem;
font-weight: 700;
color: white;
}
.api-status {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 600;
}
.api-status.active {
background: rgba(72, 187, 120, 0.2);
color: #48bb78;
border: 1px solid rgba(72, 187, 120, 0.3);
}
.api-status.inactive {
background: rgba(245, 101, 101, 0.2);
color: #f56565;
border: 1px solid rgba(245, 101, 101, 0.3);
}
.api-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-size: 1.4rem;
font-weight: 600;
color: #a0aec0;
}
.form-group input {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 1rem;
color: white;
font-size: 1.4rem;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
}
.form-group input[readonly] {
background: rgba(255, 255, 255, 0.02);
color: #a0aec0;
}
.api-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.btn {
padding: 1rem 2rem;
border: none;
border-radius: 8px;
font-size: 1.4rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.8rem;
text-decoration: none;
}
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
}
.btn-success {
background: linear-gradient(135deg, #48bb78, #38a169);
color: white;
}
.btn-danger {
background: linear-gradient(135deg, #f56565, #e53e3e);
color: white;
}
.btn-warning {
background: linear-gradient(135deg, #ed8936, #dd6b20);
color: white;
}
.api-info {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.info-item {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.info-item:last-child {
margin-bottom: 0;
}
.info-label {
color: #a0aec0;
font-weight: 600;
}
.info-value {
color: white;
font-weight: 500;
}
.setup-instructions {
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 8px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.setup-instructions h4 {
color: #667eea;
font-size: 1.4rem;
margin-bottom: 1rem;
}
.setup-instructions p {
color: #a0aec0;
font-size: 1.3rem;
line-height: 1.6;
}
/* Webhooks Section */
.webhooks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.webhook-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
}
.webhook-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.webhook-provider {
font-size: 1.8rem;
font-weight: 700;
color: white;
}
.webhook-status {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 600;
}
.webhook-url {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 1rem;
color: #a0aec0;
font-size: 1.3rem;
font-family: 'Courier New', monospace;
word-break: break-all;
margin-bottom: 1.5rem;
}
.webhook-events {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.event-tag {
background: rgba(102, 126, 234, 0.2);
color: #667eea;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 600;
}
/* API Logs */
.logs-container {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
}
.logs-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.logs-title {
font-size: 2rem;
font-weight: 700;
color: white;
}
.logs-filters {
display: flex;
gap: 1rem;
align-items: center;
}
.filter-select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.8rem;
color: white;
font-size: 1.3rem;
}
.logs-table {
width: 100%;
border-collapse: collapse;
}
.logs-table th,
.logs-table td {
padding: 1.2rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logs-table th {
background: rgba(255, 255, 255, 0.05);
font-size: 1.4rem;
font-weight: 600;
color: #a0aec0;
}
.logs-table td {
font-size: 1.3rem;
color: white;
}
.log-status {
padding: 0.3rem 0.8rem;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 600;
}
.log-status.success {
background: rgba(72, 187, 120, 0.2);
color: #48bb78;
}
.log-status.error {
background: rgba(245, 101, 101, 0.2);
color: #f56565;
}
.log-status.warning {
background: rgba(237, 137, 54, 0.2);
color: #ed8936;
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.header h1 {
font-size: 2.4rem;
}
.tab-nav {
flex-wrap: wrap;
}
.tab-btn {
font-size: 1.4rem;
padding: 0.8rem 1.5rem;
}
.api-grid {
grid-template-columns: 1fr;
}
.api-actions {
flex-direction: column;
}
.logs-filters {
flex-direction: column;
align-items: stretch;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1><i class="fas fa-cogs"></i> API Management</h1>
<a href="admin.php" class="back-btn">
<i class="fas fa-arrow-left"></i>
Back to Admin Panel
</a>
</div>
<!-- Tab Navigation -->
<div class="tab-nav">
<button class="tab-btn <?= $current_tab === 'social' ? 'active' : '' ?>" onclick="switchTab('social')">
<i class="fas fa-share-alt"></i>
Social Media
</button>
<button class="tab-btn <?= $current_tab === 'payment' ? 'active' : '' ?>" onclick="switchTab('payment')">
<i class="fas fa-credit-card"></i>
Payment Processors
</button>
<button class="tab-btn <?= $current_tab === 'webhooks' ? 'active' : '' ?>" onclick="switchTab('webhooks')">
<i class="fas fa-link"></i>
Webhooks
</button>
<button class="tab-btn <?= $current_tab === 'logs' ? 'active' : '' ?>" onclick="switchTab('logs')">
<i class="fas fa-list-alt"></i>
API Logs
</button>
</div>
<!-- Social Media APIs Tab -->
<div id="social" class="tab-content <?= $current_tab === 'social' ? 'active' : '' ?>">
<div class="api-grid">
<?php foreach ($api_configs['social'] as $provider => $config): ?>
<div class="api-card">
<div class="api-header">
<div class="api-name"><?= $config['name'] ?></div>
<div class="api-status <?= $config['status'] ?>"><?= ucfirst($config['status']) ?></div>
</div>
<form class="api-form" onsubmit="saveApiConfig('<?= $provider ?>', 'social')">
<div class="form-group">
<label>API Key</label>
<input type="text" name="api_key" value="<?= $config['api_key'] ?>" placeholder="Enter API Key">
</div>
<div class="form-group">
<label>API Secret</label>
<input type="password" name="api_secret" value="<?= $config['api_secret'] ?>" placeholder="Enter API Secret">
</div>
<div class="api-actions">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i>
Save
</button>
<button type="button" class="btn btn-secondary" onclick="testApi('<?= $provider ?>')">
<i class="fas fa-vial"></i>
Test
</button>
<button type="button" class="btn <?= $config['status'] === 'active' ? 'btn-danger' : 'btn-success' ?>" onclick="toggleApi('<?= $provider ?>', '<?= $config['status'] ?>')">
<i class="fas="<?= $config['status'] === 'active' ? 'fa-pause' : 'fa-play' ?>"></i>
<?= $config['status'] === 'active' ? 'Disable' : 'Enable' ?>
</button>
</div>
</form>
<div class="api-info">
<div class="info-item">
<span class="info-label">Webhook URL:</span>
<span class="info-value"><?= $config['webhook_url'] ?></span>
</div>
<div class="info-item">
<span class="info-label">Last Tested:</span>
<span class="info-value"><?= $config['last_tested'] ?></span>
</div>
</div>
<div class="setup-instructions">
<h4><i class="fas fa-info-circle"></i> Setup Instructions</h4>
<p><?= $config['setup_instructions'] ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Payment Processors Tab -->
<div id="payment" class="tab-content <?= $current_tab === 'payment' ? 'active' : '' ?>">
<div class="api-grid">
<?php foreach ($api_configs['payment'] as $provider => $config): ?>
<div class="api-card">
<div class="api-header">
<div class="api-name"><?= $config['name'] ?></div>
<div class="api-status <?= $config['status'] ?>"><?= ucfirst($config['status']) ?></div>
</div>
<form class="api-form" onsubmit="saveApiConfig('<?= $provider ?>', 'payment')">
<div class="form-group">
<label>API Key</label>
<input type="text" name="api_key" value="<?= $config['api_key'] ?>" placeholder="Enter API Key">
</div>
<div class="form-group">
<label>API Secret</label>
<input type="password" name="api_secret" value="<?= $config['api_secret'] ?>" placeholder="Enter API Secret">
</div>
<div class="api-actions">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i>
Save
</button>
<button type="button" class="btn btn-secondary" onclick="testApi('<?= $provider ?>')">
<i class="fas fa-vial"></i>
Test
</button>
<button type="button" class="btn <?= $config['status'] === 'active' ? 'btn-danger' : 'btn-success' ?>" onclick="toggleApi('<?= $provider ?>', '<?= $config['status'] ?>')">
<i class="fas="<?= $config['status'] === 'active' ? 'fa-pause' : 'fa-play' ?>"></i>
<?= $config['status'] === 'active' ? 'Disable' : 'Enable' ?>
</button>
</div>
</form>
<div class="api-info">
<div class="info-item">
<span class="info-label">Webhook URL:</span>
<span class="info-value"><?= $config['webhook_url'] ?></span>
</div>
<div class="info-item">
<span class="info-label">Last Tested:</span>
<span class="info-value"><?= $config['last_tested'] ?></span>
</div>
</div>
<div class="setup-instructions">
<h4><i class="fas fa-info-circle"></i> Setup Instructions</h4>
<p><?= $config['setup_instructions'] ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Webhooks Tab -->
<div id="webhooks" class="tab-content <?= $current_tab === 'webhooks' ? 'active' : '' ?>">
<div class="webhooks-grid">
<?php foreach ($webhooks as $provider => $webhook): ?>
<div class="webhook-card">
<div class="webhook-header">
<div class="webhook-provider"><?= ucfirst($provider) ?></div>
<div class="webhook-status <?= $webhook['status'] ?>"><?= ucfirst($webhook['status']) ?></div>
</div>
<div class="webhook-url"><?= $webhook['url'] ?></div>
<div class="webhook-events">
<?php foreach ($webhook['events'] as $event): ?>
<span class="event-tag"><?= $event ?></span>
<?php endforeach; ?>
</div>
<div class="api-info">
<div class="info-item">
<span class="info-label">Last Triggered:</span>
<span class="info-value"><?= $webhook['last_triggered'] ?></span>
</div>
</div>
<div class="api-actions">
<button class="btn btn-secondary" onclick="testWebhook('<?= $provider ?>')">
<i class="fas fa-vial"></i>
Test Webhook
</button>
<button class="btn btn-warning" onclick="regenerateWebhook('<?= $provider ?>')">
<i class="fas fa-sync"></i>
Regenerate URL
</button>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- API Logs Tab -->
<div id="logs" class="tab-content <?= $current_tab === 'logs' ? 'active' : '' ?>">
<div class="logs-container">
<div class="logs-header">
<div class="logs-title">API Activity Logs</div>
<div class="logs-filters">
<select class="filter-select" onchange="filterLogs()">
<option value="">All APIs</option>
<option value="stripe">Stripe</option>
<option value="paypal">PayPal</option>
<option value="google">Google</option>
<option value="facebook">Facebook</option>
</select>
<select class="filter-select" onchange="filterLogs()">
<option value="">All Status</option>
<option value="success">Success</option>
<option value="error">Error</option>
<option value="warning">Warning</option>
</select>
<button class="btn btn-primary" onclick="exportLogs()">
<i class="fas fa-download"></i>
Export Logs
</button>
</div>
</div>
<table class="logs-table">
<thead>
<tr>
<th>Timestamp</th>
<th>API</th>
<th>Action</th>
<th>Status</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<?php foreach ($api_logs as $log): ?>
<tr>
<td><?= $log['timestamp'] ?></td>
<td><?= $log['api'] ?></td>
<td><?= $log['action'] ?></td>
<td><span class="log-status <?= $log['status'] ?>"><?= ucfirst($log['status']) ?></span></td>
<td><?= $log['details'] ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<script>
function switchTab(tabName) {
// Hide all tab contents
const tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(content => content.classList.remove('active'));
// Remove active class from all tab buttons
const tabButtons = document.querySelectorAll('.tab-btn');
tabButtons.forEach(btn => btn.classList.remove('active'));
// Show selected tab content
document.getElementById(tabName).classList.add('active');
// Add active class to clicked button
event.target.classList.add('active');
// Update URL without page reload
const url = new URL(window.location);
url.searchParams.set('tab', tabName);
window.history.pushState({}, '', url);
}
function saveApiConfig(provider, type) {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
// Show loading state
const saveBtn = form.querySelector('.btn-primary');
const originalText = saveBtn.innerHTML;
saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
saveBtn.disabled = true;
// Simulate API call
setTimeout(() => {
saveBtn.innerHTML = originalText;
saveBtn.disabled = false;
showNotification(`${provider} configuration saved successfully!`, 'success');
}, 1500);
}
function testApi(provider) {
const testBtn = event.target;
const originalText = testBtn.innerHTML;
testBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...';
testBtn.disabled = true;
// Simulate API test
setTimeout(() => {
testBtn.innerHTML = originalText;
testBtn.disabled = false;
showNotification(`${provider} API test completed successfully!`, 'success');
}, 2000);
}
function toggleApi(provider, currentStatus) {
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
const toggleBtn = event.target;
const originalText = toggleBtn.innerHTML;
toggleBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
toggleBtn.disabled = true;
// Simulate API toggle
setTimeout(() => {
toggleBtn.innerHTML = originalText;
toggleBtn.disabled = false;
// Update button appearance
if (newStatus === 'active') {
toggleBtn.className = 'btn btn-danger';
toggleBtn.innerHTML = '<i class="fas fa-pause"></i> Disable';
} else {
toggleBtn.className = 'btn btn-success';
toggleBtn.innerHTML = '<i class="fas fa-play"></i> Enable';
}
// Update status indicator
const statusElement = toggleBtn.closest('.api-card').querySelector('.api-status');
statusElement.textContent = newStatus.charAt(0).toUpperCase() + newStatus.slice(1);
statusElement.className = `api-status ${newStatus}`;
showNotification(`${provider} API ${newStatus} successfully!`, 'success');
}, 1500);
}
function testWebhook(provider) {
const testBtn = event.target;
const originalText = testBtn.innerHTML;
testBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...';
testBtn.disabled = true;
// Simulate webhook test
setTimeout(() => {
testBtn.innerHTML = originalText;
testBtn.disabled = false;
showNotification(`${provider} webhook test completed successfully!`, 'success');
}, 2000);
}
function regenerateWebhook(provider) {
const regenerateBtn = event.target;
const originalText = regenerateBtn.innerHTML;
regenerateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Regenerating...';
regenerateBtn.disabled = true;
// Simulate webhook regeneration
setTimeout(() => {
regenerateBtn.innerHTML = originalText;
regenerateBtn.disabled = false;
showNotification(`${provider} webhook URL regenerated successfully!`, 'success');
}, 1500);
}
function filterLogs() {
// Simulate log filtering
showNotification('Logs filtered successfully!', 'info');
}
function exportLogs() {
// Create download link for logs
const data = {
timestamp: new Date().toISOString(),
logs: 'api_logs_data_here'
};
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `api_logs_${new Date().toISOString().split('T')[0]}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showNotification('API logs exported successfully!', 'success');
}
function showNotification(message, type) {
// Create notification element
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: ${type === 'success' ? '#48bb78' : type === 'error' ? '#f56565' : '#667eea'};
color: white;
padding: 1rem 2rem;
border-radius: 8px;
font-size: 1.4rem;
font-weight: 600;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateX(100%);
transition: transform 0.3s ease;
`;
notification.textContent = message;
document.body.appendChild(notification);
// Animate in
setTimeout(() => {
notification.style.transform = 'translateX(0)';
}, 100);
// Remove after 3 seconds
setTimeout(() => {
notification.style.transform = 'translateX(100%)';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
// Initialize tab based on URL parameter
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
const tab = urlParams.get('tab');
if (tab) {
switchTab(tab);
}
});
</script>
</body>
</html>