From 4f909b02f013f4fded35d175ae2813e84ce92030 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Fri, 5 Jan 2024 16:05:34 +0000
Subject: [PATCH] feat: logout

---
 src/app/auth/login/page.tsx                   |  2 +-
 src/app/boards/[...id]/page.tsx               |  2 +-
 src/app/boards/layout.tsx                     |  2 +-
 src/app/boards/page.tsx                       |  2 +-
 src/app/cards/[...id]/page.tsx                |  2 +-
 src/app/cards/layout.tsx                      |  2 +-
 src/app/components/UserMenu.tsx               | 69 +++++++++++++++++++
 src/app/{_components => components}/auth.tsx  | 11 +--
 .../{_components => components}/dashboard.tsx | 35 +++-------
 src/app/{_components => components}/modal.tsx |  0
 10 files changed, 90 insertions(+), 37 deletions(-)
 create mode 100644 src/app/components/UserMenu.tsx
 rename src/app/{_components => components}/auth.tsx (61%)
 rename src/app/{_components => components}/dashboard.tsx (58%)
 rename src/app/{_components => components}/modal.tsx (100%)

diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index e1eeb0fe..1c473dda 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -1,4 +1,4 @@
-import { Login } from "~/app/_components/auth";
+import { Login } from "~/app/components/auth";
 
 export default function LoginPage() {
   return (
diff --git a/src/app/boards/[...id]/page.tsx b/src/app/boards/[...id]/page.tsx
index aa3b3caa..d5f644c7 100644
--- a/src/app/boards/[...id]/page.tsx
+++ b/src/app/boards/[...id]/page.tsx
@@ -16,7 +16,7 @@ import { api } from "~/trpc/react";
 import { useBoard } from "~/app/providers/board";
 import { useModal } from "~/app/providers/modal";
 
-import Modal from "~/app/_components/modal";
+import Modal from "~/app/components/modal";
 
 import BoardDropdown from "./components/BoardDropdown";
 import { DeleteBoardConfirmation } from "./components/DeleteBoardConfirmation";
diff --git a/src/app/boards/layout.tsx b/src/app/boards/layout.tsx
index a49b1cf0..12318549 100644
--- a/src/app/boards/layout.tsx
+++ b/src/app/boards/layout.tsx
@@ -1,4 +1,4 @@
-import Dashboard from "~/app/_components/dashboard";
+import Dashboard from "~/app/components/dashboard";
 
 export default function Layout(props: { children: React.ReactNode }) {
   return <Dashboard>{props.children}</Dashboard>;
diff --git a/src/app/boards/page.tsx b/src/app/boards/page.tsx
index 9f77aead..100769c4 100644
--- a/src/app/boards/page.tsx
+++ b/src/app/boards/page.tsx
@@ -4,7 +4,7 @@ import { HiOutlinePlusSmall } from "react-icons/hi2";
 import { BoardsList } from "./components/BoardsList";
 
 import { useModal } from "~/app/providers/modal";
-import Modal from "~/app/_components/modal";
+import Modal from "~/app/components/modal";
 
 import { NewBoardForm } from "~/app/boards/components/NewBoardForm";
 
diff --git a/src/app/cards/[...id]/page.tsx b/src/app/cards/[...id]/page.tsx
index 3b17a2f1..04ab58ca 100644
--- a/src/app/cards/[...id]/page.tsx
+++ b/src/app/cards/[...id]/page.tsx
@@ -12,7 +12,7 @@ import LabelSelector from "./components/LabelSelector";
 import ListSelector from "./components/ListSelector";
 import { NewLabelForm } from "./components/NewLabelForm";
 
-import Modal from "~/app/_components/modal";
+import Modal from "~/app/components/modal";
 import { useModal } from "~/app/providers/modal";
 
 import { api } from "~/trpc/react";
diff --git a/src/app/cards/layout.tsx b/src/app/cards/layout.tsx
index a49b1cf0..12318549 100644
--- a/src/app/cards/layout.tsx
+++ b/src/app/cards/layout.tsx
@@ -1,4 +1,4 @@
-import Dashboard from "~/app/_components/dashboard";
+import Dashboard from "~/app/components/dashboard";
 
 export default function Layout(props: { children: React.ReactNode }) {
   return <Dashboard>{props.children}</Dashboard>;
diff --git a/src/app/components/UserMenu.tsx b/src/app/components/UserMenu.tsx
new file mode 100644
index 00000000..6334803b
--- /dev/null
+++ b/src/app/components/UserMenu.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { Fragment } from "react";
+import Image from "next/image";
+import { signOut } from "next-auth/react";
+import { Menu, Transition } from "@headlessui/react";
+import { HiOutlineLogout } from "react-icons/hi";
+
+interface UserMenuProps {
+  imageUrl: string | undefined;
+  email: string;
+}
+
+export default function UserMenu({ imageUrl, email }: UserMenuProps) {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="-mx-2 flex items-center rounded-md p-1.5 text-dark-900 hover:bg-dark-200 hover:text-dark-1000">
+          {imageUrl ? (
+            <Image
+              src={imageUrl ?? ""}
+              className="h-8 w-8 rounded-full bg-gray-50"
+              width={30}
+              height={30}
+              alt=""
+            />
+          ) : (
+            <span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-dark-400">
+              <svg
+                className="h-full w-full text-dark-700"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+            </span>
+          )}
+          <span className="ml-2 truncate text-sm">{email}</span>
+        </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 bottom-[50px] right-[-10px] z-10 mt-2 w-[225px] origin-bottom-right rounded-md border border-dark-400 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="flex">
+            <Menu.Item>
+              {() => (
+                <button
+                  onClick={() => signOut({ callbackUrl: "/boards" })}
+                  className="m-1 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
+                >
+                  <HiOutlineLogout size={18} className="mr-2" />
+                  Logout
+                </button>
+              )}
+            </Menu.Item>
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}
diff --git a/src/app/_components/auth.tsx b/src/app/components/auth.tsx
similarity index 61%
rename from src/app/_components/auth.tsx
rename to src/app/components/auth.tsx
index bfd91273..9c94a39f 100644
--- a/src/app/_components/auth.tsx
+++ b/src/app/components/auth.tsx
@@ -14,14 +14,17 @@ export function Login() {
         email: "",
       }}
       onSubmit={async (values: FormValues) => {
-        await signIn("email", { email: values.email });
+        await signIn("email", {
+          email: values.email,
+          callbackUrl: "/boards",
+        });
       }}
     >
       <Form className="space-y-6">
         <div>
           <label
             htmlFor="email"
-            className="text-dark-1000 block text-sm font-normal leading-6"
+            className="block text-sm font-normal leading-6 text-dark-1000"
           >
             Email address
           </label>
@@ -33,7 +36,7 @@ export function Login() {
               placeholder="you@example.com"
               autoComplete="email"
               required
-              className="bg-dark-500 focus:ring-dark-900 ring-dark-900 text-dark-1000 block w-full rounded-md border-0 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
+              className="block w-full rounded-md border-0 bg-dark-500 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-900 focus:ring-2 focus:ring-inset focus:ring-dark-900 sm:text-sm sm:leading-6"
             />
           </div>
         </div>
@@ -41,7 +44,7 @@ export function Login() {
         <div className="pt-2">
           <button
             type="submit"
-            className="bg-dark-1000 text-dark-50 focus-visible:outline-offset- flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2"
+            className="focus-visible:outline-offset- flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold leading-6 text-dark-50 shadow-sm focus-visible:outline focus-visible:outline-2"
           >
             Sign up
           </button>
diff --git a/src/app/_components/dashboard.tsx b/src/app/components/dashboard.tsx
similarity index 58%
rename from src/app/_components/dashboard.tsx
rename to src/app/components/dashboard.tsx
index dac8b068..599d241a 100644
--- a/src/app/_components/dashboard.tsx
+++ b/src/app/components/dashboard.tsx
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { redirect } from "next/navigation";
 
 import { auth } from "~/server/auth";
@@ -6,6 +5,7 @@ import { auth } from "~/server/auth";
 import boardsIcon from "~/app/assets/boards.json";
 
 import ReactiveButton from "~/app/components/ReactiveButton";
+import UserMenu from "~/app/components/UserMenu";
 
 const navigation = [
   { name: "Boards", href: "/boards", icon: boardsIcon, current: true },
@@ -14,7 +14,9 @@ const navigation = [
 export default async function Layout(props: { children: React.ReactNode }) {
   const session = await auth();
 
-  if (!session?.user) redirect("api/auth/signin");
+  if (!session?.user) {
+    redirect("/api/auth/signin");
+  }
 
   return (
     <main className="flex h-screen flex-col items-center bg-dark-50">
@@ -42,32 +44,11 @@ export default async function Layout(props: { children: React.ReactNode }) {
               ))}
             </ul>
           </div>
-          <button className="flex items-center">
-            {session?.user.image ? (
-              <Image
-                src={session?.user.image ?? ""}
-                className="h-8 w-8 rounded-full bg-gray-50"
-                width={30}
-                height={30}
-                alt=""
-              />
-            ) : (
-              <span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-dark-400">
-                <svg
-                  className="h-full w-full text-dark-700"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
-                </svg>
-              </span>
-            )}
-            <p className="ml-2 truncate text-sm text-dark-900">
-              {session?.user.email}
-            </p>
-          </button>
+          <UserMenu
+            email={session?.user.email ?? ""}
+            imageUrl={session?.user.image ?? undefined}
+          />
         </nav>
-
         <div className="w-full overflow-hidden">{props.children}</div>
       </div>
     </main>
diff --git a/src/app/_components/modal.tsx b/src/app/components/modal.tsx
similarity index 100%
rename from src/app/_components/modal.tsx
rename to src/app/components/modal.tsx