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

Revert "Merge branch 'web_interface/refactor'"

Browse Source 
This reverts commit 50458606a8.
This commit is contained in:
Spacehuhn
2020-05-07 23:25:37 +02:00
committed by Spacehuhn
parent 7f29375e6d
commit 04feef1298
5 changed files with 377 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web_interface/js/attack.js
View File

@@ -1,33 +1,40 @@
const attackJSON = [ var attackJSON = [[false,0,0],[false,0,0],[false,0,0]];
[false, 0, 0],
[false, 0, 0],
[false, 0, 0]
];
const draw = () => { function draw(){
getE("deauth").innerHTML = lang(attackJSON[0][0] ? "stop" : "start"); getE("deauth").innerHTML = attackJSON[0][0] ? lang("stop") : lang("start");
getE("beacon").innerHTML = lang(attackJSON[1][0] ? "stop" : "start"); getE("beacon").innerHTML = attackJSON[1][0] ? lang("stop") : lang("start");
getE("probe").innerHTML = lang(attackJSON[2][0] ? "stop" : "start"); getE("probe").innerHTML = attackJSON[2][0] ? lang("stop") : lang("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]+"");
} }
const start = (mode) => { function start(mode){
attackJSON[mode][0] = !attackJSON[mode][0]; switch(mode){
case 0:
getFile(`run?cmd=attack${attackJSON[0][0] ? " -d":""}${attackJSON[1][0] ? " -b":""}${attackJSON[2][0] ? " -p":""}`, draw); attackJSON[0][0] = !attackJSON[0][0];
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();
});
} }
const load = () => { function load(){
getFile("attack.json", (response) => { getFile("attack.json",function(response){
attackJSON = JSON.parse(response); attackJSON = JSON.parse(response);
draw(); draw();
}); });

392
web_interface/js/scan.js
View File

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

24
web_interface/js/settings.js
View File

@@ -1,18 +1,16 @@
let settingsJson = {}; var settingsJson = {};
const load = () => { function load(){
getFile("settings.json", res => { getFile("settings.json",function(res){
settingsJson = JSON.parse(res); settingsJson = JSON.parse(res);
draw(); draw();
}); });
} }
const draw = () => { function draw(){
let html = ""; var 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'>"
@@ -41,11 +39,13 @@ const draw = () => {
getE("settingsList").innerHTML = html; getE("settingsList").innerHTML = html;
} }
const save = (key, value) => { function 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", load); getFile("run?cmd=save settings",function(res){
load();
});
} }
} }

125
web_interface/js/site.js
View File

@@ -1,75 +1,82 @@
let langJson = {}; var langJson = {};
const getE = (name) => document.getElementById(name); function getE(name){
return document.getElementById(name);
}
const esc = str => { function 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 "";
} }
const convertLineBreaks = str => { function 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 "";
} }
const showMessage = (msg, closeAfter) => { function showMessage(msg, closeAfter){
const elmt = getE("error"); var 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);
} }
} }
const closeMessage = () => { function closeMessage(){
const elmt = getE("error"); var elmt = getE("error");
elmt.innerHTML = ""; elmt.innerHTML = "";
elmt.classList.remove("show"); elmt.classList.remove('show');
elmt.classList.add("hide"); elmt.classList.add('hide');
} }
const getFile = ( function getFile(adr, callback, timeout, method, onTimeout, onError){
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 */
const request = new XMLHttpRequest(); var 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 = () => { request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if(this.readyState == 4){
callback(this.responseText); if(this.status == 200){
callback(this.responseText);
}
} }
}; };
@@ -79,35 +86,33 @@ const getFile = (
console.log(adr); console.log(adr);
} }
const lang = key => convertLineBreaks(esc(langJson[key])); function lang(key){
return convertLineBreaks(esc(langJson[key]));
}
const parseLang = fileStr => { function parseLang(fileStr){
langJson = JSON.parse(fileStr); langJson = JSON.parse(fileStr);
if(langJson["lang"] != "en"){// no need to update the HTML
if (langJson["lang"] !== "en") { var elements = document.querySelectorAll("[data-translate]");
// no need to update the HTML for (i = 0; i < elements.length; i++) {
const elements = document.querySelectorAll("[data-translate]"); var element = elements[i];
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();
} }
const loadLang = () => { function loadLang(){
const language = "default"; //navigator.language.slice(0, 2); var language = "default"; //navigator.language.slice(0, 2);
const langFunc = () => getFile("lang/en.lang", parseLang); getFile("lang/" + language + ".lang",
getFile(
`lang/${language}.lang`,
parseLang, parseLang,
2000, 2000,
"GET", "GET",
langFunc, function(){
langFunc getFile("lang/en.lang", parseLang);
}, function(){
getFile("lang/en.lang", parseLang);
}
); );
} }

126
web_interface/js/ssids.js
View File

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