@stevederico/skateboard-ui 2.9.4 → 2.9.7

package/App.jsx

@@ -159,15 +159,16 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
         <Toaster position="top-right" richColors closeButton />
         <ContextProvider constants={constants}>
-          <AuthOverlay />
           {Wrapper ? (
             <Wrapper>
               <Router>
+                <AuthOverlay />
                 <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} overrides={overrides} />
               </Router>
             </Wrapper>
           ) : (
             <Router>
+              <AuthOverlay />
               <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} overrides={overrides} />
             </Router>
           )}

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+2.9.7
+
+  Add useSafeNavigate hook
+  Fix Router context error in auth views
+
+2.9.6
+
+  Move AuthOverlay inside Router
+
+2.9.5
+
+  Reuse SignInView in AuthOverlay
+  Reuse SignUpView in AuthOverlay
+  Add embedded prop to views
+
 2.9.4
 
   Remove unused Card imports

package/components/AuthOverlay.jsx

@@ -1,12 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '../shadcn/ui/dialog.jsx';
-import { Input } from '../shadcn/ui/input.jsx';
-import { Label } from '../shadcn/ui/label.jsx';
-import { Button } from '../shadcn/ui/button.jsx';
-import { Alert, AlertDescription } from '../shadcn/ui/alert.jsx';
+import React, { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../shadcn/ui/dialog.jsx';
 import DynamicIcon from '../core/DynamicIcon.jsx';
 import { getState } from '../core/Context.jsx';
-import { getBackendURL } from '../core/Utilities.js';
+import SignInView from '../views/SignInView.jsx';
+import SignUpView from '../views/SignUpView.jsx';
 
 /**
  * Modal authentication overlay with sign-in and sign-up forms.
@@ -29,109 +26,25 @@ export default function AuthOverlay() {
   const { visible } = state.authOverlay;
 
   const [mode, setMode] = useState('signin');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [name, setName] = useState('');
-  const [errorMessage, setErrorMessage] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const firstInputRef = useRef(null);
 
-  // Reset form when dialog opens
+  // Reset mode when dialog opens
   useEffect(() => {
     if (visible) {
       setMode('signin');
-      setEmail('');
-      setPassword('');
-      setName('');
-      setErrorMessage('');
-      setIsSubmitting(false);
     }
   }, [visible]);
 
-  // Focus first input when dialog opens or mode changes
-  useEffect(() => {
-    if (visible && firstInputRef.current) {
-      const t = setTimeout(() => firstInputRef.current?.focus(), 100);
-      return () => clearTimeout(t);
-    }
-  }, [visible, mode]);
-
   function handleClose() {
     dispatch({ type: 'HIDE_AUTH_OVERLAY' });
   }
 
-  async function handleSignIn(e) {
-    e.preventDefault();
-    if (isSubmitting) return;
-    setIsSubmitting(true);
-    try {
-      const response = await fetch(`${getBackendURL()}/signin`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password })
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        dispatch({ type: 'SET_USER', payload: data });
-        dispatch({ type: 'AUTH_OVERLAY_SUCCESS' });
-      } else {
-        setErrorMessage('Invalid Credentials');
-      }
-    } catch (error) {
-      setErrorMessage('Server Error');
-    } finally {
-      setIsSubmitting(false);
-    }
-  }
-
-  async function handleSignUp(e) {
-    e.preventDefault();
-    if (isSubmitting) return;
-    if (password.length < 6) {
-      setErrorMessage('Password must be at least 6 characters');
-      return;
-    }
-    if (password.length > 72) {
-      setErrorMessage('Password must be 72 characters or less');
-      return;
-    }
-    setIsSubmitting(true);
-    try {
-      const response = await fetch(`${getBackendURL()}/signup`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password, name })
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        // Save CSRF token
-        const csrfCookie = document.cookie.split('; ').find(row => row.startsWith('csrf_token='));
-        const csrfToken = csrfCookie ? csrfCookie.split('=')[1] : data.csrfToken;
-        if (csrfToken) {
-          const appName = constants.appName || 'skateboard';
-          const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
-          localStorage.setItem(csrfKey, csrfToken);
-        }
-        dispatch({ type: 'SET_USER', payload: data });
-        dispatch({ type: 'AUTH_OVERLAY_SUCCESS' });
-      } else {
-        setErrorMessage('Invalid Credentials');
-      }
-    } catch (error) {
-      setErrorMessage('Server Error');
-    } finally {
-      setIsSubmitting(false);
-    }
+  function handleSuccess() {
+    dispatch({ type: 'AUTH_OVERLAY_SUCCESS' });
   }
 
   return (
     <Dialog open={visible} onOpenChange={(open) => { if (!open) handleClose(); }}>
       <DialogContent>
-        {/* Branding */}
         <DialogHeader className="items-center text-center">
           <div className="flex items-center justify-center gap-3">
             <div className="bg-app rounded-2xl flex aspect-square size-10 items-center justify-center">
