From f0ca3fc17c654052f90eccb9e120cb4d074dbc61 Mon Sep 17 00:00:00 2001
From: Vijesh Shetty <vijeshsshetty@gmail.com>
Date: Mon, 3 Jun 2024 18:21:43 +0530
Subject: [PATCH] some fixes

---
 app/app/login/page.tsx                        |  6 +++
 app/app/register/page.tsx                     | 40 ++++++++++++++++---
 components/CardComponents/LinkCard.tsx        |  6 +--
 .../CardComponents/QRCodeCardComponent.tsx    |  4 +-
 components/NavigationBars/SideNavBar.tsx      |  2 +-
 lib/actions/register.ts                       | 28 +++++++++----
 lib/services/pgConnect.ts                     |  5 +++
 package-lock.json                             | 35 ++++++++++++++++
 package.json                                  |  1 +
 9 files changed, 107 insertions(+), 20 deletions(-)

diff --git a/app/app/login/page.tsx b/app/app/login/page.tsx
index 9afdaae..837afd8 100644
--- a/app/app/login/page.tsx
+++ b/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>
diff --git a/app/app/register/page.tsx b/app/app/register/page.tsx
index 4b0233a..7e7a4a7 100644
--- a/app/app/register/page.tsx
+++ b/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>
diff --git a/components/CardComponents/LinkCard.tsx b/components/CardComponents/LinkCard.tsx
index 86ae790..d448523 100644
--- a/components/CardComponents/LinkCard.tsx
+++ b/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>
diff --git a/components/CardComponents/QRCodeCardComponent.tsx b/components/CardComponents/QRCodeCardComponent.tsx
index 2dfd8e4..2b1a4e2 100644
--- a/components/CardComponents/QRCodeCardComponent.tsx
+++ b/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">
diff --git a/components/NavigationBars/SideNavBar.tsx b/components/NavigationBars/SideNavBar.tsx
index 13bbcf6..cb84c68 100644
--- a/components/NavigationBars/SideNavBar.tsx
+++ b/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>
       ) : (
diff --git a/lib/actions/register.ts b/lib/actions/register.ts
index 222586e..3070919 100644
--- a/lib/actions/register.ts
+++ b/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;
   }
 }
 
diff --git a/lib/services/pgConnect.ts b/lib/services/pgConnect.ts
index 8d3e680..cb0f5cb 100644
--- a/lib/services/pgConnect.ts
+++ b/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();
   }
 
diff --git a/package-lock.json b/package-lock.json
index 471604a..7c84974 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,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",
@@ -1487,6 +1488,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
+      "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
diff --git a/package.json b/package.json
index 12fe2b1..c7bd8be 100644
--- a/package.json
+++ b/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",