<html>
<head>
<style>
    html, body {
        background: #f1f1f1;
    }

    #loginForm {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    #loginForm .logo {
        background: url('/img/svg/osm-logo_color_rgb.svg') no-repeat center;
        background-size: contain;
        width: 154px;
        height: 102px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 150px;
        margin-bottom: 20px;
    }

    #loginForm input {
        width: 550px;
        height: 65px;
        min-width: auto;
        margin-bottom: 40px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .39), 0 -1px 1px #fff, 0 1px 0 #fff;
        font-size: 20px;
        padding-left: 25px;
    }

    #loginForm #submit {
        display: inline-block;
        -webkit-box-shadow: 4px 4px 1px 0 #d9d9d9;
        -moz-box-shadow: 4px 4px 1px 0 #d9d9d9;
        box-shadow: 4px 4px 1px 0 #d9d9d9;
        background-color: #333;
        color: #fff;
        text-decoration: none;
    }

    #loginForm .title {
        margin-bottom: 40px;
        font-size: 1.625rem;
        font-weight: 400;
        text-decoration: none;
        text-transform: uppercase;
        font-family: roboto-thin, Helvetica, Arial, sans-serif;
    }

</style>
<title>Login Page</title>
<script src='/jquery'></script>
<script>

function getSearchParams(url) {
    var a = document.createElement('a');
    a.href = url;
    var params = {};
    var items = a.search.replace('?', '').split('&');
    for (var i = 0; i < items.length; i++) {
      if (items[i].length > 0) {
        var key_value = items[i].split('=');
        params[key_value[0]] = key_value[1];
      }
    }
    return params;
}

$(document).ready(function() {
    var username;
    var pass;
    var api_server = getSearchParams(window.location).api_server;
    $('#submit').click(function() {
        username=$('#username').val();
        pass=$('#password').val();
        /*
        * Perform some validation here.
        */
        $.ajax({
            url: '/session?api_server=' + api_server,
            type: 'POST',
            data: {
                username: username,
                password: pass
            },
            success: function(data) {
                window.location.href='/?api_server=' + api_server;
            }
        });
    });

    $('#loginForm').on('keyup', function(e) {
        if (e.keyCode == 13) {
            $('#submit').click();
        }
    });
});

</script>
</head>
<body>
    <form id='loginForm' autocomplete='on'>
        <div class='logo'> </div>
        <h1 class='title'>Launchpad Login</h1>
        <input type='text' size='40' placeholder='Username' id='username'><br />
        <input type='password' size='40' placeholder='Password' id='password'><br />
        <input type='button' value='Submit' id='submit'>
    </form>
</body>
</html>
