feat: logout

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 (

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";

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>;

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";
 

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";

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>;

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>
+  );
+}

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>

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">
+          <UserMenu
-            {session?.user.image ? (
+            email={session?.user.email ?? ""}
-              <Image
+            imageUrl={session?.user.image ?? undefined}
-                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>
         </nav>
-
         <div className="w-full overflow-hidden">{props.children}</div>
       </div>
     </main>