Ronni Baslund
0bd4e5498e
- portal: new admin/ and partner/ surfaces with full component library (AppLauncher, Avatar, Badge, Card, Modal, Tabs, etc.), composables, layouts, partner-routing middleware, and supporting server APIs - pricing: Price schema/module with operator CRUD, pricing.vue catalog UI, Subscription extended with cycle/currency/perSeatAmount/seats snapshots for stable MRR aggregation - partner staff: User.partnerId, invite-partner-user DTO and flow, /partners/:slug/users endpoints, InvitePartnerUserModal, shared dezky-partner-staff Authentik group - /me: partner-aware endpoint returning user + partner context so portal can route between end-user and partner-admin surfaces - tenant: seats field for portfolio displays and future MRR calculations - operator: pricing page, signed-out page, useMe/useToast composables, ToastStack
738 lines
24 KiB
Vue
738 lines
24 KiB
Vue
<script setup lang="ts">
|
|
// 6-step wizard that walks the partner through provisioning a new customer org.
|
|
// The actual orchestration (Authentik tenant, Stalwart mailbox, OCIS space …)
|
|
// happens behind a single "Provision" action. Here we just collect input and
|
|
// give them a clear review summary.
|
|
|
|
defineProps<{ open: boolean }>()
|
|
const emit = defineEmits<{ close: []; done: [] }>()
|
|
|
|
// 5 steps. Branding was dropped because nothing on the backend persists it
|
|
// yet (no Tenant.branding field, no logo upload pipeline) — partners
|
|
// configure branding post-provisioning via /partner/branding once that
|
|
// surface gets wired to a real backend.
|
|
const STEPS = [
|
|
{ n: 1, label: 'Organization' },
|
|
{ n: 2, label: 'Domain' },
|
|
{ n: 3, label: 'First admin' },
|
|
{ n: 4, label: 'Plan' },
|
|
{ n: 5, label: 'Review' },
|
|
] as const
|
|
const LAST_STEP = STEPS.length
|
|
|
|
const step = ref(1)
|
|
|
|
// Default form state. Fields start empty so the partner fills in their
|
|
// real customer's details rather than editing pre-filled fixture data.
|
|
// `plan` defaults to Business + `cycle` to Monthly because those are the
|
|
// usual choice and the radio/dropdown render expects a value; both stay
|
|
// editable.
|
|
const form = reactive({
|
|
legalName: '',
|
|
displayName: '',
|
|
cvr: '',
|
|
country: '',
|
|
address: '',
|
|
domain: '',
|
|
preconfigureDns: true,
|
|
adminFirst: '',
|
|
adminLast: '',
|
|
adminEmail: '',
|
|
adminPhone: '',
|
|
sendWelcome: true,
|
|
plan: 'Business' as PlanLabel,
|
|
seats: 0,
|
|
cycle: 'Monthly' as 'Monthly' | 'Quarterly' | 'Yearly',
|
|
currency: 'DKK' as 'DKK' | 'EUR' | 'USD',
|
|
})
|
|
|
|
// Static plan metadata. Features stay hard-coded (they're product copy, not
|
|
// catalog data). Prices come from the live /api/prices catalog at render
|
|
// time — see `visiblePlans` below.
|
|
const plans = [
|
|
{ code: 'mvp', name: 'Starter', features: '10 GB mail · 100 GB drive · 5 video rooms' },
|
|
{ code: 'pro', name: 'Business', features: '50 GB mail · 1 TB drive · unlimited video · MFA', best: true },
|
|
{ code: 'enterprise', name: 'Enterprise', features: 'Custom quotas · SSO · audit log · 24/7 support' },
|
|
] as const
|
|
|
|
type PlanLabel = (typeof plans)[number]['name']
|
|
type PlanCode = (typeof plans)[number]['code']
|
|
|
|
// Live catalog. We fetch all active price rows once when the wizard mounts
|
|
// and look them up by (plan, cycle) as the user changes selectors. Empty
|
|
// catalog (no /api/prices configured) leaves all cards showing "Not set"
|
|
// — wizard still works, just no number displayed.
|
|
interface CatalogRow {
|
|
plan: PlanCode
|
|
cycle: 'monthly' | 'quarterly' | 'yearly'
|
|
amounts: { DKK?: number; EUR?: number; USD?: number }
|
|
active: boolean
|
|
}
|
|
const { data: catalog } = await useFetch<CatalogRow[]>('/api/prices', {
|
|
key: 'wizard-catalog',
|
|
default: () => [],
|
|
})
|
|
|
|
// Cycle label shown after the slash in "X DKK / seat / mo".
|
|
const CYCLE_SUFFIX: Record<'monthly' | 'quarterly' | 'yearly', string> = {
|
|
monthly: 'mo',
|
|
quarterly: 'quarter',
|
|
yearly: 'yr',
|
|
}
|
|
|
|
function reset() {
|
|
step.value = 1
|
|
// Clearing result here lets the modal reopen on a fresh "step 1" view
|
|
// rather than landing on the previous provisioning's done state.
|
|
result.value = null
|
|
submitError.value = null
|
|
}
|
|
|
|
function close() {
|
|
emit('close')
|
|
// reset on next tick so the closing animation isn't disturbed
|
|
setTimeout(reset, 200)
|
|
}
|
|
|
|
function next() {
|
|
if (step.value < LAST_STEP) step.value++
|
|
}
|
|
function back() {
|
|
if (step.value > 1) step.value--
|
|
}
|
|
|
|
// ── Provision (real backend call) ────────────────────────────────────────
|
|
const submitting = ref(false)
|
|
const submitError = ref<string | null>(null)
|
|
|
|
// Slug from display name: lowercase, alphanumeric, hyphen-joined, trimmed
|
|
// to 40 chars (matches CreateTenantDto.slug regex).
|
|
function slugFromName(name: string): string {
|
|
return name
|
|
.toLowerCase()
|
|
.normalize('NFKD')
|
|
.replace(/[̀-ͯ]/g, '')
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-+|-+$/g, '')
|
|
.slice(0, 40) || 'tenant'
|
|
}
|
|
|
|
function planCode(label: PlanLabel): PlanCode {
|
|
return plans.find((p) => p.name === label)!.code
|
|
}
|
|
|
|
function cycleCode(label: 'Monthly' | 'Quarterly' | 'Yearly'): 'monthly' | 'quarterly' | 'yearly' {
|
|
return label.toLowerCase() as 'monthly' | 'quarterly' | 'yearly'
|
|
}
|
|
|
|
// Combines the static plan list with the live catalog: for each plan card,
|
|
// look up the price row for the user's currently-selected cycle, then pull
|
|
// the amount in their selected currency. Renders a friendly string ready to
|
|
// drop into the template.
|
|
const visiblePlans = computed(() =>
|
|
plans.map((p) => {
|
|
const row = catalog.value.find((r) => r.plan === p.code && r.cycle === cycleCode(form.cycle))
|
|
const minor = row?.amounts[form.currency]
|
|
const cycleSuffix = CYCLE_SUFFIX[cycleCode(form.cycle)]
|
|
let priceLabel: string
|
|
let available = true
|
|
if (p.code === 'enterprise' && minor === undefined) {
|
|
priceLabel = 'Custom'
|
|
} else if (minor === undefined) {
|
|
// Catalog row exists but no price in this currency, OR no row at all.
|
|
priceLabel = `Not sold in ${form.currency}`
|
|
available = false
|
|
} else {
|
|
priceLabel = `${(minor / 100).toLocaleString('da-DK')} ${form.currency} / seat / ${cycleSuffix}`
|
|
}
|
|
return { ...p, priceLabel, available }
|
|
}),
|
|
)
|
|
|
|
// Total per cycle in the chosen currency. Drives the "you'll pay" line.
|
|
const totalPerCycle = computed(() => {
|
|
const p = visiblePlans.value.find((x) => x.name === form.plan)
|
|
if (!p || !p.available) return null
|
|
const row = catalog.value.find((r) => r.plan === p.code && r.cycle === cycleCode(form.cycle))
|
|
const minor = row?.amounts[form.currency]
|
|
if (minor === undefined || !form.seats) return null
|
|
const total = (minor * form.seats) / 100
|
|
const cycleSuffix = CYCLE_SUFFIX[cycleCode(form.cycle)]
|
|
return `${total.toLocaleString('da-DK')} ${form.currency} / ${cycleSuffix}`
|
|
})
|
|
|
|
// Result we hand to the "Provisioned" view after submit succeeds. The
|
|
// tenant create always succeeds when we get here; the admin invite may
|
|
// have failed independently (caught server-side and returned as `error`).
|
|
interface AdminCredentials {
|
|
link?: string
|
|
tempPassword?: string
|
|
attached?: boolean
|
|
error?: string
|
|
}
|
|
const result = ref<{ tenantName: string; adminEmail: string; admin?: AdminCredentials } | null>(null)
|
|
const copied = ref(false)
|
|
|
|
async function copyToClipboard(value: string) {
|
|
try {
|
|
await navigator.clipboard.writeText(value)
|
|
copied.value = true
|
|
setTimeout(() => (copied.value = false), 2000)
|
|
} catch {
|
|
// Non-secure context — user selects the readonly input.
|
|
}
|
|
}
|
|
|
|
async function submit() {
|
|
submitError.value = null
|
|
const displayName = form.displayName.trim()
|
|
if (!displayName) {
|
|
submitError.value = 'Display name is required'
|
|
step.value = 1
|
|
return
|
|
}
|
|
submitting.value = true
|
|
try {
|
|
const adminName = `${form.adminFirst.trim()} ${form.adminLast.trim()}`.trim()
|
|
const adminEmail = form.adminEmail.trim()
|
|
const payload = {
|
|
slug: slugFromName(displayName),
|
|
name: displayName,
|
|
plan: planCode(form.plan),
|
|
cycle: form.cycle.toLowerCase() as 'monthly' | 'quarterly' | 'yearly',
|
|
currency: form.currency,
|
|
seats: form.seats,
|
|
...(form.domain.trim() && { domains: [form.domain.trim()] }),
|
|
billingInfo: {
|
|
...(form.legalName.trim() && { companyName: form.legalName.trim() }),
|
|
...(form.cvr.trim() && { vatId: form.cvr.trim() }),
|
|
...(form.country && { country: form.country }),
|
|
...(adminEmail && { contactEmail: adminEmail }),
|
|
},
|
|
// Only send admin info when both name + email are present. Backend
|
|
// skips the invite if either is missing; we mirror that on the
|
|
// client so the wizard never sends half-filled admin payloads.
|
|
...(adminName && adminEmail && { adminName, adminEmail }),
|
|
}
|
|
const res = await $fetch<{
|
|
tenant: { name: string }
|
|
adminInvite?: AdminCredentials | { error: string }
|
|
}>('/api/partner/tenants', { method: 'POST', body: payload })
|
|
|
|
result.value = {
|
|
tenantName: res.tenant.name,
|
|
adminEmail,
|
|
admin: res.adminInvite as AdminCredentials | undefined,
|
|
}
|
|
emit('done') // refresh the customers table + sidebar in the background
|
|
} catch (err: unknown) {
|
|
const e = err as { data?: { data?: { message?: string }; message?: string; statusMessage?: string } }
|
|
submitError.value =
|
|
e.data?.data?.message || e.data?.message || e.data?.statusMessage || 'Provisioning failed'
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
|
|
function finish() {
|
|
result.value = null
|
|
close()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Modal
|
|
:open="open"
|
|
size="lg"
|
|
:eyebrow="result ? 'Provisioned' : `Step ${step} of ${STEPS.length}`"
|
|
title="Provision new customer organization"
|
|
@close="close"
|
|
>
|
|
<!-- Step rail -->
|
|
<div v-if="!result" class="rail">
|
|
<template v-for="(s, idx) in STEPS" :key="s.n">
|
|
<div class="rail-step" :class="{ done: s.n < step, active: s.n === step }">
|
|
<div class="bubble">
|
|
<UiIcon v-if="s.n < step" name="check" :size="11" :stroke-width="2.6" />
|
|
<template v-else>{{ s.n }}</template>
|
|
</div>
|
|
<span class="lab">{{ s.label }}</span>
|
|
</div>
|
|
<div v-if="idx < STEPS.length - 1" class="rail-line" />
|
|
</template>
|
|
</div>
|
|
|
|
<!-- 1. Organization -->
|
|
<div v-if="step === 1 && !result" class="form">
|
|
<label class="field">
|
|
<Eyebrow>Legal name</Eyebrow>
|
|
<input v-model="form.legalName" />
|
|
</label>
|
|
<label class="field">
|
|
<Eyebrow>Display name · shown to users</Eyebrow>
|
|
<input v-model="form.displayName" />
|
|
</label>
|
|
<div class="row-2">
|
|
<label class="field">
|
|
<Eyebrow>CVR</Eyebrow>
|
|
<input v-model="form.cvr" />
|
|
</label>
|
|
<label class="field">
|
|
<Eyebrow>Country</Eyebrow>
|
|
<CountrySelect v-model="form.country" />
|
|
</label>
|
|
</div>
|
|
<label class="field">
|
|
<Eyebrow>Address</Eyebrow>
|
|
<input v-model="form.address" />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 2. Domain -->
|
|
<div v-if="step === 2 && !result" class="form">
|
|
<label class="field">
|
|
<Eyebrow>Primary domain</Eyebrow>
|
|
<input v-model="form.domain" />
|
|
</label>
|
|
<div class="info-box">
|
|
<Eyebrow>DNS verification</Eyebrow>
|
|
<p>
|
|
We'll send the customer their DNS records during onboarding. For now we just register
|
|
the intent. You can pre-fill MX/SPF if they've delegated DNS to you.
|
|
</p>
|
|
<label class="cb-row">
|
|
<input v-model="form.preconfigureDns" type="checkbox" />
|
|
Pre-configure DNS records on the customer's behalf (NordicMSP manages their DNS)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. First admin -->
|
|
<div v-if="step === 3 && !result" class="form">
|
|
<p class="hint">We'll send this person an invitation email. They become the first customer admin.</p>
|
|
<div class="row-2">
|
|
<label class="field">
|
|
<Eyebrow>First name</Eyebrow>
|
|
<input v-model="form.adminFirst" />
|
|
</label>
|
|
<label class="field">
|
|
<Eyebrow>Last name</Eyebrow>
|
|
<input v-model="form.adminLast" />
|
|
</label>
|
|
</div>
|
|
<label class="field">
|
|
<Eyebrow>Email</Eyebrow>
|
|
<input v-model="form.adminEmail" />
|
|
</label>
|
|
<label class="field">
|
|
<Eyebrow>Phone</Eyebrow>
|
|
<input v-model="form.adminPhone" />
|
|
</label>
|
|
<label class="cb-row">
|
|
<input v-model="form.sendWelcome" type="checkbox" />
|
|
Send welcome email immediately upon provisioning
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 4. Plan -->
|
|
<div v-if="step === 4 && !result" class="form">
|
|
<!-- Seats / cycle / currency drive the plan-card prices below — keep
|
|
them at the top so the user picks them first, then plans update
|
|
live. -->
|
|
<div class="row-3">
|
|
<label class="field">
|
|
<Eyebrow>Initial seats</Eyebrow>
|
|
<input v-model.number="form.seats" type="number" min="1" />
|
|
</label>
|
|
<label class="field">
|
|
<Eyebrow>Billing cycle</Eyebrow>
|
|
<select v-model="form.cycle">
|
|
<option value="Monthly">Monthly</option>
|
|
<option value="Quarterly">Quarterly</option>
|
|
<option value="Yearly">Yearly</option>
|
|
</select>
|
|
</label>
|
|
<label class="field">
|
|
<Eyebrow>Currency</Eyebrow>
|
|
<select v-model="form.currency">
|
|
<option value="DKK">DKK</option>
|
|
<option value="EUR">EUR</option>
|
|
<option value="USD">USD</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<label
|
|
v-for="p in visiblePlans"
|
|
:key="p.name"
|
|
class="plan"
|
|
:class="{ selected: form.plan === p.name, disabled: !p.available }"
|
|
@click="p.available && (form.plan = p.name as any)"
|
|
>
|
|
<span v-if="(p as any).best" class="rec">RECOMMENDED</span>
|
|
<span class="radio" :class="{ on: form.plan === p.name }">
|
|
<span v-if="form.plan === p.name" class="radio-inner" />
|
|
</span>
|
|
<div class="plan-body">
|
|
<div class="plan-head">
|
|
<span class="plan-name">{{ p.name }}</span>
|
|
<Mono dim>{{ p.priceLabel }}</Mono>
|
|
</div>
|
|
<Mono dim>{{ p.features }}</Mono>
|
|
</div>
|
|
</label>
|
|
|
|
<p v-if="totalPerCycle" class="total-line">
|
|
<Mono dim>Total · {{ form.seats }} {{ form.seats === 1 ? 'seat' : 'seats' }}</Mono>
|
|
<strong>{{ totalPerCycle }}</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 5. Review -->
|
|
<div v-if="step === 5 && !result" class="form">
|
|
<div class="review-hero">
|
|
<Eyebrow>You're provisioning</Eyebrow>
|
|
<div class="review-name">{{ form.displayName }}</div>
|
|
<Mono dim>{{ form.domain }} · {{ form.plan }} · {{ form.seats }} seats</Mono>
|
|
</div>
|
|
<dl class="def">
|
|
<div class="def-row"><dt>Admin</dt><dd>{{ form.adminFirst }} {{ form.adminLast }} · {{ form.adminEmail }}</dd></div>
|
|
<div class="def-row"><dt>Plan</dt><dd>{{ form.plan }} · {{ form.seats }} seats · {{ form.cycle.toLowerCase() }}</dd></div>
|
|
<div class="def-row"><dt>Branding</dt><dd>Defaults · customize after provisioning</dd></div>
|
|
<div class="def-row"><dt>Onboarding</dt><dd>Welcome email sent on creation</dd></div>
|
|
</dl>
|
|
<div class="prov-note">
|
|
<Mono dim>// provisioning</Mono>
|
|
<p>
|
|
On confirm we'll create the tenant in Dezky and trigger the
|
|
background provisioner (Authentik tenant, OCIS space, Stalwart
|
|
mailboxes). {{ form.displayName }} will appear in your portfolio
|
|
as soon as the database write completes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p v-if="submitError" class="err">{{ submitError }}</p>
|
|
|
|
<!-- Provisioned: tenant + admin credentials handoff. Shown after
|
|
submit() completes, hides the wizard step content. -->
|
|
<div v-if="result" class="provisioned">
|
|
<Badge tone="ok" dot>provisioned</Badge>
|
|
<h3>{{ result.tenantName }} is live</h3>
|
|
|
|
<template v-if="result.admin && !result.admin.error">
|
|
<template v-if="result.admin.attached">
|
|
<p class="ok-msg">
|
|
<Mono>{{ result.adminEmail }}</Mono> already existed in Authentik
|
|
and was attached as an admin on this tenant. They sign in with
|
|
their existing credentials.
|
|
</p>
|
|
</template>
|
|
<template v-else-if="result.admin.link">
|
|
<p class="ok-msg">
|
|
Share this single-use link with the admin — they'll set their
|
|
own password and enroll MFA.
|
|
</p>
|
|
<div class="cred-row">
|
|
<input :value="result.admin.link" readonly @focus="($event.target as HTMLInputElement).select()" />
|
|
<UiButton variant="secondary" @click="copyToClipboard(result.admin!.link!)">
|
|
{{ copied ? 'Copied' : 'Copy' }}
|
|
</UiButton>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="result.admin.tempPassword">
|
|
<p class="ok-msg">
|
|
Authentik has no recovery flow configured, so we set a
|
|
temporary password — share it with the admin and they'll be
|
|
prompted to change it on first login.
|
|
</p>
|
|
<div class="cred-row">
|
|
<input :value="result.adminEmail" readonly @focus="($event.target as HTMLInputElement).select()" />
|
|
<UiButton variant="secondary" @click="copyToClipboard(result.adminEmail)">Copy</UiButton>
|
|
</div>
|
|
<div class="cred-row">
|
|
<input :value="result.admin.tempPassword" readonly @focus="($event.target as HTMLInputElement).select()" />
|
|
<UiButton variant="secondary" @click="copyToClipboard(result.admin!.tempPassword!)">
|
|
{{ copied ? 'Copied' : 'Copy' }}
|
|
</UiButton>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<template v-else-if="result.admin?.error">
|
|
<p class="warn-msg">
|
|
Tenant was created, but the admin invite failed:
|
|
<Mono>{{ result.admin.error }}</Mono>. Retry the invite from
|
|
<Mono>/partner/customers</Mono>.
|
|
</p>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<p class="ok-msg">
|
|
No first-admin info was provided. Invite an admin later from
|
|
<Mono>/partner/customers</Mono>.
|
|
</p>
|
|
</template>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<template v-if="!result">
|
|
<UiButton variant="ghost" :disabled="submitting" @click="close">Cancel</UiButton>
|
|
<div style="flex:1" />
|
|
<UiButton v-if="step > 1" variant="secondary" :disabled="submitting" @click="back">Back</UiButton>
|
|
<UiButton v-if="step < LAST_STEP" variant="primary" @click="next">Continue</UiButton>
|
|
<UiButton v-else variant="primary" :disabled="submitting" @click="submit">
|
|
<template #leading><UiIcon name="check" :size="14" /></template>
|
|
{{ submitting ? 'Provisioning…' : 'Provision customer' }}
|
|
</UiButton>
|
|
</template>
|
|
<template v-else>
|
|
<div style="flex:1" />
|
|
<UiButton variant="primary" @click="finish">Done</UiButton>
|
|
</template>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rail {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.rail-step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
opacity: 0.45;
|
|
}
|
|
.rail-step.active, .rail-step.done { opacity: 1; }
|
|
.bubble {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 999px;
|
|
background: var(--surface);
|
|
color: var(--text-mute);
|
|
border: 1px solid var(--border);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.rail-step.done .bubble { background: var(--text); color: var(--bg); border-color: var(--text); }
|
|
.rail-step.active .bubble { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
|
|
.lab {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-mute);
|
|
white-space: nowrap;
|
|
}
|
|
.rail-step.active .lab { color: var(--text); font-weight: 600; }
|
|
.rail-step.done .lab { color: var(--text); }
|
|
|
|
.rail-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.form { display: flex; flex-direction: column; gap: 14px; }
|
|
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
|
|
|
|
.field { display: flex; flex-direction: column; gap: 6px; }
|
|
.field input,
|
|
.field select {
|
|
padding: 9px 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
}
|
|
.field select {
|
|
appearance: none;
|
|
background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
|
|
linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
|
|
background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%;
|
|
background-size: 4px 4px;
|
|
background-repeat: no-repeat;
|
|
padding-right: 28px;
|
|
cursor: pointer;
|
|
}
|
|
.field input:focus,
|
|
.field select:focus { outline: none; border-color: var(--border-hi); }
|
|
|
|
.hint { font-size: 13px; color: var(--text-dim); margin: 0 0 4px 0; line-height: 1.5; }
|
|
|
|
.info-box {
|
|
padding: 14px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
}
|
|
.info-box p { font-size: 13px; color: var(--text-dim); margin: 8px 0 12px 0; line-height: 1.55; }
|
|
|
|
.cb-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
}
|
|
.cb-row input[type='checkbox'] { width: 14px; height: 14px; accent-color: var(--text); }
|
|
|
|
.plan {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--surface);
|
|
cursor: pointer;
|
|
}
|
|
.plan.selected { border-color: var(--text); background: var(--bg); }
|
|
.plan.disabled { opacity: 0.45; cursor: not-allowed; }
|
|
.plan.disabled:hover { background: var(--surface); }
|
|
|
|
.total-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin: 4px 0 0;
|
|
padding: 12px 14px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
}
|
|
.total-line strong {
|
|
font-family: var(--font-display);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.rec {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: 12px;
|
|
background: var(--accent);
|
|
color: var(--accent-fg);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
.radio {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 999px;
|
|
border: 2px solid var(--border-hi);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.radio.on { border-color: var(--text); }
|
|
.radio-inner { width: 8px; height: 8px; border-radius: 999px; background: var(--text); }
|
|
.plan-body { flex: 1; }
|
|
.plan-head { display: flex; align-items: baseline; gap: 10px; }
|
|
.plan-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
|
|
|
|
.brand-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
|
|
|
.def { display: flex; flex-direction: column; gap: 8px; margin: 0; }
|
|
.def-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; font-size: 13px; }
|
|
.def-row dt { color: var(--text-mute); font-family: var(--font-mono); font-size: 11px; padding-top: 1px; }
|
|
.def-row dd { margin: 0; color: var(--text); }
|
|
|
|
.color-row { display: flex; align-items: center; gap: 8px; }
|
|
.color-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
|
|
|
|
.review-hero {
|
|
padding: 16px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.review-name {
|
|
font-family: var(--font-display);
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.prov-note {
|
|
margin-top: 16px;
|
|
padding: 14px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
}
|
|
.prov-note p { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 6px 0 0 0; }
|
|
|
|
.err {
|
|
margin: 12px 0 0;
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
color: var(--bad);
|
|
background: rgba(226, 48, 48, 0.08);
|
|
border: 1px solid rgba(226, 48, 48, 0.2);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Provisioned view — shown after submit() succeeds. */
|
|
.provisioned {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
padding: 4px 0;
|
|
}
|
|
.provisioned h3 {
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
font-size: 22px;
|
|
letter-spacing: -0.02em;
|
|
margin: 0;
|
|
}
|
|
.ok-msg,
|
|
.warn-msg {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
line-height: 1.55;
|
|
}
|
|
.warn-msg {
|
|
padding: 10px 12px;
|
|
background: rgba(232, 154, 31, 0.08);
|
|
border: 1px solid rgba(232, 154, 31, 0.24);
|
|
border-radius: 6px;
|
|
color: var(--warn);
|
|
}
|
|
.cred-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.cred-row input {
|
|
flex: 1;
|
|
padding: 9px 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text);
|
|
}
|
|
</style>
|