eessppeelllloo/esp8266_deauther
1
0
Fork 0
mirror of https://github.com/SpacehuhnTech/esp8266_deauther.git synced 2025-12-12 01:29:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'web_interface/refactor'

Browse Source
This commit is contained in:
Spacehuhn
2020-05-07 23:25:37 +02:00
parent d457085bf3 148552a10a
commit 50458606a8
5 changed files with 414 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web_interface/js/attack.js
View File

@@ -1,40 +1,33 @@
var attackJSON = [[false,0,0],[false,0,0],[false,0,0]]; const attackJSON = [
[false, 0, 0],
[false, 0, 0],
[false, 0, 0]
];
function draw(){ const draw = () => {
getE("deauth").innerHTML = attackJSON[0][0] ? lang("stop") : lang("start"); getE("deauth").innerHTML = lang(attackJSON[0][0] ? "stop" : "start");
getE("beacon").innerHTML = attackJSON[1][0] ? lang("stop") : lang("start"); getE("beacon").innerHTML = lang(attackJSON[1][0] ? "stop" : "start");
getE("probe").innerHTML = attackJSON[2][0] ? lang("stop") : lang("start"); getE("probe").innerHTML = lang(attackJSON[2][0] ? "stop" : "start");
getE("deauthTargets").innerHTML = esc(attackJSON[0][1]+""); getE("deauthTargets").innerHTML = esc(`${attackJSON[0][1]}`);
getE("beaconTargets").innerHTML = esc(attackJSON[1][1]+""); getE("beaconTargets").innerHTML = esc(`${attackJSON[1][1]}`);
getE("probeTargets").innerHTML = esc(attackJSON[2][1]+""); getE("probeTargets").innerHTML = esc(`${attackJSON[2][1]}`);
getE("deauthPkts").innerHTML = esc(attackJSON[0][2] + "/" + attackJSON[0][3]); getE("deauthPkts").innerHTML = esc(`${attackJSON[0][2]}/${attackJSON[0][3]}`);
getE("beaconPkts").innerHTML = esc(attackJSON[1][2] + "/" + attackJSON[1][3]); getE("beaconPkts").innerHTML = esc(`${attackJSON[1][2]}/${attackJSON[1][3]}`);
getE("probePkts").innerHTML = esc(attackJSON[2][2] + "/" + attackJSON[2][3]); getE("probePkts").innerHTML = esc(`${attackJSON[2][2]}/${attackJSON[2][3]}`);
getE("allpkts").innerHTML = esc(attackJSON[3]+""); getE("allpkts").innerHTML = esc(`${attackJSON[3]}`);
} }
function start(mode){ const start = (mode) => {
switch(mode){ attackJSON[mode][0] = !attackJSON[mode][0];
case 0:
attackJSON[0][0] = !attackJSON[0][0]; getFile(`run?cmd=attack${attackJSON[0][0] ? " -d":""}${attackJSON[1][0] ? " -b":""}${attackJSON[2][0] ? " -p":""}`, draw);
break;
case 1:
attackJSON[1][0] = !attackJSON[1][0];
break;
case 2:
attackJSON[2][0] = !attackJSON[2][0];
break;
}
getFile("run?cmd=attack"+(attackJSON[0][0] ? " -d":"")+(attackJSON[1][0] ? " -b":"")+(attackJSON[2][0] ? " -p":""),function(){
draw();
});
} }
function load(){ const load = () => {
getFile("attack.json",function(response){ getFile("attack.json", (response) => {
attackJSON = JSON.parse(response); attackJSON = JSON.parse(response);
draw(); draw();
}); });

382
web_interface/js/scan.js
View File

@@ -1,129 +1,166 @@
var nameJson = []; let nameJson = [];
var scanJson = {aps:[],stations:[]}; let scanJson = {
aps: [],
stations: []
};
function drawScan(){ const drawScan = () => {
var html; let html;
var selected;
var width;
var color;
var macVendor;
// Access Points // Access Points
getE("apNum").innerHTML = scanJson.aps.length; getE("apNum").innerHTML = scanJson.aps.length;
html = "<tr>" html = `
+ "<th class='id'></th>" <tr>
+ "<th class='ssid'>SSID</th>" <th class="id"></th>
+ "<th class='name'>Name</th>" <th class="ssid">SSID</th>
+ "<th class='ch'>Ch</th>" <th class="name">Name</th>
+ "<th class='rssi'>RSSI</th>" <th class="ch">Ch</th>
+ "<th class='enc'>Enc</th>" <th class="rssi">RSSI</th>
+ "<th class='lock'></th>" <th class="enc">Enc</th>
+ "<th class='mac'>MAC</th>" <th class="lock"></th>
+ "<th class='vendor'>Vendor</th>" <th class="mac">MAC</th>
+ "<th class='selectColumn'></th>" <th class="vendor">Vendor</th>
+ "<th class='remove'></th>" <th class="selectColumn"></th>
+ "</tr>"; <th class="remove"></th>
</tr>
`
for(var i=0;i<scanJson.aps.length;i++){ scanJson.aps.forEach((item, index) => {
selected = scanJson.aps[i][scanJson.aps[i].length-1]; const selected = item[item.length - 1];
width = parseInt(scanJson.aps[i][3]) + 130; const width = parseInt(item[3]) + 130;
let color = '';
if(width < 50) color = "meter_red"; if (width < 50) color = "meter_red";
else if(width < 70) color = "meter_orange"; else if (width < 70) color = "meter_orange";
else color = "meter_green"; else color = "meter_green";
html += (selected ? "<tr class='selected'>" : "<tr>") html += `
+ "<td class='id'>"+i+"</td>" // ID <tr ${selected ? "class='selected'>" : ""}>
+ "<td class='ssid'>"+esc(scanJson.aps[i][0])+"</td>" // SSID <td class="id">${index}</td>
+ "<td class='name'>"+(scanJson.aps[i][1].length > 0 ? esc(scanJson.aps[i][1]) : "<button onclick='add(0,"+i+")'>"+lang("add")+"</button>")+"</td>" // Name <td class="ssid">${esc(item[0])}</td>
+ "<td class='ch'>"+esc(scanJson.aps[i][2])+"</td>" // Ch <td class="name">
// RSSI ${item[1].length > 0 ? esc(item[1]) : `<button onclick="add(0, ${i})">lang("add")</button>`}
+ "<td class='rssi'><div class='meter_background'> <div class='meter_forground "+color+"' style='width: "+width+"%;'><div class='meter_value'>" + scanJson.aps[i][3] + "</div></div> </div></td>" </td>
+ "<td class='enc'>"+esc(scanJson.aps[i][4])+"</td>" // ENC <td class="ch">${esc(item[2])}</td>"
+ "<td class='lock'>"+(scanJson.aps[i][4] == "-" ? "":"&#x1f512;")+"</td>" // Lock Emoji <td class="rssi">
+ "<td class='mac'>"+esc(scanJson.aps[i][5])+"</td>" // MAC <div class="meter_background">
+ "<td class='vendor'>"+esc(scanJson.aps[i][6])+"</td>" // Vendor <div class="meter_forground ${color}" style="width: ${width}%;">
// Select <div class="meter_value">
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(0,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>" item[3]
+ "<td class='remove'><button class='red' onclick='remove(0,"+i+")'>X</button></td>" // Remove </div>
+ "</tr>"; </div>
} </div>
</td>
<td class="enc">${esc(item[4])}</td>
<td class="lock">${item[4] === "-" ? "" : "&#x1f512;"}</td>
<td class="mac">${esc(item[5])}</td>
<td class="vendor">${esc(item[6])}</td>
<td class="selectColumn">
<label class="checkBoxContainer">
<input type="checkbox ${selected ? "checked" : ""}" onclick="selectRow(0, ${i}, ${selected})">
<span class="checkmark"></span>
</label>
</td>
<td class="remove">
<button class='red' onclick="remove(0, ${i})">X</button>
</td>
</tr>
`;
})
getE("apTable").innerHTML = html; getE("apTable").innerHTML = html;
// Stations // Stations
getE("stNum").innerHTML = scanJson.stations.length; getE("stNum").innerHTML = scanJson.stations.length;
html = "<tr>"
+ "<th class='id'></th>"
+ "<th class='vendor'>Vendor</th>"
+ "<th class='mac'>MAC</th>"
+ "<th class='ch'>Ch</th>"
+ "<th class='name'>Name</th>"
+ "<th class='pkts'>Pkts</th>"
+ "<th class='ap'>AP</th>"
+ "<th class='lastseen'>Last seen</th>"
+ "<th class='selectColumn'></th>"
+ "<th class='remove'></th>"
+ "</tr>";
for(var i=0;i<scanJson.stations.length;i++){ html = `
selected = scanJson.stations[i][scanJson.stations[i].length-1]; <tr>
ap = ""; <th class="id"></th>
if(scanJson.stations[i][5] >= 0) <th class="vendor">Vendor</th>
ap = esc(scanJson.aps[scanJson.stations[i][5]][0]); <th class="mac">MAC</th>
<th class="ch">Ch</th>
<th class="name">Name</th>
<th class="pkts">Pkts</th>
<th class="ap">AP</th>
<th class="lastseen">Last seen</th>
<th class="selectColumn"></th>
<th class="remove"></th>
</tr>
`;
html += (selected ? "<tr class='selected'>" : "<tr>") scanJson.stations.forEach((item, index) => {
+ "<td class='id'>"+i+"</td>" // ID const selected = item[item.length - 1];
+ "<td class='vendor'>"+esc(scanJson.stations[i][3])+"</td>" // Vendor const ap = item[5] >= 0 ? esc(scanJson.aps[item[5]][0]) : "";
+ "<td class='mac'>"+esc(scanJson.stations[i][0])+"</td>" // MAC
+ "<td class='ch'>"+esc(scanJson.stations[i][1])+"</td>" // Ch html += `
+ "<td class='name'>"+(scanJson.stations[i][2].length > 0 ? esc(scanJson.stations[i][2]) : "<button onclick='add(1,"+i+")'>"+lang("add")+"</button>")+"</td>" // Name <tr ${selected ? "class='selected'>" : ""}>
+ "<td class='pkts'>"+esc(scanJson.stations[i][4])+"</td>" // Pkts <td class="id">${i}</td>
+ "<td class='ap'>"+ap+"</td>" // AP <td class="vendor">${esc(item[3])}</td>
+ "<td class='lastseen'>"+esc(scanJson.stations[i][6])+"</td>" // Last seen <td class="mac">${esc(item[0])}</td>
// Select <td class="ch">${esc(item[1])}</td>
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(1,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>" <td class="name">
+ "<td class='remove'><button class='red' onclick='remove(1,"+i+")'>X</button></td>" // Remove ${item[2].length > 0 ? esc(item[2]) : `<button onclick="add(1, ${index})">lang("add")</button>`}
+ "</tr>"; </td>
} <td class="pkts">${esc(item[4])}</td>
<td class="ap">${ap}</td>
<td class="lastseen">${esc(item[6])}</td>
<td class="selectColumn">
<label class="checkBoxContainer">
<input type="checkbox" ${selected ? "checked" : ""} onclick="selectRow(1, ${index}, ${selected})">
<span class="checkmark"></span>
</label>
</td>
<td class="remove">
<button class="red" onclick="remove(1, ${index})">X</button>
</td>
</tr>
`;
})
getE("stTable").innerHTML = html; getE("stTable").innerHTML = html;
} }
function drawNames(){ const drawNames = () => {
var html;
var selected;
// Names
getE("nNum").innerHTML = nameJson.length; getE("nNum").innerHTML = nameJson.length;
html = "<tr>" let html = `
+ "<th class='id'></th>" <tr>
+ "<th class='mac'>MAC</th>" <th class="id"></th>
+ "<th class='vendor'>Vendor</th>" <th class="mac">MAC</th>
+ "<th class='name'>Name</th>" <th class="vendor">Vendor</th>
+ "<th class='ap'>AP-BSSID</th>" <th class="name">Name</th>
+ "<th class='ch'>Ch</th>" <th class="ap">AP-BSSID</th>
+ "<th class='save'></th>" <th class="ch">Ch</th>
+ "<th class='selectColumn'></th>" <th class="save"></th>
+ "<th class='remove'></th>" <th class="selectColumn"></th>
+ "</tr>"; <th class="remove"></th>
</tr>`
for(var i=0;i<nameJson.length;i++){ nameJson.forEach((item, index) => {
selected = nameJson[i][nameJson[i].length-1]; const selected = item[item.length - 1];
html += (selected ? "<tr class='selected'>" : "<tr>") html += `
+ "<td class='id'>"+i+"</td>" // ID <tr ${selected ? "class='selected'>" : ""}>
+ "<td class='mac' contentEditable='true' id='name_"+i+"_mac'>"+esc(nameJson[i][0])+"</td>" // MAC <td class="id">${index}</td>
+ "<td class='vendor'>"+esc(nameJson[i][1])+"</td>" // Vendor <td class="mac" contentEditable="true" id="name_${index}_mac">${esc(item[0])}</td>
+ "<td class='name' contentEditable='true' id='name_"+i+"_name'>"+esc(nameJson[i][2].substring(0,16))+"</td>" // Name <td class="vendor">${esc(item[1])}</td>
+ "<td class='ap' contentEditable='true' id='name_"+i+"_apbssid'>"+esc(nameJson[i][3])+"</td>" // AP-BSSID <td class="name" contentEditable="true" id="name_${index}_name">${esc(item[2].substring(0,16))}</td>
+ "<td class='ch' contentEditable='true' id='name_"+i+"_ch'>"+esc(nameJson[i][4])+"</td>" // Ch <td class="ap" contentEditable="true" id="name_${index}_apbssid">${esc(item[3])}</td>
+ "<td class='save'><button class='green' onclick='save("+i+")'>"+lang("save")+"</button></td>" // Save <td class="ch" contentEditable="true" id="name_${index}_ch">${esc(item[4])}</td>
// Select <td class="save">
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(2,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>" <button class="green" onclick="save(${index})">${lang("save")}</button>
+ "<td class='remove'><button class='red' onclick='remove(2,"+i+")'>X</button></td>" // Remove </td>
+ "</tr>"; <td class="selectColumn">
} <label class="checkBoxContainer">
<input type="checkbox" ${selected ? "checked" : ""} onclick="selectRow(2, ${index}, ${selected})">
<span class="checkmark"></span>
</label>
</td>
<td class="remove">
<button class="red" onclick="remove(2, ${index})">X</button>
</td>
</tr>
`;
})
getE("nTable").innerHTML = html; getE("nTable").innerHTML = html;
} }
@@ -166,126 +203,137 @@ function buttonFunc(){
function load(){ function load(){
// APs and Stations // APs and Stations
getFile("run?cmd=save scan", function(){ getFile("run?cmd=save scan", () =>
getFile("scan.json",function(res){ getFile("scan.json", res => {
scanJson = JSON.parse(res); scanJson = JSON.parse(res);
drawScan(); drawScan();
}); })
}); );
// Names // Names
getFile("run?cmd=save names", function(){ getFile("run?cmd=save names", () =>
getFile("names.json",function(res){ getFile("names.json", res => {
nameJson = JSON.parse(res); nameJson = JSON.parse(res);
drawNames(); drawNames();
}); })
}); );
} }
function selectRow(type,id,selected){ const selectRow = (type, id, selected) => {
switch(type){ if (type === 0 || type === 1) {
scanJson.aps[id][7] = selected;
drawScan();
} else if (type === 2) {
save(id);
nameJson[id][5] = selected;
drawNames();
}
switch(type) {
case 0: case 0:
scanJson.aps[id][7] = selected; return getFile(`run?cmd=${selected ? "" : "de" } select ap ${id}`);
drawScan();
getFile("run?cmd="+(selected ? "":"de")+"select ap "+id);
break;
case 1: case 1:
scanJson.stations[id][7] = selected; return getFile(`run?cmd=${selected ? "" : "de" } select station ${id}`);
drawScan();
getFile("run?cmd="+(selected ? "":"de")+"select station "+id);
break;
case 2: case 2:
save(id); return getFile(`run?cmd=${selected ? "" : "de" } select name ${id}`);
nameJson[id][5] = selected;
drawNames();
getFile("run?cmd="+(selected ? "":"de")+"select name "+id);
} }
} }
function remove(type,id){ const remove = (type, id) => {
switch(type){ if (type === 0 || type === 1) {
scanJson.aps.splice(id, 1);
drawScan();
} else if (type === 2) {
nameJson.splice(id, 1);
drawNames();
}
switch(type) {
case 0: case 0:
scanJson.aps.splice(id, 1); getFile(`run?cmd=remove ap ${id}`);
drawScan();
getFile("run?cmd=remove ap "+id);
break; break;
case 1: case 1:
scanJson.stations.splice(id, 1); getFile(`run?cmd=remove station ${id}`);
drawScan();
getFile("run?cmd=remove station "+id);
break; break;
case 2: case 2:
nameJson.splice(id, 1); getFile(`run?cmd=remove name ${id}`);
drawNames();
getFile("run?cmd=remove name "+id);
} }
} }
function save(id){ const save = id => {
var mac = getE("name_"+id+"_mac").innerHTML.replace("<br>",""); const mac = getE(`name_${id}_mac`).innerHTML.replace("<br>" ,"");
var name = getE("name_"+id+"_name").innerHTML.replace("<br>",""); const name = getE(`name_${id}_name`).innerHTML.replace("<br>", "");
var apbssid = getE("name_"+id+"_apbssid").innerHTML.replace("<br>",""); const apbssid = getE(`name_${id}_apbssid`).innerHTML.replace("<br>", "");
var ch = getE("name_"+id+"_ch").innerHTML.replace("<br>",""); const ch = getE(`name_${id}_ch`).innerHTML.replace("<br>", "");
var changed = mac != nameJson[id][0] || name != nameJson[id][2] || apbssid != nameJson[id][3] || ch != nameJson[id][4]; const changed = mac !== nameJson[id][0] || name !== nameJson[id][2] || apbssid !== nameJson[id][3] || ch !== nameJson[id][4];
if(changed){
if (changed) {
nameJson[id][0] = mac; nameJson[id][0] = mac;
nameJson[id][2] = name; nameJson[id][2] = name;
nameJson[id][3] = apbssid; nameJson[id][3] = apbssid;
nameJson[id][4] = ch; nameJson[id][4] = ch;
if(nameJson[id][0].length != 17){ if (nameJson[id][0].length !== 17) {
showMessage("ERROR: MAC invalid"); return showMessage("ERROR: MAC invalid");
return;
} }
getFile("run?cmd=replace name "+id+" -n \""+nameJson[id][2]+"\" -m \""+nameJson[id][0]+"\" -ch "+nameJson[id][4]+" -b \""+nameJson[id][3]+"\" "+(nameJson[id][5] ? "-s" : "")); getFile(`run?cmd=replace name ${id} -n "${nameJson[id][2]}" -m "${nameJson[id][0]}" -ch ${nameJson[id][4]} -b "${nameJson[id][3]}" ${nameJson[id][5] ? "-s" : ""}`);
drawNames(); drawNames();
} }
} }
function add(type,id){ const add = (type, id) => {
if(nameJson.length >= 25){ if(nameJson.length >= 25){
showMessage("Device Name List is full!"); return showMessage("Device Name List is full!");
return;
} }
switch(type){ switch(type) {
case 0: case 0:
getFile("run?cmd=add name \""+scanJson.aps[id][0]+"\" -ap "+id); getFile(`run?cmd=add name "${scanJson.aps[id][0]}" -ap ${id}`);
scanJson.aps[id][1] = scanJson.aps[id][0]; // name = SSID scanJson.aps[id][1] = scanJson.aps[id][0]; // name = SSID
nameJson.push([scanJson.aps[id][5],scanJson.aps[id][6],scanJson.aps[id][0],"",scanJson.aps[id][2],false]); nameJson.push([scanJson.aps[id][5], scanJson.aps[id][6], scanJson.aps[id][0], "", scanJson.aps[id][2], false]);
drawScan(); drawScan();
break; break;
case 1: case 1:
getFile("run?cmd=add name \""+scanJson.stations[id][0]+"\" station "+id); getFile(`run?cmd=add name "${scanJson.stations[id][0]}" station ${id}`);
scanJson.stations[id][2] = "device_"+nameJson.length; // name = device_ scanJson.stations[id][2] = `device_${nameJson.length}`; // name = device_
nameJson.push([scanJson.stations[id][0],scanJson.stations[id][3],"device_"+nameJson.length,scanJson.aps[scanJson.stations[id][5]][5],scanJson.stations[id][1],false]); nameJson.push([scanJson.stations[id][0], scanJson.stations[id][3], `device_${nameJson.length}`, scanJson.aps[scanJson.stations[id][5]][5], scanJson.stations[id][1], false]);
drawScan(); drawScan();
break; break;
case 2: case 2:
getFile("run?cmd=add name device_"+nameJson.length+" -m 00:00:00:00:00:00 -ch 1"); getFile(`run?cmd=add name device_${nameJson.length} -m 00:00:00:00:00:00 -ch 1`);
nameJson.push(["00:00:00:00:00:00","","device_"+nameJson.length,"",1,false]); nameJson.push(["00:00:00:00:00:00", "", `device_${nameJson.length}`, "", 1, false]);
drawNames(); drawNames();
} }
drawNames(); drawNames();
} }
function selectAll(type,select){ const selectAll = (type, select) => {
switch(type){ switch(type) {
case 0: case 0:
getFile("run?cmd="+(select ? "":"de")+"select aps"); getFile(`run?cmd=${select ? "" : "de"}select aps`);
for(var i=0;i<scanJson.aps.length;i++) scanJson.aps[i][7] = select; scanJson.aps.forEach(item => {
item[7] = select;
return item
})
drawScan(); drawScan();
break; break;
case 1: case 1:
getFile("run?cmd="+(select ? "":"de")+"select stations"); getFile(`run?cmd=${select ? "" : "de"}select stations`);
for(var i=0;i<scanJson.stations.length;i++) scanJson.stations[i][7] = select; scanJson.stations.forEach(item => {
item[7] = select;
return item
})
drawScan(); drawScan();
break; break;
case 2: case 2:
getFile("run?cmd="+(select ? "":"de")+"select names"); getFile(`run?cmd=${select ? "" : "de"}select names`);
for(var i=0;i<nameJson.length;i++) nameJson[i][5] = select; nameJson.stations.forEach(item => {
item[5] = select;
return item
})
drawNames(); drawNames();
} }
} }

24
web_interface/js/settings.js
View File

@@ -1,16 +1,18 @@
var settingsJson = {}; let settingsJson = {};
function load(){ const load = () => {
getFile("settings.json",function(res){ getFile("settings.json", res => {
settingsJson = JSON.parse(res); settingsJson = JSON.parse(res);
draw(); draw();
}); });
} }
function draw(){ const draw = () => {
var html = ""; let html = "";
for (var key in settingsJson) { for (var key in settingsJson) {
key = esc(key); key = esc(key);
if (settingsJson.hasOwnProperty(key)) { if (settingsJson.hasOwnProperty(key)) {
html += "<div class='row'>" html += "<div class='row'>"
+ "<div class='col-6'>" + "<div class='col-6'>"
@@ -39,13 +41,11 @@ function draw(){
getE("settingsList").innerHTML = html; getE("settingsList").innerHTML = html;
} }
function save(key, value){ const save = (key, value) => {
if(key){ if (key) {
settingsJson[key] = value; settingsJson[key] = value;
getFile("run?cmd=set "+key+" \""+value+"\""); getFile(`run?cmd=set ${key} "${value}"`);
}else{ } else {
getFile("run?cmd=save settings",function(res){ getFile("run?cmd=save settings", load);
load();
});
} }
} }

125
web_interface/js/site.js
View File

@@ -1,82 +1,75 @@
var langJson = {}; let langJson = {};
function getE(name){ const getE = (name) => document.getElementById(name);
return document.getElementById(name);
}
function esc(str) { const esc = str => {
if(str){ if (str) {
return str.toString() return str.toString()
.replace(/&/g, '&amp;') .replace(/&/g, "&amp;")
.replace(/</g, '&lt;') .replace(/</g, "&lt;")
.replace(/>/g, '&gt;') .replace(/>/g, "&gt;")
.replace(/\"/g, '&quot;') .replace(/\"/g, "&quot;")
.replace(/\'/g, '&#39;') .replace(/\'/g, "&#39;")
.replace(/\//g, '&#x2F;'); .replace(/\//g, "&#x2F;");
} }
return ""; return "";
} }
function convertLineBreaks(str){ const convertLineBreaks = str => {
if(str){ if (str) {
str = str.toString(); str = str.toString();
str = str.replace(/(?:\r\n|\r|\n)/g,'<br>'); str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');
return str; return str;
} }
return ""; return "";
} }
function showMessage(msg, closeAfter){ const showMessage = (msg, closeAfter) => {
var elmt = getE("error"); const elmt = getE("error");
elmt.innerHTML = esc(msg)+"<a onclick='closeMessage()' id='closeError'>x</a>"; elmt.innerHTML = `${esc(msg)}<a onclick="closeMessage()" id="closeError">x</a>`;
elmt.classList.remove('hide'); elmt.classList.remove("hide");
elmt.classList.add('show'); elmt.classList.add("show");
if(closeAfter !== undefined){ if(closeAfter !== undefined){
setTimeout(closeMessage(),closeAfter); setTimeout(closeMessage, closeAfter);
} }
} }
function closeMessage(){ const closeMessage = () => {
var elmt = getE("error"); const elmt = getE("error");
elmt.innerHTML = ""; elmt.innerHTML = "";
elmt.classList.remove('show'); elmt.classList.remove("show");
elmt.classList.add('hide'); elmt.classList.add("hide");
} }
function getFile(adr, callback, timeout, method, onTimeout, onError){ const getFile = (
adr,
callback = () => undefined,
timeout = 8000,
method = "GET",
onTimeout = showMessage(`ERROR: timeout loading file ${adr}`),
onError = showMessage(`ERROR: loading file: ${adr}`)
) => {
/* fallback stuff */ /* fallback stuff */
if(adr === undefined) return; if(adr === undefined) return;
if(callback === undefined) callback = function(){};
if(timeout === undefined) timeout = 8000;
if(method === undefined) method = "GET";
if(onTimeout === undefined) {
onTimeout = function(){
showMessage("ERROR: timeout loading file "+adr);
};
}
if(onError === undefined){
onError = function(){
showMessage("ERROR: loading file: "+adr);
};
}
/* create request */ /* create request */
var request = new XMLHttpRequest(); const request = new XMLHttpRequest();
/* set parameter for request */ /* set parameter for request */
request.open(method, encodeURI(adr), true); request.open(method, encodeURI(adr), true);
request.timeout = timeout; request.timeout = timeout;
request.ontimeout = onTimeout; request.ontimeout = onTimeout;
request.onerror = onError; request.onerror = onError;
request.overrideMimeType("application/json"); request.overrideMimeType("application/json");
request.onreadystatechange = function() { request.onreadystatechange = () => {
if(this.readyState == 4){ if (this.readyState == 4 && this.status == 200) {
if(this.status == 200){ callback(this.responseText);
callback(this.responseText);
}
} }
}; };
@@ -86,33 +79,35 @@ function getFile(adr, callback, timeout, method, onTimeout, onError){
console.log(adr); console.log(adr);
} }
function lang(key){ const lang = key => convertLineBreaks(esc(langJson[key]));
return convertLineBreaks(esc(langJson[key]));
}
function parseLang(fileStr){ const parseLang = fileStr => {
langJson = JSON.parse(fileStr); langJson = JSON.parse(fileStr);
if(langJson["lang"] != "en"){// no need to update the HTML
var elements = document.querySelectorAll("[data-translate]"); if (langJson["lang"] !== "en") {
for (i = 0; i < elements.length; i++) { // no need to update the HTML
var element = elements[i]; const elements = document.querySelectorAll("[data-translate]");
element.innerHTML = lang(element.getAttribute("data-translate"));
} [...elements].forEach(item => {
item.innerHTML = lang(element.getAttribute("data-translate"));
})
} }
document.querySelector('html').setAttribute("lang", langJson["lang"] );
document.querySelector('html').setAttribute("lang", langJson["lang"]);
if(typeof load !== 'undefined') load(); if(typeof load !== 'undefined') load();
} }
function loadLang(){ const loadLang = () => {
var language = "default"; //navigator.language.slice(0, 2); const language = "default"; //navigator.language.slice(0, 2);
getFile("lang/" + language + ".lang", const langFunc = () => getFile("lang/en.lang", parseLang);
getFile(
`lang/${language}.lang`,
parseLang, parseLang,
2000, 2000,
"GET", "GET",
function(){ langFunc,
getFile("lang/en.lang", parseLang); langFunc
}, function(){
getFile("lang/en.lang", parseLang);
}
); );
} }

126
web_interface/js/ssids.js
View File

@@ -1,105 +1,111 @@
var ssidJson = {"random":false,"ssids":[]}; let ssidJson = {
"random": false,
"ssids": []
};
function load(){ const load = () => {
getFile("run?cmd=save ssids", function(){ getFile("run?cmd=save ssids", () =>
getFile("ssids.json",function(res){ getFile("ssids.json", res => {
ssidJson = JSON.parse(res); ssidJson = JSON.parse(res);
draw(); draw();
}); })
}); );
} }
function draw(){ const draw = () => {
var html; let html = `
<tr>
<th class="id"></th>
<th class="ssid"></th>
<th class="lock"></th>
<th class="save"></th>
<th class="remove"></th>
</tr>
`;
html = "<tr>" ssidJson.ssids.map((item, i) => {
+ "<th class='id'></th>" html += `
+ "<th class='ssid'></th>" <tr>
+ "<th class='lock'></th>" <td class="id">${i}</td>
+ "<th class='save'></th>" <td class="ssid" contenteditable="true" id="ssid_${i}">${esc(ssidJson.ssids[i][0].substring(0, ssidJson.ssids[i][2]))}</td>
+ "<th class='remove'></th>" <td class="lock clickable" onclick="changeEnc(${i})" id="enc_${i}">${ssidJson.ssids[i][1] ? "&#x1f512;" : "-"}</td>
+ "</tr>"; <td class="save">
<button class="green" onclick="save(${i})">${lang("save")}</button>
for(var i=0;i<ssidJson.ssids.length;i++){ </td>
html += "<tr>" <td class="remove">
+ "<td class='id'>"+i+"</td>" // ID <button class="red" onclick="remove(${i})">X</button>
+ "<td class='ssid' contenteditable='true' id='ssid_"+i+"'>"+esc(ssidJson.ssids[i][0].substring(0,ssidJson.ssids[i][2]))+"</td>" // SSID </td>
+ "<td class='lock clickable' onclick='changeEnc("+i+")' id='enc_"+i+"'>"+(ssidJson.ssids[i][1] ? "&#x1f512;" : "-")+"</td>" // Enc </tr>
+ "<td class='save'><button class='green' onclick='save("+i+")'>"+lang("save")+"</button></td>" // Save `;
+ "<td class='remove'><button class='red' onclick='remove("+i+")'>X</button></td>" // Remove })
+ "</tr>";
}
getE("randomBtn").innerHTML = ssidJson.random ? lang("disable_random") : lang("enable_random");
getE("randomBtn").innerHTML = lang(ssidJson.random ? "disable_random" : "enable_random");
getE("ssidTable").innerHTML = html; getE("ssidTable").innerHTML = html;
} }
function remove(id){ const remove = id => {
ssidJson.ssids.splice(id, 1); ssidJson.ssids.splice(id, 1);
getFile("run?cmd=remove ssid "+id); getFile(`run?cmd=remove ssid ${id}`);
draw(); draw();
} }
function add(){ const add = () => {
var ssidStr = getE("ssid").value; const ssidStr = getE("ssid").value;
var wpa2 = getE("enc").checked;
var clones = getE("ssidNum").value;
var force = getE("overwrite").checked;
if(ssidStr.length > 0){ if (ssidStr.length > 0) {
var cmdStr = "add ssid \""+ssidStr+"\""+(force ? " -f":" ")+" -cl "+clones; const wpa2 = getE("enc").checked;
if(wpa2) cmdStr += " -wpa2"; const clones = getE("ssidNum").value;
const force = getE("overwrite").checked;
getFile("run?cmd="+cmdStr); const cmdStr = `add ssid "${ssidStr}" ${force ? "-f" : ""} -cl ${clones} ${wpa2 ? -wpa2 : ""}`;
for(var i=0;i<clones;i++){ getFile(`run?cmd=${cmdStr}`);
if(ssidJson.ssids.length >= 60) ssidJson.ssids.splice(0,1);
ssidJson.ssids.push([ssidStr,wpa2]); for (let i = 0; i < clones; i++) {
if (ssidJson.ssids.length >= 60) ssidJson.ssids.splice(0,1);
ssidJson.ssids.push([ssidStr, wpa2]);
} }
draw(); draw();
} }
} }
function enableRandom(){ const enableRandom = () => {
if(ssidJson.random){ if (ssidJson.random) {
getFile("run?cmd=disable random",function(){ getFile("run?cmd=disable random", load);
load(); } else {
}); getFile(`run?cmd=enable random ${getE("interval").value}`, load);
}else{
getFile("run?cmd=enable random "+getE("interval").value,function(){
load();
});
} }
} }
function disableRandom(){ const disableRandom = () => {
} }
function addSelected(){ const addSelected = () => {
getFile("run?cmd=add ssid -s"+(getE("overwrite").checked ? " -f":"")); getFile(`run?cmd=add ssid -s ${getE("overwrite").checked ? "-f":""}`);
} }
function changeEnc(id){ const changeEnc = id => {
ssidJson.ssids[id][1] = !ssidJson.ssids[id][1]; ssidJson.ssids[id][1] = !ssidJson.ssids[id][1];
draw(); draw();
save(id); save(id);
} }
function removeAll(){ const removeAll = () => {
ssidJson.ssids = []; ssidJson.ssids = [];
getFile("run?cmd=remove ssids"); getFile("run?cmd=remove ssids");
draw(); draw();
} }
function save(id){ const save = id => {
var name = getE("ssid_"+id).innerHTML.replace("<br>","").substring(0,32); const name = getE(`ssid_${id}`).innerHTML.replace("<br>", "").substring(0, 32);
var wpa2 = ssidJson.ssids[id][1]; const wpa2 = ssidJson.ssids[id][1];
ssidJson.ssids[id] = [name,wpa2]; ssidJson.ssids[id] = [name, wpa2];
getFile("run?cmd=replace ssid "+id+" -n \""+name+"\" "+(wpa2 ? "-wpa2" : "")); getFile(`run?cmd=replace ssid ${id} -n "${name}" ${wpa2 ? "-wpa2" : ""}`);
} }