+
Cameleer
@@ -70,55 +164,156 @@ export function SignInPage() {
)}
-
+
+
+
+
+
+
diff --git a/ui/sign-in/src/experience-api.ts b/ui/sign-in/src/experience-api.ts
index fede0f1..042a736 100644
--- a/ui/sign-in/src/experience-api.ts
+++ b/ui/sign-in/src/experience-api.ts
@@ -10,32 +10,7 @@ async function request(method: string, path: string, body?: unknown): Promise
+ setPassword(e.target.value)}
+ placeholder="••••••••"
+ autoComplete="current-password"
+ disabled={loading}
+ />
+ {passwordToggle}
+
+ + Don't have an account?{' '} + +
+ + )} + + {/* --- Register form --- */} + {mode === 'register' && ( + + )} + + {/* --- Verification code form --- */} + {mode === 'verifyCode' && ( + + )}
+
+ );
+}
diff --git a/ui/src/pages/OnboardingPage.module.css b/ui/src/pages/OnboardingPage.module.css
new file mode 100644
index 0000000..f10adee
--- /dev/null
+++ b/ui/src/pages/OnboardingPage.module.css
@@ -0,0 +1,59 @@
+.page {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: var(--bg-base);
+}
+
+.wrapper {
+ width: 100%;
+ max-width: 480px;
+ padding: 16px;
+}
+
+.inner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-family: var(--font-body);
+ width: 100%;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 8px;
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--text-primary);
+}
+
+.logoImg {
+ width: 36px;
+ height: 36px;
+}
+
+.subtitle {
+ font-size: 14px;
+ color: var(--text-muted);
+ margin: 0 0 24px;
+ text-align: center;
+}
+
+.error {
+ width: 100%;
+ margin-bottom: 16px;
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ width: 100%;
+}
+
+.submit {
+ width: 100%;
+}
diff --git a/ui/src/pages/OnboardingPage.tsx b/ui/src/pages/OnboardingPage.tsx
new file mode 100644
index 0000000..938de71
--- /dev/null
+++ b/ui/src/pages/OnboardingPage.tsx
@@ -0,0 +1,103 @@
+import { useState, useEffect } from 'react';
+import { Card, Input, Button, FormField, Alert } from '@cameleer/design-system';
+import cameleerLogo from '@cameleer/design-system/assets/cameleer-logo.svg';
+import { api } from '../api/client';
+import { toSlug } from '../utils/slug';
+import styles from './OnboardingPage.module.css';
+
+interface TenantResponse {
+ id: string;
+ name: string;
+ slug: string;
+ status: string;
+}
+
+export function OnboardingPage() {
+ const [name, setName] = useState('');
+ const [slug, setSlug] = useState('');
+ const [slugTouched, setSlugTouched] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState
+
+ );
+}
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index ebf0fd9..670b34c 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -1,5 +1,6 @@
import { Routes, Route, Navigate } from 'react-router';
import { LoginPage } from './auth/LoginPage';
+import { RegisterPage } from './auth/RegisterPage';
import { CallbackPage } from './auth/CallbackPage';
import { ProtectedRoute } from './auth/ProtectedRoute';
import { OrgResolver } from './auth/OrgResolver';
@@ -21,6 +22,7 @@ import { SsoPage } from './pages/tenant/SsoPage';
import { TeamPage } from './pages/tenant/TeamPage';
import { SettingsPage } from './pages/tenant/SettingsPage';
import { TenantAuditPage } from './pages/tenant/TenantAuditPage';
+import { OnboardingPage } from './pages/OnboardingPage';
function LandingRedirect() {
const scopes = useScopes();
@@ -45,7 +47,11 @@ function LandingRedirect() {
window.location.href = `/t/${currentOrg.slug}/`;
return null;
}
- // No org resolved yet — stay on tenant portal
+ // No org membership at all → onboarding (self-service tenant creation)
+ if (organizations.length === 0) {
+ return
+
+
+
+
+
+
+
+ Welcome to Cameleer
+
+ + Set up your workspace to start monitoring your Camel routes. +
+ + {error && ( +
+ {error}
+
+ )}
+
+
+