diff options
| -rw-r--r-- | src/components/forms/login_form.tsx | 69 | ||||
| -rw-r--r-- | src/components/login_button.tsx | 11 | ||||
| -rw-r--r-- | src/components/navbar.tsx | 12 | ||||
| -rw-r--r-- | src/components/stylesheets/shared.css | 2 |
4 files changed, 86 insertions, 8 deletions
diff --git a/src/components/forms/login_form.tsx b/src/components/forms/login_form.tsx new file mode 100644 index 0000000..bd1d01e --- /dev/null +++ b/src/components/forms/login_form.tsx @@ -0,0 +1,69 @@ +import { Modal } from "flowbite"; +import { PersonCircle } from "react-bootstrap-icons"; +import LoginButton from "../login_button"; +import "../stylesheets/shared.css" +import { useEffect, useState } from "react"; + +export function LoginForm() { + 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(); + }); + }, []); + + function handleLogin(event) { + event.preventDefault(); + const form = event.target; + const formData = new FormData(form); + const formJson = Object.fromEntries(formData.entries()); + console.log(formJson); + } + + 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> + <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> + </> + ); +}
\ No newline at end of file diff --git a/src/components/login_button.tsx b/src/components/login_button.tsx new file mode 100644 index 0000000..3516088 --- /dev/null +++ b/src/components/login_button.tsx @@ -0,0 +1,11 @@ +import { PersonCircle } from "react-bootstrap-icons"; + +export default function LoginButton() { + return ( + <button id="loginButton" className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"> + <span className="[&>svg]:w-5"> + <PersonCircle color="#394490" size={32}/> + </span> + </button> + ); +}
\ No newline at end of file diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index dd8ca25..b5599b9 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -1,6 +1,8 @@ -import { CartFill, PersonCircle } from "react-bootstrap-icons"; +import { CartFill } from "react-bootstrap-icons"; import "./stylesheets/navbar.css"; import "./stylesheets/shared.css"; +import React from "react"; +import { LoginForm } from "./forms/login_form"; export default function Navbar() { return( @@ -39,12 +41,8 @@ export default function Navbar() { </span> </a> - <a className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" - href="#"> - <span className="[&>svg]:w-5"> - <PersonCircle color="#394490" size={32}/> - </span> - </a> + { /* Modal */ } + <LoginForm/> </div> </div> </nav> diff --git a/src/components/stylesheets/shared.css b/src/components/stylesheets/shared.css index 5f410c7..9bda368 100644 --- a/src/components/stylesheets/shared.css +++ b/src/components/stylesheets/shared.css @@ -7,7 +7,7 @@ } .button { - background-color: #394490; + background-color: #394490 !important; } .main-view { |