From 6f448cfd91b9a1b3eb788259091290aa0bbba496 Mon Sep 17 00:00:00 2001
From: warmachine028 <75939390+warmachine028@users.noreply.github.com>
Date: Thu, 5 Sep 2024 03:36:15 +0530
Subject: [PATCH] fix: issue #26

---
 client/src/app/(auth)/login/page.tsx   |  4 ++--
 client/src/app/(auth)/signup/page.tsx  |  4 ++--
 client/src/app/layout.tsx              |  1 -
 client/src/components/forms/SignUp.tsx | 11 ++++++++++-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/src/app/(auth)/login/page.tsx b/client/src/app/(auth)/login/page.tsx
index 2ca417a..af405b4 100644
--- a/client/src/app/(auth)/login/page.tsx
+++ b/client/src/app/(auth)/login/page.tsx
@@ -8,14 +8,14 @@ export const metadata: Metadata = { title: 'Log In' }
 
 const LogIn = () => {
 	return (
-		<div className="bg-card flex h-full max-h-[40rem] overflow-hidden rounded-2xl shadow-2xl md:min-w-[64rem]">
+		<div className="bg-card flex max-h-[40rem] w-full overflow-hidden rounded-2xl shadow-2xl sm:h-full md:min-w-[64rem]">
 			<Image src={hero} priority alt="log-in" className="hidden w-1/2 object-cover md:block" />
 
 			<div className="w-full space-y-10 overflow-y-auto md:w-1/2 md:p-10">
 				<div className="space-y-1 text-center">
 					<h1 className="text-3xl font-bold">Welcome Back!</h1>
 				</div>
-				<div className="space-y-5">
+				<div className="space-y-5 px-5">
 					<LogInForm />
 					<h6 className="block text-center">
 						Don&apos;t have an account?{' '}
diff --git a/client/src/app/(auth)/signup/page.tsx b/client/src/app/(auth)/signup/page.tsx
index aa44b17..33dcf05 100644
--- a/client/src/app/(auth)/signup/page.tsx
+++ b/client/src/app/(auth)/signup/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = { title: 'Sign Up' }
 
 const SignUp = () => {
 	return (
-		<div className="bg-card flex h-full max-h-[40rem] overflow-hidden rounded-2xl shadow-2xl md:min-w-[64rem]">
+		<div className="bg-card flex max-h-[40rem] w-full overflow-hidden rounded-2xl shadow-2xl sm:h-full md:min-w-[64rem]">
 			<div className="w-full space-y-10 overflow-y-auto md:w-1/2 md:p-10">
 				<div className="space-y-1 text-center">
 					<h1 className="text-3xl font-bold">Join Us Now</h1>
@@ -16,7 +16,7 @@ const SignUp = () => {
 						A place where even <span className="italic">programmers</span> can find a frend
 					</p>
 				</div>
-				<div className="space-y-5">
+				<div className="space-y-5 px-5">
 					<SignUpForm />
 					<h6 className="block text-center">
 						Already have an account?{' '}
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 731440e..11ae62d 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -23,7 +23,6 @@ export const metadata: Metadata = {
 }
 
 // TODO: shadcn-ui/toast
-// TODO: fix issue https://github.com/warmachine028/next-book/issues/26
 const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
 	return (
 		//? FIX: https://github.com/shadcn-ui/ui/issues/1906#issuecomment-1807426212
diff --git a/client/src/components/forms/SignUp.tsx b/client/src/components/forms/SignUp.tsx
index 17d4fe2..fd43c6b 100644
--- a/client/src/components/forms/SignUp.tsx
+++ b/client/src/components/forms/SignUp.tsx
@@ -39,7 +39,13 @@ const SignUpForm = () => {
 						<FormItem>
 							<FormLabel>Username</FormLabel>
 							<FormControl>
-								<Input autoComplete="username" placeholder="eg: pritamKunduC24" {...field} />
+								<Input
+									pattern="^[a-zA-Z0-9_-]+$"
+									autoComplete="username"
+									placeholder="eg: pritamKunduC24"
+									title="Enter your username"
+									{...field}
+								/>
 							</FormControl>
 							{useFormState().errors.userName ? (
 								<FormMessage />
@@ -57,6 +63,7 @@ const SignUpForm = () => {
 							<FormLabel>Email</FormLabel>
 							<FormControl>
 								<Input
+									title="Enter your email"
 									autoComplete="email"
 									placeholder="eg: pritam.kundu@email.com"
 									type="email"
@@ -79,6 +86,8 @@ const SignUpForm = () => {
 							<FormLabel>Password</FormLabel>
 							<FormControl>
 								<PasswordInput
+									title="Enter your password"
+									minLength={8}
 									autoComplete="new-password"
 									placeholder="eg: 1@$abShadC23"
 									type="password"