phone/src/services/server/components/IndexPage.tsx
2025-11-17 10:54:37 -08:00

54 lines
1.7 KiB
TypeScript

import { Layout } from "./Layout";
export const IndexPage = () => (
<Layout title="WiFi Setup">
<h1>WiFi Configuration</h1>
<form method="post" action="/save">
<label>
SSID (Network Name)
<select name="ssid" id="ssid-select" required aria-busy="true">
<option value="">Loading networks...</option>
</select>
</label>
<label>
Password
<input type="password" name="password" placeholder="password123" required />
</label>
<button type="submit">Connect to Network</button>
</form>
<footer>
<small>
<a href="/logs">📋 View Service Logs</a>
</small>
</footer>
<script dangerouslySetInnerHTML={{__html: `
(async () => {
const select = document.getElementById('ssid-select');
try {
const res = await fetch('/api/networks');
const data = await res.json();
select.setAttribute('aria-busy', 'false');
if (data.networks && data.networks.length > 0) {
select.innerHTML = '<option value="">Select a network...</option>';
data.networks.forEach(ssid => {
const option = document.createElement('option');
option.value = ssid;
option.textContent = ssid;
select.appendChild(option);
});
} else {
select.innerHTML = '<option value="">No networks found</option>';
}
} catch (error) {
console.error('Error loading networks:', error);
select.setAttribute('aria-busy', 'false');
select.innerHTML = '<option value="">Error loading networks</option>';
}
})();
`}} />
</Layout>
);