feat: self-service sign-up with email verification and onboarding

Complete sign-up pipeline: email registration via Logto Experience API,
SMTP email verification, and self-service trial tenant creation.

Layer 1 — Logto config:
- Bootstrap Phase 8b: SMTP email connector with branded HTML templates
- Bootstrap Phase 8c: enable SignInAndRegister (email+password sign-up)
- Dockerfile installs official Logto connectors (ensures SMTP available)
- SMTP env vars in docker-compose, installer templates, .env.example

Layer 2 — Experience API (ui/sign-in/experience-api.ts):
- Registration flow: initRegistration → sendVerificationCode → verifyCode
  → addProfile (password) → identifyUser → submit
- Sign-in auto-detects email vs username identifier

Layer 3 — Custom sign-in UI (ui/sign-in/SignInPage.tsx):
- Three-mode state machine: signIn / register / verifyCode
- Reads first_screen=register from URL query params
- Toggle links between sign-in and register views

Layer 4 — Post-registration onboarding:
- OnboardingService: reuses VendorTenantService.createAndProvision(),
  adds calling user to Logto org as owner, enforces one trial per user
- OnboardingController: POST /api/onboarding/tenant (authenticated only)
- OnboardingPage.tsx: org name + auto-slug form
- LandingRedirect: detects zero orgs → redirects to /onboarding
- RegisterPage.tsx: /platform/register initiates OIDC with firstScreen

Installers (install.sh + install.ps1):
- Both prompt for SMTP config in SaaS mode
- CLI args, env var capture, cameleer.conf persistence

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/sign-in/src/SignInPage.tsx

@@ -1,11 +1,13 @@
-import { type FormEvent, useMemo, useState } from 'react';
+import { type FormEvent, useEffect, useMemo, useState } from 'react';
 import { Eye, EyeOff } from 'lucide-react';
 import { Card, Input, Button, Alert, FormField } from '@cameleer/design-system';
 import cameleerLogo from '@cameleer/design-system/assets/cameleer-logo.svg';
-import { signIn } from './experience-api';
+import { signIn, startRegistration, completeRegistration } from './experience-api';
 import styles from './SignInPage.module.css';
 
