<html>
<head>
<title>jQuery POST test</title>
<script type="text/javascript" src="./jquery-1.7.2.js"></script>
<script type="text/javascript" src="./jquery.cookie.js"></script>
<script type="text/javascript">
var host = "127.0.0.1" // hostname / IP address of machine running OpenWrt with luci RPC support
var port = "8080" // port of webserver running luci RPC service
var proto = "http" // protocol (e.g. http, https, etc.)
var path = "/cgi-bin/luci/rpc/" // path to luci RPC interface
var url = proto + "://" + host + ":" + port + path
console.debug(url);
var anonSections = new Array(); // this array is used to keep track of hashes for anonymous sections
// (example 'get_all' demonstrates its usage)
// generic luci RPC function
// @submodule: luci submodule (e.g. "auth", "fs", "uci", etc.)
// @method: RPC method (provided respective submodule)
// @data: RPC function arguments in JSON notation
// @callOnSuc: callback function which gets call when JSON-RPC was successfull
// @callOnErr: callback function which gets called when JSON-RPC failed
function luci_rpc(submodule, method, data, callOnSuc, callOnErr) {
console.debug("Info: " + data);
console.debug("luci_rpc called:\n on: " + url + submodule + "?auth=" + $.cookie('sysauth', {path: '/'}) + "\n with: " + JSON.stringify ({method:method, params:data}));
$.ajax({
// Fetch auth-token from cookie and append it to URL.
// That doesn't really make sense, since appending the token
// is supposed to be an alternative to clients _without_ cookie
// support - however just sending the cookie (without having
// the token within the URL) doesn't seem to be sufficient.
// I consider this a bug. Since we can't store the token
// somewhere else but in a cookie we now require cookie
// support _and_ append the token to the URL to get
// authentication working
//url: url + submodule + "?auth=" + $.cookie('sysauth'),
url: url + submodule + ($.cookie('sysauth', {path: '/'}) ? "?auth=" + $.cookie('sysauth', {path: '/'}) : ""),
data: JSON.stringify ({method:method, params:data}),
type: "POST",
dataType: "json",
success: function (res, status, jqXHR) {
if (callOnSuc)
console.debug("RPC was successfull");
callOnSuc(res, status, jqXHR);
},
error: function (err, status, excp) {
if (callOnErr)
console.debug("RPC failed");
callOnErr(err, status, excp);
}
})
}
//function setCookie(token) {
// //$.cookie('openrouter', token, { path: '/', expires: 10 });
// $.cookie('authToken', token, { path: '/', expires: 10 });
//}
function deleteCookie() {
$.cookie('sysauth', null, {path: '/'});
}
//function showCookiee() {
// alert($.cookie('syscookie'));
//}
function logout() {
deleteCookie();
}
// submodule: auth
function login(pass) {
luci_rpc("auth", "login", ["root", pass],
// callback for 'login' if RPC succeded
function(res, status, jqXHR) {
// yay, we got an authentication token!
// cookie named 'sysauth' will be set automatically when auth was successfull
if (res.result) {
alert("Authentication successful! Received auth-token: " + res.result);
return;
// no authentication token for us.. -> invalid credentials
} else {
alert("Authentication failed!");
return;
}
},
// callback for 'login' if RPC failed
function(res, status, excp) {
alert("JSON-RPC query failed!\nError: " + res + "\nStatus: " + status+ "\nException:" + excp);
return;
}
)
}
// submodule: sys
function getHostname() {
luci_rpc("sys", "hostname", null,
function(res) { document.getElementById('hostname').value = res.result },
function() { document.getElementById('hostname').value = "NO DATA (logged in?)" }
);
}
function setHostname(hostname) {
luci_rpc("sys", "hostname", [hostname],
function(res) { console.debug("success"); alert("Successfully changed hostname") },
function() { console.debug("error"); alert("Failed! Maybe not logged in?") }
);
}
// submodule: uci
// function: get
function getProto() {
luci_rpc("uci", "get", ["network", "lan", "proto"],
function(res) { document.getElementById('proto').value = res.result },
function() { document.getElementById('proto').value = "NO DATA (logged in?)" }
);
}
// function: get_all
function getSSHPort() {
// In UCI you can use unnamed (=anonymous) sections, however the JSON RPC API
// doesn't provide RPCs to access particular sections without knowing its hash.
// That's why we have to fetch the whole config and iterate over the unnamed
// sections afterwards. In this very case, we just want to access the first unnamed
// section, since that's supposed to be the only one anyway.
luci_rpc("uci", "get_all", ["dropbear"],
function(res) {
anonSections['dropbear'] = new Array();
for (var prop in res.result) {
anonSections['dropbear'][0] = prop;
document.getElementById('sshPort').value = res.result[anonSections.dropbear[0]].Port
break;
}
},
function() { document.getElementById('sshPort').value = "NO DATA (logged in?)" }
);
}
// function: set
function setSSHPort(sshPort) {
luci_rpc("uci", "set", ["dropbear", anonSections['dropbear'][0], "Port", sshPort],
function(res) { console.debug("success"); alert("Successfully changed SSH port") },
function() { console.debug("error"); alert("Failed! Maybe not logged in?") }
);
luci_rpc("uci", "apply", ["dropbear"]);
luci_rpc("uci", "commit", ["dropbear"]);
}
$(document).ready(function() {
// execute code when page is accessed / loaded
getHostname();
getProto();
getSSHPort();
// call functions when respective events got triggered (e.g. button got pressed)
$("#login").click(function() {
login(document.getElementById('pass').value);
});
$("#logout").click(function() {
logout();
});
$("#setHostname").click(function() {
setHostname(document.getElementById('hostname').value);
});
$("#setSSHPort").click(function() {
setSSHPort(document.getElementById('sshPort').value);
});
});
</script>
</head>
<body>
<h2> Package: auth </h2>
<h3> Method: login </h3>
<p>
Credential: <input type="text" id="pass" />
<button id="login">Login</button>
<button id="logout">Logout</button>
</p>
<h2> Package: sys </h2>
<h3> Method: hostname </h3>
<p>
Hostname: <input type="text" id="hostname" />
<button id="setHostname">Change hostname</button>
</p>
<h2> Package: uci </h2>
<h3> Method: get </h3>
<p>
Protocol used on LAN port: <input type="text" id="proto" readonly />
</p>
<h3> Method: set </h3>
<p>
Port SSH daemon is running on: <input type="text" id="sshPort" />
<button id="setSSHPort">Change SSH port</button>
</p>
</body>
</html>