9ed2cedc98
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>
106 lines
1.5 KiB
CSS
106 lines
1.5 KiB
CSS
.page {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
background: var(--bg-base);
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 32px;
|
|
}
|
|
|
|
.formContainer {
|
|
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: 13px;
|
|
color: var(--text-muted);
|
|
margin: 0 0 24px;
|
|
}
|
|
|
|
.error {
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
width: 100%;
|
|
}
|
|
|
|
.passwordWrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.passwordToggle {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
padding: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.submitButton {
|
|
width: 100%;
|
|
}
|
|
|
|
.switchText {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.switchLink {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-link, #C6820E);
|
|
font-size: 13px;
|
|
padding: 0;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.switchLink:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.verifyHint {
|
|
font-size: 14px;
|
|
color: var(--text-secondary, var(--text-muted));
|
|
margin: 0 0 4px;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|