blob: a126d035bb4ed5e2cbef8b1924abb09c1ffa2cfa (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
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(
<>
<LoginButton/>
<div id="loginModal" tabIndex={-1} aria-hidden="true" className="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div className="relative w-full max-w-2xl max-h-full">
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
Inicio de sesión
</h3>
<button type="button" id="closeModalButton" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
<span className="sr-only">Cerrar</span>
</button>
</div>
<form method="post" id="login-form" onSubmit={handleLogin}>
<div className="p-6 space-y-6">
<div className="mb-6">
<label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Correo electrónico</label>
<input name="email" type="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="tu_correo@gmail.com" required/>
</div>
<div className="mb-6">
<label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Contraseña</label>
<input name="password" type="password" id="password" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required/>
</div>
<span id="errorMessage" className=" mb-6 my-4 text-red-600">
{ /* Render error message in case of errors */}
</span>
<div className="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button type="submit" className="text-white button hover:bg-blue-800 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">
Iniciar sesión
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</>
);
}
|
