spine-framework 0.3.54 → 0.3.56

package/.framework/src/pages/auth/RegisterPage.tsx

@@ -4,42 +4,213 @@
  * @layer frontend-page
  * @stability stable
  *
- * Self-registration page. Renders a centred card with email/password/name
- * inputs. On submit, calls Supabase signUp and navigates to /login with
- * a confirmation message.
+ * Registration page. Handles multiple paths:
+ *
+ *   1. First user (no people in system) — simplified form, becomes system_admin.
+ *      No personal/company toggle shown.
+ *
+ *   2. Invite link (?t=TOKEN) — email + account pre-filled and locked.
+ *      On submit: Supabase signUp → auth trigger resolves stub → active.
+ *
+ *   3. Walk-up personal — new account named after the person.
+ *      On submit: Supabase signUp → complete-registration(new_account).
+ *
+ *   4. Walk-up company, no domain match — new account with company name.
+ *      On submit: Supabase signUp → complete-registration(new_account).
+ *
+ *   5. Walk-up company, domain match — user chooses join or create new.
+ *      Join: Supabase signUp → complete-registration(join_request) → pending.
+ *      Create new: same as path 3.
+ *
+ * URL params:
+ *   ?app=portal|cortex — override default registration app
+ *   ?role=member|support — override default role
+ *
+ * @seeAlso functions/invites.ts   (check-domain, validate-token, complete-registration)
+ * @seeAlso migrations/005_auth_user_trigger.sql  (invite stub resolution)
+ * @seeAlso src/pages/auth/PendingApprovalPage.tsx
  */
 
