<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= lang.interface.sitetitle %></title>
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="icon" href="favicon.svg">    
</head>

<body class="login-body">
    <div class="back">
        <div class="login-form-div">
            <div class="login-form-content ">
                <a href="/login"><img class="form-img" src="img/logo_small_mars.png"></a><br>
                
                <form action="" method="post">
                  

                        <div class="form-group form-field">
                            <input type="email" class="form-control form-control-lg "  name="email" placeholder="<%= lang.login.email %>">
                            <div class="email error"></div>
    
                        </div>
    
                        <div class="form-group form-field">
                            <input type="password" class="form-control form-control-lg" name="password" placeholder="<%= lang.login.password %>">
                            <div class="password error"></div>
                        </div>
    
                        <div class="copyright"><button type="submit" class="btn btn-primary btn-lg default-btn"><%= lang.login.login %></button></div>
                        <div class="copyright">
                        <a href="/signup" type="button" class="btn btn-link"><%= lang.login.register %></a></div>
                    </form>
                    <div class="copyright"><%= lang.login.copyright %></div>
                </div>
            </div>
        </div>
    
    
            <script>
                const form = document.querySelector('form');
                const emailError = document.querySelector('.email.error');
                const passwordError = document.querySelector('.password.error');
    
                form.addEventListener("submit", async (e) => {
                    e.preventDefault();
    
                    // reset errors in form
                    emailError.textContent = "";
                    passwordError.textContent = "";
    
                    // get the values
                    const email = form.email.value;
                    const password = form.password.value;
    
                    try {
                        const res = await fetch('/login', {
                            method: 'POST',
                            body: JSON.stringify({ email: email, password: password }),
                            headers: { 'Content-Type': 'application/json' }
                        });
                        const data = await res.json();
                        console.log(data);
                        if (data.errors) {
                            emailError.textContent = data.errors.email;
                            passwordError.textContent = data.errors.password;
                        }
    
                        if (data.user) {
                            location.assign("/");
                        }
    
                    } catch (err) {
                        console.log(err);
                    }
                })
            </script>

                 

</body>

</html>