@@ -139,133 +52,21 @@ export default function AuthOverlay() {
             </div>
             <span className="text-2xl font-bold">{constants.appName}</span>
           </div>
-          <DialogTitle>{mode === 'signin' ? 'Welcome back' : 'Create an account'}</DialogTitle>
-          <DialogDescription>
-            {mode === 'signin' ? 'Sign in to your account' : 'Enter your details to get started'}
-          </DialogDescription>
+          <DialogTitle className="sr-only">{mode === 'signin' ? 'Sign In' : 'Sign Up'}</DialogTitle>
         </DialogHeader>
 
-        {errorMessage && (
-          <Alert variant="destructive">
-            <AlertDescription className="text-center">{errorMessage}</AlertDescription>
-          </Alert>
-        )}
-
         {mode === 'signin' ? (
-          <form onSubmit={handleSignIn} className="flex flex-col gap-4">
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="overlay-email">Email</Label>
-              <Input
-                ref={firstInputRef}
-                id="overlay-email"
-                type="email"
-                placeholder="john@example.com"
-                required
-                value={email}
-                onChange={(e) => { setEmail(e.target.value); setErrorMessage(''); }}
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="overlay-password">Password</Label>
-              <Input
-                id="overlay-password"
-                type="password"
-                placeholder="••••••••"
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
-            <Button
-              type="submit"
-              variant="gradient"
-              size="cta"
-              className="w-full"
-              disabled={isSubmitting}
-            >
-              <span className="relative z-20 flex items-center justify-center gap-2 drop-shadow-sm">
-                <DynamicIcon name="sparkles" size={16} color="currentColor" strokeWidth={2} className="animate-pulse" />
-                {isSubmitting ? 'Signing in...' : 'Sign In'}
-              </span>
-            </Button>
-            <div className="text-center text-sm">
-              <span className="text-muted-foreground">Don't have an account?</span>{' '}
-              <Button
-                variant="link"
-                className="p-0 h-auto"
-                onClick={() => { setMode('signup'); setErrorMessage(''); }}
-              >
-                Sign Up
-              </Button>
-            </div>
-          </form>
+          <SignInView
+            embedded
+            onSuccess={handleSuccess}
+            onSwitchMode={() => setMode('signup')}
+          />
         ) : (
-          <form onSubmit={handleSignUp} className="flex flex-col gap-4">
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="overlay-name">Name</Label>
-              <Input
-                ref={firstInputRef}
-                id="overlay-name"
-                placeholder="John Doe"
-                required
-                value={name}
-                onChange={(e) => { setName(e.target.value); setErrorMessage(''); }}
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="overlay-signup-email">Email</Label>
-              <Input
-                id="overlay-signup-email"
-                type="email"
-                placeholder="john@example.com"
-                required
-                value={email}
-                onChange={(e) => { setEmail(e.target.value); setErrorMessage(''); }}
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="overlay-signup-password">Password</Label>
-              <Input
-                id="overlay-signup-password"
-                type="password"
-                placeholder="••••••••"
-                required
-                minLength={6}
-                maxLength={72}
-                value={password}
-                onChange={(e) => { setPassword(e.target.value); setErrorMessage(''); }}
-              />
-              <p className="text-xs text-muted-foreground">Minimum 6 characters</p>
-            </div>
-            <Button
-              type="submit"
-              variant="gradient"
-              size="cta"
-              className="w-full"
-              disabled={isSubmitting}
-            >
-              <span className="relative z-20 flex items-center justify-center gap-2 drop-shadow-sm">
-                <DynamicIcon name="sparkles" size={16} color="currentColor" strokeWidth={2} className="animate-pulse" />
-                {isSubmitting ? 'Signing up...' : 'Sign Up'}
-              </span>
-            </Button>
-            <div className="text-center text-sm">
-              <span className="text-muted-foreground">Already have an account?</span>{' '}
-              <Button
-                variant="link"
-                className="p-0 h-auto"
-                onClick={() => { setMode('signin'); setErrorMessage(''); }}
-              >
-                Sign In
-              </Button>
-            </div>
-            <div className="text-center text-xs text-muted-foreground">
-              By registering you agree to our{" "}
-              <a href="/terms" target="_blank" rel="noopener noreferrer" className="underline underline-offset-4 hover:text-foreground">Terms of Service</a>,{" "}
-              <a href="/eula" target="_blank" rel="noopener noreferrer" className="underline underline-offset-4 hover:text-foreground">EULA</a>,{" "}
-              <a href="/privacy" target="_blank" rel="noopener noreferrer" className="underline underline-offset-4 hover:text-foreground">Privacy Policy</a>
-            </div>
-          </form>
+          <SignUpView
+            embedded
+            onSuccess={handleSuccess}
+            onSwitchMode={() => setMode('signin')}
+          />
         )}
       </DialogContent>
     </Dialog>

package/core/Utilities.js

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
+import { UNSAFE_NavigationContext } from 'react-router-dom';
 import { getDispatch } from './Context.jsx';
 
 // Constants will be initialized by the app shell
@@ -985,3 +986,33 @@ export function setUIVisibility({ sidebar, tabBar }) {
         console.warn('setUIVisibility: Context not initialized');
     }
 }
