From c883bee10ed40792c2ae35bdd9745649cfffa2f2 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 13 Feb 2024 14:42:56 +0000
Subject: feature: Add login page and logout button

---
 packages/web/app/dashboard/components/Sidebar.tsx  | 16 +++++-----
 .../dashboard/components/SidebarProfileOptions.tsx | 35 ++++++++++++++++++++++
 packages/web/app/dashboard/layout.tsx              |  2 +-
 packages/web/app/page.tsx                          | 27 +++++++----------
 packages/web/app/signin/components/SignInForm.tsx  | 16 ++++++++++
 .../app/signin/components/SignInProviderButton.tsx | 21 +++++++++++++
 packages/web/app/signin/page.tsx                   | 19 ++++++++++++
 packages/web/components/auth/login.tsx             | 17 -----------
 packages/web/components/auth/logout.tsx            | 17 -----------
 9 files changed, 111 insertions(+), 59 deletions(-)
 create mode 100644 packages/web/app/dashboard/components/SidebarProfileOptions.tsx
 create mode 100644 packages/web/app/signin/components/SignInForm.tsx
 create mode 100644 packages/web/app/signin/components/SignInProviderButton.tsx
 create mode 100644 packages/web/app/signin/page.tsx
 delete mode 100644 packages/web/components/auth/login.tsx
 delete mode 100644 packages/web/components/auth/logout.tsx

diff --git a/packages/web/app/dashboard/components/Sidebar.tsx b/packages/web/app/dashboard/components/Sidebar.tsx
index d2ec14a6..0563e26f 100644
--- a/packages/web/app/dashboard/components/Sidebar.tsx
+++ b/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>
   );
diff --git a/packages/web/app/dashboard/components/SidebarProfileOptions.tsx b/packages/web/app/dashboard/components/SidebarProfileOptions.tsx
new file mode 100644
index 00000000..f931b63e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/web/app/dashboard/layout.tsx b/packages/web/app/dashboard/layout.tsx
index f39bd6fb..9d3568a5 100644
--- a/packages/web/app/dashboard/layout.tsx
+++ b/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>
   );
 }
diff --git a/packages/web/app/page.tsx b/packages/web/app/page.tsx
index ffc128a5..f467b64b 100644
--- a/packages/web/app/page.tsx
+++ b/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");
 }
diff --git a/packages/web/app/signin/components/SignInForm.tsx b/packages/web/app/signin/components/SignInForm.tsx
new file mode 100644
index 00000000..ea19dedb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/web/app/signin/components/SignInProviderButton.tsx b/packages/web/app/signin/components/SignInProviderButton.tsx
new file mode 100644
index 00000000..0831236c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/web/app/signin/page.tsx b/packages/web/app/signin/page.tsx
new file mode 100644
index 00000000..afe63dd3
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/web/components/auth/login.tsx b/packages/web/components/auth/login.tsx
deleted file mode 100644
index 4cd55546..00000000
--- a/packages/web/components/auth/login.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-import { signIn } from "next-auth/react";
-
-export const LoginButton = () => {
-  return (
-    <button
-      className="btn btn-primary"
-      onClick={() =>
-        signIn(undefined, {
-          callbackUrl: "/",
-        })
-      }
-    >
-      Sign in
-    </button>
-  );
-};
diff --git a/packages/web/components/auth/logout.tsx b/packages/web/components/auth/logout.tsx
deleted file mode 100644
index 8d627f68..00000000
--- a/packages/web/components/auth/logout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-import { signOut } from "next-auth/react";
-
-export const LogoutButton = () => {
-  return (
-    <button
-      className="btn btn-ghost normal-case"
-      onClick={() =>
-        signOut({
-          callbackUrl: "/",
-        })
-      }
-    >
-      Sign Out
-    </button>
-  );
-};
-- 
cgit v1.2.3-70-g09d2