feat: login redirect and logout

src/app/(frontend)/books/[bookId]/page.client.tsx

@@ -13,6 +13,7 @@ import { RichText } from '@/components/RichText'
 import { useMemo, useState } from 'react'
 import requestHold from '../../serverCalls/requestHold'
 import { useGlobal } from '@/providers/GlobalProvider'
+import Link from 'next/link'
 
 type DropDownProps = {
   currentRepository: Repository
@@ -85,6 +86,8 @@ export default function BookByIdPageClient(props: Props) {
 
   const { user } = useGlobal()
 
+  console.log(user)
+
   const [isRequestingCopy, setIsRequestingCopy] = useState(false)
   const [selectedRepository, setSelectedRepository] = useState<Repository | null>(
     repos.length ? repos[0] : null,
@@ -147,15 +150,24 @@ export default function BookByIdPageClient(props: Props) {
 
           <p className="my-6 text-accent-foreground">{book.summary}</p>
 
-          <RepoDropdown
+          {!user ? (
-            currentRepository={repos[0]}
+            <Link
-            repositories={repos}
+              href={`/login?redirectUrl=/books/${book.id}`}
-            isRequesting={isRequestingCopy}
+              className="underline dark:text-amber-200 text-amber-700 text-lg font-medium"
-            doesHoldExist={doesHoldExist}
+            >
-            isDisabled={isRequestDisabled || !user}
+              Sign in to request a hold
-            onClickRequest={onClickRequest}
+            </Link>
-            onChange={(repo) => setSelectedRepository(repo)}
+          ) : (
-          />
+            <RepoDropdown
+              currentRepository={repos[0]}
+              repositories={repos}
+              isRequesting={isRequestingCopy}
+              doesHoldExist={doesHoldExist}
+              isDisabled={isRequestDisabled || !user}
+              onClickRequest={onClickRequest}
+              onChange={(repo) => setSelectedRepository(repo)}
+            />
+          )}
 
           <div className="mt-10 border-t border-gray-200 pt-10 ">
             <h3 className="text-sm font-medium text-foreground">Genres</h3>

src/app/(frontend)/logout/page.client.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+const LogoutClientPage = () => {
+  const searchParams = useSearchParams()
+
+  fetch('/api/users/logout', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).finally(() => {
+    window.location.href = searchParams.get('redirectUrl') || '/'
+  })
+
+  return (
+    <section>
+      <p>Logging you out . . .</p>
+    </section>
+  )
+}
+
+export default LogoutClientPage

src/app/(frontend)/logout/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from 'react'
+import LogoutClientPage from './page.client'
+
+const LogoutPage = () => {
+  return (
+    <Suspense>
+      <LogoutClientPage />
+    </Suspense>
+  )
+}
+
+export default LogoutPage

src/components/login-form.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useGlobal } from '@/providers/GlobalProvider'
 
@@ -13,6 +13,7 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
   const router = useRouter()
   const { setUser } = useGlobal()
   const [isLoading, setIsLoading] = useState(false)
+  const searchParams = useSearchParams()
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -42,7 +43,7 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
 
         setUser(user.user)
 
-        if (user.token) router.push('/')
+        if (user.token) router.push(searchParams.get('redirectUrl') || '/')
       } catch (error) {
         console.error('Login failed:', error)
       } finally {
@@ -68,7 +69,7 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
                     id="email"
                     name="email"
                     type="email"
-                    placeholder="m@example.com"
+                    placeholder="me@example.com"
                     required
                   />
                 </div>