+
+/**
+ * Safe navigation hook that works with or without Router context.
+ *
+ * Uses UNSAFE_NavigationContext directly instead of useNavigate() to avoid
+ * throwing when rendered outside Router (e.g., in Portals or module duplication).
+ * Falls back to window.location.href if no Router context is available.
+ *
+ * @returns {function} Navigate function (path, options?) => void
+ *
+ * @example
+ * const navigate = useSafeNavigate();
+ * navigate('/app');
+ * navigate('/app', { replace: true });
+ */
+export function useSafeNavigate() {
+    const ctx = useContext(UNSAFE_NavigationContext);
+
+    if (!ctx) {
+        return (path) => { window.location.href = path; };
+    }
+
+    return (path, options = {}) => {
+        if (options.replace) {
+            ctx.navigator.replace(path, options.state);
+        } else {
+            ctx.navigator.push(path, options.state);
+        }
+    };
+}

package/package.json

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

package/views/SignInView.jsx

@@ -6,27 +6,35 @@ import { Label } from "../shadcn/ui/label"
 import { Card, CardContent, CardHeader } from "../shadcn/ui/card"
 import { Alert, AlertDescription } from "../shadcn/ui/alert"
 import DynamicIcon from '../core/DynamicIcon';
-import { useNavigate } from 'react-router-dom';
 import { getState } from "../core/Context.jsx";