-const SUBTITLES = [
+type Mode = 'signIn' | 'register' | 'verifyCode';
+
+const SIGN_IN_SUBTITLES = [
   "Prove you're not a mirage",
   "Only authorized cameleers beyond this dune",
   "Halt, traveler — state your business",
@@ -33,20 +35,63 @@ const SUBTITLES = [
   "No ticket, no caravan",
 ];
 
+const REGISTER_SUBTITLES = [
+  "Every great journey starts with a single sign-up",
+  "Welcome to the caravan — let's get you registered",
+  "A new cameleer approaches the oasis",
+  "Join the caravan. We have dashboards.",
+  "The desert is better with company",
+  "First time here? The camels don't bite.",
+  "Pack your bags, you're joining the caravan",
+  "Room for one more on this caravan",
+  "New rider? Excellent. Credentials, please.",
+  "The Silk Road awaits — just need your email first",
+];
+
+function pickRandom(arr: string[]) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function getInitialMode(): Mode {
+  const params = new URLSearchParams(window.location.search);
+  return params.get('first_screen') === 'register' ? 'register' : 'signIn';
+}
+
 export function SignInPage() {
-  const subtitle = useMemo(() => SUBTITLES[Math.floor(Math.random() * SUBTITLES.length)], []);
-  const [username, setUsername] = useState('');
+  const [mode, setMode] = useState<Mode>(getInitialMode);
+  const subtitle = useMemo(
+    () => pickRandom(mode === 'signIn' ? SIGN_IN_SUBTITLES : REGISTER_SUBTITLES),
+    [mode === 'signIn' ? 'signIn' : 'register'],
+  );
+
+  const [identifier, setIdentifier] = useState('');
   const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [code, setCode] = useState('');
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [verificationId, setVerificationId] = useState('');
 
-  const handleSubmit = async (e: FormEvent) => {
+  // Reset error when switching modes
+  useEffect(() => { setError(null); }, [mode]);
+
+  const switchMode = (next: Mode) => {
+    setMode(next);
+    setPassword('');
+    setConfirmPassword('');
+    setCode('');
+    setShowPassword(false);
+    setVerificationId('');
+  };
+
+  // --- Sign-in ---
+  const handleSignIn = async (e: FormEvent) => {
     e.preventDefault();
     setError(null);
     setLoading(true);
     try {
-      const redirectTo = await signIn(username, password);
+      const redirectTo = await signIn(identifier, password);
       window.location.replace(redirectTo);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Sign-in failed');
@@ -54,10 +99,59 @@ export function SignInPage() {
     }
   };
 
+  // --- Register step 1: send verification code ---
+  const handleRegister = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    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 vId = await startRegistration(identifier);
+      setVerificationId(vId);
+      setMode('verifyCode');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Registration failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // --- Register step 2: verify code + complete ---
+  const handleVerifyCode = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const redirectTo = await completeRegistration(identifier, password, verificationId, code);
+      window.location.replace(redirectTo);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Verification failed');
+      setLoading(false);
+    }
+  };
+
+  const passwordToggle = (
+    <button
+      type="button"
+      onClick={() => setShowPassword(!showPassword)}
+      className={styles.passwordToggle}
+      tabIndex={-1}
+    >
+      {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+    </button>
+  );
+
   return (
     <div className={styles.page}>
       <Card className={styles.card}>
-        <div className={styles.loginForm}>
+        <div className={styles.formContainer}>
           <div className={styles.logo}>
             <img src={cameleerLogo} alt="" className={styles.logoImg} />
             Cameleer
@@ -70,55 +164,156 @@ export function SignInPage() {
             </div>
           )}
 
-          <form className={styles.fields} onSubmit={handleSubmit} aria-label="Sign in" noValidate>
-            <FormField label="Username" htmlFor="login-username">
-              <Input
-                id="login-username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                placeholder="Enter your username"
-                autoFocus
-                autoComplete="username"
-                disabled={loading}
-              />
-            </FormField>
-
-            <FormField label="Password" htmlFor="login-password">
-              <div style={{ position: 'relative' }}>
+          {/* --- Sign-in form --- */}
+          {mode === 'signIn' && (
+            <form className={styles.fields} onSubmit={handleSignIn} aria-label="Sign in" noValidate>
+              <FormField label="Email or username" htmlFor="login-identifier">
                 <Input
-                  id="login-password"
-                  type={showPassword ? 'text' : 'password'}
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="••••••••"
-                  autoComplete="current-password"
+                  id="login-identifier"
+                  type="email"
+                  value={identifier}
+                  onChange={(e) => setIdentifier(e.target.value)}
+                  placeholder="you@company.com"
+                  autoFocus
+                  autoComplete="username"
                   disabled={loading}
                 />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  style={{
-                    position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)',
-                    background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)',
-                    padding: 4, display: 'flex', alignItems: 'center',
-                  }}
-                  tabIndex={-1}
-                >
-                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
-              </div>
-            </FormField>
+              </FormField>
 
-            <Button
-              variant="primary"
-              type="submit"
-              loading={loading}
-              disabled={loading || !username || !password}
-              className={styles.submitButton}
-            >
-              Sign in
-            </Button>
-          </form>
+              <FormField label="Password" htmlFor="login-password">
+                <div className={styles.passwordWrapper}>
+                  <Input
+                    id="login-password"
+                    type={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="••••••••"
+                    autoComplete="current-password"
+                    disabled={loading}
+                  />
+                  {passwordToggle}
+                </div>
+              </FormField>
+
+              <Button
+                variant="primary"
+                type="submit"
+                loading={loading}
+                disabled={loading || !identifier || !password}
+                className={styles.submitButton}
+              >
+                Sign in
+              </Button>
+
+              <p className={styles.switchText}>
+                Don't have an account?{' '}
+                <button type="button" className={styles.switchLink} onClick={() => switchMode('register')}>
+                  Sign up
+                </button>
+              </p>
+            </form>
+          )}
+
+          {/* --- Register form --- */}
+          {mode === 'register' && (
+            <form className={styles.fields} onSubmit={handleRegister} aria-label="Create account" noValidate>
+              <FormField label="Email" htmlFor="register-email">
+                <Input
+                  id="register-email"
+                  type="email"
+                  value={identifier}
+                  onChange={(e) => setIdentifier(e.target.value)}
+                  placeholder="you@company.com"
+                  autoFocus
+                  autoComplete="email"
+                  disabled={loading}
+                />
+              </FormField>
+
+              <FormField label="Password" htmlFor="register-password">
+                <div className={styles.passwordWrapper}>
+                  <Input
+                    id="register-password"
+                    type={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="At least 8 characters"
+                    autoComplete="new-password"
+                    disabled={loading}
+                  />
+                  {passwordToggle}
+                </div>
+              </FormField>
+
+              <FormField label="Confirm password" htmlFor="register-confirm">
+                <Input
+                  id="register-confirm"
+                  type={showPassword ? 'text' : 'password'}
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  placeholder="••••••••"
+                  autoComplete="new-password"
+                  disabled={loading}
+                />
+              </FormField>
+
+              <Button
+                variant="primary"
+                type="submit"
+                loading={loading}
+                disabled={loading || !identifier || !password || !confirmPassword}
+                className={styles.submitButton}
+              >
+                Create account
+              </Button>
+
+              <p className={styles.switchText}>
+                Already have an account?{' '}
+                <button type="button" className={styles.switchLink} onClick={() => switchMode('signIn')}>
+                  Sign in
+                </button>
+              </p>
+            </form>
+          )}
+
+          {/* --- Verification code form --- */}
+          {mode === 'verifyCode' && (
+            <form className={styles.fields} onSubmit={handleVerifyCode} aria-label="Verify email" noValidate>
+              <p className={styles.verifyHint}>
+                We sent a verification code to <strong>{identifier}</strong>
+              </p>
+
+              <FormField label="Verification code" htmlFor="verify-code">
+                <Input
+                  id="verify-code"
+                  type="text"
+                  inputMode="numeric"
+                  value={code}
+                  onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                  placeholder="000000"
+                  autoFocus
+                  autoComplete="one-time-code"
+                  disabled={loading}
+                />
+              </FormField>
+
+              <Button
+                variant="primary"
+                type="submit"
+                loading={loading}
+                disabled={loading || code.length < 6}
+                className={styles.submitButton}
+              >
+                Verify & create account
+              </Button>
+
+              <p className={styles.switchText}>
+                <button type="button" className={styles.switchLink} onClick={() => switchMode('register')}>
+                  Back
+                </button>
+              </p>
+            </form>
+          )}
         </div>
       </Card>
     </div>