client passwords

components/clients/ShareReviewDialog.tsx

@@ -17,7 +17,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
-import { Copy, Check, ExternalLink } from "lucide-react";
+import { Copy, Check, ExternalLink, Eye, EyeOff, Lock } from "lucide-react";
 import {
   Select,
   SelectContent,
@@ -31,6 +31,7 @@ const schema = z.object({
   label: z.string().min(1, "Label is required"),
   email: z.string().email("Invalid email"),
   expiresInDays: z.number().int().positive().default(30),
+  password: z.string().optional(),
 });
 
 type FormValues = z.infer<typeof schema>;
@@ -56,7 +57,9 @@ export function ShareReviewDialog({
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [portalUrl, setPortalUrl] = useState<string | null>(null);
+  const [isPasswordProtected, setIsPasswordProtected] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const { toast } = useToast();
   const router = useRouter();
 
@@ -74,6 +77,7 @@ export function ShareReviewDialog({
       label: "Review Round 1",
       email: clientEmail,
       expiresInDays: 30,
+      password: "",
     },
   });
 
@@ -86,11 +90,13 @@ export function ShareReviewDialog({
 
   const handleReset = () => {
     setPortalUrl(null);
+    setIsPasswordProtected(false);
     reset({
       projectId: projects[0]?.id ?? "",
       label: "Review Round 1",
       email: clientEmail,
       expiresInDays: 30,
+      password: "",
     });
   };
 
@@ -100,7 +106,10 @@ export function ShareReviewDialog({
       const res = await fetch("/api/review-sessions", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(values),
+        body: JSON.stringify({
+          ...values,
+          password: values.password?.trim() || undefined,
+        }),
       });
       if (!res.ok) {
         const err = await res.json().catch(() => ({}));
@@ -108,6 +117,7 @@ export function ShareReviewDialog({
       }
       const data = await res.json();
       setPortalUrl(data.portalUrl);
+      setIsPasswordProtected(!!(values.password?.trim()));
       router.refresh();
     } catch (e) {
       toast({
@@ -139,6 +149,12 @@ export function ShareReviewDialog({
             <p className="text-sm text-zinc-400">
               Your review link is ready. Copy it and share it with your client.
             </p>
+            {isPasswordProtected && (
+              <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 text-xs">
+                <Lock className="h-3.5 w-3.5 shrink-0" />
+                This link is password protected. Share the password separately.
+              </div>
+            )}
             <div className="flex items-center gap-2 p-3 rounded-lg bg-zinc-800 border border-zinc-700">
               <ExternalLink className="h-4 w-4 text-zinc-500 shrink-0" />
               <span className="flex-1 text-sm font-mono text-zinc-300 truncate">{portalUrl}</span>
@@ -212,6 +228,33 @@ export function ShareReviewDialog({
                 </SelectContent>
               </Select>
             </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="password" className="flex items-center gap-1.5">
+                <Lock className="h-3.5 w-3.5 text-zinc-400" />
+                Password <span className="text-zinc-500 font-normal">(optional)</span>
+              </Label>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder="Leave blank for no password"
+                  className="pr-9"
+                  {...register("password")}
+                />
+                <button
+                  type="button"
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                  onClick={() => setShowPassword((v) => !v)}
+                  tabIndex={-1}
+                >
+                  {showPassword ? (
+                    <EyeOff className="h-4 w-4" />
+                  ) : (
+                    <Eye className="h-4 w-4" />
+                  )}
+                </button>
+              </div>
+            </div>
             <DialogFooter>
               <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                 Cancel