ruarim · ruarim · Mar 3, 2023 · Feb 28, 2023 · Feb 28, 2023 · Feb 28, 2023
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -5,7 +5,9 @@ import clsx from "clsx";
 import { useAuthContext } from "../hooks/context/useAuthContext";
 import { useRouter } from "next/router";
 import Link from "next/link";
-import AvatarIcon from "./UserIcon";
+import Modal from "./Modal";
+import Login from "./Login";
+import Register from "./Register";
 
 const navigation = [
   {
@@ -69,84 +71,119 @@ function MobileNavLink() {
 }
 
 function ProfileDropDown() {
-  const { logout, isLoggedIn } = useAuthContext();
-
+  const {
+    logout,
+    isLoggedIn,
+    loginModalOpen,
+    registerModalOpen,
+    setLoginModalOpen,
+    setRegisterModalOpen,
+  } = useAuthContext();
   function logoutHandler() {
     logout && logout();
   }
   return (
-    <Menu as="div" className="relative ml-4 flex-shrink-0">
-      <div>
-        <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
-          <span className="sr-only">Open user menu</span>
-          <AvatarIcon imageUrl={avatarPhoto} />
-        </Menu.Button>
-      </div>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          {!isLoggedIn && (
-            <>
-              {" "}
-              <Menu.Item>
-                {({ active }) => (
-                  <Link
-                    href="/login"
-                    className={clsx(
-                      active ? "bg-gray-100" : "",
-                      "block px-4 py-2 text-sm text-primary/50"
-                    )}
-                  >
-                    Login
-                  </Link>
-                )}
-              </Menu.Item>
-              <Menu.Item>
-                {({ active }) => (
-                  <Link
-                    href="/register"
-                    className={clsx(
-                      active ? "bg-gray-100" : "",
-                      "block px-4 py-2 text-sm text-primary/50"
-                    )}
-                  >
-                    Register
-                  </Link>
-                )}
-              </Menu.Item>
-            </>
-          )}
-          {isLoggedIn && (
-            <>
-              <Menu.Item>
-                {({ active }) => (
-                  <div
-                    onClick={logoutHandler}
-                    className={clsx(
-                      active
-                        ? "bg-green-400/50  cursor-pointer"
-                        : "bg-blue-400/50",
-                      "block px-4 py-2 text-sm text-primary/50"
-                    )}
-                  >
-                    Log Out
-                  </div>
-                )}
-              </Menu.Item>
-            </>
-          )}
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <div>
+      <Menu as="div" className="relative ml-4 flex-shrink-0">
+        <div>
+          <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+            <span className="sr-only">Open user menu</span>
+            <img className="h-8 w-8 rounded-full" src={avatarPhoto} alt="" />
+          </Menu.Button>
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            {!isLoggedIn && (
+              <>
+                {" "}
+                <Menu.Item>
+                  {({ active }) => (
+                    <div className="w-full">
+                      <button
+                        onClick={() => {
+                          if (setLoginModalOpen) setLoginModalOpen(true);
+                        }}
+                        className={clsx(
+                          active ? "bg-gray-100 w-full text-left" : "",
+                          "block px-4 py-2 text-sm text-primary/50"
+                        )}
+                      >
+                        Login
+                      </button>
+                    </div>
+                  )}
+                </Menu.Item>
+                <Menu.Item>
+                  {({ active }) => (
+                    <div className="w-full">
+                      <button
+                        onClick={() => {
+                          if (setRegisterModalOpen) setRegisterModalOpen(true);
+                        }}
+                        className={clsx(
+                          active ? "bg-gray-100 w-full text-left" : "",
+                          "block px-4 py-2 text-sm text-primary/50"
+                        )}
+                      >
+                        Register
+                      </button>
+                    </div>
+                  )}
+                </Menu.Item>
+              </>
+            )}
+            {isLoggedIn && (
+              <>
+                <Menu.Item>
+                  {({ active }) => (
+                    <div
+                      onClick={logoutHandler}
+                      className={clsx(
+                        active
+                          ? "bg-green-400/50  cursor-pointer"
+                          : "bg-blue-400/50",
+                        "block px-4 py-2 text-sm text-primary/50"
+                      )}
+                    >
+                      Log Out
+                    </div>
+                  )}
+                </Menu.Item>
+              </>
+            )}
+          </Menu.Items>
+        </Transition>
+      </Menu>
+      {loginModalOpen && setLoginModalOpen && (
+        <Modal
+          setOpen={setLoginModalOpen}
+          isOpen={loginModalOpen}
+          title={"Login"}
+        >
+          <Login />
+        </Modal>
+      )}
+      {registerModalOpen && setRegisterModalOpen && (
+        <Modal
+          setOpen={setRegisterModalOpen}
+          isOpen={registerModalOpen}
+          title={"Register"}
+        >
+          <Register />
+        </Modal>
+      )}
+    </div>
   );
 }
+
 export default function Header() {
   return (
     <Disclosure as="nav" className="bg-white shadow">

diff --git a/pages/login.tsx → components/Login.tsx b/pages/login.tsx → components/Login.tsx
@@ -1,22 +1,25 @@
 import { useForm } from "react-hook-form";
 import { useAuthContext } from "../hooks/context/useAuthContext";
 import { useLogin } from "../hooks/mutations/useLogin";
-import { useGetXsrfHeaders } from "../hooks/queries/useGetXsrf";
 
-export default function Register() {
+export default function Login() {
   const { mutateAsync: loginUser, data: user } = useLogin();
   const {
     handleSubmit,
     register,
     setError,
     formState: { errors },
   } = useForm<LoginUserMutationData>();
-  const { loginHandler } = useAuthContext();
+  const { loginHandler, setRegisterModalOpen, setLoginModalOpen } =
+    useAuthContext();
 
   const onSubmit = async (data: LoginUserMutationData) => {
     loginUser(data)
       .then((res) => {
-        if (loginHandler) loginHandler(res);
+        if (loginHandler && setLoginModalOpen) {
+          loginHandler(res);
+          return setLoginModalOpen(false);
+        }
       })
       .catch(() => {
         setError("password", {
@@ -26,22 +29,25 @@ export default function Register() {
       });
   };
 
+  const handleRegister = () => {
+    if (setRegisterModalOpen && setLoginModalOpen) {
+      setLoginModalOpen(false);
+      setRegisterModalOpen(true);
+    }
+  };
+
   return (
     <>
-      <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="flex min-h-full flex-col justify-center px-7 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
-          <img
-            className="mx-auto h-12 w-auto"
-            src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-            alt="Your Company"
-          />
+          {/* logo here */}
           <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
-            Sign in to your account
+            Sign in
           </h2>
         </div>
 
         <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <div className="py-8 px-4 sm:rounded-lg sm:px-10">
             <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
               <div>
                 <label
@@ -85,16 +91,22 @@ export default function Register() {
                 </div>
               </div>
 
-              <div>
+              <div className="flex space-x-2">
                 <button
                   type="submit"
                   className="flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                 >
                   Sign in
                 </button>
+                <button
+                  onClick={handleRegister}
+                  className="flex w-full justify-center rounded-md border border-transparent bg-emerald-500 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                >
+                  Register
+                </button>
               </div>
               <div className="text-red-600">
-                {errors.password && <p>Login failed. Check your password</p>}
+                {errors.password && <p>Check your email and password</p>}
               </div>
             </form>
           </div>

diff --git a/components/Modal.tsx b/components/Modal.tsx
@@ -45,10 +45,12 @@ const Modal = ({ setOpen, isOpen, title, children }: ModalProps) => {
                     >
                       {title}
                     </Dialog.Title>
-                    <XMarkIcon
-                      className="w-7 pb-2"
-                      onClick={() => setOpen(false)}
-                    />
+                    <button>
+                      <XMarkIcon
+                        className="w-7 pb-2"
+                        onClick={() => setOpen(false)}
+                      />
+                    </button>
                   </div>
                 )}
 

diff --git a/pages/register.tsx → components/Register.tsx b/pages/register.tsx → components/Register.tsx
@@ -1,7 +1,6 @@
 import { useForm } from "react-hook-form";
 import { useRegistser } from "../hooks/mutations/useRegister";
 import { useAuthContext } from "../hooks/context/useAuthContext";
-import { useGetXsrfHeaders } from "../hooks/queries/useGetXsrf";
 
 export default function Register() {
   const { mutateAsync: registerUser, data: user } = useRegistser();
@@ -11,12 +10,15 @@ export default function Register() {
     setError,
     formState: { errors },
   } = useForm<RegisterUserMutationData>();
-  const { registerHandler } = useAuthContext();
+  const { registerHandler, setRegisterModalOpen } = useAuthContext();
 
   const onSubmit = async (data: RegisterUserMutationData) => {
     registerUser(data)
       .then((res) => {
-        if (registerHandler) registerHandler(res);
+        if (registerHandler && setRegisterModalOpen) {
+          registerHandler(res);
+          return setRegisterModalOpen(false);
+        }
       })
       .catch((e) => {
         setError("password", {
@@ -28,20 +30,16 @@ export default function Register() {
 
   return (
     <>
-      <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="flex min-h-full flex-col justify-center px-6 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
-          <img
-            className="mx-auto h-12 w-auto"
-            src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-            alt="Your Company"
-          />
+          {/* logo here */}
           <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
             Create an account
           </h2>
         </div>
 
         <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <div className="py-8 px-4 sm:rounded-lg sm:px-10">
             <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
               <div>
                 <label
@@ -150,7 +148,7 @@ export default function Register() {
                   type="submit"
                   className="flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                 >
-                  Sign in
+                  Register
                 </button>
               </div>
               <div className="text-red-600">

diff --git a/components/VenueMapCard.tsx b/components/VenueMapCard.tsx
@@ -80,7 +80,7 @@ export default function VenueMapCard({
               onClick={() => toggleVenueInPlan(venue)}
               className="p-2 mt-2 w-full rounded-lg bg-blue-300 transition hover:bg-blue-400 text-lg"
             >
-              Add to path
+              Add to plan
             </button>
           ) : (
             <button