Avatar dropdown display login/logout based on user state

app/dashboard/page.tsx

@@ -1,14 +1,21 @@
 import { bookmarkCategoryWithBookmarksSchema } from '@/types'
-import { bookmark } from '@/lib/schema'
 import { db } from '@/lib/db'
 import EditBookmarkForm from '@/components/editBookmarkForm'
 import BookmarkTabs from '@/components/tabs'
+import { cookies } from 'next/headers'
+import { getUser } from '@/lib/auth'
 
 export const dynamic = 'force-dynamic'
 export const fetchCache = 'force-no-store'
 
 export default async function DashboardPage() {
+	const token = cookies().get('token')
+
+	const session_user = await getUser(token)
+
 	const data = await db.query.bookmarkCategory.findMany({
+		where: (bookmark, { eq }) =>
+			eq(bookmark.userId, session_user ? session_user.id : 0),
 		with: {
 			bookmark: true,
 		},

app/login/page.tsx

@@ -9,6 +9,7 @@ import {
 } from '@nextui-org/modal'
 import { Button } from '@nextui-org/button'
 import { Input } from '@nextui-org/input'
+import { Link } from '@nextui-org/link'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 
@@ -56,7 +57,7 @@ export default function LoginPage() {
 			<Modal
 				isOpen={true}
 				hideCloseButton
-				placement='top-center'>
+				placement='center'>
 				<ModalContent
 					onKeyUp={(e) => {
 						if (e.key === 'Enter') onSubmit()
@@ -98,6 +99,15 @@ export default function LoginPage() {
 										invalid ? 'invalid' : 'valid'
 									}
 								/>
+								<div className='flex justify-end px-1 py-2'>
+									<Link
+										color='primary'
+										href='/signup'
+										size='sm'
+										underline='always'>
+										Don't have an account? Create here
+									</Link>
+								</div>
 							</ModalBody>
 							<ModalFooter>
 								<Button

app/signup/page.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import {
+	Modal,
+	ModalContent,
+	ModalHeader,
+	ModalBody,
+	ModalFooter,
+} from '@nextui-org/modal'
+import { Button } from '@nextui-org/button'
+import { Input } from '@nextui-org/input'
+import { Link } from '@nextui-org/link'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+export default function SignUpForm() {
+	const router = useRouter()
+	const onSubmit = async () => {
+		const body = {
+			username,
+			email,
+			password,
+			password_confirm: passwordConfirm,
+		}
+		const response = await fetch('/api/auth/signup', {
+			method: 'POST',
+			body: JSON.stringify(body),
+		})
+
+		const responseData = await response.json()
+
+		if (responseData.status === 200) {
+			setUsername('')
+			setEmail('')
+			setPassword('')
+			setPasswordConfirm('')
+			return
+		}
+
+		if (responseData.message) {
+			setEmailInvalid(true)
+		}
+	}
+
+	const [username, setUsername] = useState('')
+	const [email, setEmail] = useState('')
+	const [password, setPassword] = useState('')
+	const [passwordConfirm, setPasswordConfirm] = useState('')
+
+	const [emailInvalid, setEmailInvalid] = useState(false)
+	const [passwordInvalid, setPasswordInvalid] = useState(false)
+
+	return (
+		<>
+			<Modal
+				isOpen={true}
+				placement='center'>
+				<ModalContent>
+					{() => (
+						<>
+							<ModalHeader className='flex flex-col gap-1'>
+								Sign Up
+							</ModalHeader>
+							<ModalBody>
+								<Input
+									autoFocus
+									label='Username'
+									placeholder='Enter your username'
+									variant='bordered'
+									value={username}
+									onChange={(event) => {
+										setUsername(event.target.value)
+									}}
+								/>
+								<Input
+									label='Email'
+									placeholder='Enter your email'
+									variant='bordered'
+									value={email}
+									onChange={(event) => {
+										setEmailInvalid(false)
+										setEmail(event.target.value)
+									}}
+									color={emailInvalid ? 'danger' : 'default'}
+									errorMessage={
+										emailInvalid && 'Account already exist'
+									}
+									validationState={
+										emailInvalid ? 'invalid' : 'valid'
+									}
+								/>
+								<Input
+									label='Password'
+									placeholder='Enter your password'
+									type='password'
+									variant='bordered'
+									value={password}
+									onChange={(event) => {
+										setPassword(event.target.value)
+									}}
+								/>
+								<Input
+									label='Confirm Password'
+									placeholder='Confirm your password'
+									type='password'
+									variant='bordered'
+									value={passwordConfirm}
+									onChange={(event) => {
+										setPasswordConfirm(event.target.value)
+									}}
+								/>
+								<div className='flex justify-end px-1 py-2'>
+									<Link
+										color='primary'
+										href='/login'
+										size='sm'
+										underline='always'>
+										Already have an account? Login
+									</Link>
+								</div>
+							</ModalBody>
+							<ModalFooter>
+								<Button
+									color='primary'
+									onPress={onSubmit}>
+									Sign up
+								</Button>
+							</ModalFooter>
+						</>
+					)}
+				</ModalContent>
+			</Modal>
+		</>
+	)
+}

components/navbar.tsx

@@ -47,6 +47,10 @@ export const Navbar = ({ user }: { user: User | null }) => {
 		router.refresh()
 	}
 
+	const login = () => {
+		router.push('/login')
+	}
+
 	return (
 		<NextUINavbar
 			maxWidth='xl'
@@ -124,12 +128,22 @@ export const Navbar = ({ user }: { user: User | null }) => {
 										{user ? user.email : 'Guest'}
 									</p>
 								</DropdownItem>
-								<DropdownItem
-									key='logout'
-									color='danger'
-									onPress={() => logout()}>
-									Log Out
-								</DropdownItem>
+								{user ? (
+									<DropdownItem
+										key='logout'
+										color='danger'
+										className='text-danger'
+										onPress={() => logout()}>
+										Log Out
+									</DropdownItem>
+								) : (
+									<DropdownItem
+										key='login'
+										color='primary'
+										onPress={() => login()}>
+										Login
+									</DropdownItem>
+								)}
 							</DropdownMenu>
 						</Dropdown>
 					</div>