mirror of
https://github.com/house-of-vanity/OutFleet.git
synced 2025-08-21 14:37:16 +00:00
Added outline server managment page template
This commit is contained in:
Ultradesu
482
vpn/admin.py
482
vpn/admin.py
@@ -247,10 +247,10 @@ class LastAccessFilter(admin.SimpleListFilter):
|
||||
class ServerAdmin(PolymorphicParentModelAdmin):
|
||||
base_model = Server
|
||||
child_models = (OutlineServer, WireguardServer)
|
||||
list_display = ('name', 'server_type', 'comment', 'registration_date', 'user_count', 'server_status_inline')
|
||||
list_display = ('name_with_icon', 'server_type', 'comment_short', 'user_stats', 'activity_summary', 'server_status_compact', 'registration_date')
|
||||
search_fields = ('name', 'comment')
|
||||
list_filter = ('server_type', )
|
||||
actions = ['move_clients_action', 'purge_all_keys_action']
|
||||
actions = ['move_clients_action', 'purge_all_keys_action', 'sync_all_selected_servers']
|
||||
|
||||
def get_urls(self):
|
||||
urls = super().get_urls()
|
||||
@@ -549,24 +549,213 @@ class ServerAdmin(PolymorphicParentModelAdmin):
|
||||
)
|
||||
|
||||
purge_all_keys_action.short_description = "🗑️ Purge all keys from server (database unchanged)"
|
||||
|
||||
def sync_all_selected_servers(self, request, queryset):
|
||||
"""Trigger sync for all users on selected servers"""
|
||||
if queryset.count() == 0:
|
||||
self.message_user(request, "Please select at least one server.", level=messages.ERROR)
|
||||
return
|
||||
|
||||
try:
|
||||
from vpn.tasks import sync_all_users_on_server
|
||||
|
||||
tasks_started = 0
|
||||
errors = []
|
||||
|
||||
for server in queryset:
|
||||
try:
|
||||
task = sync_all_users_on_server.delay(server.id)
|
||||
tasks_started += 1
|
||||
self.message_user(
|
||||
request,
|
||||
f"🔄 Sync task started for '{server.name}' (Task ID: {task.id})",
|
||||
level=messages.SUCCESS
|
||||
)
|
||||
except Exception as e:
|
||||
errors.append(f"'{server.name}': {e}")
|
||||
|
||||
if tasks_started > 0:
|
||||
self.message_user(
|
||||
request,
|
||||
f"✅ Started sync tasks for {tasks_started} server(s). Check Task Execution Logs for progress.",
|
||||
level=messages.SUCCESS
|
||||
)
|
||||
|
||||
if errors:
|
||||
for error in errors:
|
||||
self.message_user(
|
||||
request,
|
||||
f"❌ Failed to sync {error}",
|
||||
level=messages.ERROR
|
||||
)
|
||||
|
||||
except Exception as e:
|
||||
self.message_user(
|
||||
request,
|
||||
f"❌ Failed to start sync tasks: {e}",
|
||||
level=messages.ERROR
|
||||
)
|
||||
|
||||
sync_all_selected_servers.short_description = "🔄 Sync all users on selected servers"
|
||||
|
||||
@admin.display(description='User Count', ordering='user_count')
|
||||
def user_count(self, obj):
|
||||
return obj.user_count
|
||||
|
||||
@admin.display(description='Server', ordering='name')
|
||||
def name_with_icon(self, obj):
|
||||
"""Display server name with type icon"""
|
||||
icons = {
|
||||
'outline': '🔵',
|
||||
'wireguard': '🟢',
|
||||
}
|
||||
icon = icons.get(obj.server_type, '')
|
||||
name_part = f"{icon} {obj.name}" if icon else obj.name
|
||||
return name_part
|
||||
|
||||
@admin.display(description='Comment')
|
||||
def comment_short(self, obj):
|
||||
"""Display shortened comment"""
|
||||
if obj.comment:
|
||||
short_comment = obj.comment[:40] + '...' if len(obj.comment) > 40 else obj.comment
|
||||
return mark_safe(f'<span title="{obj.comment}" style="font-size: 12px;">{short_comment}</span>')
|
||||
return '-'
|
||||
|
||||
@admin.display(description='Users & Links')
|
||||
def user_stats(self, obj):
|
||||
"""Display user count and active links statistics"""
|
||||
try:
|
||||
from django.utils import timezone
|
||||
from datetime import timedelta
|
||||
|
||||
user_count = obj.user_count if hasattr(obj, 'user_count') else 0
|
||||
|
||||
# Get total links count
|
||||
total_links = ACLLink.objects.filter(acl__server=obj).count()
|
||||
|
||||
# Get recently accessed links (last 30 days) - exclude None values
|
||||
thirty_days_ago = timezone.now() - timedelta(days=30)
|
||||
active_links = ACLLink.objects.filter(
|
||||
acl__server=obj,
|
||||
last_access_time__isnull=False,
|
||||
last_access_time__gte=thirty_days_ago
|
||||
).count()
|
||||
|
||||
# Color coding based on activity
|
||||
if user_count == 0:
|
||||
color = '#9ca3af' # gray - no users
|
||||
elif total_links == 0:
|
||||
color = '#dc2626' # red - no links
|
||||
elif active_links > total_links * 0.7: # High activity
|
||||
color = '#16a34a' # green
|
||||
elif active_links > total_links * 0.3: # Medium activity
|
||||
color = '#eab308' # yellow
|
||||
else:
|
||||
color = '#f97316' # orange - low activity
|
||||
|
||||
return mark_safe(
|
||||
f'<div style="font-size: 12px;">' +
|
||||
f'<div style="color: {color}; font-weight: bold;">👥 {user_count} users</div>' +
|
||||
f'<div style="color: #6b7280;">🔗 {active_links}/{total_links} active</div>' +
|
||||
f'</div>'
|
||||
)
|
||||
except Exception as e:
|
||||
return mark_safe(f'<span style="color: #dc2626; font-size: 11px;">Stats error: {e}</span>')
|
||||
|
||||
@admin.display(description='Activity')
|
||||
def activity_summary(self, obj):
|
||||
"""Display recent activity summary"""
|
||||
try:
|
||||
from django.utils import timezone
|
||||
from datetime import timedelta
|
||||
|
||||
# Get recent access logs for this server
|
||||
seven_days_ago = timezone.now() - timedelta(days=7)
|
||||
recent_logs = AccessLog.objects.filter(
|
||||
server=obj.name,
|
||||
timestamp__gte=seven_days_ago
|
||||
)
|
||||
|
||||
total_access = recent_logs.count()
|
||||
success_access = recent_logs.filter(action='Success').count()
|
||||
|
||||
# Get latest access
|
||||
latest_log = AccessLog.objects.filter(server=obj.name).order_by('-timestamp').first()
|
||||
|
||||
if latest_log:
|
||||
local_time = localtime(latest_log.timestamp)
|
||||
latest_str = local_time.strftime('%m-%d %H:%M')
|
||||
|
||||
# Time since last access
|
||||
time_diff = timezone.now() - latest_log.timestamp
|
||||
if time_diff.days > 0:
|
||||
time_ago = f'{time_diff.days}d ago'
|
||||
elif time_diff.seconds > 3600:
|
||||
time_ago = f'{time_diff.seconds // 3600}h ago'
|
||||
else:
|
||||
time_ago = 'Recent'
|
||||
else:
|
||||
latest_str = 'Never'
|
||||
time_ago = ''
|
||||
|
||||
# Color coding
|
||||
if total_access == 0:
|
||||
color = '#dc2626' # red - no activity
|
||||
elif total_access > 50:
|
||||
color = '#16a34a' # green - high activity
|
||||
elif total_access > 10:
|
||||
color = '#eab308' # yellow - medium activity
|
||||
else:
|
||||
color = '#f97316' # orange - low activity
|
||||
|
||||
return mark_safe(
|
||||
f'<div style="font-size: 11px;">' +
|
||||
f'<div style="color: {color}; font-weight: bold;">📊 {total_access} uses (7d)</div>' +
|
||||
f'<div style="color: #6b7280;">✅ {success_access} success</div>' +
|
||||
f'<div style="color: #6b7280;">🕒 {latest_str} {time_ago}</div>' +
|
||||
f'</div>'
|
||||
)
|
||||
except Exception as e:
|
||||
return mark_safe(f'<span style="color: #dc2626; font-size: 11px;">Activity unavailable</span>')
|
||||
|
||||
@admin.display(description='Status')
|
||||
def server_status_inline(self, obj):
|
||||
def server_status_compact(self, obj):
|
||||
"""Display server status in compact format"""
|
||||
try:
|
||||
status = obj.get_server_status()
|
||||
if 'error' in status:
|
||||
return mark_safe(f"<span style='color: red;'>Error: {status['error']}</span>")
|
||||
import json
|
||||
pretty_status = ", ".join(f"{key}: {value}" for key, value in status.items())
|
||||
return mark_safe(f"<pre>{pretty_status}</pre>")
|
||||
return mark_safe(
|
||||
f'<div style="color: #dc2626; font-size: 11px; font-weight: bold;">' +
|
||||
f'❌ Error<br>' +
|
||||
f'<span style="font-weight: normal;" title="{status["error"]}">' +
|
||||
f'{status["error"][:30]}...</span>' +
|
||||
f'</div>'
|
||||
)
|
||||
|
||||
# Extract key metrics
|
||||
status_items = []
|
||||
if 'name' in status:
|
||||
status_items.append(f"📛 {status['name'][:15]}")
|
||||
if 'version' in status:
|
||||
status_items.append(f"🔄 {status['version']}")
|
||||
if 'keys' in status:
|
||||
status_items.append(f"🔑 {status['keys']} keys")
|
||||
if 'accessUrl' in status:
|
||||
status_items.append("🌐 Available")
|
||||
|
||||
status_display = '<br>'.join(status_items) if status_items else 'Unknown'
|
||||
|
||||
return mark_safe(
|
||||
f'<div style="color: #16a34a; font-size: 11px;">' +
|
||||
f'✅ Online<br>' +
|
||||
f'<span style="color: #6b7280;">{status_display}</span>' +
|
||||
f'</div>'
|
||||
)
|
||||
except Exception as e:
|
||||
# Don't let server connectivity issues break the admin interface
|
||||
return mark_safe(f"<span style='color: orange;'>Status unavailable: {e}</span>")
|
||||
server_status_inline.short_description = "Status"
|
||||
return mark_safe(
|
||||
f'<div style="color: #f97316; font-size: 11px; font-weight: bold;">' +
|
||||
f'⚠️ Unavailable<br>' +
|
||||
f'<span style="font-weight: normal;" title="{str(e)}">' +
|
||||
f'{str(e)[:25]}...</span>' +
|
||||
f'</div>'
|
||||
)
|
||||
|
||||
def get_queryset(self, request):
|
||||
qs = super().get_queryset(request)
|
||||
@@ -608,6 +797,7 @@ class UserAdmin(admin.ModelAdmin):
|
||||
|
||||
@admin.display(description='User Statistics Summary')
|
||||
def user_statistics_summary(self, obj):
|
||||
"""Display user statistics with integrated server management"""
|
||||
try:
|
||||
from .models import UserStatistics
|
||||
from django.db import models
|
||||
@@ -626,71 +816,219 @@ class UserAdmin(admin.ModelAdmin):
|
||||
links=models.Count('id')
|
||||
).order_by('-connections')
|
||||
|
||||
html = '<div style="background: #f8f9fa; padding: 12px; border-radius: 6px; margin: 8px 0;">'
|
||||
html += f'<div style="display: flex; gap: 20px; margin-bottom: 12px; flex-wrap: wrap;">'
|
||||
# Get all ACLs and links for this user
|
||||
user_acls = ACL.objects.filter(user=obj).select_related('server').prefetch_related('links')
|
||||
|
||||
# Get available servers not yet assigned
|
||||
all_servers = Server.objects.all()
|
||||
assigned_server_ids = [acl.server.id for acl in user_acls]
|
||||
unassigned_servers = all_servers.exclude(id__in=assigned_server_ids)
|
||||
|
||||
html = '<div class="user-management-section">'
|
||||
|
||||
# Overall Statistics
|
||||
html += '<div style="background: #e7f3ff; border-left: 4px solid #007cba; padding: 12px; margin-bottom: 16px; border-radius: 4px;">'
|
||||
html += f'<div style="display: flex; gap: 20px; margin-bottom: 8px; flex-wrap: wrap;">'
|
||||
html += f'<div><strong>Total Uses:</strong> {user_stats["total_connections"] or 0}</div>'
|
||||
html += f'<div><strong>Recent (30d):</strong> {user_stats["recent_connections"] or 0}</div>'
|
||||
html += f'<div><strong>Total Links:</strong> {user_stats["total_links"] or 0}</div>'
|
||||
if user_stats["max_daily_peak"]:
|
||||
html += f'<div><strong>Daily Peak:</strong> {user_stats["max_daily_peak"]}</div>'
|
||||
html += f'</div>'
|
||||
|
||||
if server_breakdown:
|
||||
html += '<div><strong>By Server:</strong></div>'
|
||||
html += '<ul style="margin: 8px 0; padding-left: 20px;">'
|
||||
for server in server_breakdown:
|
||||
html += f'<li>{server["server_name"]}: {server["connections"]} uses ({server["links"]} links)</li>'
|
||||
html += '</ul>'
|
||||
|
||||
html += '</div>'
|
||||
|
||||
# Server Management
|
||||
if user_acls:
|
||||
html += '<h4 style="color: #007cba; margin: 16px 0 8px 0;">🔗 Server Access & Links</h4>'
|
||||
|
||||
for acl in user_acls:
|
||||
server = acl.server
|
||||
links = list(acl.links.all())
|
||||
|
||||
# Server status check
|
||||
try:
|
||||
server_status = server.get_server_status()
|
||||
server_accessible = True
|
||||
server_error = None
|
||||
except Exception as e:
|
||||
server_status = {}
|
||||
server_accessible = False
|
||||
server_error = str(e)
|
||||
|
||||
html += '<div class="server-section">'
|
||||
|
||||
# Server header
|
||||
status_icon = '✅' if server_accessible else '❌'
|
||||
type_icon = '🔵' if server.server_type == 'outline' else '🟢' if server.server_type == 'wireguard' else ''
|
||||
html += f'<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">'
|
||||
html += f'<h5 style="margin: 0; color: #333; font-size: 14px; font-weight: 600;">{type_icon} {server.name} {status_icon}</h5>'
|
||||
|
||||
# Server stats
|
||||
server_stat = next((s for s in server_breakdown if s['server_name'] == server.name), None)
|
||||
if server_stat:
|
||||
html += f'<span style="background: #f8f9fa; padding: 4px 8px; border-radius: 4px; font-size: 12px; color: #6c757d;">'
|
||||
html += f'📊 {server_stat["connections"]} uses ({server_stat["links"]} links)'
|
||||
html += f'</span>'
|
||||
html += f'</div>'
|
||||
|
||||
# Server error display
|
||||
if server_error:
|
||||
html += f'<div style="background: #f8d7da; color: #721c24; padding: 8px; border-radius: 4px; margin-bottom: 8px; font-size: 12px;">'
|
||||
html += f'⚠️ Error: {server_error[:80]}...'
|
||||
html += f'</div>'
|
||||
|
||||
# Links display
|
||||
if links:
|
||||
for link in links:
|
||||
# Get link stats
|
||||
link_stats = UserStatistics.objects.filter(
|
||||
user=obj, server_name=server.name, acl_link_id=link.link
|
||||
).first()
|
||||
|
||||
html += '<div class="link-item">'
|
||||
html += f'<div style="flex: 1;">'
|
||||
html += f'<div style="font-family: monospace; font-size: 13px; color: #007cba; font-weight: 500;">'
|
||||
html += f'{link.link[:16]}...' if len(link.link) > 16 else link.link
|
||||
html += f'</div>'
|
||||
if link.comment:
|
||||
html += f'<div style="font-size: 11px; color: #6c757d;">{link.comment}</div>'
|
||||
html += f'</div>'
|
||||
|
||||
# Link stats and actions
|
||||
html += f'<div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">'
|
||||
if link_stats:
|
||||
html += f'<span style="background: #d4edda; color: #155724; padding: 2px 6px; border-radius: 3px; font-size: 10px;">'
|
||||
html += f'✨ {link_stats.total_connections}'
|
||||
html += f'</span>'
|
||||
|
||||
# Test link button
|
||||
html += f'<a href="{EXTERNAL_ADDRESS}/ss/{link.link}#{server.name}" target="_blank" '
|
||||
html += f'class="btn btn-sm btn-primary btn-sm-custom">🔗</a>'
|
||||
|
||||
# Delete button
|
||||
html += f'<button type="button" class="btn btn-sm btn-danger btn-sm-custom delete-link-btn" '
|
||||
html += f'data-link-id="{link.id}" data-link-name="{link.link[:12]}">🗑️</button>'
|
||||
|
||||
# Last access
|
||||
if link.last_access_time:
|
||||
local_time = localtime(link.last_access_time)
|
||||
html += f'<span style="background: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 10px; color: #6c757d;">'
|
||||
html += f'{local_time.strftime("%m-%d %H:%M")}'
|
||||
html += f'</span>'
|
||||
else:
|
||||
html += f'<span style="background: #f8d7da; color: #721c24; padding: 2px 6px; border-radius: 3px; font-size: 10px;">'
|
||||
html += f'Never'
|
||||
html += f'</span>'
|
||||
|
||||
html += f'</div></div>'
|
||||
|
||||
# Add link button
|
||||
html += f'<div style="text-align: center; margin-top: 12px;">'
|
||||
html += f'<button type="button" class="btn btn-sm btn-success add-link-btn" '
|
||||
html += f'data-server-id="{server.id}" data-server-name="{server.name}">'
|
||||
html += f'➕ Add Link'
|
||||
html += f'</button>'
|
||||
html += f'</div>'
|
||||
|
||||
html += '</div>' # End server-section
|
||||
|
||||
# Add server access section
|
||||
if unassigned_servers:
|
||||
html += '<div style="background: #d1ecf1; border-left: 4px solid #bee5eb; padding: 12px; margin-top: 16px; border-radius: 4px;">'
|
||||
html += '<h5 style="margin: 0 0 8px 0; color: #0c5460; font-size: 13px;">➕ Available Servers</h5>'
|
||||
html += '<div style="display: flex; gap: 8px; flex-wrap: wrap;">'
|
||||
for server in unassigned_servers:
|
||||
type_icon = '🔵' if server.server_type == 'outline' else '🟢' if server.server_type == 'wireguard' else ''
|
||||
html += f'<button type="button" class="btn btn-sm btn-outline-info btn-sm-custom add-server-btn" '
|
||||
html += f'data-server-id="{server.id}" data-server-name="{server.name}">'
|
||||
html += f'{type_icon} {server.name}'
|
||||
html += f'</button>'
|
||||
html += '</div></div>'
|
||||
|
||||
html += '</div>' # End user-management-section
|
||||
return mark_safe(html)
|
||||
|
||||
except Exception as e:
|
||||
return mark_safe(f'<span style="color: #dc2626;">Error loading statistics: {e}</span>')
|
||||
return mark_safe(f'<span style="color: #dc3545;">Error loading management interface: {e}</span>')
|
||||
|
||||
@admin.display(description='Recent Activity')
|
||||
def recent_activity_display(self, obj):
|
||||
"""Display recent activity in compact admin-friendly format"""
|
||||
try:
|
||||
from datetime import timedelta
|
||||
from django.utils import timezone
|
||||
|
||||
# Get recent access logs for this user
|
||||
# Get recent access logs for this user (last 7 days, limited)
|
||||
seven_days_ago = timezone.now() - timedelta(days=7)
|
||||
recent_logs = AccessLog.objects.filter(
|
||||
user=obj.username,
|
||||
timestamp__gte=timezone.now() - timedelta(days=7)
|
||||
).order_by('-timestamp')[:10]
|
||||
timestamp__gte=seven_days_ago
|
||||
).order_by('-timestamp')[:15] # Limit to 15 most recent
|
||||
|
||||
if not recent_logs:
|
||||
return mark_safe('<div style="color: #6b7280; font-style: italic;">No recent activity</div>')
|
||||
return mark_safe('<div style="color: #6c757d; font-style: italic; padding: 12px; background: #f8f9fa; border-radius: 4px;">No recent activity (last 7 days)</div>')
|
||||
|
||||
html = '<div style="background: #f8f9fa; padding: 12px; border-radius: 6px; margin: 8px 0;">'
|
||||
html += '<div style="font-weight: bold; margin-bottom: 8px;">Last 7 days:</div>'
|
||||
html = '<div style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 0; max-height: 300px; overflow-y: auto;">'
|
||||
|
||||
for log in recent_logs:
|
||||
# Header
|
||||
html += '<div style="background: #e9ecef; padding: 8px 12px; border-bottom: 1px solid #dee2e6; font-weight: 600; font-size: 12px; color: #495057;">'
|
||||
html += f'📊 Recent Activity ({recent_logs.count()} entries, last 7 days)'
|
||||
html += '</div>'
|
||||
|
||||
# Activity entries
|
||||
for i, log in enumerate(recent_logs):
|
||||
bg_color = '#ffffff' if i % 2 == 0 else '#f8f9fa'
|
||||
local_time = localtime(log.timestamp)
|
||||
time_str = local_time.strftime('%Y-%m-%d %H:%M')
|
||||
|
||||
# Status color coding
|
||||
# Status icon and color
|
||||
if log.action == 'Success':
|
||||
color = '#16a34a'
|
||||
icon = '✅'
|
||||
status_color = '#28a745'
|
||||
elif log.action == 'Failed':
|
||||
color = '#dc2626'
|
||||
icon = '❌'
|
||||
status_color = '#dc3545'
|
||||
else:
|
||||
color = '#6b7280'
|
||||
icon = 'ℹ️'
|
||||
status_color = '#6c757d'
|
||||
|
||||
link_display = log.acl_link_id[:12] + '...' if log.acl_link_id and len(log.acl_link_id) > 12 else log.acl_link_id or 'N/A'
|
||||
html += f'<div style="display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid #f1f3f4; background: {bg_color};">'
|
||||
|
||||
html += f'<div style="display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #e5e7eb; font-size: 12px;">'
|
||||
html += f'<span><span style="color: {color};">{icon}</span> {log.server} / {link_display}</span>'
|
||||
html += f'<span style="color: #6b7280;">{time_str}</span>'
|
||||
# Left side - server and link info
|
||||
html += f'<div style="display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0;">'
|
||||
html += f'<span style="color: {status_color}; font-size: 14px;">{icon}</span>'
|
||||
html += f'<div style="overflow: hidden;">'
|
||||
html += f'<div style="font-weight: 500; font-size: 12px; color: #495057; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{log.server}</div>'
|
||||
|
||||
if log.acl_link_id:
|
||||
link_short = log.acl_link_id[:12] + '...' if len(log.acl_link_id) > 12 else log.acl_link_id
|
||||
html += f'<div style="font-family: monospace; font-size: 10px; color: #6c757d;">{link_short}</div>'
|
||||
|
||||
html += f'</div></div>'
|
||||
|
||||
# Right side - timestamp and status
|
||||
html += f'<div style="text-align: right; flex-shrink: 0;">'
|
||||
html += f'<div style="font-size: 10px; color: #6c757d;">{local_time.strftime("%m-%d %H:%M")}</div>'
|
||||
html += f'<div style="font-size: 9px; color: {status_color}; font-weight: 500;">{log.action}</div>'
|
||||
html += f'</div>'
|
||||
|
||||
html += f'</div>'
|
||||
|
||||
# Footer with summary if there are more entries
|
||||
total_recent = AccessLog.objects.filter(
|
||||
user=obj.username,
|
||||
timestamp__gte=seven_days_ago
|
||||
).count()
|
||||
|
||||
if total_recent > 15:
|
||||
html += f'<div style="background: #e9ecef; padding: 6px 12px; font-size: 11px; color: #6c757d; text-align: center;">'
|
||||
html += f'Showing 15 of {total_recent} entries from last 7 days'
|
||||
html += f'</div>'
|
||||
|
||||
html += '</div>'
|
||||
return mark_safe(html)
|
||||
|
||||
except Exception as e:
|
||||
return mark_safe(f'<span style="color: #dc2626;">Error loading activity: {e}</span>')
|
||||
return mark_safe(f'<span style="color: #dc3545; font-size: 12px;">Error loading activity: {e}</span>')
|
||||
|
||||
@admin.display(description='Allowed servers', ordering='server_count')
|
||||
def server_count(self, obj):
|
||||
@@ -798,74 +1136,14 @@ class UserAdmin(admin.ModelAdmin):
|
||||
return JsonResponse({'error': 'Invalid request method'}, status=405)
|
||||
|
||||
def change_view(self, request, object_id, form_url='', extra_context=None):
|
||||
"""Override change view to add extensive user management data"""
|
||||
"""Override change view to add user management data to context"""
|
||||
extra_context = extra_context or {}
|
||||
|
||||
if object_id:
|
||||
try:
|
||||
user = User.objects.get(pk=object_id)
|
||||
|
||||
# Get all ACLs and links for this user
|
||||
user_acls = ACL.objects.filter(user=user).select_related('server').prefetch_related('links')
|
||||
|
||||
# Get all available servers
|
||||
all_servers = Server.objects.all()
|
||||
|
||||
# Get user statistics
|
||||
try:
|
||||
from .models import UserStatistics
|
||||
user_stats = UserStatistics.objects.filter(user=user).select_related('user')
|
||||
except:
|
||||
user_stats = []
|
||||
|
||||
# Get recent access logs
|
||||
from django.utils import timezone
|
||||
from datetime import timedelta
|
||||
recent_logs = AccessLog.objects.filter(
|
||||
user=user.username,
|
||||
timestamp__gte=timezone.now() - timedelta(days=30)
|
||||
).order_by('-timestamp')[:50]
|
||||
|
||||
# Organize data by server
|
||||
servers_data = {}
|
||||
for acl in user_acls:
|
||||
server = acl.server
|
||||
|
||||
# Get server status
|
||||
try:
|
||||
server_status = server.get_server_status()
|
||||
server_accessible = True
|
||||
server_error = None
|
||||
except Exception as e:
|
||||
server_status = {}
|
||||
server_accessible = False
|
||||
server_error = str(e)
|
||||
|
||||
# Get links for this ACL
|
||||
links = list(acl.links.all())
|
||||
|
||||
# Get statistics for this server
|
||||
server_stats = [s for s in user_stats if s.server_name == server.name]
|
||||
|
||||
servers_data[server.name] = {
|
||||
'server': server,
|
||||
'acl': acl,
|
||||
'links': links,
|
||||
'statistics': server_stats,
|
||||
'status': server_status,
|
||||
'accessible': server_accessible,
|
||||
'error': server_error,
|
||||
}
|
||||
|
||||
# Get available servers not yet assigned
|
||||
assigned_server_ids = [acl.server.id for acl in user_acls]
|
||||
unassigned_servers = all_servers.exclude(id__in=assigned_server_ids)
|
||||
|
||||
extra_context.update({
|
||||
'user_object': user,
|
||||
'servers_data': servers_data,
|
||||
'unassigned_servers': unassigned_servers,
|
||||
'recent_logs': recent_logs,
|
||||
'external_address': EXTERNAL_ADDRESS,
|
||||
})
|
||||
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import logging
|
||||
import json
|
||||
import requests
|
||||
from django.db import models
|
||||
from django.shortcuts import render, redirect
|
||||
from django.conf import settings
|
||||
from .generic import Server
|
||||
from urllib3 import PoolManager
|
||||
from outline_vpn.outline_vpn import OutlineVPN, OutlineServerErrorException
|
||||
@@ -301,9 +304,50 @@ class OutlineServerAdmin(PolymorphicChildModelAdmin):
|
||||
'user_count',
|
||||
'server_status_inline',
|
||||
)
|
||||
readonly_fields = ('server_status_full', 'registration_date',)
|
||||
readonly_fields = ('server_status_full', 'registration_date', 'export_configuration_display', 'server_statistics_display', 'recent_activity_display', 'json_import_field')
|
||||
list_editable = ('admin_url', 'admin_access_cert', 'client_hostname', 'client_port',)
|
||||
exclude = ('server_type',)
|
||||
|
||||
def get_fieldsets(self, request, obj=None):
|
||||
"""Customize fieldsets based on whether object exists"""
|
||||
if obj is None: # Adding new server
|
||||
return (
|
||||
('JSON Import', {
|
||||
'fields': ('json_import_field',),
|
||||
'description': 'Quick import from Outline server JSON configuration'
|
||||
}),
|
||||
('Server Configuration', {
|
||||
'fields': ('name', 'comment', 'admin_url', 'admin_access_cert', 'client_hostname', 'client_port')
|
||||
}),
|
||||
)
|
||||
else: # Editing existing server
|
||||
return (
|
||||
('Server Configuration', {
|
||||
'fields': ('name', 'comment', 'admin_url', 'admin_access_cert', 'client_hostname', 'client_port', 'registration_date')
|
||||
}),
|
||||
('Server Status', {
|
||||
'fields': ('server_status_full',)
|
||||
}),
|
||||
('Export Configuration', {
|
||||
'fields': ('export_configuration_display',)
|
||||
}),
|
||||
('Statistics & Users', {
|
||||
'fields': ('server_statistics_display',),
|
||||
'classes': ('collapse',)
|
||||
}),
|
||||
('Recent Activity', {
|
||||
'fields': ('recent_activity_display',),
|
||||
'classes': ('collapse',)
|
||||
}),
|
||||
)
|
||||
|
||||
def get_urls(self):
|
||||
from django.urls import path
|
||||
urls = super().get_urls()
|
||||
custom_urls = [
|
||||
path('<int:object_id>/sync/', self.admin_site.admin_view(self.sync_server_view), name='outlineserver_sync'),
|
||||
]
|
||||
return custom_urls + urls
|
||||
|
||||
@admin.display(description='Clients', ordering='user_count')
|
||||
def user_count(self, obj):
|
||||
@@ -336,8 +380,396 @@ class OutlineServerAdmin(PolymorphicChildModelAdmin):
|
||||
|
||||
server_status_full.short_description = "Server Status"
|
||||
|
||||
def sync_server_view(self, request, object_id):
|
||||
"""AJAX view to sync server settings"""
|
||||
from django.http import JsonResponse
|
||||
|
||||
if request.method == 'POST':
|
||||
try:
|
||||
server = OutlineServer.objects.get(pk=object_id)
|
||||
result = server.sync()
|
||||
|
||||
return JsonResponse({
|
||||
'success': True,
|
||||
'message': f'Server "{server.name}" synchronized successfully',
|
||||
'details': result
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
return JsonResponse({
|
||||
'success': False,
|
||||
'error': str(e)
|
||||
}, status=500)
|
||||
|
||||
return JsonResponse({'error': 'Invalid request method'}, status=405)
|
||||
|
||||
def add_view(self, request, form_url='', extra_context=None):
|
||||
"""Use the default Django admin add view"""
|
||||
return super().add_view(request, form_url, extra_context)
|
||||
|
||||
@admin.display(description='Import JSON Configuration')
|
||||
def json_import_field(self, obj):
|
||||
"""Display JSON import field for new servers only"""
|
||||
if obj and obj.pk:
|
||||
# Hide for existing servers
|
||||
return ''
|
||||
|
||||
html = '''
|
||||
<div style="width: 100%;">
|
||||
<textarea id="import-json-config" class="vLargeTextField" rows="8"
|
||||
placeholder='{
|
||||
"apiUrl": "https://your-server:port/path",
|
||||
"certSha256": "your-certificate-hash",
|
||||
"serverName": "My Outline Server",
|
||||
"clientHostname": "your-server.com",
|
||||
"clientPort": 1257,
|
||||
"comment": "Server description"
|
||||
}' style="font-family: 'Courier New', monospace; font-size: 0.875rem; width: 100%;"></textarea>
|
||||
<div class="help" style="margin-top: 0.5rem;">
|
||||
Paste JSON configuration from your Outline server setup to automatically fill the fields below.
|
||||
</div>
|
||||
<div style="margin-top: 1rem;">
|
||||
<button type="button" id="import-json-btn" class="btn btn-primary" onclick="importJsonConfig()">Import Configuration</button>
|
||||
</div>
|
||||
<script>
|
||||
function importJsonConfig() {
|
||||
const textarea = document.getElementById('import-json-config');
|
||||
try {
|
||||
const jsonText = textarea.value.trim();
|
||||
if (!jsonText) {
|
||||
alert('Please enter JSON configuration');
|
||||
return;
|
||||
}
|
||||
|
||||
const config = JSON.parse(jsonText);
|
||||
|
||||
// Validate required fields
|
||||
if (!config.apiUrl || !config.certSha256) {
|
||||
alert('Invalid JSON format. Required fields: apiUrl, certSha256');
|
||||
return;
|
||||
}
|
||||
|
||||
// Parse apiUrl to extract components
|
||||
const url = new URL(config.apiUrl);
|
||||
|
||||
// Fill form fields
|
||||
const adminUrlField = document.getElementById('id_admin_url');
|
||||
const adminCertField = document.getElementById('id_admin_access_cert');
|
||||
const clientHostnameField = document.getElementById('id_client_hostname');
|
||||
const clientPortField = document.getElementById('id_client_port');
|
||||
const nameField = document.getElementById('id_name');
|
||||
const commentField = document.getElementById('id_comment');
|
||||
|
||||
if (adminUrlField) adminUrlField.value = config.apiUrl;
|
||||
if (adminCertField) adminCertField.value = config.certSha256;
|
||||
|
||||
// Use provided hostname or extract from URL
|
||||
const hostname = config.clientHostname || config.hostnameForAccessKeys || url.hostname;
|
||||
if (clientHostnameField) clientHostnameField.value = hostname;
|
||||
|
||||
// Use provided port or extract from various sources
|
||||
const clientPort = config.clientPort || config.portForNewAccessKeys || url.port || '1257';
|
||||
if (clientPortField) clientPortField.value = clientPort;
|
||||
|
||||
// Generate server name if not provided and field is empty
|
||||
if (nameField && !nameField.value) {
|
||||
const serverName = config.serverName || config.name || 'Outline-' + hostname;
|
||||
nameField.value = serverName;
|
||||
}
|
||||
|
||||
// Fill comment if provided and field exists
|
||||
if (commentField && config.comment) {
|
||||
commentField.value = config.comment;
|
||||
}
|
||||
|
||||
// Clear the JSON input
|
||||
textarea.value = '';
|
||||
|
||||
alert('Configuration imported successfully! Review the fields below and save.');
|
||||
|
||||
// Click on Server Configuration tab if using Jazzmin
|
||||
const serverTab = document.querySelector('a[href="#server-configuration-tab"]');
|
||||
if (serverTab) {
|
||||
serverTab.click();
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
alert('Invalid JSON format: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Add paste event listener
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const textarea = document.getElementById('import-json-config');
|
||||
if (textarea) {
|
||||
textarea.addEventListener('paste', function(e) {
|
||||
setTimeout(importJsonConfig, 100);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
'''
|
||||
|
||||
return mark_safe(html)
|
||||
|
||||
@admin.display(description='Server Statistics & Users')
|
||||
def server_statistics_display(self, obj):
|
||||
"""Display server statistics and user management"""
|
||||
if not obj or not obj.pk:
|
||||
return mark_safe('<div style="color: #6c757d; font-style: italic;">Statistics will be available after saving</div>')
|
||||
|
||||
try:
|
||||
from vpn.models import ACL, AccessLog, UserStatistics
|
||||
from django.utils import timezone
|
||||
from datetime import timedelta
|
||||
|
||||
# Get user statistics
|
||||
user_count = ACL.objects.filter(server=obj).count()
|
||||
total_links = 0
|
||||
server_keys_count = 0
|
||||
|
||||
try:
|
||||
from vpn.models import ACLLink
|
||||
total_links = ACLLink.objects.filter(acl__server=obj).count()
|
||||
|
||||
# Try to get actual keys count from server
|
||||
server_status = obj.get_server_status()
|
||||
if 'keys' in server_status:
|
||||
server_keys_count = server_status['keys']
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
# Get active users count (last 30 days)
|
||||
thirty_days_ago = timezone.now() - timedelta(days=30)
|
||||
active_users_count = UserStatistics.objects.filter(
|
||||
server_name=obj.name,
|
||||
recent_connections__gt=0
|
||||
).values('user').distinct().count()
|
||||
|
||||
html = '<div style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem;">'
|
||||
|
||||
# Overall Statistics
|
||||
html += '<div style="background: #e7f3ff; border-left: 4px solid #007cba; padding: 12px; margin-bottom: 16px; border-radius: 4px;">'
|
||||
html += '<div style="display: flex; gap: 20px; margin-bottom: 8px; flex-wrap: wrap;">'
|
||||
html += f'<div><strong>Total Users:</strong> {user_count}</div>'
|
||||
html += f'<div><strong>Active Users (30d):</strong> {active_users_count}</div>'
|
||||
html += f'<div><strong>Total Links:</strong> {total_links}</div>'
|
||||
html += f'<div><strong>Server Keys:</strong> {server_keys_count}</div>'
|
||||
html += '</div>'
|
||||
html += '</div>'
|
||||
|
||||
# Get users data with ACL information
|
||||
acls = ACL.objects.filter(server=obj).select_related('user').prefetch_related('links')
|
||||
|
||||
if acls:
|
||||
html += '<h5 style="color: #495057; margin: 16px 0 8px 0;">👥 Users with Access</h5>'
|
||||
|
||||
for acl in acls:
|
||||
user = acl.user
|
||||
links = list(acl.links.all())
|
||||
|
||||
# Get last access time from any link
|
||||
last_access = None
|
||||
for link in links:
|
||||
if link.last_access_time:
|
||||
if last_access is None or link.last_access_time > last_access:
|
||||
last_access = link.last_access_time
|
||||
|
||||
# Check if user has key on server
|
||||
server_key = False
|
||||
try:
|
||||
obj.get_user(user)
|
||||
server_key = True
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
html += '<div style="background: #ffffff; border: 1px solid #e9ecef; border-radius: 0.25rem; padding: 0.75rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center;">'
|
||||
|
||||
# User info
|
||||
html += '<div style="flex: 1;">'
|
||||
html += f'<div style="font-weight: 500; font-size: 14px; color: #495057;">{user.username}'
|
||||
if user.comment:
|
||||
html += f' <span style="color: #6c757d; font-size: 12px; font-weight: normal;">- {user.comment}</span>'
|
||||
html += '</div>'
|
||||
html += f'<div style="font-size: 12px; color: #6c757d;">{len(links)} link(s)'
|
||||
if last_access:
|
||||
from django.utils.timezone import localtime
|
||||
local_time = localtime(last_access)
|
||||
html += f' | Last access: {local_time.strftime("%Y-%m-%d %H:%M")}'
|
||||
else:
|
||||
html += ' | Never accessed'
|
||||
html += '</div>'
|
||||
html += '</div>'
|
||||
|
||||
# Status and actions
|
||||
html += '<div style="display: flex; gap: 8px; align-items: center;">'
|
||||
if server_key:
|
||||
html += '<span style="background: #d4edda; color: #155724; padding: 2px 6px; border-radius: 3px; font-size: 10px;">✅ On Server</span>'
|
||||
else:
|
||||
html += '<span style="background: #f8d7da; color: #721c24; padding: 2px 6px; border-radius: 3px; font-size: 10px;">❌ Missing</span>'
|
||||
|
||||
html += f'<a href="/admin/vpn/user/{user.id}/change/" class="btn btn-sm btn-outline-primary" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: 0.2rem; margin: 0 0.1rem;">👤 Edit</a>'
|
||||
html += '</div>'
|
||||
html += '</div>'
|
||||
else:
|
||||
html += '<div style="color: #6c757d; font-style: italic; text-align: center; padding: 20px; background: #f9fafb; border-radius: 6px;">'
|
||||
html += 'No users assigned to this server'
|
||||
html += '</div>'
|
||||
|
||||
html += '</div>'
|
||||
return mark_safe(html)
|
||||
|
||||
except Exception as e:
|
||||
return mark_safe(f'<div style="color: #dc3545;">Error loading statistics: {e}</div>')
|
||||
|
||||
@admin.display(description='Export Configuration')
|
||||
def export_configuration_display(self, obj):
|
||||
"""Display JSON export configuration"""
|
||||
if not obj or not obj.pk:
|
||||
return mark_safe('<div style="color: #6c757d; font-style: italic;">Export will be available after saving</div>')
|
||||
|
||||
try:
|
||||
# Build export data
|
||||
export_data = {
|
||||
'apiUrl': obj.admin_url,
|
||||
'certSha256': obj.admin_access_cert,
|
||||
'serverName': obj.name,
|
||||
'clientHostname': obj.client_hostname,
|
||||
'clientPort': int(obj.client_port),
|
||||
'comment': obj.comment,
|
||||
'serverType': 'outline',
|
||||
'dateCreated': obj.registration_date.isoformat() if obj.registration_date else None,
|
||||
'id': obj.id
|
||||
}
|
||||
|
||||
# Try to get server status
|
||||
try:
|
||||
server_status = obj.get_server_status()
|
||||
if 'error' not in server_status:
|
||||
export_data['serverInfo'] = server_status
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
json_str = json.dumps(export_data, indent=2)
|
||||
# Escape the JSON for HTML
|
||||
from django.utils.html import escape
|
||||
escaped_json = escape(json_str)
|
||||
|
||||
html = '''
|
||||
<div>
|
||||
<textarea id="export-json-config" class="vLargeTextField" rows="10" readonly
|
||||
style="font-family: 'Courier New', monospace; font-size: 0.875rem; background-color: #f8f9fa; width: 100%;">''' + escaped_json + '''</textarea>
|
||||
<div class="help" style="margin-top: 0.5rem;">
|
||||
<strong>Includes:</strong> Server settings, connection details, live server info (if accessible), creation date, and comment.
|
||||
</div>
|
||||
<div style="padding-top: 1rem;">
|
||||
<button type="button" id="copy-export-btn" class="btn btn-sm btn-secondary"
|
||||
onclick="var btn=this; document.getElementById('export-json-config').select(); document.execCommand('copy'); btn.innerHTML='✅ Copied!'; setTimeout(function(){btn.innerHTML='📋 Copy JSON';}, 2000);"
|
||||
style="margin-right: 10px;">📋 Copy JSON</button>
|
||||
<button type="button" id="sync-server-btn" data-server-id="''' + str(obj.id) + '''" class="btn btn-sm btn-primary">🔄 Sync Server Settings</button>
|
||||
<span style="margin-left: 0.5rem; font-size: 0.875rem; color: #6c757d;">
|
||||
Synchronize server name, hostname, and port settings
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
'''
|
||||
|
||||
return mark_safe(html)
|
||||
|
||||
except Exception as e:
|
||||
return mark_safe(f'<div style="color: #dc3545;">Error generating export: {e}</div>')
|
||||
|
||||
@admin.display(description='Recent Activity')
|
||||
def recent_activity_display(self, obj):
|
||||
"""Display recent activity in admin-friendly format"""
|
||||
if not obj or not obj.pk:
|
||||
return mark_safe('<div style="color: #6c757d; font-style: italic;">Activity will be available after saving</div>')
|
||||
|
||||
try:
|
||||
from vpn.models import AccessLog
|
||||
from django.utils.timezone import localtime
|
||||
from datetime import timedelta
|
||||
from django.utils import timezone
|
||||
|
||||
# Get recent access logs for this server (last 7 days)
|
||||
seven_days_ago = timezone.now() - timedelta(days=7)
|
||||
recent_logs = AccessLog.objects.filter(
|
||||
server=obj.name,
|
||||
timestamp__gte=seven_days_ago
|
||||
).order_by('-timestamp')[:20]
|
||||
|
||||
if not recent_logs:
|
||||
return mark_safe('<div style="color: #6c757d; font-style: italic; padding: 12px; background: #f8f9fa; border-radius: 4px;">No recent activity (last 7 days)</div>')
|
||||
|
||||
html = '<div style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 0; max-height: 300px; overflow-y: auto;">'
|
||||
|
||||
# Header
|
||||
html += '<div style="background: #e9ecef; padding: 8px 12px; border-bottom: 1px solid #dee2e6; font-weight: 600; font-size: 12px; color: #495057;">'
|
||||
html += f'📊 Access Log ({recent_logs.count()} entries, last 7 days)'
|
||||
html += '</div>'
|
||||
|
||||
# Activity entries
|
||||
for i, log in enumerate(recent_logs):
|
||||
bg_color = '#ffffff' if i % 2 == 0 else '#f8f9fa'
|
||||
local_time = localtime(log.timestamp)
|
||||
|
||||
# Status icon and color
|
||||
if log.action == 'Success':
|
||||
icon = '✅'
|
||||
status_color = '#28a745'
|
||||
elif log.action == 'Failed':
|
||||
icon = '❌'
|
||||
status_color = '#dc3545'
|
||||
else:
|
||||
icon = 'ℹ️'
|
||||
status_color = '#6c757d'
|
||||
|
||||
html += f'<div style="display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid #f1f3f4; background: {bg_color};">'
|
||||
|
||||
# Left side - user and link info
|
||||
html += '<div style="display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0;">'
|
||||
html += f'<span style="color: {status_color}; font-size: 14px;">{icon}</span>'
|
||||
html += '<div style="overflow: hidden;">'
|
||||
html += f'<div style="font-weight: 500; font-size: 12px; color: #495057; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{log.user}</div>'
|
||||
|
||||
if log.acl_link_id:
|
||||
link_short = log.acl_link_id[:12] + '...' if len(log.acl_link_id) > 12 else log.acl_link_id
|
||||
html += f'<div style="font-family: monospace; font-size: 10px; color: #6c757d;">{link_short}</div>'
|
||||
|
||||
html += '</div></div>'
|
||||
|
||||
# Right side - timestamp and status
|
||||
html += '<div style="text-align: right; flex-shrink: 0;">'
|
||||
html += f'<div style="font-size: 10px; color: #6c757d;">{local_time.strftime("%m-%d %H:%M")}</div>'
|
||||
html += f'<div style="font-size: 9px; color: {status_color}; font-weight: 500;">{log.action}</div>'
|
||||
html += '</div>'
|
||||
|
||||
html += '</div>'
|
||||
|
||||
# Footer with summary if there are more entries
|
||||
total_recent = AccessLog.objects.filter(
|
||||
server=obj.name,
|
||||
timestamp__gte=seven_days_ago
|
||||
).count()
|
||||
|
||||
if total_recent > 20:
|
||||
html += f'<div style="background: #e9ecef; padding: 6px 12px; font-size: 11px; color: #6c757d; text-align: center;">'
|
||||
html += f'Showing 20 of {total_recent} entries from last 7 days'
|
||||
html += '</div>'
|
||||
|
||||
html += '</div>'
|
||||
return mark_safe(html)
|
||||
|
||||
except Exception as e:
|
||||
return mark_safe(f'<div style="color: #dc3545; font-size: 12px;">Error loading activity: {e}</div>')
|
||||
|
||||
def get_model_perms(self, request):
|
||||
"""It disables display for sub-model"""
|
||||
return {}
|
||||
|
||||
class Media:
|
||||
js = ('admin/js/generate_link.js',)
|
||||
css = {'all': ('admin/css/vpn_admin.css',)}
|
||||
|
||||
admin.site.register(OutlineServer, OutlineServerAdmin)
|
||||
|
||||
176
vpn/templates/admin/vpn/outlineserver/add_form.html.backup
Normal file
176
vpn/templates/admin/vpn/outlineserver/add_form.html.backup
Normal file
@@ -0,0 +1,176 @@
|
||||
{% extends "admin/change_form.html" %}
|
||||
{% load i18n admin_urls static %}
|
||||
|
||||
{% block extrahead %}
|
||||
{{ block.super }}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add JSON Import tab
|
||||
const tabList = document.getElementById('jazzy-tabs');
|
||||
const tabContent = document.querySelector('.tab-content');
|
||||
|
||||
if (tabList && tabContent) {
|
||||
// Add new tab
|
||||
const newTab = document.createElement('li');
|
||||
newTab.className = 'nav-item';
|
||||
newTab.innerHTML = `
|
||||
<a class="nav-link" data-toggle="pill" role="tab" aria-controls="json-import-tab" aria-selected="false" href="#json-import-tab">
|
||||
📥 JSON Import
|
||||
</a>
|
||||
`;
|
||||
tabList.insertBefore(newTab, tabList.firstChild);
|
||||
|
||||
// Add tab content
|
||||
const newTabContent = document.createElement('div');
|
||||
newTabContent.id = 'json-import-tab';
|
||||
newTabContent.className = 'tab-pane fade';
|
||||
newTabContent.setAttribute('role', 'tabpanel');
|
||||
newTabContent.setAttribute('aria-labelledby', 'json-import-tab');
|
||||
newTabContent.innerHTML = `
|
||||
<div class="card">
|
||||
<div class="p-5 card-body">
|
||||
<h4 style="color: #007cba; margin-bottom: 1rem;">📥 Quick Import from JSON</h4>
|
||||
<p style="font-size: 0.875rem; color: #6c757d; margin-bottom: 1rem;">
|
||||
Paste the JSON configuration from your Outline server setup to automatically fill the fields:
|
||||
</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="import-json-config">JSON Configuration:</label>
|
||||
<textarea id="import-json-config" class="form-control" rows="8"
|
||||
placeholder='{
|
||||
"apiUrl": "https://your-server:port/path",
|
||||
"certSha256": "your-certificate-hash",
|
||||
"serverName": "My Outline Server",
|
||||
"clientHostname": "your-server.com",
|
||||
"clientPort": 1257,
|
||||
"comment": "Server description"
|
||||
}' style="font-family: 'Courier New', monospace; font-size: 0.875rem;"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="button" id="import-json-btn" class="btn btn-primary">
|
||||
Import Configuration
|
||||
</button>
|
||||
|
||||
<div style="margin-top: 1rem; padding: 0.75rem; background: #e7f3ff; border-left: 4px solid #007cba; border-radius: 4px;">
|
||||
<strong>Required fields:</strong>
|
||||
<ul style="margin: 0.5rem 0; padding-left: 20px;">
|
||||
<li><code>apiUrl</code> - Server management URL</li>
|
||||
<li><code>certSha256</code> - Certificate fingerprint</li>
|
||||
</ul>
|
||||
<strong>Optional fields:</strong>
|
||||
<ul style="margin: 0.5rem 0; padding-left: 20px;">
|
||||
<li><code>serverName</code> - Display name</li>
|
||||
<li><code>clientHostname</code> - Client hostname</li>
|
||||
<li><code>clientPort</code> - Client port</li>
|
||||
<li><code>comment</code> - Description</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
tabContent.insertBefore(newTabContent, tabContent.firstChild);
|
||||
|
||||
// Make first tab (JSON Import) active
|
||||
document.querySelector('#jazzy-tabs .nav-link').classList.remove('active');
|
||||
newTab.querySelector('.nav-link').classList.add('active');
|
||||
document.querySelector('.tab-pane.active').classList.remove('active', 'show');
|
||||
newTabContent.classList.add('active', 'show');
|
||||
}
|
||||
|
||||
// Import functionality
|
||||
function tryAutoFillFromJson() {
|
||||
const importJsonTextarea = document.getElementById('import-json-config');
|
||||
|
||||
try {
|
||||
const jsonText = importJsonTextarea.value.trim();
|
||||
if (!jsonText) {
|
||||
alert('Please enter JSON configuration');
|
||||
return;
|
||||
}
|
||||
|
||||
const config = JSON.parse(jsonText);
|
||||
|
||||
// Validate required fields
|
||||
if (!config.apiUrl || !config.certSha256) {
|
||||
alert('Invalid JSON format. Required fields: apiUrl, certSha256');
|
||||
return;
|
||||
}
|
||||
|
||||
// Parse apiUrl to extract components
|
||||
const url = new URL(config.apiUrl);
|
||||
|
||||
// Fill form fields
|
||||
const adminUrlField = document.getElementById('id_admin_url');
|
||||
const adminCertField = document.getElementById('id_admin_access_cert');
|
||||
const clientHostnameField = document.getElementById('id_client_hostname');
|
||||
const clientPortField = document.getElementById('id_client_port');
|
||||
const nameField = document.getElementById('id_name');
|
||||
const commentField = document.getElementById('id_comment');
|
||||
|
||||
if (adminUrlField) adminUrlField.value = config.apiUrl;
|
||||
if (adminCertField) adminCertField.value = config.certSha256;
|
||||
|
||||
// Use provided hostname or extract from URL
|
||||
const hostname = config.clientHostname || config.hostnameForAccessKeys || url.hostname;
|
||||
if (clientHostnameField) clientHostnameField.value = hostname;
|
||||
|
||||
// Use provided port or extract from various sources
|
||||
const clientPort = config.clientPort || config.portForNewAccessKeys || url.port || '1257';
|
||||
if (clientPortField) clientPortField.value = clientPort;
|
||||
|
||||
// Generate server name if not provided and field is empty
|
||||
if (nameField && !nameField.value) {
|
||||
const serverName = config.serverName || config.name || `Outline-${hostname}`;
|
||||
nameField.value = serverName;
|
||||
}
|
||||
|
||||
// Fill comment if provided and field exists
|
||||
if (commentField && config.comment) {
|
||||
commentField.value = config.comment;
|
||||
}
|
||||
|
||||
// Clear the JSON input
|
||||
importJsonTextarea.value = '';
|
||||
|
||||
// Show success message
|
||||
alert('✅ Configuration imported successfully! Review the fields and save.');
|
||||
|
||||
// Switch to Server Configuration tab
|
||||
const serverConfigTab = document.querySelector('a[href="#server-configuration-tab"]');
|
||||
if (serverConfigTab) {
|
||||
serverConfigTab.click();
|
||||
}
|
||||
|
||||
// Focus on name field
|
||||
if (nameField) {
|
||||
setTimeout(() => {
|
||||
nameField.focus();
|
||||
nameField.select();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
alert(`Invalid JSON format: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Wait a bit for DOM to be ready, then add event listeners
|
||||
setTimeout(() => {
|
||||
const importBtn = document.getElementById('import-json-btn');
|
||||
const importTextarea = document.getElementById('import-json-config');
|
||||
|
||||
if (importBtn) {
|
||||
importBtn.addEventListener('click', tryAutoFillFromJson);
|
||||
}
|
||||
|
||||
if (importTextarea) {
|
||||
importTextarea.addEventListener('paste', function(e) {
|
||||
setTimeout(() => {
|
||||
tryAutoFillFromJson();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
23
vpn/templates/admin/vpn/outlineserver/change_form.html
Normal file
23
vpn/templates/admin/vpn/outlineserver/change_form.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% extends "admin/change_form.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content_title %}
|
||||
<h1 class="h4 m-0 pr-3 mr-3 border-right">
|
||||
{% if original %}
|
||||
🔵 Outline Server: {{ original.name }}
|
||||
{% else %}
|
||||
🔵 Add Outline Server
|
||||
{% endif %}
|
||||
</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block admin_change_form_document_ready %}
|
||||
{{ block.super }}
|
||||
<script>
|
||||
// All JavaScript functionality is now handled by generate_link.js
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block field_sets %}
|
||||
{{ block.super }}
|
||||
{% endblock %}
|
||||
@@ -11,272 +11,81 @@
|
||||
</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ block.super }}
|
||||
|
||||
{% if original and servers_data %}
|
||||
<!-- User Access Management Panel -->
|
||||
<div class="user-access-management" style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin: 24px 0;">
|
||||
<h3 style="margin: 0 0 20px 0; color: #1f2937; font-size: 18px;">🔗 User Access Management</h3>
|
||||
|
||||
<!-- User Portal Links -->
|
||||
<div style="background: #eff6ff; border: 1px solid #dbeafe; border-radius: 6px; padding: 16px; margin-bottom: 20px;">
|
||||
<h4 style="margin: 0 0 12px 0; color: #1e40af; font-size: 14px;">📱 User Portal Access</h4>
|
||||
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
|
||||
<a href="{{ external_address }}/u/{{ original.hash }}" target="_blank"
|
||||
style="background: #4ade80; color: #000; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-weight: bold;">
|
||||
🌐 Open User Portal
|
||||
</a>
|
||||
<a href="{{ external_address }}/stat/{{ original.hash }}" target="_blank"
|
||||
style="background: #3b82f6; color: #fff; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-weight: bold;">
|
||||
📄 JSON API
|
||||
</a>
|
||||
<span style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-family: monospace; font-size: 12px; color: #6b7280;">
|
||||
Hash: {{ original.hash }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Servers & Links Management -->
|
||||
<div style="display: grid; gap: 20px;">
|
||||
{% for server_name, data in servers_data.items %}
|
||||
<div style="background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
||||
<h4 style="margin: 0; color: #1f2937; font-size: 16px;">
|
||||
{% if data.server.server_type == 'outline' %}🔵{% elif data.server.server_type == 'wireguard' %}🟢{% else %}⚪{% endif %}
|
||||
{{ server_name }}
|
||||
</h4>
|
||||
<div style="display: flex; gap: 8px; align-items: center;">
|
||||
{% if data.accessible %}
|
||||
<span style="background: #dcfce7; color: #166534; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
|
||||
✅ Online
|
||||
</span>
|
||||
{% else %}
|
||||
<span style="background: #fef2f2; color: #dc2626; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
|
||||
❌ Offline
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
<!-- Server Statistics -->
|
||||
{% for stat in data.statistics %}
|
||||
{% if not stat.acl_link_id %}
|
||||
<span style="background: #f3f4f6; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
|
||||
📊 {{ stat.total_connections }} uses
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if data.error %}
|
||||
<div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 12px; margin-bottom: 16px;">
|
||||
<div style="color: #dc2626; font-size: 14px;">⚠️ Server Error:</div>
|
||||
<div style="color: #7f1d1d; font-size: 12px; margin-top: 4px;">{{ data.error }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Server Status Info -->
|
||||
{% if data.status %}
|
||||
<div style="background: #f8fafc; border-radius: 6px; padding: 12px; margin-bottom: 16px;">
|
||||
<div style="font-weight: bold; color: #374151; margin-bottom: 8px;">Server Status:</div>
|
||||
<div style="display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px;">
|
||||
{% for key, value in data.status.items %}
|
||||
<span><strong>{{ key }}:</strong> {{ value }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Links for this server -->
|
||||
<div>
|
||||
<div style="font-weight: bold; color: #374151; margin-bottom: 12px;">
|
||||
Access Links ({{ data.links|length }}):
|
||||
</div>
|
||||
|
||||
{% if data.links %}
|
||||
<div style="display: grid; gap: 12px;">
|
||||
{% for link in data.links %}
|
||||
<div class="link-container" style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
||||
<div style="display: flex; gap: 12px; align-items: center; flex: 1;">
|
||||
<span style="font-family: monospace; font-size: 14px; color: #2563eb; font-weight: bold;">
|
||||
{{ link.link|slice:":16" }}{% if link.link|length > 16 %}...{% endif %}
|
||||
</span>
|
||||
<span style="color: #6b7280; font-size: 12px;">
|
||||
{{ link.comment|default:"No comment" }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Link Statistics -->
|
||||
{% for stat in data.statistics %}
|
||||
{% if stat.acl_link_id == link.link %}
|
||||
<div style="display: flex; gap: 8px; align-items: center;">
|
||||
<span style="background: #eff6ff; color: #1d4ed8; padding: 2px 6px; border-radius: 3px; font-size: 11px;">
|
||||
✨ {{ stat.total_connections }} total
|
||||
</span>
|
||||
<span style="background: #f0fdf4; color: #166534; padding: 2px 6px; border-radius: 3px; font-size: 11px;">
|
||||
📅 {{ stat.recent_connections }} recent
|
||||
</span>
|
||||
{% if stat.max_daily > 0 %}
|
||||
<span style="background: #fef3c7; color: #d97706; padding: 2px 6px; border-radius: 3px; font-size: 11px;">
|
||||
📈 {{ stat.max_daily }} peak
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<a href="{{ external_address }}/ss/{{ link.link }}#{{ server_name }}" target="_blank"
|
||||
style="background: #3b82f6; color: white; padding: 4px 8px; border-radius: 4px; text-decoration: none; font-size: 11px;">
|
||||
🔗 Test Link
|
||||
</a>
|
||||
|
||||
<button type="button" class="delete-link-btn"
|
||||
data-link-id="{{ link.id }}" data-link-name="{{ link.link|slice:":16" }}"
|
||||
style="background: #dc2626; color: white; padding: 4px 8px; border-radius: 4px; border: none; font-size: 11px; cursor: pointer;">
|
||||
🗑️ Delete
|
||||
</button>
|
||||
|
||||
{% if link.last_access_time %}
|
||||
<span style="background: #f3f4f6; padding: 4px 8px; border-radius: 4px; font-size: 11px; color: #6b7280;">
|
||||
Last used: {{ link.last_access_time|date:"Y-m-d H:i" }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span style="background: #fef2f2; color: #dc2626; padding: 4px 8px; border-radius: 4px; font-size: 11px;">
|
||||
Never used
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="color: #6b7280; font-style: italic; text-align: center; padding: 20px; background: #f9fafb; border-radius: 6px;">
|
||||
No access links configured for this server
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Add New Link Button -->
|
||||
<div style="margin-top: 16px; text-align: center;">
|
||||
<button type="button" class="add-link-btn"
|
||||
data-server-id="{{ data.server.id }}" data-server-name="{{ server_name }}"
|
||||
style="background: #10b981; color: white; padding: 8px 16px; border-radius: 6px; border: none; font-size: 12px; cursor: pointer; font-weight: bold;">
|
||||
➕ Add New Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Add Server Access -->
|
||||
{% if unassigned_servers %}
|
||||
<div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 16px; margin-top: 20px;">
|
||||
<h4 style="margin: 0 0 12px 0; color: #166534; font-size: 14px;">➕ Available Servers</h4>
|
||||
<div style="color: #166534; font-size: 12px; margin-bottom: 12px;">
|
||||
Click to instantly add access to these servers:
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
{% for server in unassigned_servers %}
|
||||
<button type="button" class="add-server-btn"
|
||||
data-server-id="{{ server.id }}" data-server-name="{{ server.name }}"
|
||||
style="background: #dcfce7; color: #166534; padding: 6px 12px; border-radius: 4px; font-size: 12px; border: 1px solid #bbf7d0; cursor: pointer; font-weight: bold;">
|
||||
{% if server.server_type == 'outline' %}🔵{% elif server.server_type == 'wireguard' %}🟢{% else %}⚪{% endif %}
|
||||
{{ server.name }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Recent Activity Panel -->
|
||||
{% if original and recent_logs %}
|
||||
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin: 24px 0;">
|
||||
<h3 style="margin: 0 0 20px 0; color: #1f2937; font-size: 18px;">📈 Recent Activity (Last 30 days)</h3>
|
||||
|
||||
<div style="background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid #e5e7eb;">
|
||||
<div style="background: #f9fafb; padding: 12px; border-bottom: 1px solid #e5e7eb; font-weight: bold; font-size: 14px;">
|
||||
Activity Log
|
||||
</div>
|
||||
|
||||
<div style="max-height: 400px; overflow-y: auto;">
|
||||
{% for log in recent_logs %}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #f3f4f6;">
|
||||
<div style="display: flex; gap: 12px; align-items: center;">
|
||||
{% if log.action == 'Success' %}
|
||||
<span style="color: #16a34a; font-size: 16px;">✅</span>
|
||||
{% elif log.action == 'Failed' %}
|
||||
<span style="color: #dc2626; font-size: 16px;">❌</span>
|
||||
{% else %}
|
||||
<span style="color: #6b7280; font-size: 16px;">ℹ️</span>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<div style="font-weight: 500; font-size: 14px;">{{ log.server }}</div>
|
||||
{% if log.acl_link_id %}
|
||||
<div style="font-family: monospace; font-size: 12px; color: #6b7280;">
|
||||
{{ log.acl_link_id|slice:":16" }}{% if log.acl_link_id|length > 16 %}...{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: right;">
|
||||
<div style="font-size: 12px; color: #6b7280;">
|
||||
{{ log.timestamp|date:"Y-m-d H:i:s" }}
|
||||
</div>
|
||||
<div style="font-size: 11px; color: #9ca3af;">
|
||||
{{ log.action }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{{ block.super }}
|
||||
<style>
|
||||
.btn-hover:hover {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-1px);
|
||||
.user-management-section {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
padding: 1rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.btn-loading {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
|
||||
.user-management-section h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: #495057;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.server-section {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 0.25rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-sm-custom {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 0.2rem;
|
||||
margin: 0 0.1rem;
|
||||
}
|
||||
|
||||
.readonly .user-management-section {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block admin_change_form_document_ready %}
|
||||
{{ block.super }}
|
||||
{% if original %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const userId = {{ original.id|default:"null" }};
|
||||
const userId = {{ original.id }};
|
||||
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
||||
|
||||
// Show success/error messages
|
||||
function showMessage(message, type = 'info') {
|
||||
const alertClass = type === 'error' ? 'alert-danger' : 'alert-success';
|
||||
const alertHtml = `
|
||||
<div class="alert ${alertClass} alert-dismissible fade show" role="alert" style="margin: 16px 0;">
|
||||
// Show success/error messages in Django admin style
|
||||
function showMessage(message, type = 'success') {
|
||||
const messageClass = type === 'error' ? 'error' : 'success';
|
||||
const messageHtml = `
|
||||
<div class="alert alert-${messageClass} alert-dismissible" style="margin: 1rem 0;">
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
<button type="button" class="close" aria-label="Close" onclick="this.parentElement.remove()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Find a good place to insert the message
|
||||
const target = document.querySelector('.user-access-management') || document.querySelector('.content');
|
||||
const target = document.querySelector('.card-body') || document.querySelector('.content');
|
||||
if (target) {
|
||||
target.insertAdjacentHTML('afterbegin', alertHtml);
|
||||
// Auto-remove after 5 seconds
|
||||
target.insertAdjacentHTML('afterbegin', messageHtml);
|
||||
setTimeout(() => {
|
||||
const alert = target.querySelector('.alert');
|
||||
if (alert) alert.remove();
|
||||
@@ -291,11 +100,11 @@
|
||||
const serverName = this.dataset.serverName;
|
||||
|
||||
const comment = prompt(`Add comment for new link on ${serverName} (optional):`, '');
|
||||
if (comment === null) return; // User cancelled
|
||||
if (comment === null) return;
|
||||
|
||||
const originalText = this.textContent;
|
||||
this.textContent = '⏳ Adding...';
|
||||
this.classList.add('btn-loading');
|
||||
this.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/admin/vpn/user/${userId}/add-link/`, {
|
||||
@@ -310,9 +119,8 @@
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showMessage(`✅ New link created successfully: ${data.link}`, 'success');
|
||||
// Refresh the page to show the new link
|
||||
window.location.reload();
|
||||
showMessage(`✅ New link created successfully: ${data.link}`);
|
||||
setTimeout(() => window.location.reload(), 1000);
|
||||
} else {
|
||||
showMessage(`❌ Error: ${data.error}`, 'error');
|
||||
}
|
||||
@@ -320,7 +128,7 @@
|
||||
showMessage(`❌ Network error: ${error.message}`, 'error');
|
||||
} finally {
|
||||
this.textContent = originalText;
|
||||
this.classList.remove('btn-loading');
|
||||
this.disabled = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -337,7 +145,7 @@
|
||||
|
||||
const originalText = this.textContent;
|
||||
this.textContent = '⏳ Deleting...';
|
||||
this.classList.add('btn-loading');
|
||||
this.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/admin/vpn/user/${userId}/delete-link/${linkId}/`, {
|
||||
@@ -351,9 +159,8 @@
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showMessage(`✅ Link ${linkName} deleted successfully`, 'success');
|
||||
// Remove the link element from DOM
|
||||
this.closest('.link-container')?.remove() || window.location.reload();
|
||||
showMessage(`✅ Link ${linkName} deleted successfully`);
|
||||
this.closest('.link-item')?.remove();
|
||||
} else {
|
||||
showMessage(`❌ Error: ${data.error}`, 'error');
|
||||
}
|
||||
@@ -361,7 +168,7 @@
|
||||
showMessage(`❌ Network error: ${error.message}`, 'error');
|
||||
} finally {
|
||||
this.textContent = originalText;
|
||||
this.classList.remove('btn-loading');
|
||||
this.disabled = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -378,7 +185,7 @@
|
||||
|
||||
const originalText = this.textContent;
|
||||
this.textContent = '⏳ Adding...';
|
||||
this.classList.add('btn-loading');
|
||||
this.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/admin/vpn/user/${userId}/add-server-access/`, {
|
||||
@@ -393,9 +200,8 @@
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showMessage(`✅ Access to ${serverName} added successfully`, 'success');
|
||||
// Refresh the page to show the new server section
|
||||
window.location.reload();
|
||||
showMessage(`✅ Access to ${serverName} added successfully`);
|
||||
setTimeout(() => window.location.reload(), 1000);
|
||||
} else {
|
||||
showMessage(`❌ Error: ${data.error}`, 'error');
|
||||
}
|
||||
@@ -403,10 +209,11 @@
|
||||
showMessage(`❌ Network error: ${error.message}`, 'error');
|
||||
} finally {
|
||||
this.textContent = originalText;
|
||||
this.classList.remove('btn-loading');
|
||||
this.disabled = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user