-import { getBackendURL } from '../core/Utilities'
+import { getBackendURL, useSafeNavigate } from '../core/Utilities'
 
 /**
- * Full-page sign-in form.
+ * Sign-in form component.
  *
- * Authenticates via POST to /signin, dispatches SET_USER on success,
- * and navigates to /app. Shows app branding and a link to sign up.
+ * Authenticates via POST to /signin, dispatches SET_USER on success.
+ * In full-page mode, navigates to /app. In embedded mode, calls onSuccess.
  *
  * @param {Object} props
  * @param {string} [props.className] - Additional CSS classes
- * @returns {JSX.Element} Sign-in page
+ * @param {boolean} [props.embedded=false] - Render without page wrapper (for dialogs)
+ * @param {function} [props.onSuccess] - Called after successful sign-in (embedded mode)
+ * @param {function} [props.onSwitchMode] - Called when user clicks "Sign Up" (embedded mode)
+ * @returns {JSX.Element} Sign-in form
  *
  * @example
- * import SignInView from '@stevederico/skateboard-ui/SignInView';
- *
+ * // Full page
  * <Route path="/signin" element={<SignInView />} />
+ *
+ * @example
+ * // Embedded in dialog
+ * <SignInView embedded onSuccess={handleSuccess} onSwitchMode={() => setMode('signup')} />
  */
 export default function LoginForm({
   className,
+  embedded = false,
+  onSuccess,
+  onSwitchMode,
   ...props
 }) {
   const { state, dispatch } = getState();
@@ -34,7 +42,7 @@ export default function LoginForm({
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const navigate = useNavigate();
+  const navigate = useSafeNavigate();
   const emailInputRef = useRef(null);
 
   const [errorMessage, setErrorMessage] = useState('')
@@ -62,7 +70,11 @@ export default function LoginForm({
       if (response.ok) {
         const data = await response.json();
         dispatch({ type: 'SET_USER', payload: data });
-        navigate('/app');
+        if (embedded && onSuccess) {
+          onSuccess();
+        } else {
+          navigate('/app');
+        }
       } else {
         setErrorMessage('Invalid Credentials');
       }
@@ -73,6 +85,70 @@ export default function LoginForm({
     }
   }
 
+  const formContent = (
+    <>
+      {errorMessage && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertDescription className="text-center">{errorMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      <form onSubmit={signInClicked} className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            ref={emailInputRef}
+            id="email"
+            type="email"
+            placeholder="john@example.com"
+            required
+            value={email}
+            onChange={(e) => {
+              setEmail(e.target.value);
+              setErrorMessage('');
+            }}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            placeholder="••••••••"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
+
+        <Button
+          type="submit"
+          variant="gradient"
+          size="cta"
+          className="w-full"
+          disabled={isSubmitting}
+        >
+          <span className="relative z-20 flex items-center justify-center gap-2 drop-shadow-sm">
+            <DynamicIcon name="sparkles" size={16} color="currentColor" strokeWidth={2} className="animate-pulse" />
+            {isSubmitting ? "Signing in..." : "Sign In"}
+          </span>
+        </Button>
+
+        <div className="text-center text-sm">
+          <span className="text-muted-foreground">Don't have an account?</span>{" "}
+          <Button variant="link" className="p-0 h-auto" onClick={() => embedded && onSwitchMode ? onSwitchMode() : navigate('/signup')}>
+            Sign Up
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+
+  if (embedded) {
+    return formContent;
+  }
+
   return (
     <div className="fixed inset-0 bg-background overflow-auto">
       <div className={cn("flex flex-col items-center justify-center min-h-screen p-4", className)} {...props}>
@@ -86,61 +162,7 @@ export default function LoginForm({
             </div>
           </CardHeader>
           <CardContent>
-            {errorMessage && (
-              <Alert variant="destructive" className="mb-4">
-                <AlertDescription className="text-center">{errorMessage}</AlertDescription>
-              </Alert>
-            )}
-
-            <form onSubmit={signInClicked} className="flex flex-col gap-4">
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="email">Email</Label>
-                <Input
-                  ref={emailInputRef}
-                  id="email"
-                  type="email"
-                  placeholder="john@example.com"
-                  required
-                  value={email}
-                  onChange={(e) => {
-                    setEmail(e.target.value);
-                    setErrorMessage('');
-                  }}
-                />
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="password">Password</Label>
-                <Input
-                  id="password"
-                  type="password"
-                  placeholder="••••••••"
-                  required
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                />
-              </div>
-
-              <Button
-                type="submit"
-                variant="gradient"
-                size="cta"
-                className="w-full"
-                disabled={isSubmitting}
-              >
-                <span className="relative z-20 flex items-center justify-center gap-2 drop-shadow-sm">
-                  <DynamicIcon name="sparkles" size={16} color="currentColor" strokeWidth={2} className="animate-pulse" />
-                  {isSubmitting ? "Signing in..." : "Sign In"}
-                </span>
-              </Button>
-
-              <div className="text-center text-sm">
-                <span className="text-muted-foreground">Don't have an account?</span>{" "}
-                <Button variant="link" className="p-0 h-auto" onClick={() => navigate('/signup')}>
-                  Sign Up
-                </Button>
-              </div>
-            </form>
+            {formContent}
           </CardContent>
         </Card>
       </div>

package/views/SignUpView.jsx

@@ -6,28 +6,36 @@ import { Label } from "../shadcn/ui/label"
 import { Card, CardContent, CardHeader } from "../shadcn/ui/card"
 import { Alert, AlertDescription } from "../shadcn/ui/alert"
 import DynamicIcon from '../core/DynamicIcon';
-import { useNavigate } from 'react-router-dom';
 import { getState } from "../core/Context.jsx";
-import { getBackendURL } from '../core/Utilities'
+import { getBackendURL, useSafeNavigate } from '../core/Utilities'
 
 /**
- * Full-page sign-up form.
+ * Sign-up form component.
  *
  * Creates account via POST to /signup with name, email, and password.
- * Validates password length (6-72 chars), dispatches SET_USER on success,
- * and navigates to /app. Includes legal agreement links.
+ * Validates password length (6-72 chars), dispatches SET_USER on success.
+ * In full-page mode, navigates to /app. In embedded mode, calls onSuccess.
  *
  * @param {Object} props
  * @param {string} [props.className] - Additional CSS classes
- * @returns {JSX.Element} Sign-up page
+ * @param {boolean} [props.embedded=false] - Render without page wrapper (for dialogs)
+ * @param {function} [props.onSuccess] - Called after successful sign-up (embedded mode)
+ * @param {function} [props.onSwitchMode] - Called when user clicks "Sign In" (embedded mode)
+ * @returns {JSX.Element} Sign-up form
  *
  * @example
- * import SignUpView from '@stevederico/skateboard-ui/SignUpView';
- *
+ * // Full page
  * <Route path="/signup" element={<SignUpView />} />
+ *
+ * @example
+ * // Embedded in dialog
+ * <SignUpView embedded onSuccess={handleSuccess} onSwitchMode={() => setMode('signin')} />
  */
 export default function LoginForm({
   className,
+  embedded = false,
+  onSuccess,
+  onSwitchMode,
   ...props
 }) {
   const { state, dispatch } = getState();
@@ -35,8 +43,8 @@ export default function LoginForm({
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
-  const navigate = useNavigate();
-  const [errorMessage, setErrorMessage] = useState('')
+  const [errorMessage, setErrorMessage] = useState('');
+  const navigate = useSafeNavigate();
   const nameInputRef = useRef(null);
 
   // Focus the first input on mount
@@ -76,7 +84,11 @@ export default function LoginForm({
           localStorage.setItem(csrfKey, csrfToken);
         }
         dispatch({ type: 'SET_USER', payload: data });
-        navigate('/app');
+        if (embedded && onSuccess) {
+          onSuccess();
+        } else {
+          navigate('/app');
+        }
       } else {
         setErrorMessage('Invalid Credentials')
       }
@@ -86,6 +98,96 @@ export default function LoginForm({
     }
   }
 
+  const formContent = (
+    <>
+      {errorMessage !== '' && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertDescription className="text-center">{errorMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      <form onSubmit={signUpClicked} className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="name">Name</Label>
+          <Input
+            ref={nameInputRef}
+            id="name"
+            placeholder="John Doe"
+            required
+            value={name}
+            onChange={(e) => {
+              setName(e.target.value);
+              setErrorMessage('');
+            }}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="john@example.com"
+            required
+            value={email}
+            onChange={(e) => {
+              setEmail(e.target.value);
+              setErrorMessage('');
+            }}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            placeholder="••••••••"
+            required
+            minLength={6}
+            maxLength={72}
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value);
+              setErrorMessage('');
+            }}
+          />
+          <p className="text-xs text-muted-foreground">Minimum 6 characters</p>
+        </div>
+
+        <Button
+          type="submit"
+          variant="gradient"
+          size="cta"
+          className="w-full"
+        >
+          <span className="relative z-20 flex items-center justify-center gap-2 drop-shadow-sm">
+            <DynamicIcon name="sparkles" size={16} color="currentColor" strokeWidth={2} className="animate-pulse" />
+            Sign Up
+          </span>
+        </Button>
+
+        <div className="text-center text-sm">
+          <span className="text-muted-foreground">Already have an account?</span>{" "}
+          <Button variant="link" className="p-0 h-auto" onClick={(e) => { e.preventDefault(); embedded && onSwitchMode ? onSwitchMode() : navigate('/signin'); }}>
+            Sign In
+          </Button>
+        </div>
+      </form>
+
+      <div className="mt-4 text-center text-xs text-muted-foreground">
+        By registering you agree to our{" "}
+        <a href="/terms" className="underline underline-offset-4 hover:text-foreground">Terms of Service</a>,{" "}
+        <a href="/eula" className="underline underline-offset-4 hover:text-foreground">EULA</a>,{" "}
+        <a href="/privacy" className="underline underline-offset-4 hover:text-foreground">Privacy Policy</a>
+      </div>
+    </>
+  );
+
+  if (embedded) {
+    return formContent;
+  }
+
   return (
     <div className="fixed inset-0 bg-background overflow-auto">
       <div className={cn("flex flex-col items-center justify-center min-h-screen p-4", className)} {...props}>
@@ -99,87 +201,7 @@ export default function LoginForm({
             </div>
           </CardHeader>
           <CardContent>
-            {errorMessage !== '' && (
-              <Alert variant="destructive" className="mb-4">
-                <AlertDescription className="text-center">{errorMessage}</AlertDescription>
-              </Alert>
-            )}
-
-            <form onSubmit={signUpClicked} className="flex flex-col gap-4">
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="name">Name</Label>
-                <Input
-                  ref={nameInputRef}
-                  id="name"
-                  placeholder="John Doe"
-                  required
-                  value={name}
-                  onChange={(e) => {
-                    setName(e.target.value);
-                    setErrorMessage('');
-                  }}
-                />
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="email">Email</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="john@example.com"
-                  required
-                  value={email}
-                  onChange={(e) => {
-                    setEmail(e.target.value);
-                    setErrorMessage('');
-                  }}
-                />
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="password">Password</Label>
-                <Input
-                  id="password"
-                  type="password"
-                  placeholder="••••••••"
-                  required
-                  minLength={6}
-                  maxLength={72}
-                  value={password}
-                  onChange={(e) => {
-                    setPassword(e.target.value);
-                    setErrorMessage('');
-                  }}
-                />
-                <p className="text-xs text-muted-foreground">Minimum 6 characters</p>
-              </div>
-
-              <Button
-                type="submit"
-                variant="gradient"
-                size="cta"
-                className="w-full"
-              >
-                <span className="relative z-20 flex items-center justify-center gap-2 drop-shadow-sm">
-                  <DynamicIcon name="sparkles" size={16} color="currentColor" strokeWidth={2} className="animate-pulse" />
-                  Sign Up
-                </span>
-              </Button>
-
-              <div className="text-center text-sm">
-                <span className="text-muted-foreground">Already have an account?</span>{" "}
-                <Button variant="link" className="p-0 h-auto" onClick={(e) => { e.preventDefault(); navigate('/signin'); }}>
-                  Sign In
-                </Button>
-              </div>
-            </form>
-
-            <div className="mt-4 text-center text-xs text-muted-foreground">
-              By registering you agree to our{" "}
-              <a href="/terms" className="underline underline-offset-4 hover:text-foreground">Terms of Service</a>,{" "}
-              <a href="/eula" className="underline underline-offset-4 hover:text-foreground">EULA</a>,{" "}
-              <a href="/privacy" className="underline underline-offset-4 hover:text-foreground">Privacy Policy</a>
-            </div>
+            {formContent}
           </CardContent>
         </Card>
       </div>