Files
GopherGate/static/index.html
hobokenchicken d6280abad9
Some checks failed
CI / Check (push) Has been cancelled
CI / Clippy (push) Has been cancelled
CI / Formatting (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Release Build (push) Has been cancelled
fix(dashboard): handle stale sessions and prevent form GET submission
This commit updates the frontend API client to intercept authentication errors (like a stale session after a server restart) and immediately clear the local storage and show the login screen. It also adds an onsubmit handler to the login form in index.html to prevent the browser from defaulting to a GET request that puts credentials in the URL if JavaScript fails to initialize or encounters an error.
2026-03-07 00:15:20 +00:00

189 lines
8.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Proxy Gateway - Admin Dashboard</title>
<link rel="stylesheet" href="/css/dashboard.css?v=7">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="icon" href="img/logo-icon.png" type="image/png" sizes="any">
<link rel="apple-touch-icon" href="img/logo-icon.png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>
</head>
<body>
<!-- Login Screen -->
<div id="login-screen" class="login-container">
<div class="login-card">
<div class="login-header">
<img src="img/logo-full.png" alt="LLM Proxy Logo" class="login-logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
<i class="fas fa-robot login-logo-fallback" style="display: none;"></i>
<h1>LLM Proxy Gateway</h1>
<p class="login-subtitle">Admin Dashboard</p>
</div>
<form id="login-form" class="login-form" onsubmit="event.preventDefault();">
<div class="form-group">
<input type="text" id="username" name="username" placeholder=" " required>
<label for="username">
<i class="fas fa-user"></i> Username
</label>
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder=" " required>
<label for="password">
<i class="fas fa-lock"></i> Password
</label>
</div>
<div class="form-group">
<button type="submit" class="login-btn">
<i class="fas fa-sign-in-alt"></i> Sign In
</button>
</div>
<div class="login-footer">
<p>Default: <code>admin</code> / <code>admin</code> (change in Settings &gt; Security)</p>
</div>
</form>
<div id="login-error" class="error-message" style="display: none;">
<i class="fas fa-exclamation-circle"></i>
<span>Invalid credentials. Please try again.</span>
</div>
</div>
</div>
<!-- Main Dashboard -->
<div id="dashboard" class="dashboard-container" style="display: none;">
<!-- Sidebar -->
<nav class="sidebar">
<div class="sidebar-header">
<div class="logo">
<img src="img/logo-icon.png" alt="LLM Proxy" class="sidebar-logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-block';">
<i class="fas fa-shield-alt logo-fallback" style="display: none;"></i>
<span>LLM Proxy</span>
</div>
<button class="sidebar-toggle" id="sidebar-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="sidebar-menu">
<div class="menu-section">
<h3 class="menu-title">MAIN</h3>
<a href="#overview" class="menu-item active" data-page="overview" data-tooltip="Dashboard Overview">
<i class="fas fa-th-large"></i>
<span>Overview</span>
</a>
<a href="#analytics" class="menu-item" data-page="analytics" data-tooltip="Usage Analytics">
<i class="fas fa-chart-line"></i>
<span>Analytics</span>
</a>
<a href="#costs" class="menu-item" data-page="costs" data-tooltip="Cost Tracking">
<i class="fas fa-dollar-sign"></i>
<span>Cost Management</span>
</a>
</div>
<div class="menu-section">
<h3 class="menu-title">MANAGEMENT</h3>
<a href="#clients" class="menu-item" data-page="clients" data-tooltip="API Clients">
<i class="fas fa-users"></i>
<span>Client Management</span>
</a>
<a href="#providers" class="menu-item" data-page="providers" data-tooltip="Model Providers">
<i class="fas fa-server"></i>
<span>Providers</span>
</a>
<a href="#models" class="menu-item" data-page="models" data-tooltip="Manage Models">
<i class="fas fa-cube"></i>
<span>Models</span>
</a>
<a href="#monitoring" class="menu-item" data-page="monitoring" data-tooltip="Live Monitoring">
<i class="fas fa-heartbeat"></i>
<span>Real-time Monitoring</span>
</a>
</div>
<div class="menu-section">
<h3 class="menu-title">SYSTEM</h3>
<a href="#users" class="menu-item admin-only" data-page="users" data-tooltip="User Accounts">
<i class="fas fa-user-shield"></i>
<span>User Management</span>
</a>
<a href="#settings" class="menu-item admin-only" data-page="settings" data-tooltip="System Settings">
<i class="fas fa-cog"></i>
<span>Settings</span>
</a>
<a href="#logs" class="menu-item" data-page="logs" data-tooltip="System Logs">
<i class="fas fa-list-alt"></i>
<span>System Logs</span>
</a>
</div>
</div>
<div class="sidebar-footer">
<div class="user-info">
<div class="user-avatar">
<i class="fas fa-user-circle"></i>
</div>
<div class="user-details">
<span class="user-name">Loading...</span>
<span class="user-role">...</span>
</div>
</div>
<button class="logout-btn" id="logout-btn" title="Logout">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</nav>
<!-- Main Content -->
<main class="main-content">
<!-- Top Navigation -->
<header class="top-nav">
<div class="nav-left">
<h1 class="page-title" id="page-title">Dashboard Overview</h1>
</div>
<div class="nav-right">
<div class="nav-item" id="ws-status-nav" title="WebSocket Connection Status">
<div class="ws-dot"></div>
<span class="ws-text">Connecting...</span>
</div>
<div class="nav-item" title="Refresh Current Page">
<i class="fas fa-sync-alt" id="refresh-btn"></i>
</div>
<div class="nav-item">
<span id="current-time">Loading...</span>
</div>
</div>
</header>
<!-- Page Content -->
<div class="page-content" id="page-content">
<!-- Dynamic content container -->
</div>
<!-- Global Spinner -->
<div class="spinner-container">
<div class="spinner"></div>
</div>
</main>
</div>
<!-- Scripts (cache-busted with version query params) -->
<script src="/js/api.js?v=7"></script>
<script src="/js/auth.js?v=7"></script>
<script src="/js/dashboard.js?v=7"></script>
<script src="/js/websocket.js?v=7"></script>
<script src="/js/charts.js?v=7"></script>
<script src="/js/pages/overview.js?v=7"></script>
<script src="/js/pages/analytics.js?v=7"></script>
<script src="/js/pages/costs.js?v=7"></script>
<script src="/js/pages/clients.js?v=7"></script>
<script src="/js/pages/providers.js?v=7"></script>
<script src="/js/pages/models.js?v=7"></script>
<script src="/js/pages/monitoring.js?v=7"></script>
<script src="/js/pages/settings.js?v=7"></script>
<script src="/js/pages/logs.js?v=7"></script>
<script src="/js/pages/users.js?v=7"></script>
</body>
</html>