<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <script src="utils/Utils.js"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div class="login-container">
    <h1>Login</h1>
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required>
    </div>

    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
    </div>

    <!-- <div class="g-recaptcha" data-sitekey="6Lf-BWUqAAAAAB5aRMT1nobwwMhyDy9OGEvqK3rU" data-action="LOGIN"
    data-callback="onReCaptchaSuccess"></div> -->
    <div class="g-recaptcha" data-sitekey="6LeLH2UqAAAAAMInWRXNL9HNYryg1dnzhNYUiPg_" data-action="LOGIN"
         data-callback="onReCaptchaSuccess"></div>

<!--    <button id="loginButton" onclick="login()">Login</button>-->
    <button class="button-login" id="loginButton" onclick="login()">Login</button>
</div>

</body>

</html>

<script>

    const token = localStorage.getItem('t')
    if (token) {
        window.open('/userDashboard', "_self")
    }

    let recaptcha_token = ''

    function onReCaptchaSuccess(token) {
        recaptcha_token = token
        document.getElementById('loginButton').disabled = false
    }

    async function login() {
        const body = {
            'username': document.getElementById('username').value,
            'password': document.getElementById('password').value,
            'recaptcha_token': recaptcha_token
        }

        const response = await fetch(BACKEND_URL + '/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(body)
        });
        console.log(response);

        if (!response.ok) {
            grecaptcha.reset()
            document.getElementById('loginButton').disabled = true
            response.text().then(text => {
                alert(JSON.parse(text).msg)
            })
        } else {
            const json = await response.json()
            const token = json.data.token
            localStorage.setItem('t', token)
            window.open('/userDashboard', "_self")
        }
    }

</script>