Simplified event state and improved login capability

Author: Herve Tribouilloy

vite_project/src/components/BookingDrawer.tsx

@@ -21,8 +21,7 @@ export const BookingDrawer: React.FC<BookingDrawerProps> = ({
                     <h3>Set your appointment</h3>
                     <button className="drawer-close"
                             aria-label="Close"
-                            onClick={onClose
-                    }>×</button>
+                            onClick={onClose}>×</button>
                 </div>
                 {children}
             </div>

vite_project/src/components/event/Dashboard/DayEvent/AddToCart.tsx

@@ -25,6 +25,7 @@ export function AddToCart({onRequireAuth}: AddToCartProps) {
     const [verifiedAt, setVerifiedAt] = useState<number | null>(null);
     const [awaitingSecurity, setAwaitingSecurity] = useState(false);
     const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
+    const [token, setToken] = useState<string | null>(null);
 
     const isHumanVerified =
         turnstileToken &&
@@ -140,6 +141,7 @@ export function AddToCart({onRequireAuth}: AddToCartProps) {
                 <Turnstile
                     siteKey={cloudflareKey}
                     containerId="booking-turnstile"
+                    onToken={setToken}
                 />
             )}
             <UserState />

vite_project/src/components/event/Dashboard/DayEvent/DayEventGroup.tsx

@@ -1,6 +1,5 @@
 import {SetEventDetail} from "./SetEventDetail.tsx";
 import type {DayGroupEvent} from "../../../../types/domain/dashboard.type.tsx";
-import {EventStateProvider} from "../../../../state/Event/EventStateProvider.tsx";
 import {getTime} from "../../../../lib/date.ts";
 import {useDashboardState} from "../../../../state/Dashboard/useDashboardState.ts";
 import {EventHostView} from "./EventHostView.tsx";
@@ -24,7 +23,6 @@ export const DayEventGroup: React.FC<ListingProps> = ({ eventGroup, onView }) =>
     }
 
     return (
-        <EventStateProvider eventGroup={eventGroup}>
             <div className={`event-card${highlight() ? "--highlighting" : ""}`}>
                 <div className="card-info-hidden">
                     {eventGroup.startTime}
@@ -47,13 +45,10 @@ export const DayEventGroup: React.FC<ListingProps> = ({ eventGroup, onView }) =>
                             }}
                         >
                         {eventGroup.eventIds && (
-                            <EventStateProvider eventGroup={eventGroup}>
-                                <DrawerContent eventIds={eventGroup.eventIds}/>
-                            </EventStateProvider>
+                            <DrawerContent eventIds={eventGroup.eventIds}/>
                         )}
                     </BookingDrawer>
                 )}
             </div>
-        </EventStateProvider>
     );
 };

vite_project/src/components/event/Dashboard/GetWeekEvents.tsx

@@ -10,6 +10,7 @@ import {useDashboardState} from "../../../state/Dashboard/useDashboardState.ts";
 import type {Venue} from "../../../types/domain/types.ts";
 import {activity} from "../../../../activity";
 import {GroupEventStateProvider} from "../../../state/GroupEvent/GroupEventStateProvider.tsx";
+import {EventStateProvider} from "../../../state/Event/EventStateProvider.tsx";
 
 export function GetWeekEvents() {
     const { visitIntent } = useVisitIntentState();
@@ -58,6 +59,8 @@ export function GetWeekEvents() {
     }
 
     return <GroupEventStateProvider>
-            <WeekEvents events={events} />
+            <EventStateProvider>
+                <WeekEvents events={events} />
+            </EventStateProvider>
         </GroupEventStateProvider>;
 }

vite_project/src/components/event/Dashboard/WeekEvents.tsx

@@ -7,6 +7,8 @@ import {useUserState} from "../../../state/User/useUserState.ts";
 import {useMediaQuery} from "../../../hooks/ui/useMediaQuery.tsx";
 import type {DayGroupEvent} from "../../../types/domain/dashboard.type.tsx";
 import {useGroupEventState} from "../../../state/GroupEvent/useGroupEventState.ts";
