feature: Add login page and logout button

packages/web/app/dashboard/components/Sidebar.tsx

@@ -11,6 +11,8 @@ import {
 import { redirect } from "next/navigation";
 import SidebarItem from "./SidebarItem";
 import { getServerAuthSession } from "@/server/auth";
+import Link from "next/link";
+import SidebarProfileOptions from "./SidebarProfileOptions";
 
 export default async function Sidebar() {
   const session = await getServerAuthSession();
@@ -20,10 +22,12 @@ export default async function Sidebar() {
 
   return (
     <aside className="flex h-full w-60 flex-col border-r p-4">
-      <div className="mb-5 flex items-center rounded-lg px-1 text-slate-900">
-        <Brain />
-        <span className="ml-2 text-base font-semibold">Remember</span>
-      </div>
+      <Link href={"/dashboard/bookmarks"}>
+        <div className="mb-5 flex items-center rounded-lg px-1 text-slate-900">
+          <Brain />
+          <span className="ml-2 text-base font-semibold">Remember</span>
+        </div>
+      </Link>
       <hr />
       <div>
         <ul className="mt-5 space-y-2 text-sm font-medium">
@@ -52,9 +56,7 @@ export default async function Sidebar() {
       </div>
       <div className="mt-auto flex justify-between">
         <div className="my-auto"> {session.user.name} </div>
-        <Button variant="ghost" className="h-10">
-          <MoreHorizontal />
-        </Button>
+        <SidebarProfileOptions />
       </div>
     </aside>
   );

packages/web/app/dashboard/components/SidebarProfileOptions.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { LogOut, MoreHorizontal } from "lucide-react";
+import { signOut } from "next-auth/react";
+
+export default function SidebarProfileOptions() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost">
+          <MoreHorizontal />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-fit">
+        <DropdownMenuItem
+          onClick={() =>
+            signOut({
+              callbackUrl: "/",
+            })
+          }
+        >
+          <LogOut className="mr-2 size-4" />
+          <span>Sign Out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

packages/web/app/dashboard/layout.tsx

@@ -10,7 +10,7 @@ export default async function Dashboard({
       <div className="flex-none">
         <Sidebar />
       </div>
-      <div className="flex-1 overflow-y-auto bg-gray-100">{children}</div>
+      <main className="flex-1 overflow-y-auto bg-gray-100">{children}</main>
     </div>
   );
 }

packages/web/app/page.tsx

@@ -1,19 +1,12 @@
-import { LoginButton } from "@/components/auth/login";
-import { LogoutButton } from "@/components/auth/logout";
-import Link from "next/link";
+import { getServerAuthSession } from "@/server/auth";
+import { redirect } from "next/navigation";
 
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div>
-        <LoginButton />
-        <br />
-        <br />
-        <LogoutButton />
-        <br />
-        <br />
-        <Link href="/bookmarks">Bookmarks</Link>
-      </div>
-    </main>
-  );
+export default async function Home() {
+  // TODO: Home currently just redirects between pages until we build a proper landing page
+  const session = await getServerAuthSession();
+  if (!session) {
+    redirect("/signin");
+  }
+
+  redirect("/dashboard/bookmarks");
 }

packages/web/app/signin/components/SignInForm.tsx

@@ -0,0 +1,16 @@
+import { getProviders, signIn } from "next-auth/react";
+import SignInProviderButton from "./SignInProviderButton";
+
+export default async function SignInForm() {
+  const providers = (await getProviders()) ?? [];
+
+  return (
+    <div>
+      {Object.values(providers).map((provider) => (
+        <div key={provider.name}>
+          <SignInProviderButton provider={provider} />
+        </div>
+      ))}
+    </div>
+  );
+}

packages/web/app/signin/components/SignInProviderButton.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { ClientSafeProvider, signIn } from "next-auth/react";
+
+export default function SignInProviderButton({
+  provider,
+}: {
+  provider: ClientSafeProvider;
+}) {
+  return (
+    <Button
+      onClick={() =>
+        signIn(provider.id, {
+          callbackUrl: "/",
+        })
+      }
+    >
+      Sign in with {provider.name}
+    </Button>
+  );
+}

packages/web/app/signin/page.tsx

@@ -0,0 +1,19 @@
+import { Brain } from "lucide-react";
+import SignInForm from "./components/SignInForm";
+
+export default async function SignInPage() {
+  // TODO Add support for email and credential signin form
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <div className="flex space-x-2">
+        <span>
+          <Brain size="30" className="h-full" />
+        </span>
+        <span className="text-4xl">Remember</span>
+      </div>
+      <div className="mt-20 flex w-96 flex-col items-center rounded-xl border border-gray-300 p-20">
+        <SignInForm />
+      </div>
+    </div>
+  );
+}