Password Creation Dialog Validation

Author: cvs0

src/components/ui/create-password-dialog.tsx

@@ -1,12 +1,13 @@
-import {createPasswordItem} from "@/app/actions";
-import {encrypt} from "@/utils/encryption";
-import {useUser} from "@clerk/nextjs";
-import {useState} from "react";
+import { createPasswordItem } from "@/app/actions";
+import { encrypt } from "@/utils/encryption";
+import { useUser } from "@clerk/nextjs";
+import { useState } from "react";
 import toast from "react-hot-toast";
-import {z} from "zod";
-import {Button} from "./button";
-import {Dialog,DialogContent,DialogHeader,DialogTitle} from "./dialog";
-import {Input} from "./input";
+import { z } from "zod";
+import { Button } from "./button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./dialog";
+import { Input } from "./input";
+import { Loader2 } from "lucide-react";
 
 const websiteSchema = z.string().url();
 
@@ -21,23 +22,59 @@ export const CreatePasswordDialog = ({
   const [username, setUsername] = useState("");
   const [website, setWebsite] = useState("");
   const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
   const { user: clerkuser } = useUser();
 
+  const passwordSchema = z.object({
+    name: z
+      .string()
+      .min(1, "Name is required")
+      .max(50, "Name must be at most 50 characters"),
+    username: z
+      .string()
+      .min(1, "Username is required")
+      .max(30, "Username must be at most 30 characters"),
+    website: z
+      .string()
+      .url("Invalid website URL")
+      .max(2048, "Website URL is too long"),
+    password: z
+      .string()
+      .min(6, "Password must be at least 6 characters long")
+      .max(128, "Password must be at most 128 characters"),
+  });
+
   const handleSave = async () => {
-    const websiteValidation = websiteSchema.safeParse(website);
-  
-    if (!websiteValidation.success) {
-      toast.error("Invalid website URL");
+    setLoading(true);
+    const validationResult = passwordSchema.safeParse({
+      name,
+      username,
+      website,
+      password,
+    });
+
+    if (!validationResult.success) {
+      const errorMessage =
+        validationResult.error.errors[0]?.message || "Validation failed";
+      toast.error(errorMessage);
+      setLoading(false);
       return;
     }
-  
-    await createPasswordItem(
-      encrypt(username, clerkuser),
-      encrypt(website, clerkuser),
-      encrypt(password, clerkuser)
-    );
-    toast.success("Password created");
-    onClose();
+
+    try {
+      await createPasswordItem(
+        encrypt(username, clerkuser),
+        encrypt(website, clerkuser),
+        encrypt(password, clerkuser)
+      );
+      toast.success("Password created");
+      onClose();
+    } catch (error) {
+      toast.error("Failed to create password");
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -47,33 +84,57 @@ export const CreatePasswordDialog = ({
           <DialogTitle>Create Password</DialogTitle>
         </DialogHeader>
         <div className="space-y-4">
-          <Input
-            placeholder="Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-          <Input
-            placeholder="Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-          <Input
-            placeholder="Website"
-            value={website}
-            onChange={(e) => setWebsite(e.target.value)}
-          />
-          <Input
-            placeholder="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            type="password"
-          />
+          <div className="relative">
+            <Input
+              placeholder="Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              maxLength={50}
+            />
+            <div className="mt-1 text-sm text-gray-500">{name.length} / 50</div>
+          </div>
+          <div className="relative">
+            <Input
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              maxLength={30}
+            />
+            <div className="mt-1 text-sm text-gray-500">
+              {username.length} / 30
+            </div>
+          </div>
+          <div className="relative">
+            <Input
+              placeholder="Website"
+              value={website}
+              onChange={(e) => setWebsite(e.target.value)}
+              maxLength={1024}
+            />
+            <div className="mt-1 text-sm text-gray-500">
+              {website.length} / 1024
+            </div>
+          </div>
+          <div className="relative">
+            <Input
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              type="password"
+              maxLength={128}
+            />
+            <div className=" mt-1 text-sm text-gray-500">
+              {password.length} / 128
+            </div>
+          </div>
         </div>
         <div className="mt-4 flex justify-end gap-2">
           <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
-          <Button onClick={handleSave}>Save</Button>
+          <Button onClick={handleSave}>
+            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : "Save"}
+          </Button>
         </div>
       </DialogContent>
     </Dialog>