Untitled

<!DOCTYPE html>
<html>

<head>
    <title>Signup</title>
    <script>
        function addUser() {
            var user = new Object();

            user.username = document.getElementById("username").value;
            user.password = document.getElementById("password").value;

            var addUser = new XMLHttpRequest();

            addUser.open("POST", "/signup", true);

            addUser.setRequestHeader("Content-Type", "application/json");

            addUser.onload = function ()
            {
                alert("Congratulations! Your account has been created!");
                window.location = "loginpage.html";
            }

            addUser.send(JSON.stringify(user));
            console.log("I MADE IT :D");
        }
    </script>
</head>
<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    * {
        box-sizing: border-box
    }

    /* Full-width input fields */

    input[type=text],
    input[type=password] {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        display: inline-block;
        border: none;
        background: #f1f1f1;
    }

    input[type=text]:focus,
    input[type=password]:focus {
        background-color: #ddd;
        outline: none;
    }

    hr {
        border: 1px solid #f1f1f1;
        margin-bottom: 25px;
    }

    /* Set a style for all buttons */

    button {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
        opacity: 0.9;
    }

    button:hover {
        opacity: 1;
    }

    /* Extra styles for the cancel button */

    .cancelbtn {
        padding: 14px 20px;
        background-color: #f44336;
    }

    /* Float cancel and signup buttons and add an equal width */

    .cancelbtn,
    .signupbtn {
        float: left;
        width: 50%;
    }

    /* Add padding to container elements */

    .container {
        padding: 16px;
    }

    /* Clear floats */

    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

    /* Change styles for cancel button and signup button on extra small screens */

    @media screen and (max-width: 300px) {
        .cancelbtn,
        .signupbtn {
            width: 100%;
        }
    }
</style>


<body>

    <form style="border:1px solid #ccc">
        <div class="container">
            <h1>Sign Up</h1>
            <p>Please fill in this form to create an account.</p>
            <hr>

            <label for="username">
                <b>Username</b>
            </label>
            <input type="text" placeholder="Enter Username" id="username" required>

            <label for="psw">
                <b>Password</b>
            </label>
            <input type="password" placeholder="Enter Password" id="password" required>

            <div class="clearfix">
                <button type="button" class="cancelbtn">Cancel</button>
                <button type="submit" onclick="addUser()" class="signupbtn">Sign Up</button>
            </div>
        </div>
    </form>

</body>

</html>