@rovela-ai/sdk 0.19.4 → 0.19.5

package/templates/store-template/app/admin/login/page.tsx

@@ -0,0 +1,528 @@
+'use client'
+
+/**
+ * Admin Login/Setup Page
+ *
+ * This page handles both:
+ * - First-time admin setup (when no admins exist)
+ * - Admin login (when at least one admin exists)
+ *
+ * This page is OUTSIDE the (dashboard) route group, so it's not protected
+ * by AdminGuard and won't cause redirect loops.
+ *
+ * Chrome comes from the SDK's AdminAuthShell (favicon-first brand tile +
+ * store name + card + theme CSS) — the same front door as every other
+ * admin auth page. The forms themselves stay INLINED here (not the SDK's
+ * AdminLoginForm) so the postMessage auto-login handshake with the Rovela
+ * platform doesn't depend on an SDK import during initial load.
+ */
+
+import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { Eye, EyeOff } from 'lucide-react'
+import { useAdminSession, useAdminAuth, AdminAuthShell } from '@rovela-ai/sdk/admin'
+// Import Rovela admin theme for visual consistency
+import '@rovela-ai/sdk/admin/styles/admin-theme.css'
+
+/**
+ * Admin check response type
+ */
+interface AdminCheckResponse {
+  hasAdmin: boolean
+  ownerEmail: string
+}
+
+/**
+ * Setup Form Component (inline to avoid SDK import during initial load)
+ *
+ * Renders CARD CONTENT only — the page wraps it in AdminAuthShell.
+ */
+function SetupForm({ ownerEmail }: { ownerEmail: string }) {
+  const [email, setEmail] = useState(ownerEmail)
+  const [name, setName] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    // Validate passwords match
+    if (password !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+
+    // Validate password length
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters')
+      return
+    }
+
+    // Validate name
+    if (name.trim().length < 2) {
+      setError('Name must be at least 2 characters')
+      return
+    }
+
+    setIsSubmitting(true)
+
+    try {
+      const response = await fetch('/api/admin/setup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email: email.trim(),
+          password,
+          name: name.trim(),
+        }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        setError(data.error || 'Setup failed')
+        return
+      }
+
+      // Success - reload to show login form
+      window.location.reload()
+    } catch {
+      setError('An unexpected error occurred')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <h1 className="admin-auth-title">Create your admin account</h1>
+      <p className="admin-auth-sub">
+        Set a password to start managing your store.
+      </p>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <div className="admin-alert admin-alert-error">
+            <div className="admin-alert-description">{error}</div>
+          </div>
+        )}
+
+        <div>
+          <label htmlFor="setup-email" className="admin-label admin-label-required">
+            Email
+          </label>
+          <input
+            id="setup-email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            disabled={isSubmitting}
+            className="admin-input w-full"
+            placeholder="you@example.com"
+          />
+          {ownerEmail && email === ownerEmail && (
+            <p className="mt-1 text-xs admin-text-muted">
+              Pre-filled with your store owner email
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="setup-name" className="admin-label admin-label-required">
+            Name
+          </label>
+          <input
+            id="setup-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            disabled={isSubmitting}
+            className="admin-input w-full"
+            placeholder="Your name"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="setup-password" className="admin-label admin-label-required">
+            Password
+          </label>
+          <div className="admin-auth-pw">
+            <input
+              id="setup-password"
+              type={showPassword ? 'text' : 'password'}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              disabled={isSubmitting}
+              className="admin-input w-full"
+              placeholder="At least 8 characters"
+            />
+            <button
+              type="button"
+              className="admin-auth-eye"
+              onClick={() => setShowPassword((v) => !v)}
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+              tabIndex={-1}
+            >
+              {showPassword ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <label htmlFor="setup-confirm" className="admin-label admin-label-required">
+            Confirm password
+          </label>
+          <div className="admin-auth-pw">
+            <input
+              id="setup-confirm"
+              type={showConfirm ? 'text' : 'password'}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              disabled={isSubmitting}
+              className="admin-input w-full"
+              placeholder="Re-enter your password"
+            />
+            <button
+              type="button"
+              className="admin-auth-eye"
+              onClick={() => setShowConfirm((v) => !v)}
+              aria-label={showConfirm ? 'Hide password' : 'Show password'}
+              tabIndex={-1}
+            >
+              {showConfirm ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}
+            </button>
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="admin-btn admin-btn-primary w-full"
+        >
+          {isSubmitting ? (
+            <span className="flex items-center justify-center gap-2">
+              <span className="admin-spinner admin-spinner-sm" />
+              Creating your account…
+            </span>
+          ) : (
+            'Create admin account'
+          )}
+        </button>
+      </form>
+    </>
+  )
+}
+
+/**
+ * Login Form Component
+ *
+ * Renders CARD CONTENT only — the page wraps it in AdminAuthShell.
+ *
+ * Uses useSession().update() to refresh session state after sign-in.
+ * This is critical for iframe contexts where navigation happens before
+ * the session state updates, causing redirect loops.
+ *
+ * Also supports postMessage auto-login from Rovela platform for seamless
+ * admin access during store generation.
+ */
+function LoginForm() {
+  const router = useRouter()
+  // Admin auth lives at `/api/admin-auth/*` (separate cookie from customer
+  // auth at `/api/auth/*`). `useAdminAuth().signIn` POSTs credentials to
+  // that endpoint; `useAdminSession().update` re-fetches the admin session
+  // after sign-in so the page sees the new state immediately.
+  const { signIn: adminSignIn } = useAdminAuth()
+  const { update } = useAdminSession()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [autoLoginAttempted, setAutoLoginAttempted] = useState(false)
+
+  // PostMessage listener for auto-login from Rovela platform
+  // Flow: Store requests credentials → Platform responds → Store auto-logs in
+  useEffect(() => {
+    let credentialsUsed = false // One-time use flag
+
+    // Allowed origins whitelist for security
+    // rovela.ai = platform (sends credentials)
+    // rovela.app = deployed stores (this page runs here)
+    const ALLOWED_ORIGINS = [
+      'http://localhost:3000',
+      'http://localhost:3001',
+      'https://rovela.ai',
+      'https://www.rovela.ai',
+    ]
+
+    const isAllowedOrigin = (origin: string): boolean => {
+      // Exact match against whitelist
+      if (ALLOWED_ORIGINS.includes(origin)) return true
+      // Pattern match for Rovela platform subdomains
+      if (origin.endsWith('.rovela.ai')) return true
+      // Allow localhost with any port during development
+      if (origin.startsWith('http://localhost:')) return true
+      return false
+    }
+
+    const handleMessage = async (event: MessageEvent) => {
+      // Only accept messages with our expected type
+      if (event.data?.type !== 'ROVELA_ADMIN_CREDENTIALS') return
+
+      // Security: Validate origin
+      if (!isAllowedOrigin(event.origin)) {
+        console.warn('[AdminLogin] Rejected credentials from untrusted origin:', event.origin)
+        return
+      }
+
+      // Prevent duplicate logins
+      if (credentialsUsed) return
+      credentialsUsed = true
+
+      const { email: credEmail, password: credPassword } = event.data
+      if (!credEmail || !credPassword) return
+
+      console.log('[AdminLogin] Received credentials via postMessage, auto-logging in...')
+      setIsLoading(true)
+      setError(null)
+
+      try {
+        const result = await adminSignIn({
+          email: credEmail,
+          password: credPassword,
+        })
+
+        if (!result.success) {
+          console.error('[AdminLogin] Auto-login failed:', result.error)
+          setError('Auto-login failed. Please sign in manually.')
+          // Pre-fill email for convenience
+          setEmail(credEmail)
+        } else {
+          console.log('[AdminLogin] Auto-login successful, redirecting...')
+          // adminSignIn already called update() internally, but call again
+          // to be absolutely sure the session cache is fresh before navigating.
+          await update()
+          router.push('/admin')
+        }
+      } catch (err) {
+        console.error('[AdminLogin] Auto-login error:', err)
+        setError('Auto-login failed. Please sign in manually.')
+        setEmail(credEmail)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    // Request credentials from parent (Rovela platform)
+    // Only request once per mount
+    if (!autoLoginAttempted && window.parent !== window) {
+      setAutoLoginAttempted(true)
+      window.parent.postMessage({ type: 'ROVELA_REQUEST_CREDENTIALS' }, '*')
+      console.log('[AdminLogin] Requested credentials from parent')
+    }
+
+    return () => {
+      window.removeEventListener('message', handleMessage)
+    }
+  }, [router, update, adminSignIn, autoLoginAttempted])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setIsLoading(true)
+
+    try {
+      const result = await adminSignIn({ email, password })
+
+      if (!result.success) {
+        setError(result.error || 'Invalid email or password')
+      } else {
+        // adminSignIn already called update(); call again before navigation
+        // so AdminGuard sees the fresh session state on the next render.
+        await update()
+        router.push('/admin')
+      }
+    } catch {
+      setError('An error occurred. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <h1 className="admin-auth-title">Sign in</h1>
+      <p className="admin-auth-sub">Manage your store from the admin dashboard.</p>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <div className="admin-alert admin-alert-error">
+            <div className="admin-alert-description">{error}</div>
+          </div>
+        )}
+
+        <div>
+          <label htmlFor="login-email" className="admin-label admin-label-required">
+            Email
+          </label>
+          <input
+            id="login-email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            disabled={isLoading}
+            className="admin-input w-full"
+            placeholder="you@example.com"
+          />
+        </div>
+
+        <div>
+          <div className="admin-auth-lblrow">
+            <label htmlFor="login-password" className="admin-label admin-label-required">
+              Password
+            </label>
+            <a href="/admin/forgot-password" className="admin-auth-link">
+              Forgot password?
+            </a>
+          </div>
+          <div className="admin-auth-pw">
+            <input
+              id="login-password"
+              type={showPassword ? 'text' : 'password'}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              disabled={isLoading}
+              className="admin-input w-full"
+              placeholder="Your password"
+            />
+            <button
+              type="button"
+              className="admin-auth-eye"
+              onClick={() => setShowPassword((v) => !v)}
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+              tabIndex={-1}
+            >
+              {showPassword ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}
+            </button>
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="admin-btn admin-btn-primary w-full"
+        >
+          {isLoading ? (
+            <span className="flex items-center justify-center gap-2">
+              <span className="admin-spinner admin-spinner-sm" />
+              Signing in…
+            </span>
+          ) : (
+            'Sign in'
+          )}
+        </button>
+      </form>
+    </>
+  )
+}
+
+export default function AdminLoginPage() {
+  const router = useRouter()
+  // Admin-specific session — reads `/api/admin-auth/session`, not the
+  // customer endpoint. An active customer session won't redirect us away
+  // from the admin login screen (which is the correct behavior — the
+  // admin might be signed in as a customer simultaneously).
+  const { data: adminSession, status } = useAdminSession()
+
+  // State for admin check
+  const [checkState, setCheckState] = useState<{
+    loading: boolean
+    hasAdmin: boolean | null
+    ownerEmail: string
+  }>({
+    loading: true,
+    hasAdmin: null,
+    ownerEmail: '',
+  })
+
+  // Check if any admin exists
+  useEffect(() => {
+    async function checkAdmin() {
+      try {
+        const response = await fetch('/api/admin/check')
+        const data: AdminCheckResponse = await response.json()
+        setCheckState({
+          loading: false,
+          hasAdmin: data.hasAdmin,
+          ownerEmail: data.ownerEmail,
+        })
+      } catch (error) {
+        console.error('[AdminLoginPage] Failed to check admin:', error)
+        // On error, assume no admin exists to allow setup
+        setCheckState({
+          loading: false,
+          hasAdmin: false,
+          ownerEmail: '',
+        })
+      }
+    }
+
+    checkAdmin()
+  }, [])
+
+  // Redirect to admin dashboard if already authenticated AS ADMIN.
+  // `useAdminSession` only returns data when the admin cookie is active,
+  // so any truthy session here is definitionally an admin session.
+  useEffect(() => {
+    if (status === 'authenticated' && adminSession?.user) {
+      router.replace('/admin')
+    }
+  }, [status, adminSession, router])
+
+  // Show loading while checking session or admin status. The shell resolves
+  // store identity itself (skeletons while loading — never a wrong value).
+  if (status === 'loading' || checkState.loading) {
+    return (
+      <AdminAuthShell>
+        <div className="flex items-center justify-center py-8">
+          <span className="admin-spinner admin-spinner-lg" />
+        </div>
+      </AdminAuthShell>
+    )
+  }
+
+  // Don't render form if already authenticated AS ADMIN (will redirect).
+  if (status === 'authenticated' && adminSession?.user) {
+    return (
+      <AdminAuthShell>
+        <div className="flex flex-col items-center justify-center gap-3 py-8">
+          <span className="admin-spinner admin-spinner-lg" />
+          <p className="text-sm admin-text-muted">Taking you to your dashboard…</p>
+        </div>
+      </AdminAuthShell>
+    )
+  }
+
+  return (
+    <AdminAuthShell>
+      {checkState.hasAdmin ? (
+        <LoginForm />
+      ) : (
+        <SetupForm ownerEmail={checkState.ownerEmail} />
+      )}
+    </AdminAuthShell>
+  )
+}

package/templates/store-template/app/admin/reset-password/page.tsx

@@ -0,0 +1,36 @@
+/**
+ * Admin Reset Password Page
+ *
+ * Public page (outside the dashboard route group). The SDK's
+ * AdminResetPasswordForm renders its own AdminAuthShell (brand tile +
+ * store name + card + theme CSS), so this page is a bare mount.
+ *
+ * The form reads the `?token=X` query param via `useSearchParams`, so
+ * Next.js App Router requires a <Suspense> boundary here. The fallback
+ * reuses the shell so the suspense moment and the form's own validating
+ * state look identical.
+ */
+
+import { Suspense } from 'react'
+import {
+  AdminAuthShell,
+  AdminResetPasswordForm,
+} from '@rovela-ai/sdk/admin/components'
+
+function LoadingFallback() {
+  return (
+    <AdminAuthShell>
+      <div className="flex items-center justify-center py-8">
+        <span className="admin-spinner admin-spinner-lg" />
+      </div>
+    </AdminAuthShell>
+  )
+}
+
+export default function AdminResetPasswordPage() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <AdminResetPasswordForm />
+    </Suspense>
+  )
+}

