Unify onboarding into single-column stepper with inline registration
Merge the two-column layout (setup steps + registration form) into one unified flow. Step 4 now contains the registration form inline, creating a natural top-to-bottom progression through the setup process.
This commit is contained in:
Petr
parent
21af1abb6e
commit
9c4208bb89
1 changed files with 118 additions and 68 deletions
|
|
@ -1267,41 +1267,49 @@
|
||||||
|
|
||||||
/* ── New User Layout ── */
|
/* ── New User Layout ── */
|
||||||
.new-user-grid {
|
.new-user-grid {
|
||||||
display: grid;
|
max-width: 640px;
|
||||||
grid-template-columns: 1fr 1fr;
|
margin: 0 auto;
|
||||||
gap: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.setup-card {
|
.setup-card {
|
||||||
padding: 32px;
|
padding: 36px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setup-card h3 {
|
.setup-card h3 {
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
margin: 0 0 12px 0;
|
margin: 0 0 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setup-description {
|
.setup-description {
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
margin-bottom: 24px;
|
margin-bottom: 28px;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setup-steps {
|
.setup-steps {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-item {
|
.step-item {
|
||||||
padding-left: 40px;
|
padding-left: 44px;
|
||||||
|
padding-bottom: 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border-left: 2px solid var(--border);
|
||||||
|
margin-left: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-item:last-child {
|
||||||
|
border-left-color: transparent;
|
||||||
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-number {
|
.step-number {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: -15px;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
|
|
@ -1313,10 +1321,15 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-item.step-done .step-number {
|
||||||
|
background: var(--success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-header strong {
|
.step-header strong {
|
||||||
font-size: 14px;
|
font-size: 15px;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1335,10 +1348,12 @@
|
||||||
display: block;
|
display: block;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
|
padding-right: 40px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-copy-code {
|
.btn-copy-code {
|
||||||
|
|
@ -1365,6 +1380,7 @@
|
||||||
.btn-copy-v2 {
|
.btn-copy-v2 {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -1390,6 +1406,38 @@
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Inline registration in step 4 ── */
|
||||||
|
.step-registration {
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-registration .info-box-v2 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-registration .form-group-v2 textarea {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-registration .form-row-v2 {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-success-msg {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: rgba(16, 183, 127, 0.08);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--success);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Registration Card ── */
|
/* ── Registration Card ── */
|
||||||
.registration-card h3 {
|
.registration-card h3 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|
@ -1587,7 +1635,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-user-grid {
|
.new-user-grid {
|
||||||
grid-template-columns: 1fr;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -2068,19 +2116,33 @@
|
||||||
|
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<div class="new-user-grid">
|
<div class="new-user-grid">
|
||||||
<!-- Setup Card -->
|
|
||||||
<div class="card setup-card">
|
<div class="card setup-card">
|
||||||
<h3>Setup with your AI assistant</h3>
|
<h3>Get Started</h3>
|
||||||
<p class="setup-description">
|
<p class="setup-description">
|
||||||
Follow these steps to set up your data analyst workspace.
|
Set up your data analyst workspace in 5 steps.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{% if not username_available %}
|
||||||
|
<div class="alert-v2 alert-error-v2" style="margin-bottom: 24px;">
|
||||||
|
<span class="alert-icon">!</span>
|
||||||
|
<div>
|
||||||
|
<h4>Username Not Available</h4>
|
||||||
|
<p>{{ username_error }}</p>
|
||||||
|
<p>Your email generates username <code>{{ username }}</code>, which cannot be used.</p>
|
||||||
|
<p>Contact an administrator to create your account manually.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<div class="setup-steps">
|
<div class="setup-steps">
|
||||||
|
{# ── Step 1: Create folder ── #}
|
||||||
<div class="step-item">
|
<div class="step-item">
|
||||||
<span class="step-number">1</span>
|
<span class="step-number">1</span>
|
||||||
<div class="step-header">
|
<div class="step-header">
|
||||||
<strong>Create your project folder</strong>
|
<strong>Create your project folder</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="step-body">
|
<div class="step-body">
|
||||||
|
<p>Open your terminal:</p>
|
||||||
<div class="code-block-wrapper">
|
<div class="code-block-wrapper">
|
||||||
<code class="code-block">mkdir -p data-analyst && cd data-analyst</code>
|
<code class="code-block">mkdir -p data-analyst && cd data-analyst</code>
|
||||||
<button onclick="copyCode(this, 'mkdir -p data-analyst && cd data-analyst')" class="btn-copy-code">
|
<button onclick="copyCode(this, 'mkdir -p data-analyst && cd data-analyst')" class="btn-copy-code">
|
||||||
|
|
@ -2092,6 +2154,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{# ── Step 2: SSH key ── #}
|
||||||
<div class="step-item">
|
<div class="step-item">
|
||||||
<span class="step-number">2</span>
|
<span class="step-number">2</span>
|
||||||
<div class="step-header">
|
<div class="step-header">
|
||||||
|
|
@ -2109,6 +2173,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{# ── Step 3: Copy public key ── #}
|
||||||
<div class="step-item">
|
<div class="step-item">
|
||||||
<span class="step-number">3</span>
|
<span class="step-number">3</span>
|
||||||
<div class="step-header">
|
<div class="step-header">
|
||||||
|
|
@ -2124,74 +2190,27 @@
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<p style="margin-top: 6px; font-style: italic;">Paste the key into the registration form →</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{# ── Step 4: Create account (inline registration) ── #}
|
||||||
<div class="step-item">
|
<div class="step-item">
|
||||||
<span class="step-number">4</span>
|
<span class="step-number">4</span>
|
||||||
<div class="step-header">
|
<div class="step-header">
|
||||||
<strong>Create your account</strong>
|
<strong>Create your account</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="step-body">
|
<div class="step-body">
|
||||||
<p>Click <strong>Create Account</strong> in the form on the right.</p>
|
{% if username_available %}
|
||||||
</div>
|
<div class="step-registration">
|
||||||
</div>
|
|
||||||
<div class="step-item">
|
|
||||||
<span class="step-number">5</span>
|
|
||||||
<div class="step-header">
|
|
||||||
<strong>Start Claude Code and set up workspace</strong>
|
|
||||||
</div>
|
|
||||||
<div class="step-body">
|
|
||||||
<div class="code-block-wrapper" style="margin-bottom: 12px;">
|
|
||||||
<code class="code-block">claude</code>
|
|
||||||
<button onclick="copyCode(this, 'claude')" class="btn-copy-code">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
||||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<p>Paste the setup instructions into Claude Code:</p>
|
|
||||||
<button onclick="copyBootstrapInstructions()" class="btn-copy-v2" id="bootstrapCopyBtn">
|
|
||||||
Copy Setup Instructions
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="helper-text">
|
|
||||||
<strong>Claude Code will:</strong> configure SSH, download data & docs via rsync,
|
|
||||||
set up Python + DuckDB, and create your project context.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Registration Card -->
|
|
||||||
{% if not username_available %}
|
|
||||||
<div class="alert-v2 alert-error-v2">
|
|
||||||
<span class="alert-icon">!</span>
|
|
||||||
<div>
|
|
||||||
<h4>Username Not Available</h4>
|
|
||||||
<p>{{ username_error }}</p>
|
|
||||||
<p>Your email generates username <code>{{ username }}</code>, which cannot be used.</p>
|
|
||||||
<p>Contact an administrator to create your account manually.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<div class="card registration-card" style="padding: 24px;">
|
|
||||||
<h3>Create Your Account</h3>
|
|
||||||
<p class="help-text-v2">
|
|
||||||
You're being guided here from <strong>Claude Code</strong> setup.
|
|
||||||
Paste your SSH public key below to create your account.
|
|
||||||
</p>
|
|
||||||
<div class="info-box-v2">
|
<div class="info-box-v2">
|
||||||
<strong>Your username will be:</strong>
|
<strong>Your username:</strong>
|
||||||
<span class="username-preview">{{ username }}</span>
|
<span class="username-preview">{{ username }}</span>
|
||||||
</div>
|
</div>
|
||||||
<form action="{{ url_for('register') }}" method="post" class="form-v2">
|
<form action="{{ url_for('register') }}" method="post" class="form-v2">
|
||||||
<div class="form-group-v2">
|
<div class="form-group-v2">
|
||||||
<label for="ssh_key">Your SSH Public Key</label>
|
<label for="ssh_key">Paste your SSH public key here</label>
|
||||||
<textarea name="ssh_key" id="ssh_key" rows="2"
|
<textarea name="ssh_key" id="ssh_key" rows="2"
|
||||||
placeholder="ssh-ed25519 AAAA... or ssh-rsa AAAA..." required></textarea>
|
placeholder="ssh-ed25519 AAAA... or ssh-rsa AAAA..." required></textarea>
|
||||||
<p class="help-text-v2">Claude Code should have shown you this key. Copy and paste it here.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row-v2">
|
<div class="form-row-v2">
|
||||||
<div class="form-info-v2">
|
<div class="form-info-v2">
|
||||||
|
|
@ -2201,14 +2220,45 @@
|
||||||
<button type="submit" class="btn-v2 btn-primary-v2">Create Account</button>
|
<button type="submit" class="btn-v2 btn-primary-v2">Create Account</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<p class="help-text-v2" style="margin-top: 16px;">
|
|
||||||
After creating your account, <strong>copy your username</strong> above and <strong>return to Claude Code</strong> to continue setup.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# ── Step 5: Claude Code ── #}
|
||||||
|
<div class="step-item">
|
||||||
|
<span class="step-number">5</span>
|
||||||
|
<div class="step-header">
|
||||||
|
<strong>Start Claude Code</strong>
|
||||||
|
</div>
|
||||||
|
<div class="step-body">
|
||||||
|
<p>Launch Claude Code in your project folder and paste the setup instructions:</p>
|
||||||
|
<div class="code-block-wrapper" style="margin-bottom: 12px;">
|
||||||
|
<code class="code-block">claude</code>
|
||||||
|
<button onclick="copyCode(this, 'claude')" class="btn-copy-code">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||||
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button onclick="copyBootstrapInstructions()" class="btn-copy-v2" id="bootstrapCopyBtn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||||
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||||
|
</svg>
|
||||||
|
Copy Setup Instructions
|
||||||
|
</button>
|
||||||
|
<div class="helper-text" style="margin-top: 16px;">
|
||||||
|
<strong>Claude Code will:</strong> configure SSH, download data & docs via rsync,
|
||||||
|
set up Python + DuckDB, and create your project context.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Support Banner -->
|
|
||||||
<div class="support-banner" style="margin-top: 24px;">
|
<div class="support-banner" style="margin-top: 24px;">
|
||||||
{{ config.INSTANCE_NAME }} - need help? Contact your platform team.
|
{{ config.INSTANCE_NAME }} - need help? Contact your platform team.
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue