160 lines
5.0 KiB
HTML
160 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" type="text/css" href="/css/nav.css">
|
|
<title>Wifi Access</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f2f2f2;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
h1 {
|
|
margin: 30px 0 20px;
|
|
text-align: center;
|
|
}
|
|
form {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
margin: auto;
|
|
max-width: 500px;
|
|
}
|
|
input[type="text"], input[type="password"], select {
|
|
padding: 12px 20px;
|
|
margin: 8px 0;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: #f2f2f2;
|
|
font-size: 16px;
|
|
width: 100%;
|
|
}
|
|
button {
|
|
background-color: #2d2dfa;
|
|
color: #fff;
|
|
padding: 12px 20px;
|
|
margin: 8px 0;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
width: 100%;
|
|
}
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
img{
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right:auto;
|
|
height: auto;
|
|
width: auto;
|
|
max-width: 150px;
|
|
filter: drop-shadow(2px 2px 2px #666666);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="navbar"></div>
|
|
|
|
<h1>Wifi Access</h1>
|
|
<form id="wifi-credentials-form">
|
|
<div style="text-align: center; margin-bottom: 15px;">
|
|
<span style="display: inline-block; width: 25px; height: 25px; border-radius: 50%; background-color: gray; margin-right: 10px; vertical-align: middle;"></span>
|
|
<label id="status-label">Status: Not Connected</label>
|
|
</div>
|
|
<label for="ssid">SSID:</label>
|
|
<select id="ssid" name="ssid" required>
|
|
<option value="">Select a network...</option>
|
|
</select>
|
|
<label for="password">Password:</label>
|
|
<input type="text" id="password" name="password" placeholder="Password" required>
|
|
<button type="button" onclick="postConnectToAP(event)">Connect</button>
|
|
</form>
|
|
|
|
<script>
|
|
|
|
fetch('/www/navbar.html')
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
document.getElementById('navbar').innerHTML = data;
|
|
});
|
|
|
|
const form = document.querySelector('#wifi-credentials-form');
|
|
window.onload = getWifiNetworks();
|
|
|
|
function onStart(){
|
|
getConnectionStatus();
|
|
getWifiNetworks();
|
|
}
|
|
|
|
async function getWifiNetworks() {
|
|
try {
|
|
const response = await fetch('/wifi/scans', { method: 'GET' });
|
|
const data = await response.json();
|
|
const ssidSelect = document.getElementById('ssid');
|
|
ssidSelect.innerHTML = '<option value="">Select a network...</option>';
|
|
|
|
if (data.networks && Array.isArray(data.networks)) {
|
|
data.networks.forEach(network => {
|
|
const option = document.createElement('option');
|
|
option.value = network.ssid;
|
|
option.textContent = `${network.ssid} (${network.rssi}dBm)`;
|
|
ssidSelect.appendChild(option);
|
|
});
|
|
} else {
|
|
console.error('Network data is not in expected format');
|
|
}
|
|
} catch (error) {
|
|
console.error('WiFi scan failed:', error);
|
|
}
|
|
}
|
|
|
|
async function postConnectToAP(event) {
|
|
event.preventDefault();
|
|
const connectButton = document.querySelector('button[onclick="postConnectToAP(event)"]');
|
|
connectButton.disabled = true;
|
|
|
|
try {
|
|
const params = new URLSearchParams({
|
|
ssid: document.getElementById('ssid').value,
|
|
pass: document.getElementById('password').value
|
|
});
|
|
|
|
await fetch(`/wifi/connect?${params.toString()}`, {
|
|
method: 'POST',
|
|
headers: { 'Accept': 'application/json' }
|
|
});
|
|
document.getElementById('status-label').textContent = `Status: Disconnected`;
|
|
const circle = document.querySelector('span');
|
|
circle.style.backgroundColor = 'gray';
|
|
|
|
} catch (error) {
|
|
console.error('Connection failed:', error);
|
|
} finally {
|
|
connectButton.disabled = false;
|
|
}
|
|
}
|
|
|
|
async function getConnectionStatus() {
|
|
try {
|
|
const data = await fetch('/wifi/status', { method: 'GET'}).then(res => res.json());
|
|
document.getElementById('status-label').textContent = `Status: ${data.status}`;
|
|
const circle = document.querySelector('span');
|
|
circle.style.backgroundColor = data.status === 'Connected' ? '#45a049' : 'gray';
|
|
} catch (error) {
|
|
console.error('Failed to get connection status:', error);
|
|
}
|
|
}
|
|
|
|
// Run getConnectionStatus every second
|
|
setInterval(getConnectionStatus, 10000);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|