feat(web_interface): js refactor

web_interface/js/attack.js

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

web_interface/js/scan.js

@@ -1,13 +1,16 @@
-var nameJson = [];
-var scanJson = {aps:[],stations:[]};
-				
-function drawScan(){
-	var html;
-	var selected;
-	var width;
-	var color;
-	var macVendor;
-	
+let nameJson = [];
+let scanJson = {
+	aps: [],
+	stations: []
+};
+
+const drawScan = () => {
+	let html;
+	let selected;
+	let width;
+	let color;
+	let macVendor;
+
 	// Access Points
 	getE("apNum").innerHTML = scanJson.aps.length;
 	html = "<tr>"
@@ -23,7 +26,7 @@ function drawScan(){
 		+ "<th class='selectColumn'></th>"
 		+ "<th class='remove'></th>"
 		+ "</tr>";
-	
+
 	for(var i=0;i<scanJson.aps.length;i++){
 		selected = scanJson.aps[i][scanJson.aps[i].length-1];
 		width = parseInt(scanJson.aps[i][3]) + 130;
@@ -31,7 +34,7 @@ function drawScan(){
 		if(width < 50) color = "meter_red";
 		else if(width < 70) color = "meter_orange";
 		else color = "meter_green";
-						
+
 		html += (selected ? "<tr class='selected'>" : "<tr>")
 			+ "<td class='id'>"+i+"</td>" // ID
 			+ "<td class='ssid'>"+esc(scanJson.aps[i][0])+"</td>" // SSID
@@ -48,9 +51,9 @@ function drawScan(){
 			+ "<td class='remove'><button class='red' onclick='remove(0,"+i+")'>X</button></td>" // Remove
 			+ "</tr>";
 	}
-	
+
 	getE("apTable").innerHTML = html;
-					
+
 	// Stations
 	getE("stNum").innerHTML = scanJson.stations.length;
 	html = "<tr>"
@@ -65,13 +68,13 @@ function drawScan(){
 		+ "<th class='selectColumn'></th>"
 		+ "<th class='remove'></th>"
 		+ "</tr>";
-	
+
 	for(var i=0;i<scanJson.stations.length;i++){
 		selected = scanJson.stations[i][scanJson.stations[i].length-1];
 		ap = "";
 		if(scanJson.stations[i][5] >= 0)
 			ap = esc(scanJson.aps[scanJson.stations[i][5]][0]);
-		
+
 		html += (selected ? "<tr class='selected'>" : "<tr>")
 			+ "<td class='id'>"+i+"</td>" // ID
 			+ "<td class='vendor'>"+esc(scanJson.stations[i][3])+"</td>" // Vendor
@@ -86,14 +89,14 @@ function drawScan(){
 			+ "<td class='remove'><button class='red' onclick='remove(1,"+i+")'>X</button></td>" // Remove
 			+ "</tr>";
 	}
-	
+
 	getE("stTable").innerHTML = html;
 }
 
 function drawNames(){
 	var html;
 	var selected;
-	
+
 	// Names
 	getE("nNum").innerHTML = nameJson.length;
 	html = "<tr>"
@@ -107,10 +110,10 @@ function drawNames(){
 		+ "<th class='selectColumn'></th>"
 		+ "<th class='remove'></th>"
 		+ "</tr>";
-		
+
 	for(var i=0;i<nameJson.length;i++){
 		selected = nameJson[i][nameJson[i].length-1];
-		
+
 		html += (selected ? "<tr class='selected'>" : "<tr>")
 			+ "<td class='id'>"+i+"</td>" // ID
 			+ "<td class='mac' contentEditable='true' id='name_"+i+"_mac'>"+esc(nameJson[i][0])+"</td>" // MAC
@@ -124,10 +127,10 @@ function drawNames(){
 			+ "<td class='remove'><button class='red' onclick='remove(2,"+i+")'>X</button></td>" // Remove
 			+ "</tr>";
 	}
-		
+
 	getE("nTable").innerHTML = html;
 }
-				
+
 function scan(type){
 	var cmdStr = "scan "
 		+ (type == 0 ? "aps " : "stations -t "+getE("scanTime").value+"s")
@@ -202,14 +205,14 @@ function save(id){
 		nameJson[id][2] = name;
 		nameJson[id][3] = apbssid;
 		nameJson[id][4] = ch;
-		
+
 		if(nameJson[id][0].length != 17){
 			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" : ""));
-		
+
 		drawNames();
 	}
 }
@@ -218,8 +221,8 @@ function add(type,id){
 	if(nameJson.length >= 25){
 		showMessage("Device Name List is full!");
 		return;
-	}				
-	
+	}
+
 	switch(type){
 		case 0:
 			getFile("run?cmd=add name \""+scanJson.aps[id][0]+"\" -ap "+id);
@@ -238,7 +241,7 @@ function add(type,id){
 			nameJson.push(["00:00:00:00:00:00","","device_"+nameJson.length,"",1,false]);
 			drawNames();
 	}
-	
+
 	drawNames();
 }
 

web_interface/js/settings.js

@@ -1,51 +1,61 @@
-var settingsJson = {};
+let settingsJson = {};
 
-function load(){
-	getFile("settings.json",function(res){
+const load = () => {
+	getFile("settings.json", res => {
 		settingsJson = JSON.parse(res);
 		draw();
 	});
 }
 
-function draw(){
-	var html = "";
+const draw = () => {
+	let html = "";
+
 	for (var key in settingsJson) {
 		key = esc(key);
+
 		if (settingsJson.hasOwnProperty(key)) {
-			html += "<div class='row'>"
-				+ "<div class='col-6'>"
-				+ "<label class='settingName "+(typeof settingsJson[key] == "boolean" ? "labelFix":"")+"' for='"+key+"'>"+key+":</label>"
-				+ "</div>"
-				+ "<div class='col-6'>";
-				
-			if(typeof settingsJson[key] == "boolean"){
-				html += "<label class='checkBoxContainer'><input type='checkbox' name='"+key+"' "+(settingsJson[key] ? "checked" : "")+" onchange='save(\""+key+"\",!settingsJson[\""+key+"\"])'><span class='checkmark'></span></label>";
-			}else if(typeof settingsJson[key] == "number"){
-				html += "<input type='number' name='"+key+"' value="+settingsJson[key]+" onchange='save(\""+key+"\",parseInt(this.value))'>";
-			}else if(typeof settingsJson[key] == "string"){
-				html += "<input type='text' name='"+key+"' value="+settingsJson[key]+" "+(key=="version"?"readonly":"")+" onchange='save(\""+key+"\",this.value)'>";
-			}
-			
-			html += "</div>"
-				+ "</div>"
-				+ "<div class='row'>"
-				+ "<div class='col-12'>"
-				+ "<p>"+lang("setting_"+key)+"</p>"
-				+ "<hr>"
-				+ "</div>"
-				+ "</div>";
+			html += `
+				<div class="row">
+					<div class="col-6">
+						<label class="settingName ${(typeof settingsJson[key] == "boolean" ? "labelFix" : "")}" for="${key}">
+							${key}:
+						</label>
+					</div>
+					<div class='col-6'>
+						${() => {
+							switch(typeof settingsJson[key]) {
+								case "boolean":
+									return `
+										<label class="checkBoxContainer">
+											<input type="checkbox" name="${key}" ${(settingsJson[key] ? "checked" : "")} onchange="save(${key}, ${!settingsJson[key]})" />;
+											<span class="checkmark"></span>
+										</label>
+									`;
+								case "number":
+									return `<input type="number" name="${key}" value="${settingsJson[key]}" onchange="save(${key}, ${parseInt(this.value)})">`;
+								case "string":
+									return `<input type="text" name="${key}" value="${settingsJson[key]}" ${key === "version" ? "readonly" : ""} onchange="save(${key}, ${this.value})">`
+							}
+						}}
+					</div>
+				</div>
+				<div class='row'>
+					<div class='col-12'>
+						<p>${lang("setting_"+key)}</p>
+						<hr>
+					</div>
+				</div>
+			`;
 		}
 	}
 	getE("settingsList").innerHTML = html;
 }
 
-function save(key, value){
-	if(key){
+const save = (key, value) => {
+	if (key) {
 		settingsJson[key] = value;
-		getFile("run?cmd=set "+key+" \""+value+"\"");
-	}else{
-		getFile("run?cmd=save settings",function(res){
-			load();
-		});
+		getFile(`run?cmd=set ${key} "${value}"`);
+	} else {
+		getFile("run?cmd=save settings", load);
 	}
 }

web_interface/js/site.js

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

web_interface/js/ssids.js

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