socket-programming/index.html at main · datpham2001/socket-programming · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> My Team's Project </title>
        <link rel="icon" type="image/x-icon" href="/web_icon.ico">
        <link rel="stylesheet" href="./style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <div class="login-box">
                <img src="CSS1.png" class="image">
                <h1>LOGIN FORM</h1>
                <div class="textbox">
                    <i class="fas fa-user"></i>
                    <input id="username" type="text" placeholder="Username" name="" value="">
                </div>
                <div class="textbox">
                    <i class="fas fa-key"></i>
                    <i class="fas fa-eye" onclick="show()"></i>
                    <input id="password" type="password" placeholder="Password" name="" value="">
                </div>

                <input class="btn" type="submit" name="" value="Login">
            </div>
            <script>
                function show() {
                    var pswrd = document.getElementById('password');
                    var icon = document.querySelector('.fa-eye');
                    if (pswrd.type === "password") {
                        pswrd.type = "text";
                        icon.style.color = "#000000";
                    }else {
                        pswrd.type = "password";
                        icon.style.color = "#FFFFFF";
                    }
                }
            </script>
        </form>
    </body>
</html>
<script>
    $( "form" ).submit(function( event ) {
        event.preventDefault();

        var username = $("input#username").val();
        var password = $("input#password").val();

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/", true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({
            username: username, password: password
        }));
        xhr.onreadystatechange = function () {
            if (this.readyState != 4) return;

            if (this.status == 200) {
                var data = JSON.parse(this.responseText);
                if (data.login == "passed") {
                    window.location.href = "info.html";
                } else {
                    window.location.href = "404notfound.html";
                }
            }
        };
    });
</script>