Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Haemimont</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
          integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700">

    <link rel="stylesheet" href="styles/login_style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

</head>
<body>

<div class="wrap">
    <form class="login" action="/login" method="post">
        <div class="toggle-bar">
            <div class="toggle-login active">
                <span>Login</span>
            </div>
            <div class="toggle-register">
                <span>Register</span>
            </div>
        </div>
        <div class="login-body">
            <div class="input-section">
                <i class="fas fa-user"></i>
                <input class="user-input" name="username" id="username" type="text" placeholder="Username">
            </div>
            <div class="input-section">
                <i class="fas fa-lock"></i>
                <input class="user-input" name="password" id="password" type="password" placeholder="Password">
            </div>

            <button class="btn" type="submit" value="Submit" id="btn-login">Login</button>
        </div>
        <div class="register-body" style="display:none;">
            <div class="input-section">
                <i class="fas fa-user"></i>
                <input class="user-input" id="username-reg" type="text" placeholder="Username">
            </div>
            <div class="input-section">
                <i class="fas fa-envelope"></i>
                <input class="user-input" id="email-reg" type="email" placeholder="Email">
            </div>
            <div class="input-section">
                <i class="fas fa-lock"></i>
                <input class="user-input" id="password-reg" type="password" placeholder="Password">
            </div>

            <button class="btn" id="btn-register">Register</button>
        </div>
    </form>
</div>

<script>

    var ip;

    $(document).ready(function () {
        $.getJSON("https://jsonip.com?callback=?", function (data) {
            ip = data.ip;
        });
    });

    $('.toggle-register').click(function () {
        $(this).addClass('active');
        $('.toggle-login').removeClass('active');
        $('.login-body').slideUp("slow");
        $('.register-body').delay(625).slideDown("slow");
    });

    $('.toggle-login').click(function () {
        $(this).addClass('active');
        $('.toggle-register').removeClass('active');
        $('.register-body').slideUp("slow");
        $('.login-body').delay(625).slideDown("slow");
    });

    $('#registered').click(function () {
        $('.toggle-login').click();
    });

    $(document).ready(function () {
        user.initialize();
    });

    var user = {
        initialize: function () {
            user.registerUser();
            user.auditLogin();
        },
        registerUser: function () {
            $('button#btn-register').on('click', function (event) {
                event.preventDefault();
                var data_reg = {
                    username: $('#username-reg').val(),
                    email: $('#email-reg').val(),
                    password: $('#password-reg').val()
                };
                $.ajax({
                    type: 'POST',
                    data: data_reg,
                    url: 'http://localhost:8082/register',
                    success: function () {
                        swal("Congrats!", ", Your account is created!", "success");
                        $('.toggle-login').click();
                    },
                    error: function (reason) {
                        var errorJsonValue = jQuery.parseJSON(reason.responseText);
                        swal({
                            title: "Registration failed!",
                            text: errorJsonValue.message,
                            icon: "warning",
                            dangerMode: true,
                        })
                    }
                });
            });
        },
        auditLogin: function () {
            $('button#btn-login').on('click', function () {

                let date = new Date();
                let username = $('#username').val();
                let password = $('#password').val();

                let logInfoValidation = {
                    username: username,
                    password: password
                };

                $.ajax({
                    url: "http://localhost:8082/validateCredentials",
                    type: 'GET',
                    data: logInfoValidation,
                    success: function (response) {
                        let logInfo = {
                            Username: username,
                            IP: ip,
                            EventTime: date.getTime(),
                            Action: 'User login'
                        };
                        console.log(response);
                        if (response) {
                            $.ajax({
                                url: "http://localhost:8083/api/audit/action",
                                type: 'POST',
                                data: JSON.stringify(logInfo),
                                contentType: "application/json",
                                success: function () {
                                }
                            });
                        }
                    }

                });

            });
        }
    };

</script>
</body>