@stevederico/skateboard-ui 5.6.0 → 5.7.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+5.7.0
+
+  Add optional Turnstile
+  Show sign-up errors
+
 5.6.0
 
   Add Sheet onUserClose

package/dist/components/views/SignUpView.js

@@ -10,6 +10,24 @@ import ConstantsIcon from '../core/constantsIcon.js';
 import { Sparkles } from 'lucide-react';
 import { getState } from "../core/Context.js";
 import { getBackendURL, useSafeNavigate, getAppKey } from '../core/Utilities.js';
+let turnstileScript = null;
+/** Load Cloudflare's Turnstile script once. */
+function loadTurnstile() {
+    if (!turnstileScript) {
+        turnstileScript = new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+            script.async = true;
+            script.onload = () => resolve();
+            script.onerror = () => {
+                turnstileScript = null;
+                reject(new Error('Turnstile failed to load'));
+            };
+            document.head.appendChild(script);
+        });
+    }
+    return turnstileScript;
+}
 export default function SignUpView({ className, embedded = false, onSuccess, onSwitchMode, ...props }) {
     const { state, dispatch } = getState();
     const constants = state.constants;
@@ -20,6 +38,42 @@ export default function SignUpView({ className, embedded = false, onSuccess, onS
     const [isSubmitting, setIsSubmitting] = useState(false);
     const navigate = useSafeNavigate();
     const nameInputRef = useRef(null);
+    const turnstileRef = useRef(null);
+    const turnstileIdRef = useRef(null);
+    const [turnstileToken, setTurnstileToken] = useState('');
+    // Optional Cloudflare Turnstile: the backend hands out a site key from
+    // GET /signup/options. No key, or no endpoint, means no widget.
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const res = await fetch(`${getBackendURL()}/signup/options`, { credentials: 'include' });
+                if (!res.ok)
+                    return;
+                const { turnstileSiteKey } = (await res.json());
+                if (!turnstileSiteKey || cancelled)
+                    return;
+                await loadTurnstile();
+                const container = turnstileRef.current;
+                const api = window.turnstile;
+                if (!container || !api || cancelled)
+                    return;
+                turnstileIdRef.current = api.render(container, {
+                    sitekey: turnstileSiteKey,
+                    appearance: 'interaction-only',
+                    callback: (token) => setTurnstileToken(token),
+                    'expired-callback': () => setTurnstileToken(''),
+                    'error-callback': () => setTurnstileToken(''),
+                });
+            }
+            catch {
+                /* Turnstile is optional; sign-up works without it. */
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
     // Focus the first input on mount
     useEffect(() => {
         if (!name && nameInputRef.current) {
@@ -45,7 +99,7 @@ export default function SignUpView({ className, embedded = false, onSuccess, onS
                 method: 'POST',
                 credentials: 'include',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email, password, name })
+                body: JSON.stringify({ email, password, name, ...(turnstileToken ? { turnstileToken } : {}) })
             });
             if (response.ok) {
                 const data = await response.json();
@@ -64,7 +118,13 @@ export default function SignUpView({ className, embedded = false, onSuccess, onS
                 }
             }
             else {
-                setErrorMessage('Invalid Credentials');
+                const failure = (await response.json().catch(() => null));
+                setErrorMessage(failure?.error || 'Invalid Credentials');
+                const api = window.turnstile;
+                if (api && turnstileIdRef.current) {
+                    api.reset(turnstileIdRef.current);
+                    setTurnstileToken('');
+                }
             }
         }
         catch (error) {
@@ -84,7 +144,7 @@ export default function SignUpView({ className, embedded = false, onSuccess, onS
                                 } })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "password", children: "Password" }), _jsx(Input, { id: "password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "new-password", required: true, minLength: 6, maxLength: 72, value: password, onChange: (e) => {
                                     setPassword(e.target.value);
                                     setErrorMessage('');
-                                } }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Minimum 6 characters" })] }), _jsx(Button, { type: "submit", variant: "gradient", size: "cta", className: "w-full", disabled: isSubmitting, children: _jsxs("span", { className: "relative z-20 flex items-center justify-center gap-2 drop-shadow-sm", children: [_jsx(Sparkles, { size: 16, color: "currentColor", strokeWidth: 2, className: "animate-pulse" }), isSubmitting ? "Signing up..." : "Sign Up"] }) }), _jsxs("div", { className: "text-center text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Already have an account?" }), " ", _jsx(Button, { variant: "link", className: "p-0 h-auto", onClick: (e) => { e.preventDefault(); embedded && onSwitchMode ? onSwitchMode() : navigate('/signin'); }, children: "Sign In" })] })] }), _jsxs("div", { className: "mt-4 text-center text-xs text-muted-foreground", children: ["By registering you agree to our", " ", _jsx("a", { href: "/terms", className: "underline underline-offset-4 hover:text-foreground", children: "Terms of Service" }), ",", " ", _jsx("a", { href: "/eula", className: "underline underline-offset-4 hover:text-foreground", children: "EULA" }), ",", " ", _jsx("a", { href: "/privacy", className: "underline underline-offset-4 hover:text-foreground", children: "Privacy Policy" })] })] }));
+                                } }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Minimum 6 characters" })] }), _jsx("div", { ref: turnstileRef }), _jsx(Button, { type: "submit", variant: "gradient", size: "cta", className: "w-full", disabled: isSubmitting, children: _jsxs("span", { className: "relative z-20 flex items-center justify-center gap-2 drop-shadow-sm", children: [_jsx(Sparkles, { size: 16, color: "currentColor", strokeWidth: 2, className: "animate-pulse" }), isSubmitting ? "Signing up..." : "Sign Up"] }) }), _jsxs("div", { className: "text-center text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Already have an account?" }), " ", _jsx(Button, { variant: "link", className: "p-0 h-auto", onClick: (e) => { e.preventDefault(); embedded && onSwitchMode ? onSwitchMode() : navigate('/signin'); }, children: "Sign In" })] })] }), _jsxs("div", { className: "mt-4 text-center text-xs text-muted-foreground", children: ["By registering you agree to our", " ", _jsx("a", { href: "/terms", className: "underline underline-offset-4 hover:text-foreground", children: "Terms of Service" }), ",", " ", _jsx("a", { href: "/eula", className: "underline underline-offset-4 hover:text-foreground", children: "EULA" }), ",", " ", _jsx("a", { href: "/privacy", className: "underline underline-offset-4 hover:text-foreground", children: "Privacy Policy" })] })] }));
     if (embedded) {
         return formContent;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "5.6.0",
+  "version": "5.7.0",
   "type": "module",
   "exports": {
     ".": {