fix: showing error on input

src/app/[lang]/(front-end)/(user-auth)/layout.tsx

@@ -37,7 +37,7 @@ const Auth = async ({ children, params }: Props) => {
 						"https://images.unsplash.com/photo-1667133295315-820bb6481730?w=500&h=500&auto=format&fit=crop&q=100&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTE1fHxkZW50YWx8ZW58MHwxfDB8fHwy"
 					}
 					alt="Logo"
-					className="hidden aspect-square object-cover md:block xl:size-full"
+					className="hidden aspect-square rounded-md object-cover md:block xl:size-full"
 					width={500}
 					height={500}
 				/>

src/app/[lang]/(front-end)/(user-auth)/login/logInForm.tsx

@@ -48,19 +48,22 @@ export const LoginForm = ({ dictionary }: Props) => {
 				error={errors.email?.message}
 				icon={<Email />}
 				placeholder={dictionary?.emailPlaceholder || "Email"}
+				labelName="Email"
 			/>
 
 			<InputComboForPassword
 				register={register("password")}
 				error={errors.password?.message}
 				icon={<Lock />}
 				placeholder="*******"
+				labelName="Password"
 			/>
 			<InputComboForPassword
 				register={register("confirmPassword")}
 				error={errors.confirmPassword?.message}
 				icon={<Lock />}
 				placeholder="******"
+				labelName="confirm Password"
 			/>
 			<div className="flex items-center justify-between">
 				<p className="text-zinc-800">{dictionary.ForgotPassword}</p>

src/app/[lang]/admin/(dashboard)/page.tsx

@@ -7,6 +7,6 @@ const Admin = async () => {
 			<DashboardAnalytics />
 		</section>
 	);
-};
+};	
 
 export default Admin;

src/app/[lang]/admin/(doctors-auth)/layout.tsx

@@ -27,7 +27,13 @@ const Auth = async ({ children, params }: Props) => {
 				<Home className="size-6 text-gray-800" />
 			</Link>
 			<div>
-				<Image src={OT} alt="Logo" className="hidden aspect-square object-cover md:block" width={500} height={500} />
+				<Image
+					src={OT}
+					alt="Logo"
+					className="hidden aspect-square rounded-md object-cover md:block"
+					width={500}
+					height={500}
+				/>
 			</div>
 			<div>
 				<section className="dark:bg-gray-900">

src/app/[lang]/admin/(doctors-auth)/login/page.tsx

@@ -26,7 +26,7 @@ const Login = () => {
 		console.log("🚀 ~ onSubmit ~ data:", data);
 
 		setIsLoading(true);
-		const toastId = toast.loading("Processing...");
+		const toastId = toast.loading("Submitting...");
 		try {
 			const loginReq = await loginWithAuthJs({
 				email: data.email,
@@ -52,19 +52,25 @@ const Login = () => {
 				error={errors.email?.message}
 				icon={<Email />}
 				placeholder="Email address"
+				labelName="Email"
+				isShowError
 			/>
 
 			<InputComboForPassword
 				register={register("password")}
 				error={errors.password?.message}
 				icon={<Lock />}
 				placeholder="*******"
+				labelName="Password"
+				isShowError
 			/>
 			<InputComboForPassword
 				register={register("confirmPassword")}
 				error={errors.confirmPassword?.message}
 				icon={<Lock />}
 				placeholder="******"
+				labelName="Confirm  Password"
+				isShowError
 			/>
 
 			<button

src/app/globals.css

@@ -99,8 +99,13 @@
 		@apply relative flex items-center 2xl:shadow-sm 2xl:placeholder:text-2xl;
 	}
 	.inputCombo-label {
-		@apply block font-bold text-gray-700;
+		@apply block font-bold capitalize text-gray-700;
 	}
+
+	.inputCombo-error {
+		@apply mt-[0.15rem] text-xs font-semibold text-red-400;
+	}
+
 	.inputCombo-warning {
 		@apply text-sm font-bold italic text-red-500;
 	}

src/auth.ts

@@ -24,6 +24,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
 				await connectDB();
 				const user = await db.Doctors.findOne({ email: email });
 				if (!user) throw new Error("User not found");
+				if (user?.isPending) throw new Error("Wait for admin approval"); 
 
 				const isMatch = await bcrypt.compare(password, user?.password);
 				if (!isMatch) throw new Error("Email or Password is not correct");

src/components/ui/inputCombo.tsx

@@ -7,11 +7,20 @@ interface Props extends React.ComponentProps<"input"> {
 	register: UseFormRegisterReturn;
 	error: string | undefined;
 	wrapperClassName?: string;
-
 	labelName?: string;
+	isShowError?: boolean;
 }
 
-export const InputCombo = ({ icon, className, register, wrapperClassName, error, labelName, ...props }: Props) => {
+export const InputCombo = ({
+	icon,
+	className,
+	register,
+	wrapperClassName,
+	error,
+	labelName,
+	isShowError = true,
+	...props
+}: Props) => {
 	return (
 		<div>
 			{labelName && (
@@ -30,6 +39,8 @@ export const InputCombo = ({ icon, className, register, wrapperClassName, error,
 					{...props}
 				/>
 			</div>
+
+			{isShowError && <p className="inputCombo-error">{error || ""}</p>}
 		</div>
 	);
 };

src/components/ui/inputComboForPassword.tsx

@@ -11,6 +11,7 @@ interface Props extends React.ComponentProps<"input"> {
 	error: string | undefined;
 	wrapperClassName?: string;
 	labelName?: string;
+	isShowError?: boolean;
 }
 
 export const InputComboForPassword = ({
@@ -20,6 +21,7 @@ export const InputComboForPassword = ({
 	wrapperClassName,
 	error,
 	labelName,
+	isShowError = true,
 	...props
 }: Props) => {
 	const [isShow, setIsShow] = useState(false);
@@ -47,6 +49,8 @@ export const InputComboForPassword = ({
 					{!isShow ? <EyeOff className="text-gray-600" /> : <Eye className="text-gray-600" />}
 				</button>
 			</div>
+
+			{isShowError && <p className="inputCombo-error">{error}</p>}
 		</div>
 	);
 };

src/schema/loginSchema.ts

@@ -3,12 +3,11 @@ import { z } from "zod";
 export const loginFormSchema = z
 	.object({
 		email: z.string().email(),
-		password: z.string().min(8, { message: "Password is too short" }).max(20, { message: "Password is too long" }),
-
+		password: z.string().min(8, { message: "Password is too short" }).max(40, { message: "Password is too long" }),
 		confirmPassword: z
 			.string()
 			.min(8, { message: "Password is too short" })
-			.max(20, { message: "Password is too long" }),
+			.max(40, { message: "Password is too long" }),
 	})
 	.refine((data) => data.password === data.confirmPassword, {
 		message: "Passwords do not match",