---
pageTitle: "Demonstração da API do Prof. Rodrigo Ribeiro"
---

<div style="display: flex; gap: 1em; flex-direction: column;">
    <h1>{{pageTitle}}</h1>
    <div style="display: flex; flex-direction: column; gap: .6em;">
        <input type="text" id="username" placeholder="E-mail">
        <input type="text" id="password" placeholder="Senha">
        <div>
            <button id="submit">Logar</button>
            <button id="submitb">Criar Usuário</button>
        </div>
    </div>
    <div id="token">Token: Ausente</div>
</div>
<script>
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const tokenLabel = document.getElementById('token');
    const submitButton = document.getElementById('submit');
    const cuButton = document.getElementById('submitb');

    let token = '';

    async function api(endpoint, data) {
        const info = {
          method: 'POST',
          headers: { 
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
        },
          body: JSON.stringify(data),
        }
        let res = await fetch(`https://api.rodrigoribeiro.net/${endpoint}`, info);
        res = await res.json()
        console.log(res)
        return res;
    }

    function login(username, password, createAccount = false) {
        return api(createAccount ? "registrar" : "login", { email: username, senha: password });
    }

    submitButton.addEventListener('click', async () => {
        if (!usernameInput.value && !passwordInput.value) {
            alert("Preencha os campos necessários.")
            return;
        }
        res = await login(usernameInput.value, passwordInput.value);
        const is_logged = (res.status_code == 200);
        if (is_logged) token = res.response.token;
        tokenLabel.innerHTML = `Token: ${is_logged ? 'Presente' : 'Ausente (erro de autenticação)'}`;
    })

    cuButton.addEventListener('click', async () => {
        if (!usernameInput.value && !passwordInput.value) {
            alert("Preencha os campos necessários.")
            return;
        }
        res = await login(usernameInput.value, passwordInput.value, true);
        const is_logged = (res.status_code == 201);
        tokenLabel.innerHTML = `Token: ${is_logged ? 'Ausente (conta criada e pronta para logar)' : 'Ausente (erro ao criar usuário)'}`;
    })
</script>