138 lines
4.6 KiB
HTML
138 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WiFi Settings</title>
|
|
<style>
|
|
.wifi-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.wifi-status {
|
|
background: #f0f0f0;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.status-connected {
|
|
color: #27ae60;
|
|
}
|
|
.status-disconnected {
|
|
color: #c0392b;
|
|
}
|
|
.danger-zone {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
border: 2px solid #e74c3c;
|
|
border-radius: 5px;
|
|
}
|
|
.danger-btn {
|
|
background: #e74c3c;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 15px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
}
|
|
.danger-btn:hover {
|
|
background: #c0392b;
|
|
}
|
|
.danger-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
.danger-section h4 {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wifi-container">
|
|
<h2>WiFi Settings</h2>
|
|
<div class="wifi-status" id="statusContainer">
|
|
<h3>Current Status</h3>
|
|
<div id="wifiStatus"></div>
|
|
</div>
|
|
|
|
<div class="danger-zone">
|
|
<div class="danger-section">
|
|
<h4>WiFi Controls</h4>
|
|
<button class="danger-btn" onclick="resetWiFi()">Reset WiFi Settings</button>
|
|
<button class="danger-btn" onclick="forgetNetwork()">Forget Current Network</button>
|
|
</div>
|
|
<div class="danger-section">
|
|
<h4>System Controls</h4>
|
|
<button class="danger-btn" onclick="factoryReset()">Factory Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function updateWiFiStatus() {
|
|
fetch('/api/wifi/status')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const statusHtml = `
|
|
<p class="status-${data.connected ? 'connected' : 'disconnected'}">
|
|
Status: ${data.connected ? 'Connected' : 'Disconnected'}
|
|
</p>
|
|
${data.connected ? `
|
|
<p>SSID: ${data.ssid}</p>
|
|
<p>IP Address: ${data.ip}</p>
|
|
<p>Signal Strength: ${data.rssi}dBm</p>
|
|
` : ''}
|
|
`;
|
|
document.getElementById('wifiStatus').innerHTML = statusHtml;
|
|
})
|
|
.catch(error => {
|
|
document.getElementById('wifiStatus').innerHTML =
|
|
`<p class="status-disconnected">Error: ${error}</p>`;
|
|
});
|
|
}
|
|
|
|
function resetWiFi() {
|
|
if(confirm('Are you sure you want to reset all WiFi settings?')) {
|
|
fetch('/api/wifi/reset', { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message);
|
|
updateWiFiStatus();
|
|
})
|
|
.catch(error => alert('Error: ' + error));
|
|
}
|
|
}
|
|
|
|
function forgetNetwork() {
|
|
if(confirm('Are you sure you want to forget the current network?')) {
|
|
fetch('/api/wifi/forget', { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message);
|
|
updateWiFiStatus();
|
|
})
|
|
.catch(error => alert('Error: ' + error));
|
|
}
|
|
}
|
|
|
|
function factoryReset() {
|
|
if(confirm('Are you sure you want to perform a factory reset? This will erase ALL settings and restart the device.')) {
|
|
// Using GET method to avoid HTTP method redefinition issues with WiFiManager
|
|
fetch('/api/system/factory-reset')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message || 'Factory reset initiated. Device will restart.');
|
|
setTimeout(() => {
|
|
window.location.href = '/';
|
|
}, 3000);
|
|
})
|
|
.catch(error => alert('Error: ' + error));
|
|
}
|
|
}
|
|
|
|
// Update status every 5 seconds
|
|
updateWiFiStatus();
|
|
setInterval(updateWiFiStatus, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|