Login and Signup page

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