-import React, { useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { useAuth } from '../../contexts/AuthContext'
+import React, { useState, useEffect, useCallback } from 'react'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
 import { supabase } from '../../lib/supabase'
 
+// ─── TYPES ────────────────────────────────────────────────────────────────────
+
+type UseType = 'personal' | 'company'
+type DomainMatchChoice = 'join' | 'create_new' | null
+
+interface InvitePreview {
+  email: string
+  account_name: string | null
+  role_name: string | null
+  kind: string
+}
+
+interface RegistrationConfig {
+  default_app: string
+  default_role: string
+  allow_url_override: boolean
+  apps: Record<string, {
+    role: string
+    path: string
+    enabled: boolean
+  }>
+}
+
+// ─── HELPERS ──────────────────────────────────────────────────────────────────
+
+async function callInvitesApi(action: string, params: Record<string, any> = {}, method: 'GET' | 'POST' = 'GET') {
+  const base = '/.netlify/functions/invites'
+  if (method === 'GET') {
+    const qs = new URLSearchParams({ action, ...params }).toString()
+    const res = await fetch(`${base}?${qs}`)
+    return res.json()
+  }
+  const res = await fetch(`${base}?action=${action}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  })
+  return res.json()
+}
+
+async function loadRegistrationConfig(): Promise<RegistrationConfig | null> {
+  try {
+    const res = await fetch('/spine.config.json')
+    if (!res.ok) return null
+    const config = await res.json()
+    return config.registration ?? null
+  } catch {
+    return null
+  }
+}
+
+async function checkFirstUser(): Promise<boolean> {
+  try {
+    const result = await callInvitesApi('check-first-user')
+    return result.data?.is_first_user ?? false
+  } catch {
+    return false
+  }
+}
+
+function getPostRegistrationRedirect(
+  config: RegistrationConfig | null,
+  searchParams: URLSearchParams,
+  isInvite: boolean,
+  inviteAccountId?: string
+): string {
+  // Invites: redirect to the account's primary app or default
+  if (isInvite) {
+    return '/'
+  }
+
+  // Check for URL override if allowed
+  if (config?.allow_url_override) {
+    const appOverride = searchParams.get('app')
+    if (appOverride && config.apps[appOverride]?.enabled) {
+      return config.apps[appOverride].path
+    }
+  }
+
+  // Default app from config
+  if (config?.default_app && config.apps[config.default_app]?.enabled) {
+    return config.apps[config.default_app].path
+  }
+
+  // Fallback
+  return '/'
+}
+
+// ─── COMPONENT ────────────────────────────────────────────────────────────────
+
 export function RegisterPage() {
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const inviteToken = searchParams.get('t')
+
+  // Registration config
+  const [regConfig, setRegConfig] = useState<RegistrationConfig | null>(null)
+  const [isFirstUser, setIsFirstUser] = useState<boolean | null>(null)
+
+  // Invite preview (when token present)
+  const [invitePreview, setInvitePreview] = useState<InvitePreview | null>(null)
+  const [tokenError, setTokenError] = useState('')
+  const [tokenLoading, setTokenLoading] = useState(!!inviteToken)
+
+  // Form fields
+  const [fullName, setFullName] = useState('')
   const [email, setEmail] = useState('')
+  const [companyName, setCompanyName] = useState('')
   const [password, setPassword] = useState('')
-  const [fullName, setFullName] = useState('')
+
+  // UX state
+  const [useType, setUseType] = useState<UseType>('personal')
+  const [domainMatchAccountId, setDomainMatchAccountId] = useState<string | null>(null)
+  const [domainMatchChoice, setDomainMatchChoice] = useState<DomainMatchChoice>(null)
+  const [domainCheckLoading, setDomainCheckLoading] = useState(false)
+
   const [error, setError] = useState('')
-  const [success, setSuccess] = useState('')
   const [isLoading, setIsLoading] = useState(false)
 
-  const navigate = useNavigate()
+  // ── Load config and check first user on mount ──────────────────────────────
+  useEffect(() => {
+    ;(async () => {
+      const [config, firstUserCheck] = await Promise.all([
+        loadRegistrationConfig(),
+        checkFirstUser(),
+      ])
+      setRegConfig(config)
+      setIsFirstUser(firstUserCheck)
+    })()
+  }, [])
+
+  // ── Resolve invite token ───────────────────────────────────────────────────
+  useEffect(() => {
+    if (!inviteToken) return
+    ;(async () => {
+      setTokenLoading(true)
+      const result = await callInvitesApi('validate-token', { token: inviteToken })
+      setTokenLoading(false)
+      if (result.error) {
+        setTokenError(result.error)
+      } else {
+        setInvitePreview(result.data)
+        setEmail(result.data.email)
+      }
+    })()
+  }, [inviteToken])
+
+  // ── Domain check on email blur ─────────────────────────────────────────────
+  const handleEmailBlur = useCallback(async () => {
+    if (!email || !email.includes('@') || inviteToken || useType === 'personal' || isFirstUser) return
+
+    setDomainCheckLoading(true)
+    setDomainMatchAccountId(null)
+    setDomainMatchChoice(null)
 
+    const result = await callInvitesApi('check-domain', { email })
+    setDomainCheckLoading(false)
+
+    if (result.data?.match) {
+      setDomainMatchAccountId('__matched__')
+    }
+  }, [email, inviteToken, useType, isFirstUser])
+
+  // ── Submit ─────────────────────────────────────────────────────────────────
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
-    setSuccess('')
     setIsLoading(true)
 
     try {
-      const { error: signUpError } = await supabase.auth.signUp({
-        email,
+      // 1. Supabase auth signup
+      const { data: signUpData, error: signUpError } = await supabase.auth.signUp({
+        email: invitePreview?.email ?? email,
         password,
-        options: {
-          data: {
-            full_name: fullName,
-          },
-        },
+        options: { data: { full_name: fullName } },
       })
 
       if (signUpError) {
@@ -47,8 +218,53 @@ export function RegisterPage() {
         return
       }
 
-      setSuccess('Account created! Check your email for a confirmation link.')
-      setTimeout(() => navigate('/login'), 3000)
+      // 2. First user path — trigger handles everything, navigate to root
+      if (isFirstUser) {
+        // First user becomes system_admin immediately, go to admin
+        navigate('/spine-framework/admin', { replace: true })
+        return
+      }
+
+      // 3. Invite path — trigger handles everything, navigate to account
+      if (inviteToken) {
+        navigate('/', { replace: true })
+        return
+      }
+
+      // 4. Walk-up paths — call complete-registration
+      const resolvedEmail = email
+
+      if (domainMatchChoice === 'join') {
+        // Join existing account as access_request
+        const joinResult = await callInvitesApi('complete-registration', {
+          path: 'join_request',
+          email: resolvedEmail,
+        }, 'POST')
+
+        if (joinResult.error) {
+          setError(joinResult.error)
+          return
+        }
+        navigate('/pending-approval', { replace: true })
+        return
+      }
+
+      // New account (personal or company create_new)
+      const accountName = useType === 'personal' ? fullName : companyName
+      const newResult = await callInvitesApi('complete-registration', {
+        path: 'new_account',
+        email: resolvedEmail,
+        account_name: accountName,
+      }, 'POST')
+
+      if (newResult.error) {
+        setError(newResult.error)
+        return
+      }
+
+      // Navigate to configured post-registration destination
+      const redirectPath = getPostRegistrationRedirect(regConfig, searchParams, false)
+      navigate(redirectPath, { replace: true })
     } catch (err: any) {
       setError(err.message || 'Registration failed')
     } finally {
@@ -56,106 +272,262 @@ export function RegisterPage() {
     }
   }
 
+  // ── Loading states ───────────────────────────────────────────────────────────
+  if (tokenLoading || isFirstUser === null) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
+        <LoadingSpinner className="w-8 h-8" />
+      </div>
+    )
+  }
+
+  if (tokenError) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="max-w-md w-full text-center space-y-4">
+          <div className="rounded-md bg-red-50 p-6">
+            <p className="text-red-800 font-medium">Invite link invalid</p>
+            <p className="text-red-700 text-sm mt-1">{tokenError}</p>
+          </div>
+          <Link to="/login" className="text-sm text-slate-600 hover:text-slate-900">
+            Back to login
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  const isInvite = !!inviteToken && !!invitePreview
+  const showDomainMatchPrompt = domainMatchAccountId && domainMatchChoice === null && useType === 'company' && !isFirstUser
+  const effectiveEmail = isInvite ? invitePreview.email : email
+  const showUseTypeToggle = !isInvite && !isFirstUser
+
+  // Header text based on scenario
+  let headerTitle = 'Create your account'
+  let headerSubtitle: React.ReactNode = null
+
+  if (isFirstUser) {
+    headerTitle = 'Create system administrator account'
+    headerSubtitle = (
+      <p className="mt-2 text-center text-sm text-slate-500">
+        You're the first user. This account will have full system access.
+      </p>
+    )
+  } else if (isInvite) {
+    headerTitle = `Join ${invitePreview.account_name ?? 'the team'}`
+    if (invitePreview.role_name) {
+      headerSubtitle = (
+        <p className="mt-2 text-center text-sm text-slate-500">
+          You've been invited as <span className="font-medium">{invitePreview.role_name}</span>
+        </p>
+      )
+    }
+  }
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
+
+        {/* Header */}
         <div>
           <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-slate-900">
             <span className="text-white font-bold text-xl">S</span>
           </div>
           <h2 className="mt-6 text-center text-3xl font-extrabold text-slate-900">
-            Create your account
+            {headerTitle}
           </h2>
-          <p className="mt-2 text-center text-sm text-slate-600">
-            Already have an account?{' '}
-            <Link to="/login" className="font-medium text-accent-blue hover:text-accent-blue-light">
-              Sign in
-            </Link>
-          </p>
+          {headerSubtitle}
+          {!isFirstUser && (
+            <p className="mt-2 text-center text-sm text-slate-600">
+              Already have an account?{' '}
+              <Link to="/login" className="font-medium text-blue-600 hover:text-blue-500">
+                Sign in
+              </Link>
+            </p>
+          )}
         </div>
 
         <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
           {error && (
             <div className="rounded-md bg-red-50 p-4">
-              <div className="text-sm text-red-800">{error}</div>
-            </div>
-          )}
-
-          {success && (
-            <div className="rounded-md bg-green-50 p-4">
-              <div className="text-sm text-green-800">{success}</div>
+              <p className="text-sm text-red-800">{error}</p>
             </div>
           )}
 
           <div className="space-y-4">
+            {/* Personal / Company toggle — only for walk-up, not first user */}
+            {showUseTypeToggle && (
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-2">
+                  Account type
+                </label>
+                <div className="flex gap-3">
+                  {(['personal', 'company'] as UseType[]).map(type => (
+                    <button
+                      key={type}
+                      type="button"
+                      onClick={() => {
+                        setUseType(type)
+                        setDomainMatchAccountId(null)
+                        setDomainMatchChoice(null)
+                      }}
+                      className={`flex-1 py-2 px-4 rounded-[5px] border text-sm font-medium transition-colors ${
+                        useType === type
+                          ? 'bg-slate-900 text-white border-slate-900'
+                          : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400'
+                      }`}
+                    >
+                      {type === 'personal' ? 'Personal' : 'Company'}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Full name */}
             <div>
               <label htmlFor="fullName" className="block text-sm font-medium text-slate-700">
                 Full name
               </label>
               <input
                 id="fullName"
-                name="fullName"
                 type="text"
                 required
                 value={fullName}
-                onChange={(e) => setFullName(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                onChange={e => setFullName(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                 placeholder="Enter your full name"
               />
             </div>
 
+            {/* Email — locked when invite */}
             <div>
               <label htmlFor="email" className="block text-sm font-medium text-slate-700">
                 Email address
               </label>
               <input
                 id="email"
-                name="email"
                 type="email"
-                autoComplete="email"
                 required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                value={effectiveEmail}
+                onChange={e => !isInvite && setEmail(e.target.value)}
+                onBlur={handleEmailBlur}
+                readOnly={isInvite}
+                className={`mt-1 block w-full px-3 py-2 border rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none sm:text-sm ${
+                  isInvite
+                    ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed'
+                    : 'border-slate-300 focus:ring-blue-500 focus:border-blue-500'
+                }`}
                 placeholder="Enter your email"
               />
+              {domainCheckLoading && (
+                <p className="mt-1 text-xs text-slate-500">Checking domain...</p>
+              )}
             </div>
 
+            {/* Domain match prompt */}
+            {showDomainMatchPrompt && (
+              <div className="rounded-md bg-blue-50 border border-blue-200 p-4 space-y-3">
+                <p className="text-sm text-blue-800 font-medium">
+                  An account for this domain already exists.
+                </p>
+                <p className="text-sm text-blue-700">
+                  Would you like to request to join the existing account, or create a new one?
+                </p>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setDomainMatchChoice('join')}
+                    className="flex-1 py-2 px-3 rounded-[5px] bg-blue-600 text-white text-sm font-medium hover:bg-blue-700"
+                  >
+                    Request to join
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setDomainMatchChoice('create_new')}
+                    className="flex-1 py-2 px-3 rounded-[5px] border border-blue-300 text-blue-700 text-sm font-medium hover:bg-blue-100"
+                  >
+                    Create new account
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Company name — shown for company type when not joining existing */}
+            {!isInvite && useType === 'company' && domainMatchChoice !== 'join' && !isFirstUser && (
+              <div>
+                <label htmlFor="companyName" className="block text-sm font-medium text-slate-700">
+                  Company name
+                </label>
+                <input
+                  id="companyName"
+                  type="text"
+                  required={useType === 'company'}
+                  value={companyName}
+                  onChange={e => setCompanyName(e.target.value)}
+                  className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  placeholder="Enter your company name"
+                />
+              </div>
+            )}
+
+            {/* Invite account name — locked */}
+            {isInvite && invitePreview.account_name && (
+              <div>
+                <label className="block text-sm font-medium text-slate-700">Account</label>
+                <input
+                  type="text"
+                  readOnly
+                  value={invitePreview.account_name}
+                  className="mt-1 block w-full px-3 py-2 border border-slate-200 rounded-[5px] bg-slate-50 text-slate-500 cursor-not-allowed sm:text-sm"
+                />
+              </div>
+            )}
+
+            {/* Password */}
             <div>
               <label htmlFor="password" className="block text-sm font-medium text-slate-700">
                 Password
               </label>
               <input
                 id="password"
-                name="password"
                 type="password"
-                autoComplete="new-password"
                 required
                 minLength={6}
                 value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
+                onChange={e => setPassword(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                 placeholder="Choose a password (min 6 characters)"
               />
             </div>
           </div>
 
-          <div>
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent rounded-[5px] shadow-sm text-sm font-medium text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isLoading ? (
-                <>
-                  <LoadingSpinner size="sm" />
-                  <span className="ml-2">Creating account...</span>
-                </>
-              ) : (
-                'Create account'
-              )}
-            </button>
-          </div>
+          {/* Join request info banner */}
+          {domainMatchChoice === 'join' && (
+            <div className="rounded-md bg-amber-50 border border-amber-200 p-3">
+              <p className="text-sm text-amber-800">
+                Your registration will be submitted for approval. You'll gain access once an administrator approves your request.
+              </p>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="group relative w-full flex justify-center py-2 px-4 border border-transparent rounded-[5px] shadow-sm text-sm font-medium text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isLoading ? (
+              <LoadingSpinner className="w-5 h-5" />
+            ) : isFirstUser ? (
+              'Create System Admin Account'
+            ) : isInvite ? (
+              'Accept Invite'
+            ) : domainMatchChoice === 'join' ? (
+              'Request to Join'
+            ) : (
+              'Create Account'
+            )}
+          </button>
         </form>
       </div>
     </div>

package/.framework/src/types/auth.ts

@@ -43,6 +43,8 @@ export interface User {
   roles: string[] // Simplified for now
   permissions: string[] // Simplified for now
   is_system_admin?: boolean
+  /** people.status — 'active' | 'pending' | 'invited' | 'inactive' */
+  status?: string
   accessible_accounts?: Account[]
 }
 

package/config/vite.config.ts

@@ -10,6 +10,10 @@ export default defineConfig({
 
   // Root directory for the assembled app
   root: path.resolve(__dirname, '../.assembled/src'),
+
+  // Public directory for static files copied to dist
+  // Only spine.config.json is exposed publicly from project root
+  publicDir: path.resolve(__dirname, '../public'),
   
   // Build configuration
   build: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spine-framework",
-  "version": "0.3.54",
+  "version": "0.3.56",
   "description": "Multi-tenant, modular application platform for modern SaaS systems",
   "type": "module",
   "bin": {
@@ -11,6 +11,7 @@
     "scripts/",
     "config/",
     "netlify.toml",
+    "spine.config.json",
     ".framework/cli/bin.js",
     ".framework/cli/",
     ".framework/docs/",
@@ -21,6 +22,7 @@
     ".framework/migrations/004_enhancements.sql",
     ".framework/migrations/005_auth_user_trigger.sql",
     ".framework/migrations/006_fix_current_actor_id.sql",
+    ".framework/migrations/016_invites.sql",
     ".framework/public/",
     ".framework/scripts/",
     ".framework/seeds/",

package/scripts/assemble-frontend.sh

@@ -61,6 +61,13 @@ if [ -f "$PROJECT_ROOT/.framework/public/_redirects" ]; then
   echo "  ✓ Core: _redirects copied to Vite-served directory for Netlify dev"
 fi
 
+# 3.6. Copy spine.config.json to public directory for runtime access
+if [ -f "$PROJECT_ROOT/spine.config.json" ]; then
+  mkdir -p "$TARGET_SRC_DIR/public"
+  cp "$PROJECT_ROOT/spine.config.json" "$TARGET_SRC_DIR/public/spine.config.json"
+  echo "  ✓ Config: spine.config.json copied to public/"
+fi
+
 # 6. Overlay custom src (overrides + additions)
 if [ -d "$CUSTOM_SRC_DIR" ]; then
   # Copy files and subdirectories

package/spine.config.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "./.framework/schemas/spine.config.schema.json",
+  "registration": {
+    "default_app": "portal",
+    "default_role": "member",
+    "allow_url_override": true,
+    "apps": {
+      "portal": {
+        "role": "member",
+        "path": "/portal",
+        "enabled": true
+      },
+      "cortex": {
+        "role": "support",
+        "path": "/cortex",
+        "enabled": true
+      }
+    }
+  }
+}