+import {useEventState} from "../../../state/Event/useEventState.ts";
+import {useEffect, useRef} from "react";
 
 interface WeekEventProps {
     events: IntentEvent[];
@@ -16,6 +18,18 @@ export function WeekEvents({ events }: WeekEventProps) {
     const { user } = useUserState();
     const isMobile = useMediaQuery('(max-width: 768px)');
     const { toggleActiveGroupEvent } = useGroupEventState();
+    const { showBooking } = useEventState()
+
+    const prevUserRef = useRef<typeof user>(null);
+
+    useEffect(() => {
+        // Auth boundary: unauthenticated → authenticated
+        if (!prevUserRef.current && user) {
+            showBooking();
+        }
+
+        prevUserRef.current = user;
+    }, [user, showBooking]);
 
     return (
         <div
@@ -40,6 +54,7 @@ export function WeekEvents({ events }: WeekEventProps) {
                                             eventGroup={eventGroup}
                                             onView={(eventIds) => {
                                                 toggleActiveGroupEvent(eventIds);
+                                                showBooking()
                                             }}
                                         />
                                     )

vite_project/src/components/event/Dashboard/WeekEvents/DrawerContent.tsx

@@ -40,7 +40,6 @@ export const DrawerContent: React.FC<ViewGroupEventProps> = ({ eventIds }) => {
                     <SignUp onSuccess={showBooking} onCancel={showSignIn} />
                 }
             </div>
-
             {eventState.drawerContent === 'booking' && (<div className="drawer-actions">
                 <AddToCart onRequireAuth={() => {
                     showSignIn()}

vite_project/src/components/user-authentication/Sign.tsx

@@ -25,7 +25,7 @@ export const Sign: React.FC = () => {
     };
 
     return (
-        <form className="drawer-auth-form" onSubmit={handleSubmit}>
+        <form className="widget-form" onSubmit={handleSubmit}>
             <h3>Sign in to confirm your appointment</h3>
 
             {errorMessage && <p className="form-error">{errorMessage}</p>}

vite_project/src/components/user-authentication/SignUp.tsx

@@ -1,6 +1,9 @@
 import {useState} from "react";
 import {useRegisterUser} from "../../hooks/domain/useRegisterUser.tsx";
 import {Spinner} from "../global/Spinner.tsx";
+import {useSystemState} from "../../state/System/useSystemState.ts";
+import {activity} from "../../../activity";
+import {Turnstile} from "../../security/Turnstile.tsx";
 
 interface SignUpProps {
     onSuccess?: () => void;
@@ -14,11 +17,18 @@ export const SignUp: React.FC<SignUpProps> = ({ onSuccess, onCancel }) => {
         password: '',
         confirmPassword: '',
     });
+    const [token, setToken] = useState<string | null>(null);
     const { register, loadingRegister } = useRegisterUser();
+    const { cloudflareKey, isTurnstileEnabled } = useSystemState()
 
     const [error, setError] = useState<string | null>(null);
     const [loading, setLoading] = useState(false);
 
+    const turnstileEnabled = isTurnstileEnabled();
+    const canSubmit =
+        status !== "loading" &&
+        (!turnstileEnabled || Boolean(token));
+
     function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
         setValues(v => ({ ...v, [e.target.name]: e.target.value }));
     }
@@ -55,73 +65,91 @@ export const SignUp: React.FC<SignUpProps> = ({ onSuccess, onCancel }) => {
         }
     }
 
+    if (!turnstileEnabled) {
+        activity('form-ready', 'Turnstile Disabled',{
+            cloudflareKey
+        }, 'warn');
+    }
+
     if (loadingRegister) return <Spinner />
 
     return (
-        <form className="widget-form" onSubmit={handleSubmit}>
-            <h2>Sign Up</h2>
-
-            {error && <p className="form-error">{error}</p>}
-
-            <fieldset disabled={loading}>
-                <label>
-                    Name
-                    <input
-                        name="name"
-                        required
-                        value={values.name}
-                        onChange={handleChange}
-                        autoComplete="name"
-                    />
-                </label>
-
-                <label>
-                    Email
-                    <input
-                        name="email"
-                        type="email"
-                        required
-                        value={values.email}
-                        onChange={handleChange}
-                        autoComplete="email"
-                    />
-                </label>
-
-                <label>
-                    Password
-                    <input
-                        name="password"
-                        type="password"
-                        required
-                        minLength={6}
-                        value={values.password}
-                        onChange={handleChange}
-                        autoComplete="new-password"
-                    />
-                </label>
-
-                <label>
-                    Confirm Password
-                    <input
-                        name="confirmPassword"
-                        type="password"
-                        required
-                        value={values.confirmPassword}
-                        onChange={handleChange}
-                        autoComplete="new-password"
-                    />
-                </label>
-
-                <button type="submit">
-                    {loading ? 'Signing up…' : 'Sign Up'}
-                </button>
-
-                {onCancel && (
-                    <button type="button" onClick={onCancel}>
-                        Already have an account? Sign in
+        <>
+            <form className="widget-form" onSubmit={handleSubmit}>
+                <h2>Sign Up</h2>
+
+                {error && <p className="form-error">{error}</p>}
+
+                <fieldset disabled={loading}>
+                    <label>
+                        Name
+                        <input
+                            name="name"
+                            required
+                            value={values.name}
+                            onChange={handleChange}
+                            autoComplete="name"
+                        />
+                    </label>
+
+                    <label>
+                        Email
+                        <input
+                            name="email"
+                            type="email"
+                            required
+                            value={values.email}
+                            onChange={handleChange}
+                            autoComplete="email"
+                        />
+                    </label>
+
+                    <label>
+                        Password
+                        <input
+                            name="password"
+                            type="password"
+                            required
+                            minLength={6}
+                            value={values.password}
+                            onChange={handleChange}
+                            autoComplete="new-password"
+                        />
+                    </label>
+
+                    <label>
+                        Confirm Password
+                        <input
+                            name="confirmPassword"
+                            type="password"
+                            required
+                            value={values.confirmPassword}
+                            onChange={handleChange}
+                            autoComplete="new-password"
+                        />
+                    </label>
+
+                    <button type="submit"
+                            disabled={!canSubmit}
+                    >
+                        {loading ? 'Signing up…' : 'Sign Up'}
                     </button>
-                )}
-            </fieldset>
-        </form>
+
+                    {onCancel && (
+                        <button type="button" onClick={onCancel}>
+                            Already have an account? Sign in
+                        </button>
+                    )}
+                </fieldset>
+            </form>
+        {/* 2. The security gate */}
+        {turnstileEnabled && (
+            <Turnstile
+                siteKey={cloudflareKey}
+                containerId="booking-turnstile"
+                onToken={setToken}
+            />
+        )}
+        </>
     );
 };

vite_project/src/components/user-authentication/SignWithGoogle.tsx

@@ -9,8 +9,8 @@ export const SignWithGoogle: React.FC = () => {
     };
 
     return (
-        <form className="drawer-auth-form" >
+        <div className="drawer-auth-form" >
             <button onClick={handleLogin}>Continue with Google</button>
-        </form>
+        </div>
     )
 };

vite_project/src/security/Turnstile.tsx

@@ -1,13 +1,15 @@
 import { useEffect, useRef } from "react";
-import { ensureTurnstileLoaded } from "./turnstileService.ts";
+import {ensureTurnstileLoaded} from "./turnstileService.ts";
 import {activity} from "../../activity";
 
+
 type TurnstileProps = {
     siteKey: string;
-    containerId: string;
+    onToken: (token: string | null) => void;
+    containerId: string; // 👈 REQUIRED
 };
 
-export function Turnstile({ siteKey, containerId }: TurnstileProps) {
+export function Turnstile({ siteKey, onToken, containerId }: TurnstileProps) {
     const widgetId = useRef<string | null>(null);
 
     useEffect(() => {
@@ -17,29 +19,19 @@ export function Turnstile({ siteKey, containerId }: TurnstileProps) {
             if (cancelled || !window.turnstile) return;
 
             const container = document.getElementById(containerId);
+
             if (!container) {
-                activity('turnstile', `[turnstile] container #${containerId} not found`, null, 'error');
+                activity('turnstile-load', `[turnstile] container #${containerId} not found`,{
+                    containerId,
+                    siteKey
+                });
                 return;
             }
 
-            activity('turnstile', '[turnstile] container rendering', null, 'info');
-
             widgetId.current = window.turnstile.render(container, {
                 sitekey: siteKey,
-                callback: (token: string) => {
-                    activity('turnstile', '[turnstile] event sent', {"eventName": "booking:security-success"}, 'info');
-                    window.dispatchEvent(
-                        new CustomEvent("booking:security-success", {
-                            detail: { token }
-                        })
-                    );
-                },
-                "expired-callback": () => {
-                    activity('turnstile', '[turnstile] event sent', {"eventName": "booking:security-expired"}, 'info');
-                    window.dispatchEvent(
-                        new CustomEvent("booking:security-expired")
-                    );
-                }
+                callback: onToken,
+                "expired-callback": () => onToken(null),
             });
         });
 
@@ -52,4 +44,4 @@ export function Turnstile({ siteKey, containerId }: TurnstileProps) {
     }, [siteKey, containerId]);
 
     return null;
-}
+}