@drawnagency/primitives 0.1.0

package/dist/components/shell/ViewerLoginForm.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import { safeRedirect } from "../../lib/safeRedirect";
+export function ViewerLoginForm({ audiences, next }) {
+    const [audience, setAudience] = useState(audiences.length === 1 ? audiences[0].name : "");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+        const body = { audience, password };
+        if (next)
+            body.next = next;
+        try {
+            const response = await fetch("/api/auth/verify-audience", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(body),
+            });
+            if (!response.ok) {
+                const data = await response.json().catch(() => ({}));
+                setError(data.error || "Access denied");
+                return;
+            }
+            const data = await response.json().catch(() => ({}));
+            window.location.assign(safeRedirect(data.redirectTo, "/"));
+        }
+        catch {
+            setError("Network error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    return (_jsx("div", { className: "mx-auto max-w-sm", children: _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "audience", className: "mb-1.5 block text-sm font-medium text-base-contrast", children: "Audience" }), _jsxs("select", { id: "audience", value: audience, onChange: (e) => setAudience(e.target.value), required: true, className: "w-full rounded border border-base-200 px-3 py-2 text-sm", children: [audiences.length > 1 && _jsx("option", { value: "", children: "Select audience..." }), audiences.map((a) => (_jsx("option", { value: a.name, children: a.displayName }, a.name)))] })] }), _jsx(PasswordInput, { label: "Password", value: password, onChange: setPassword, autoComplete: "current-password" }), error && (_jsx("p", { className: "text-sm text-red-600", children: error })), _jsx(Button, { type: "submit", variant: "brand", size: "md", disabled: loading || !audience, isLoading: loading, loadingLabel: "Verifying...", className: "w-full", children: "Enter" })] }) }));
+}