client passwords

components/clients/ReviewPasswordGate.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { Film, Lock, Eye, EyeOff } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Montserrat } from "next/font/google";
+
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  weight: ["200", "500", "600"],
+});
+
+interface ReviewPasswordGateProps {
+  token: string;
+  onUnlocked: () => void;
+}
+
+export function ReviewPasswordGate({ token, onUnlocked }: ReviewPasswordGateProps) {
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!password.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/client/${token}/auth`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ password }),
+      });
+      if (res.ok) {
+        onUnlocked();
+      } else {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error ?? "Incorrect password. Please try again.");
+      }
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center px-4">
+      <div className="w-full max-w-sm space-y-6">
+        {/* Logo */}
+        <div className={`flex items-center gap-3 justify-center ${montserrat.className}`}>
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-black border border-zinc-800">
+            <Image src="/logo.svg" alt="Logo" width={28} height={28} />
+          </div>
+          <div>
+            <span className="block text-xl font-light text-white leading-none">TWO TALES</span>
+            <span className="block text-[10px] tracking-[0.18em] italic text-zinc-400 leading-none mt-0.5">
+              vfx review
+            </span>
+          </div>
+        </div>
+
+        {/* Card */}
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900 p-8 space-y-5">
+          <div className="flex flex-col items-center gap-2 text-center">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <Lock className="h-6 w-6 text-amber-400" />
+            </div>
+            <h1 className="text-lg font-semibold text-white">Password Required</h1>
+            <p className="text-sm text-zinc-400">
+              This review link is password protected. Enter the password to access the content.
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-3">
+            <div className="relative">
+              <Input
+                type={showPassword ? "text" : "password"}
+                placeholder="Enter password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="pr-10 bg-zinc-950 border-zinc-700 focus:border-amber-500/50"
+                autoFocus
+                disabled={loading}
+              />
+              <button
+                type="button"
+                className="absolute right-3 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>
+
+            {error && (
+              <p className="text-xs text-red-400 flex items-center gap-1.5">
+                <span className="inline-block h-1 w-1 rounded-full bg-red-400 shrink-0" />
+                {error}
+              </p>
+            )}
+
+            <Button
+              type="submit"
+              className="w-full bg-amber-500 hover:bg-amber-400 text-black font-medium"
+              disabled={loading || !password.trim()}
+            >
+              {loading ? "Verifying..." : "Access Review"}
+            </Button>
+          </form>
+        </div>
+
+        <p className="text-center text-xs text-zinc-600">
+          Contact your studio if you don&apos;t have the password.
+        </p>
+      </div>
+    </div>
+  );
+}

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