client passwords

2026-06-12 12:37:57 +02:00
parent 5bfaf49fa1
commit 23f0ceca3f
13 changed files with 377 additions and 74 deletions
@@ -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>
+  );
+}