Untitled

<html>

<head>
    <meta charset="UTF-8">
    <title> Your sign in panel </title>

    <style>
        input {
            margin: 10px;
            width: 100%;
        }

        fieldset {
            width: 20%;
            min-width: 200px;
            min-height: 100px;
            margin: -5px;
border-color: blue;
        }

        div {
            color: royalblue;
            text-align:center;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <fieldset>
        <legend> Sign in here </legend>

        Your username:
        <input type="text" name="username" id="username" required>
        <br> Your password:
        <input type="password" name="password" id="password" required>
        <br>
        <input type="button" value="sign in" onclick="signin()">
        <br>
        <div id="result"></div>
    </fieldset>
</body>

</html>

<script>
    function signin() {
        var pass = document.getElementById('password');
        var usr = document.getElementById('username');
        var result_label = document.getElementById('result')
        var params = '?username=' + usr.value + '&' + 'password=' + pass.value;

        const xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                if (this.responseText == '403') {
                    result_label.innerHTML = 'You have entered wrong username or password;
                } else {
                    result_label.innerHTML = 'You have connected successfully;

                    document.write(this.responseText);
                    document.close();
                }
            }

        }
        xhttp.open('GET', '/login' + params, true);
        xhttp.send();

    }
</script>