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">
            <!-- autologin=true could be leading to unexpected results if there still is a valid session associated with the used browser -->
            <input type="hidden" name="autologin" value="false">
            <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>