import { useEffect, useState } from 'hono/jsx' import { connectToWifi, getWifiStatus, scanWifiNetworks } from '../api' import { setCurrentView, setupMode } from '../state' import { Button, DashboardInstallCmd, ErrorBox, FormActions, FormField, FormInput, FormLabel, HeaderActions, InfoLabel, InfoRow, InfoValue, Main, MainContent, MainHeader, MainTitle, NetworkItem, NetworkListWrap, NetworkMeta, NetworkName, Section, SectionTitle, SignalBarSegment, SignalBarsWrap, Spinner, SpinnerWrap, SuccessCheck, WifiColumn, } from '../styles' import { theme } from '../themes' import type { WifiNetwork } from '../../shared/types' type WifiStep = 'status' | 'scanning' | 'networks' | 'password' | 'connecting' | 'success' function signalBars(signal: number) { const level = signal > 75 ? 4 : signal > 50 ? 3 : signal > 25 ? 2 : 1 return ( {[1, 2, 3, 4].map(i => ( ))} ) } function NetworkList({ networks, onSelect }: { networks: WifiNetwork[], onSelect: (net: WifiNetwork) => void }) { if (networks.length === 0) { return ( No networks found. Try scanning again. ) } return ( {networks.map(net => ( onSelect(net)}> {net.ssid} {net.security && net.security !== '' && net.security !== '--' && 🔒} {signalBars(net.signal)} ))} ) } export function SettingsPage({ render }: { render: () => void }) { const [step, setStep] = useState('status') const [connected, setConnected] = useState(false) const [currentSsid, setCurrentSsid] = useState('') const [currentIp, setCurrentIp] = useState('') const [networks, setNetworks] = useState([]) const [selectedNetwork, setSelectedNetwork] = useState(null) const [password, setPassword] = useState('') const [error, setError] = useState('') const [successSsid, setSuccessSsid] = useState('') const [successIp, setSuccessIp] = useState('') const [serverUrl, setServerUrl] = useState('') const fetchStatus = () => { getWifiStatus().then(status => { setConnected(status.connected) setCurrentSsid(status.ssid) setCurrentIp(status.ip) if (status.url) setServerUrl(status.url) }).catch(() => {}) } useEffect(() => { fetchStatus() if (setupMode) doScan() }, []) const goBack = () => { setCurrentView('dashboard') render() } const doScan = () => { setStep('scanning') setError('') scanWifiNetworks() .then(nets => { setNetworks(nets) setStep('networks') }) .catch(() => { setError('Failed to scan networks') setStep('networks') }) } const handleSelectNetwork = (net: WifiNetwork) => { setSelectedNetwork(net) setPassword('') setError('') const needsPassword = net.security && net.security !== '' && net.security !== '--' if (needsPassword) { setStep('password') } else { doConnect(net.ssid) } } const doConnect = (ssid: string, pw?: string) => { setStep('connecting') setError('') connectToWifi(ssid, pw) .then(result => { if (result.ok) { setSuccessSsid(result.ssid || ssid) setSuccessIp(result.ip || '') setStep('success') fetchStatus() } else { setError(result.error || 'Connection failed. Check your password and try again.') setStep('password') } }) .catch(() => { setError('Connection failed. Please try again.') setStep('password') }) } const handleConnect = (e: Event) => { e.preventDefault() if (!selectedNetwork) return doConnect(selectedNetwork.ssid, password || undefined) } const title = setupMode ? 'WiFi Setup' : 'Settings' return (
{title} {!setupMode && ( )}
WiFi {/* Status display */} {step === 'status' && (
Status {connected ? 'Connected' : 'Disconnected'} {connected && currentSsid && ( Network {currentSsid} )} {connected && currentIp && ( IP {currentIp} )}
)} {/* Scanning spinner */} {step === 'scanning' && (

Scanning for networks...

)} {/* Network list */} {step === 'networks' && ( {error && {error}} {!setupMode && } )} {/* Password entry */} {step === 'password' && ( Network
{selectedNetwork?.ssid}
Password setPassword((e.target as HTMLInputElement).value)} placeholder="Enter WiFi password" autofocus /> {error && {error}}
)} {/* Connecting spinner */} {step === 'connecting' && (

Connecting to {selectedNetwork?.ssid}...

)} {/* Success */} {step === 'success' && ( ✓

Connected!

Connected to {successSsid} {successIp && ({successIp})}

{setupMode ? (

Reconnect your device to {successSsid} and visit:

{serverUrl}
) : ( )}
)}
{!setupMode && (
Install CLI curl -fsSL {location.origin}/install | bash
)}
) }