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]];
+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("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("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("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("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(){
+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,12 +1,15 @@
-var nameJson = [];
-var scanJson = {aps:[],stations:[]};
+let nameJson = [];
+let scanJson = {
+	aps: [],
+	stations: []
+};
 
-function drawScan(){
-	var html;
-	var selected;
-	var width;
-	var color;
-	var macVendor;
+const drawScan = () => {
+	let html;
+	let selected;
+	let width;
+	let color;
+	let macVendor;
 
 	// Access Points
 	getE("apNum").innerHTML = scanJson.aps.length;

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 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})">`
 							}
-			
-			html += "</div>"
-				+ "</div>"
-				+ "<div class='row'>"
-				+ "<div class='col-12'>"
-				+ "<p>"+lang("setting_"+key)+"</p>"
-				+ "<hr>"
-				+ "</div>"
-				+ "</div>";
+						}}
+					</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){
+const save = (key, value) => {
 	if (key) {
 		settingsJson[key] = value;
-		getFile("run?cmd=set "+key+" \""+value+"\"");
+		getFile(`run?cmd=set ${key} "${value}"`);
 	} else {
-		getFile("run?cmd=save settings",function(res){
-			load();
-		});
+		getFile("run?cmd=save settings", load);
 	}
 }

web_interface/js/site.js

@@ -1,69 +1,64 @@
-var langJson = {};
+let langJson = {};
 
-function getE(name){
-	return document.getElementById(name);
-}
+const getE = (name) => document.getElementById(name);
 
-function esc(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){
+const convertLineBreaks = str => {
 	if (str) {
 		str = str.toString();
 		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>";
+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');
+	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);
@@ -72,12 +67,10 @@ function getFile(adr, callback, timeout, method, onTimeout, onError){
   request.onerror = onError;
 	request.overrideMimeType("application/json");
 
-	request.onreadystatechange = function() {
-		if(this.readyState == 4){
-			if(this.status == 200){
+	request.onreadystatechange = () => {
+		if (this.readyState == 4 && this.status == 200) {
 			callback(this.responseText);
 		}
-		}
 	};
 
 	/* send request */
@@ -86,33 +79,35 @@ function getFile(adr, callback, timeout, method, onTimeout, onError){
 	console.log(adr);
 }
 
-function lang(key){
-	return convertLineBreaks(esc(langJson[key]));
+const lang = key => convertLineBreaks(esc(langJson[key]));
+
+const parseLang = fileStr => {
+	langJson = JSON.parse(fileStr);
+
+	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"));
+		})
 	}
 
-function 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"));
-		}
-	}
 	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", 
+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,59 +1,68 @@
-var ssidJson = {"random":false,"ssids":[]};
+let ssidJson = {
+	"random": false,
+	"ssids": []
+};
 
-function load(){
-	getFile("run?cmd=save ssids", function(){
-		getFile("ssids.json",function(res){
+const load = () => {
+	getFile("run?cmd=save ssids", () =>
+		getFile("ssids.json", res => {
 			ssidJson = JSON.parse(res);
 			draw();
-		});
-	});
+		})
+	);
 }
 
-function draw(){
-	var html;
+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>
+	`;
 
-	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) => {
 
-	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");
+		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;
+const add = () => {
+	const ssidStr = getE("ssid").value;
 
 	if (ssidStr.length > 0) {
-		var cmdStr = "add ssid \""+ssidStr+"\""+(force ? " -f":" ")+" -cl "+clones;
-		if(wpa2) cmdStr += " -wpa2";
+		const wpa2 = getE("enc").checked;
+		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}`);
+
+		for (let i = 0; i < clones; i++) {
 			if (ssidJson.ssids.length >= 60) ssidJson.ssids.splice(0,1);
 			ssidJson.ssids.push([ssidStr, wpa2]);
 		}
@@ -62,44 +71,42 @@ function add(){
 	}
 }
 
-function enableRandom(){
+const enableRandom = () => {
 	if (ssidJson.random) {
-		getFile("run?cmd=disable random",function(){
-			load();
-		});
+		getFile("run?cmd=disable random", load);
 	} else {
-		getFile("run?cmd=enable random "+getE("interval").value,function(){
-			load();
-		});
+		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];
+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" : ""));
+	getFile(`run?cmd=replace ssid ${id} -n "${name}" ${wpa2 ? "-wpa2" : ""}`);
 }