From 3d29fc04eec0e32df4d9c66388fb2303d01dac45 Mon Sep 17 00:00:00 2001
From: HombreLaser <sebastian-440@live.com>
Date: Thu, 4 May 2023 19:51:08 -0600
Subject: Arregla modal de inicio de sesión
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/forms/login_form.tsx   | 69 +++++++++++++++++++++++++++++++++++
 src/components/login_button.tsx       | 11 ++++++
 src/components/navbar.tsx             | 12 +++---
 src/components/stylesheets/shared.css |  2 +-
 4 files changed, 86 insertions(+), 8 deletions(-)
 create mode 100644 src/components/forms/login_form.tsx
 create mode 100644 src/components/login_button.tsx

(limited to 'src/components')

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 {
-- 
cgit v1.2.3