feat: add organization onboarding flow and auth enforcement

2026-01-22 00:32:48 +01:00
parent 923aed464a
commit 12dc03b636
6 changed files with 288 additions and 5 deletions
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -0,0 +1,107 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { createOrganization } from '@/lib/api/organization'
+import { useAuth } from '@/lib/auth/context'
+import LoadingOverlay from '@/components/LoadingOverlay'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+export default function OnboardingPage() {
+  const [name, setName] = useState('')
+  const [slug, setSlug] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const router = useRouter()
+  const { user } = useAuth()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    try {
+      await createOrganization(name, slug)
+      // * Redirect to home, AuthContext will detect the new org and auto-switch
+      router.push('/')
+    } catch (err: any) {
+      setError(err.message || 'Failed to create organization')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // * Auto-generate slug from name
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value
+    setName(val)
+    if (!slug || slug === name.toLowerCase().replace(/[^a-z0-9]/g, '-')) {
+      setSlug(val.toLowerCase().replace(/[^a-z0-9]/g, '-'))
+    }
+  }
+
+  if (loading) return <LoadingOverlay title="Creating Organization..." />
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-neutral-900 px-4">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">
+            Welcome to Pulse
+          </h2>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            To get started, please create an organization for your team.
+          </p>
+        </div>
+        
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="rounded-md shadow-sm space-y-4">
+            <div>
+              <label htmlFor="org-name" className="sr-only">Organization Name</label>
+              <Input
+                id="org-name"
+                name="name"
+                type="text"
+                required
+                placeholder="Organization Name (e.g. Acme Corp)"
+                value={name}
+                onChange={handleNameChange}
+              />
+            </div>
+            <div>
+              <label htmlFor="org-slug" className="sr-only">URL Slug</label>
+              <Input
+                id="org-slug"
+                name="slug"
+                type="text"
+                required
+                placeholder="URL Slug (e.g. acme-corp)"
+                value={slug}
+                onChange={(e) => setSlug(e.target.value)}
+              />
+              <p className="text-xs text-gray-500 mt-1">
+                This will be used in your organization's URL.
+              </p>
+            </div>
+          </div>
+
+          {error && (
+            <div className="text-red-500 text-sm text-center">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <Button
+              type="submit"
+              className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              Create Organization
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}