Service Management

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, createContext, useContext } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { BrowserRouter as Router, Routes, Route, Navigate, Link, useNavigate } from "https://esm.sh/react-router-dom"; import * as jwt from "https://esm.sh/jsonwebtoken"; // Enhanced Network Status Context for global connectivity tracking const NetworkContext = createContext({ isOnline: navigator.onLine, networkError: null, connectionType: null }); // Enhanced Network Status Provider function NetworkProvider({ children }) { const [isOnline, setIsOnline] = useState(navigator.onLine); const [networkError, setNetworkError] = useState(null); const [connectionType, setConnectionType] = useState(null); useEffect(() => { // Check connection type const checkConnectionType = () => { if (navigator.connection) { setConnectionType(navigator.connection.effectiveType); } }; const handleOnline = () => { setIsOnline(true); setNetworkError(null); checkConnectionType(); }; const handleOffline = () => { setIsOnline(false); setNetworkError("No internet connection. Please check your network."); setConnectionType(null); }; // Initial connection type check checkConnectionType(); window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); // Optional: Add connection type change listener if (navigator.connection) { navigator.connection.addEventListener('change', checkConnectionType); } return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); if (navigator.connection) { navigator.connection.removeEventListener('change', checkConnectionType); } }; }, []); // Ping function to verify network connectivity const pingNetwork = async () => { try { const response = await fetch('/ping', { method: 'GET', cache: 'no-store' }); return response.ok; } catch (error) { return false; } }; return ( {children} ); } // Dummy authentication functions (replace with actual implementation) async function hashPassword(password: string): Promise { const encoder = new TextEncoder(); const data = encoder.encode(password); const hashBuffer = await crypto.subtle.digest('SHA-256', data); return Array.from(new Uint8Array(hashBuffer)) .map(b => b.toString(16).padStart(2, '0')) .join(''); } async function comparePassword(inputPassword: string, storedHash: string): Promise { const inputHash = await hashPassword(inputPassword); return inputHash === storedHash; } // Authentication Context const AuthContext = createContext(null); // Authentication Provider Component function AuthProvider({ children }) { const [user, setUser] = useState(null); const [loginError, setLoginError] = useState(null); const { isOnline, networkError, setNetworkError, connectionType, pingNetwork } = useContext(NetworkContext); useEffect(() => { const token = localStorage.getItem('token'); if (token) { try { const decoded = jwt.verify(token, 'SERVICE_MANAGEMENT_SECRET'); setUser(decoded); } catch (error) { localStorage.removeItem('token'); setLoginError('Session expired. Please log in again.'); } } }, []); const login = async (username, password) => { // Clear previous errors setLoginError(null); setNetworkError(null); // Enhanced network connectivity check const networkConnected = await pingNetwork(); if (!networkConnected) { setLoginError("Network connection is unstable. Please check your connection."); return false; } // Input validation if (!username || !password) { setLoginError('Username and password are required'); return false; } try { const fullUrl = window.location.origin + '/login'; const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout const response = await fetch(fullUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ username, password }), signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { try { const errorData = await response.json(); setLoginError(errorData.error || 'Login failed. Please check your credentials.'); } catch { setLoginError(`Network error: ${response.statusText}`); } return false; } const data = await response.json(); localStorage.setItem('token', data.token); const decoded = jwt.verify(data.token, 'SERVICE_MANAGEMENT_SECRET'); setUser(decoded); return true; } catch (error) { console.error('Login Error:', error); if (error.name === 'AbortError') { setLoginError('Request timed out. Please check your connection.'); } else if (error instanceof TypeError) { if (error.message.includes('Failed to fetch')) { setNetworkError('Unable to connect to server. Please check your network connection.'); setLoginError('Network unavailable'); } else { setLoginError('Unexpected network error. Please try again.'); } } else { setLoginError('An unexpected error occurred. Please try again.'); } return false; } }; const logout = () => { localStorage.removeItem('token'); setUser(null); setLoginError(null); }; return ( {children} ); } // Login Page Component with Enhanced Network Status Indicator function LoginPage() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const { login, loginError, connectionType } = useContext(AuthContext); const { isOnline, networkError } = useContext(NetworkContext); const navigate = useNavigate(); const handleSubmit = async (e) => { e.preventDefault(); const success = await login(username, password); if (success) { navigate('/dashboard'); } }; return (

{(networkError || loginError) && (

{networkError || loginError}

)}

{isOnline ? 'Online' : 'Offline'} {connectionType && ( Connection: {connectionType} )}

ServiceManagement

); } // Placeholder components for routing function Dashboard() { return

Dashboard Content

; } function PrivateRoute({ children }) { const { user } = useContext(AuthContext); return user ? children : ; } // Wrap App with NetworkProvider function App() { return ( } /> } /> ); } // Client-side rendering function function client() { createRoot(document.getElementById("root")).render(); } // Trigger client-side rendering if in browser environment if (typeof document !== "undefined") { client(); } // Server handler implementation export default async function server(request: Request): Promise { const { pathname } = new URL(request.url); // New ping endpoint for network connectivity check if (pathname === '/ping') { return new Response('OK', { status: 200, headers: { 'Content-Type': 'text/plain', 'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate' } }); } // Handle login endpoint if (pathname === '/login' && request.method === 'POST') { try { const { username, password } = await request.json(); // Dummy authentication (replace with actual user verification) if (username === 'admin' && password === 'password') { const token = jwt.sign( { username, role: 'admin' }, 'SERVICE_MANAGEMENT_SECRET', { expiresIn: '1h' } ); return new Response(JSON.stringify({ token }), { headers: { 'Content-Type': 'application/json' } }); } else { return new Response( JSON.stringify({ error: 'Invalid credentials' }), { status: 401, headers: { 'Content-Type': 'application/json' } } ); } } catch (error) { return new Response( JSON.stringify({ error: 'Authentication failed' }), { status: 500, headers: { 'Content-Type': 'application/json' } } ); } } // Serve initial HTML for all routes return new Response(` Service Management

`, { headers: { 'Content-Type': 'text/html' } }); }

versatileAmethystMole

Version 32