some fixes

app/app/login/page.tsx

@@ -19,6 +19,7 @@ import { useRouter } from "next/navigation";
 import { SkeletonCard } from "@/components/CardComponents/SkeletonCard";
 import { Turnstile } from '@marsidev/react-turnstile'
 import { captchaVerify } from "@/lib/actions/captchaVerify";
+import { LoadingSpinner } from "@/components/LoadingComponents/LoadingSpinner";
 
 const LoginPage = () => {
   const [email, setEmail] = useState("");
@@ -28,6 +29,8 @@ const LoginPage = () => {
   const [loading, setLoading] = useState(true);
   const [token,setToken] = useState<string>("")
   const site_id = process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY || ""
+
+  const [confirmLoading,setConfirmLoading] = useState(false)
 
   const { data } = useSession();
   useEffect(() => {
@@ -81,6 +84,7 @@ const LoginPage = () => {
 
             <Button disabled={token==""} className="w-32 mt-4"
               onClick={async () => {
+                setConfirmLoading(true);
                 const verify = await captchaVerify(token);
 
                 if(verify == 403){
@@ -98,6 +102,7 @@ const LoginPage = () => {
                   redirect: false,
                   token:token
                 });
+                setConfirmLoading(false);
                 if (res.status == 200) {
                   toast({
                     title: "User logged in successfully !!",
@@ -113,6 +118,7 @@ const LoginPage = () => {
             >
               Login
             </Button> 
+            {confirmLoading?<LoadingSpinner className="mt-4" size={26}/>:<div></div>}
           </div>
         </CardFooter>
       </Card>

app/app/register/page.tsx

@@ -19,6 +19,8 @@ import { useSession } from "next-auth/react";
 import { SkeletonCard } from "@/components/CardComponents/SkeletonCard";
 import { Turnstile } from "@marsidev/react-turnstile";
 import { captchaVerify } from "@/lib/actions/captchaVerify";
+import { LoadingSpinner } from "@/components/LoadingComponents/LoadingSpinner";
+import { HTTP_STATUS } from "@/lib/constants";
 
 
 
@@ -27,9 +29,13 @@ const RegisterPage = () => {
   const [token,setToken] = useState<string>("")
   const site_id = process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY || ""
 
+  const [confirmLoading,setConfirmLoading] = useState(false)
+
   const registerUser = async (formData: FormData) => {
-    const verify = await captchaVerify(token);
+    // Issue :- Component is not rendering after the below setState
+    setConfirmLoading(true)
 
+    const verify = await captchaVerify(token);
     if(verify == 403){
         toast({
           title:"Invalid Captcha",
@@ -39,15 +45,28 @@ const RegisterPage = () => {
         return;
     }
 
-    const status = await register(formData);
-
-    if (status == 200) {
+    const status:number = await register(formData);
+    
+    if (status == HTTP_STATUS.OK) {
       toast({
         title: "User registered successfully !!",
         description: "Please login to continue",
       });
       redirect("/app/login");
-    } else if (status == 403) {
+    } else if ( status == HTTP_STATUS.BAD_REQUEST){
+      toast({
+        title: "Invalid Inputs !!",
+        description: "Enter valid email / Password should contains atleast 6 characters",
+        variant:"destructive"
+      });
+    } 
+    else if ( status == HTTP_STATUS.NOT_FOUND){
+      toast({
+        title: "Please enter all fields",
+        variant:"destructive"
+      });
+    } 
+    else if (status == HTTP_STATUS.UNAUTHORIZED) {
       toast({
         title: "User already exists !!",
         variant: "destructive",
@@ -58,6 +77,8 @@ const RegisterPage = () => {
         variant: "destructive",
       });
     }
+
+    setConfirmLoading(false)
   };
 
   const { data } = useSession();
@@ -75,7 +96,7 @@ const RegisterPage = () => {
         <SkeletonCard />
       </div>
     );
-
+  
   return (
     <div className="flex w-full h-screen justify-center items-center px-4">
       <Card className="w-[400px]">
@@ -87,6 +108,12 @@ const RegisterPage = () => {
         </CardHeader>
         <form action={registerUser}>
           <CardContent>
+          <Label>Name</Label>
+            <Input
+              name="name"
+              className="mb-4"
+              placeholder="Enter your name"
+            />
             <Label>Email</Label>
             <Input
               name="email"
@@ -107,6 +134,7 @@ const RegisterPage = () => {
               setToken(token)
             }} siteKey={site_id} />
               <Button className="mt-4" disabled={token == ""}>Register</Button>
+              {confirmLoading?<LoadingSpinner className="mt-4" size={26}/>:<div></div>}
             </div>
           </CardFooter>
         </form>

components/CardComponents/LinkCard.tsx

@@ -41,8 +41,8 @@ export function LinkCard({
           <LinkIcon className="h-4 w-4 md:h-6 md:w-6" />
         </div>
         <div className="flex flex-col ml-6 w-full">
-          <div className="flex justify-between ">
-            <h1 className="text-lg font-bold hover:underline cursor-pointer">
+          <div className="flex justify-between">
+            <h1 className="text-lg md:w-[70%] w-full break-all font-bold hover:underline cursor-pointer">
               {title}
             </h1>
             <div className="hidden md:block">
@@ -57,7 +57,7 @@ export function LinkCard({
                 </Button>
               </LinkShareDialog>
               <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={link}>
-                <Button variant="outline" className="ml-2">
+                <Button variant="outline" className="ml-3">
                   <Pencil size={15} className="mr-2" />
                   Edit
                 </Button>

components/CardComponents/QRCodeCardComponent.tsx

@@ -50,7 +50,7 @@ export function QRCodeCardComponent({ qrcode }: { qrcode: any }) {
   }
 
   return (
-    <div className="flex md:flex-row flex-col mt-6 p-6 rounded-xl border-[0.5px] shadow-md">
+    <div className="flex md:flex-row flex-col mt-8 p-6 rounded-xl border-[0.5px] shadow-md">
       <div className="flex justify-center md:justify-start">
         <div className="p-4 bg-white rounded-2xl">
           <div ref={qrCodeRef}>
@@ -60,7 +60,7 @@ export function QRCodeCardComponent({ qrcode }: { qrcode: any }) {
       </div>
       <div className="flex flex-col ml-6 md:mt-0 mt-4 w-full">
         <div className="flex justify-between pr-8">
-          <Label className="text-2xl font-bold cursor-pointer hover:underline">
+          <Label className="text-2xl md:w-[90%] w-full break-all font-bold cursor-pointer hover:underline">
             {qrcode.title}
           </Label>
           <div className="hidden md:flex">

components/NavigationBars/SideNavBar.tsx

@@ -27,7 +27,7 @@ export function SideNavBar() {
   }, [status]);
 
   return (
-    <div className="md:px-4 md:border-r-2 border-0 h-screen md:fixed static md:left-0 pt-12">
+    <div className="md:px-4 md:border-r-2 border-0 h-screen md:fixed static md:left-0 md:pt-16 pt-12">
       {show ? (
         <div></div>
       ) : (

lib/actions/register.ts

@@ -1,14 +1,26 @@
 "use server";
 
-
 import bcrypt from "bcrypt";
 import PrismaClientManager from "../services/pgConnect";
+import { HTTP_STATUS } from "../constants";
+import z from 'zod'
+
+const emailValid = z.string().email()
+const passwordValid = z.string().min(6)
 
-const prisma = PrismaClientManager.getInstance().getPrismaClient();
 
 const register = async (formData: FormData) => {
-  const password: any = formData.get("password");
-  const email: any = formData.get("email");
+  const password: string = formData.get("password") as string;
+  const email: string = formData.get("email") as string;
+  const name: string = formData.get("name") as string;
+  const prisma = PrismaClientManager.getInstance().getPrismaClient();
+  const emailRes = emailValid.safeParse(email)
+  const passwordRes = passwordValid.safeParse(password)
+
+  if(!emailRes.success || !passwordRes.success) return HTTP_STATUS.BAD_REQUEST
+
+  if(!password || !email || !name)
+      return HTTP_STATUS.NOT_FOUND;
 
   // check if the user already exists
   const user = await prisma.user.findFirst({
@@ -18,7 +30,7 @@ const register = async (formData: FormData) => {
   });
 
 
-  if (user) return 403;
+  if (user) return HTTP_STATUS.UNAUTHORIZED;
 
   // hashing the password
   const passwordHash = await bcrypt.hash(password, 10);
@@ -30,15 +42,15 @@ const register = async (formData: FormData) => {
       data: {
         password: passwordHash,
         email: email,
-        name: "TODO",
+        name: name,
         created_at: new Date(),
         imageurl: "https://avatar.iran.liara.run/public",
       },
     });
 
-    return 200;
+    return HTTP_STATUS.OK;
   } catch (e) {
-    return 500
+    return HTTP_STATUS.INTERNAL_SERVER_ERROR;
   }
 }
 

lib/services/pgConnect.ts

@@ -1,10 +1,15 @@
 import { PrismaClient } from "@prisma/client";
 
+let i = 0
+
 class PrismaClientManager {
   private static instance: PrismaClientManager;
   private prismaClient: PrismaClient;
 
   private constructor() {
+    console.log("new instance of prisma is created!!")
+    console.log(i)
+    i += 1
     this.prismaClient = new PrismaClient();
   }
 

package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/nextjs": "^7.114.0",
     "@types/ua-parser-js": "^0.7.39",
     "@vercel/analytics": "^1.2.2",