109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import { Component, createSignal, onMount, Show } from 'solid-js';
|
|
import RulesList from './components/RulesList';
|
|
import CommandQueue from './components/CommandQueue';
|
|
import Login from './components/Login';
|
|
import ChangePassword from './components/ChangePassword';
|
|
import RequestLog from './components/RequestLog';
|
|
import { authStore } from './api/auth';
|
|
|
|
const App: Component = () => {
|
|
const [activeTab, setActiveTab] = createSignal<'rules' | 'commands' | 'logs'>('rules');
|
|
const [isAuthenticated, setIsAuthenticated] = createSignal(false);
|
|
const [showChangePassword, setShowChangePassword] = createSignal(false);
|
|
|
|
onMount(() => {
|
|
// Check if user is already authenticated
|
|
setIsAuthenticated(authStore.isAuthenticated());
|
|
});
|
|
|
|
const handleLoginSuccess = (token: string) => {
|
|
authStore.setToken(token);
|
|
setIsAuthenticated(true);
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
authStore.clearToken();
|
|
setIsAuthenticated(false);
|
|
};
|
|
|
|
return (
|
|
<Show when={isAuthenticated()} fallback={<Login onLoginSuccess={handleLoginSuccess} />}>
|
|
<div class="min-h-screen bg-gray-100">
|
|
<header class="bg-white shadow">
|
|
<div class="max-w-7xl mx-auto px-4 py-6 flex justify-between items-center">
|
|
<h1 class="text-3xl font-bold text-gray-900">
|
|
My Linspirer Control Panel
|
|
</h1>
|
|
<div class="flex space-x-3">
|
|
<button
|
|
onClick={() => setShowChangePassword(true)}
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
Change Password
|
|
</button>
|
|
<button
|
|
onClick={handleLogout}
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="bg-white border-b">
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
<div class="flex space-x-8">
|
|
<button
|
|
onClick={() => setActiveTab('rules')}
|
|
class={`py-4 px-1 border-b-2 font-medium text-sm ${
|
|
activeTab() === 'rules'
|
|
? 'border-indigo-500 text-indigo-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
}`}
|
|
>
|
|
Interception Rules
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('commands')}
|
|
class={`py-4 px-1 border-b-2 font-medium text-sm ${
|
|
activeTab() === 'commands'
|
|
? 'border-indigo-500 text-indigo-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
}`}
|
|
>
|
|
Command Queue
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('logs')}
|
|
class={`py-4 px-1 border-b-2 font-medium text-sm ${
|
|
activeTab() === 'logs'
|
|
? 'border-indigo-500 text-indigo-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
}`}
|
|
>
|
|
Request Log
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="max-w-7xl mx-auto px-4 py-6">
|
|
{activeTab() === 'rules' && <RulesList />}
|
|
{activeTab() === 'commands' && <CommandQueue />}
|
|
{activeTab() === 'logs' && <RequestLog />}
|
|
</main>
|
|
|
|
<Show when={showChangePassword()}>
|
|
<ChangePassword
|
|
onClose={() => setShowChangePassword(false)}
|
|
onLogout={handleLogout}
|
|
/>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
);
|
|
};
|
|
|
|
export default App;
|