Agregado dropdown menu de autenticación

7 files changed, 106 insertions, 8 deletions

diff --git a/src/components/forms/login_form.tsx b/src/components/forms/login_form.tsx
index a126d03..f08d2c5 100644
--- a/src/components/forms/login_form.tsx
+++ b/src/components/forms/login_form.tsx
@@ -1,5 +1,5 @@
 import { Modal } from "flowbite";
-import LoginButton from "../login_button";
+import UserAccountButton from "../user_account_button";
 import { useEffect, useState } from "react";
 import { ApiClient } from "../../clients/api_client";
 import Token from "../../lib/token";
@@ -48,8 +48,6 @@ export function LoginForm() {
 
   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">
diff --git a/src/components/main_page_dropdown_menu.tsx b/src/components/main_page_dropdown_menu.tsx
new file mode 100644
index 0000000..8c043a8
--- /dev/null
+++ b/src/components/main_page_dropdown_menu.tsx
@@ -0,0 +1,24 @@
+import UserAccountButton from "./user_account_button";
+import { LoginForm }  from "./forms/login_form";
+import Token from "../lib/token";
+import UserAccountDropdownMenu from "./user_account_dropdown_menu";
+
+export default function MainPageDropdownMenu() {
+  const token = new Token();
+
+  if(token.present()) {
+    return (
+      <>
+        <UserAccountButton token={token}/>
+        <UserAccountDropdownMenu/>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <UserAccountButton token={token}/>
+      <LoginForm/>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index b5599b9..d136e31 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,8 +1,7 @@
 import { CartFill } from "react-bootstrap-icons";
 import "./stylesheets/navbar.css";
 import "./stylesheets/shared.css";
-import React from "react";
-import { LoginForm } from "./forms/login_form";
+import MainPageDropdownMenu from "./main_page_dropdown_menu";
 
 export default function Navbar() {
   return(
@@ -33,7 +32,7 @@ export default function Navbar() {
               </div>
 
               { /* Lado derecho */}
-              <div className="relative flex items-center">
+              <div className="flex items-center">
                 <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">
@@ -41,8 +40,7 @@ export default function Navbar() {
                   </span>
                 </a>
 
-                { /* Modal */ }
-                <LoginForm/>
+                <MainPageDropdownMenu/>
               </div>
             </div>
           </nav>
diff --git a/src/components/user_account_button.tsx b/src/components/user_account_button.tsx
new file mode 100644
index 0000000..2274811
--- /dev/null
+++ b/src/components/user_account_button.tsx
@@ -0,0 +1,15 @@
+import { PersonCircle } from "react-bootstrap-icons";
+import UserDropdownButton from "./user_dropdown_button";
+import LoginButton from "./login_button";
+
+export default function UserAccountButton({ token }) {
+  if(token.present()) {
+    return (
+      <UserDropdownButton/>
+    );
+  }
+
+  return (
+    <LoginButton/>
+  );
+}
\ No newline at end of file
diff --git a/src/components/user_account_dropdown_menu.tsx b/src/components/user_account_dropdown_menu.tsx
new file mode 100644
index 0000000..fac1693
--- /dev/null
+++ b/src/components/user_account_dropdown_menu.tsx
@@ -0,0 +1,22 @@
+import { PersonFill, DoorOpenFill, CardList } from "react-bootstrap-icons";
+
+export default function UserAccountDropdownMenu() {
+  return(
+    <div id="userAccountDropdownMenu" className="hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
+      <ul className="relative py-2 text-sm text-gray-700 dark:text-gray-200">
+        <li className="flex">
+          <i className="px-1 my-2"><PersonFill size={16} color="#394490"/></i>
+          <a href="#" className="block px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Cuenta</a>
+        </li>
+        <li className="flex">
+          <i className="px-1 my-2"><CardList size={16} color="#394490"/></i>
+          <a href="#" className="block px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Historial de pedidos</a>
+        </li>
+      </ul>
+      <div className="flex py-2">
+       <i className="px-1 my-2"><DoorOpenFill size={16} color="#394490"/></i> 
+        <a href="#" className="flex block px-2 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Cerrar sesión</a>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/user_dropdown_button.tsx b/src/components/user_dropdown_button.tsx
new file mode 100644
index 0000000..f4148bc
--- /dev/null
+++ b/src/components/user_dropdown_button.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { PersonCircle } from "react-bootstrap-icons";
+import { Dropdown, DropdownOptions } from 'flowbite';
+import UserAccountDropdownMenu from "./user_account_dropdown_menu";
+
+export default function UserDropdownButton() {
+  useEffect(() => {
+    const target = document.getElementById("userAccountDropdownMenu");
+    const trigger = document.getElementById("userAccountButton");
+    const options: DropdownOptions = {
+      triggerType: 'click',
+      placement: 'bottom'
+    };
+    const dropdown_menu = new Dropdown(target, trigger, options);
+    trigger?.addEventListener("click", () => {
+      if(dropdown_menu.isVisible())
+        dropdown_menu.show();
+    });
+  }, []);
+
+  return (
+    <>
+      <button id="userAccountButton" 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>
+
+      <UserAccountDropdownMenu/>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/lib/token.ts b/src/lib/token.ts
index 113e76d..8508cac 100644
--- a/src/lib/token.ts
+++ b/src/lib/token.ts
@@ -14,4 +14,13 @@ export default class Token {
   setRefresh(refresh_token: string) {
     sessionStorage.setItem("refresh", refresh_token);
   }
+
+  present() {
+    return sessionStorage.getItem("token") != null;
+  }
+
+  logout() {
+    sessionStorage.removeItem("token");
+    sessionStorage.removeItem("refresh");
+  }
 }
\ No newline at end of file