AliceClass/login/index.md

---
layout: default
title: About
lang: pt
---

<div class="auth-conteiner is-flex is-align-items-center is-justify-content-center">
    <div class="box">
        <h1 class="has-text-centered is-size-4 has-text-weight-semibold mb-6">Entrar no AliceCast</h1>
        <form id="login-form">
            <label>Login:</label>
            <input class="input my-3" id="email">
            <label>Senha:</label>
            <input class="input my-3" id="password">
            <button class="button is-fullwidth mt-4">Logar</button>
        </form>
        <p class="mt-4">Esqueceu sua senha? <a>Lembre-se aqui</a></p>
    </div>
</div>

<style>
    .auth-conteiner{
        position: absolute;
        top: 0%;
        right: 0%;

        width: 100%;
        height: 100%;

        font-family: 'Roboto', sans-serif;
    }
    .box{
        width: 20vw;
    }
</style>

<script>
    const form = document.getElementById('login-form');
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    form.addEventListener('submit', (event) => {
        event.preventDefault(); // Evita o envio padrão do formulário
        const data = {
            username: email,
            password: password
        };
        fetch('https://172.18.0.83:33003/login', {
            method: 'POST',
            headers: {
            'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(response => {
            if (response.success) {
                // Usuário autenticado! Redirecionar para página protegida, etc.
                console.log('Usuário autenticado!');
                //window.location.href = '/pagina-protegida';
            } else {
                alert('Credenciais inválidas!');
            }
        })
        .catch(error => {
            console.error('Erro na requisição:', error);
            alert('Falha ao conectar com o servidor!');
        });
    });
</script>