Tokenlogin form

From Open-Xchange
Revision as of 10:59, 12 August 2019 by WolfgangRosenauer (talk | contribs) (→‎Example)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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>