package/templates/store-template/app/api/account/addresses/[id]/route.ts

@@ -0,0 +1,10 @@
+/**
+ * Customer Address Book API — update / set-default / archive one address.
+ *
+ * PATCH  /api/account/addresses/[id]  → update fields and/or set default
+ * DELETE /api/account/addresses/[id]  → soft-delete (archived for compliance)
+ *
+ * Ownership is enforced inside the SDK handlers (scoped to the signed-in customer).
+ */
+
+export { PATCH, DELETE } from '@rovela-ai/sdk/auth/api/address'

package/templates/store-template/app/api/account/addresses/route.ts

@@ -0,0 +1,10 @@
+/**
+ * Customer Address Book API — list + create.
+ *
+ * GET  /api/account/addresses  → list the signed-in customer's saved addresses
+ * POST /api/account/addresses  → create a new address
+ *
+ * Both are `requireCustomer()`-gated inside the SDK handlers.
+ */
+
+export { GET, POST } from '@rovela-ai/sdk/auth/api/addresses'

package/templates/store-template/app/api/account/change-password/route.ts

@@ -0,0 +1,107 @@
+/**
+ * Change Password API Route
+ *
+ * POST /api/account/change-password - Change customer password
+ *
+ * Requires current password verification before allowing password change.
+ * Protected by `requireCustomer()` — admins get a 403.
+ */
+
+import {
+  requireCustomer,
+  findCustomerById,
+  updateCustomerPassword,
+  verifyPassword,
+  validatePassword,
+  MIN_PASSWORD_LENGTH,
+} from '@rovela-ai/sdk/auth/server'
+
+/**
+ * POST /api/account/change-password
+ *
+ * Changes the authenticated customer's password.
+ * Requires current password for verification.
+ *
+ * Body: { currentPassword: string, newPassword: string }
+ */
+export async function POST(request: Request) {
+  const guard = await requireCustomer()
+  if (!guard.ok) return guard.response
+
+  try {
+    const body = await request.json()
+    const { currentPassword, newPassword } = body as {
+      currentPassword?: string
+      newPassword?: string
+    }
+
+    // Validate required fields
+    if (!currentPassword || typeof currentPassword !== 'string') {
+      return Response.json(
+        { error: 'Current password is required' },
+        { status: 400 }
+      )
+    }
+
+    if (!newPassword || typeof newPassword !== 'string') {
+      return Response.json(
+        { error: 'New password is required' },
+        { status: 400 }
+      )
+    }
+
+    // Validate new password strength
+    const passwordValidation = validatePassword(newPassword)
+    if (!passwordValidation.valid) {
+      return Response.json(
+        { error: passwordValidation.error || `Password must be at least ${MIN_PASSWORD_LENGTH} characters` },
+        { status: 400 }
+      )
+    }
+
+    // Check that new password is different from current
+    if (currentPassword === newPassword) {
+      return Response.json(
+        { error: 'New password must be different from current password' },
+        { status: 400 }
+      )
+    }
+
+    // Fetch customer to get current password hash
+    const customer = await findCustomerById(guard.customer.id)
+
+    if (!customer) {
+      return Response.json(
+        { error: 'Customer not found' },
+        { status: 404 }
+      )
+    }
+
+    // Verify current password
+    const isCurrentPasswordValid = await verifyPassword(
+      currentPassword,
+      customer.passwordHash
+    )
+
+    if (!isCurrentPasswordValid) {
+      return Response.json(
+        { error: 'Current password is incorrect' },
+        { status: 400 }
+      )
+    }
+
+    // Update password
+    await updateCustomerPassword(guard.customer.id, newPassword)
+
+    return Response.json({
+      success: true,
+      message: 'Password changed successfully',
+    })
+  } catch (error) {
+    console.error('[Change Password API] Failed to change password:', error)
+    return Response.json(
+      { error: 'Failed to change password' },
+      { status: 500 }
+    )
+  }
+}