vibecarbon 0.1.0

package/carbon/src/client/pages/Onboarding.tsx

@@ -0,0 +1,246 @@
+import { type PlanId, plans } from '@shared/pricing';
+import { ArrowRight, Building2, Check, Loader2, Users } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@/components/auth/AuthProvider';
+import { SEO } from '@/components/SEO';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useOrganizations } from '@/hooks/useOrganizations';
+import { supabase } from '@/lib/supabase';
+import { cn } from '@/lib/utils';
+
+const STEPS = [
+  'onboarding.steps.profile',
+  'onboarding.steps.organization',
+  'onboarding.steps.plan',
+] as const;
+
+export default function Onboarding() {
+  const { t } = useTranslation();
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [step, setStep] = useState(0);
+
+  async function completeOnboarding() {
+    await supabase.auth.updateUser({
+      data: { onboarding_completed: true },
+    });
+    navigate('/dashboard', { replace: true });
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col items-center justify-center px-4 py-16">
+      <SEO title={t('onboarding.getStarted')} />
+
+      {/* Progress */}
+      <div className="mb-8 flex items-center gap-2">
+        {STEPS.map((label, i) => (
+          <div key={label} className="flex items-center gap-2">
+            <div
+              className={cn(
+                'flex size-8 items-center justify-center rounded-full text-xs font-semibold transition-colors',
+                i < step
+                  ? 'bg-primary text-primary-foreground'
+                  : i === step
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground'
+              )}
+            >
+              {i < step ? <Check className="size-4" /> : i + 1}
+            </div>
+            <span
+              className={cn(
+                'hidden text-sm sm:block',
+                i === step ? 'font-medium text-foreground' : 'text-muted-foreground'
+              )}
+            >
+              {t(label)}
+            </span>
+            {i < STEPS.length - 1 && <div className="h-px w-6 bg-border" />}
+          </div>
+        ))}
+      </div>
+
+      {/* Steps */}
+      <div className="w-full max-w-lg">
+        {step === 0 && (
+          <ProfileStep
+            defaultName={user?.user_metadata?.full_name || ''}
+            onNext={() => setStep(1)}
+          />
+        )}
+        {step === 1 && <OrgStep onNext={() => setStep(2)} onSkip={() => setStep(2)} />}
+        {step === 2 && <PlanStep onNext={completeOnboarding} />}
+      </div>
+    </div>
+  );
+}
+
+function ProfileStep({ defaultName, onNext }: { defaultName: string; onNext: () => void }) {
+  const { t } = useTranslation();
+  const [name, setName] = useState(defaultName);
+  const [saving, setSaving] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    await supabase.auth.updateUser({ data: { full_name: name.trim() } });
+    setSaving(false);
+    onNext();
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('onboarding.profile.title')}</CardTitle>
+        <CardDescription>{t('onboarding.profile.description')}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid gap-2">
+            <Label htmlFor="name">{t('onboarding.profile.fullName')}</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t('onboarding.profile.placeholder')}
+              autoFocus
+            />
+          </div>
+          <Button type="submit" className="w-full" disabled={saving}>
+            {saving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
+            {t('common.continue')}
+            <ArrowRight className="ml-2 size-4" />
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
+function OrgStep({ onNext, onSkip }: { onNext: () => void; onSkip: () => void }) {
+  const { t } = useTranslation();
+  const { createOrganization } = useOrganizations();
+  const [orgName, setOrgName] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!orgName.trim()) return;
+    setSaving(true);
+    setError('');
+    try {
+      await createOrganization(orgName.trim());
+      onNext();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('onboarding.org.error'));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Building2 className="size-5" />
+          {t('onboarding.org.title')}
+        </CardTitle>
+        <CardDescription>{t('onboarding.org.description')}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid gap-2">
+            <Label htmlFor="orgName">{t('onboarding.org.nameLabel')}</Label>
+            <Input
+              id="orgName"
+              value={orgName}
+              onChange={(e) => setOrgName(e.target.value)}
+              placeholder={t('onboarding.org.placeholder')}
+              autoFocus
+            />
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+          <div className="flex gap-3">
+            <Button type="button" variant="ghost" onClick={onSkip} className="flex-1">
+              {t('common.skipForNow')}
+            </Button>
+            <Button type="submit" className="flex-1" disabled={saving || !orgName.trim()}>
+              {saving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
+              {t('common.create')}
+              <ArrowRight className="ml-2 size-4" />
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
+function PlanStep({ onNext }: { onNext: () => void }) {
+  const { t } = useTranslation();
+  const [selected, setSelected] = useState<PlanId>('free');
+
+  function handleContinue() {
+    if (selected !== 'free') {
+      // Redirect to billing to complete checkout, then they'll come back
+      window.location.href = '/settings/billing';
+      return;
+    }
+    onNext();
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Users className="size-5" />
+          {t('onboarding.plan.title')}
+        </CardTitle>
+        <CardDescription>{t('onboarding.plan.description')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {plans.map((plan) => (
+          <button
+            key={plan.id}
+            type="button"
+            onClick={() => setSelected(plan.id)}
+            className={cn(
+              'flex w-full items-center justify-between rounded-lg border p-4 text-left transition-colors',
+              selected === plan.id
+                ? 'border-primary bg-primary/5'
+                : 'border-border hover:bg-muted/50'
+            )}
+          >
+            <div>
+              <p className="font-semibold">{plan.name}</p>
+              <p className="text-sm text-muted-foreground">{plan.description}</p>
+            </div>
+            <div className="text-right">
+              <p className="font-bold">
+                {plan.price.monthly === 0
+                  ? t('common.free')
+                  : `$${(plan.price.monthly / 100).toFixed(0)}/mo`}
+              </p>
+            </div>
+          </button>
+        ))}
+        <Button onClick={handleContinue} className="w-full">
+          {selected === 'free'
+            ? t('onboarding.plan.continueWithFree')
+            : t('onboarding.plan.continueToCheckout')}
+          {selected === 'free' ? (
+            <Check className="ml-2 size-4" />
+          ) : (
+            <ArrowRight className="ml-2 size-4" />
+          )}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

package/carbon/src/client/pages/ResetPassword.tsx

@@ -0,0 +1,200 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Wordmark } from '../components/Logo';
+import { Button } from '../components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
+import { Input } from '../components/ui/input';
+import { supabase } from '../lib/supabase';
+
+export default function ResetPassword() {
+  const navigate = useNavigate();
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [validToken, setValidToken] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    // Check if we have a valid recovery session
+    // The Supabase client auto-detects the token from URL hash
+    const checkSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+
+      // Check URL hash for recovery type
+      const hash = window.location.hash;
+      const isRecovery = hash.includes('type=recovery') || hash.includes('type=invite');
+
+      if (session || isRecovery) {
+        setValidToken(true);
+      } else {
+        setValidToken(false);
+      }
+    };
+
+    checkSession();
+
+    // Listen for auth state changes (token validation)
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((event, session) => {
+      if (event === 'PASSWORD_RECOVERY') {
+        setValidToken(true);
+      } else if (event === 'SIGNED_IN' && session) {
+        // Recovery token was validated
+        setValidToken(true);
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const { error } = await supabase.auth.updateUser({
+        password,
+      });
+
+      if (error) throw error;
+
+      setSuccess(true);
+
+      // Sign out and redirect to login after 2 seconds
+      setTimeout(async () => {
+        await supabase.auth.signOut();
+        navigate('/login?message=password_reset');
+      }, 2000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to reset password');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Loading state while checking token
+  if (validToken === null) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-muted-foreground">Validating reset link...</div>
+      </div>
+    );
+  }
+
+  // Invalid or expired token
+  if (validToken === false) {
+    return (
+      <div className="min-h-screen flex flex-col bg-background">
+        <header className="h-20">
+          <div className="mx-auto max-w-7xl h-full px-6 flex items-center">
+            <Link to="/" className="group">
+              <Wordmark size="lg" />
+            </Link>
+          </div>
+        </header>
+
+        <div className="flex-1 flex items-center justify-center p-4">
+          <Card className="w-full max-w-md shadow-lg shadow-primary/5">
+            <CardHeader className="text-center">
+              <CardTitle className="text-2xl text-destructive">Invalid or expired link</CardTitle>
+              <CardDescription>This password reset link is invalid or has expired.</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <p className="text-center text-sm text-muted-foreground">
+                Please request a new password reset link.
+              </p>
+              <Link
+                to="/forgot-password"
+                className="inline-flex items-center justify-center w-full h-9 px-3 rounded-4xl bg-primary text-primary-foreground hover:bg-primary/80 text-sm font-medium transition-all"
+              >
+                Request new link
+              </Link>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col bg-background">
+      {/* Header */}
+      <header className="h-20">
+        <div className="mx-auto max-w-7xl h-full px-6 flex items-center">
+          <Link to="/" className="group">
+            <Wordmark />
+          </Link>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <div className="flex-1 flex items-center justify-center p-4">
+        <Card className="w-full max-w-md shadow-lg shadow-primary/5">
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl text-primary">
+              {success ? 'Password updated' : 'Set new password'}
+            </CardTitle>
+            <CardDescription>
+              {success ? 'Redirecting you to sign in...' : 'Enter your new password below'}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {success ? (
+              <div className="p-3 text-sm text-emerald-600 bg-emerald-50 dark:bg-emerald-950/30 dark:text-emerald-400 rounded-lg">
+                Your password has been successfully updated. You'll be redirected to sign in
+                shortly.
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                {error && (
+                  <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-lg">
+                    {error}
+                  </div>
+                )}
+
+                <Input
+                  type="password"
+                  placeholder="New password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  minLength={8}
+                  autoFocus
+                />
+
+                <Input
+                  type="password"
+                  placeholder="Confirm new password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                  minLength={8}
+                />
+
+                <Button type="submit" disabled={loading} className="w-full">
+                  {loading ? 'Updating...' : 'Update password'}
+                </Button>
+              </form>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}