import { Modal } from "flowbite";
import LoginButton from "../login_button";
import { useEffect, useState } from "react";
import { ApiClient } from "../../clients/api_client";
import Token from "../../lib/token";
import "../stylesheets/shared.css"
export function LoginForm() {
const [error_message, setErrorMessage] = useState('');
// const [modal, setModal] = useState(new Modal());
// Error rendering useEffecT
useEffect(() => {
document.getElementById("errorMessage").innerHTML = error_message;
}, [error_message]);
// Modal useEffect
useEffect(() => {
const target = document.getElementById("loginModal");
const options = {
closable: true
};
const modal = new Modal(target, options);
document.getElementById('closeModalButton')?.addEventListener("click", () => {
modal.hide();
});
document.getElementById('loginButton')?.addEventListener("click", () => {
modal.show();
});
}, []);
async function handleLogin(event) {
event.preventDefault();
const client = new ApiClient();
const form = event.target;
const formData = new FormData(form);
try {
const response = await client.post("/login", formData);
const token = new Token();
token.set(response.data.token);
token.setRefresh(response.data.refresh);
} catch(error) {
setErrorMessage(error.response.data.errors.auth);
}
}
return(
<>