Tokenlogin form
From Open-Xchange
Interactive token login form
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<title>Login</title>
<script type="text/javascript">
function uuid() {
function hex(len, x) {
if (x === undefined) x = Math.random();
var s = new Array(len);
for (var i = 0; i < len; i++) {
x *= 16;
var digit = x & 15;
s[i] = digit + (digit < 10 ? 48 : 87); // '0' and 'a' - 10
}
return String.fromCharCode.apply(String, s);
}
return [hex(8), "-", hex(4), "-4", hex(3), "-", hex(4, 0.5 + Math.random() / 4), "-", hex(12)].join("");
}
window.addEventListener("load", function () {
function sendData() {
var XHR = new XMLHttpRequest();
var target = "$BASEURL_TO_OX";
// Bind the FormData object and the form element
var FD = new FormData(form);
// enhance with clientToken
static_uuid = uuid();
FD.append('clientToken', static_uuid);
FD.append('jsonResponse', true);
// Define what happens on successful data submission
XHR.addEventListener("load", function(event) {
// successful login; now redirect into the session
var response=JSON.parse(event.target.responseText);
// check for errors
if (response.error || !response.url) {
error_message.innerHTML = response.error;
} else {
// finally point to the target
window.location.replace(target + response.url + "&clientToken=" + static_uuid);
}
});
// Define what happens in case of error
XHR.addEventListener("error", function(event) {
alert('Oops! Something went wrong.');
});
// Set up our request
XHR.open("POST", target + "/ajax/login?action=tokenLogin&authId=" + uuid());
// The data sent is what the user provided in the form
XHR.send(new URLSearchParams(FD));
}
// Access the form element...
var form = document.getElementById("myForm");
var error_message = document.getElementById("error");
// ...and take over its submit event.
form.addEventListener("submit", function (event) {
event.preventDefault();
sendData();
});
});
</script>
</head>
<body>
<form id='myForm'>
<label for="login">Username: </label>
<input type="text" name="login" id="login"><br>
<label for="password">Password: </label>
<input type="password" name="password" id="password"><br>
<input type="submit" value="Login">
<input type="hidden" name="autologin" value="true">
<input type="hidden" name="client" value="open-xchange-appsuite">
<input type="hidden" name="version" value="Sample Loginpage">
<input type="hidden" name="uiWebPath" value="/appsuite/">
</form>
<div id='error' />
</body>
</html>