mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-10-31 07:35:24 +00:00
v26.10.0 (#1573)
* feat: optional auto reconnect for dropped ssh sessions (#1321) * feat: tighter compact host rows with inline tags (#1325) * feat: bring back the alert feed homepage widget * feat: pick target terminals for snippets again * feat: share button on connection tabs again * feat: recent servers list when linking the desktop app * feat: list the fixed app shortcuts in keyboard shortcuts * fix: translate hardcoded toasts and drop em dashes from ui text * fix: translate leftover hardcoded ui text * fix: toolbar files button opens at the shell directory again * fix: show the remote desktop note under connection origin again * chore: openapi docs for host metrics manager routes * chore: openapi docs for undocumented routes and fix two broken doc blocks * fix: declare terminal.listSessions use for snippet targets * revert: drop the alert feed widget, the notification center replaces it * feat: restore the alert feed homepage widget * fix: quick connect fills the host address from plugin auth editors like tailscale * fix: docker container logs use the base background color * chore: fix dependabot alerts and apply safe npm upgrades * fix: proxmox stats tab reads its switch from plugin host settings * fix: count plugin ssh logins toward host status and stop showing reachable as a warning * fix: hide the built-in source pill in the host editor * fix: host status shows online when the port answers and only warns on a failed login * fix: drop the top border on the split layout menu * fix: host defaults tabs sit where the host editor puts them and skip plugins with nothing to default * fix: remote desktop auth method labels and notes for vnc and telnet * fix: add description to the web endpoint enable switch * fix: crowdin sync and pretranslate for plugin locales, run plugin tests on release * feat: move telemetry out of core into a usage statistics plugin * fix: recent activity card no longer cuts off host names early * fix: remove duplicate top border on split screen menu * fix: redesign session log player controls, fix tooltip overlap and drop dot separators * fix: file manager and sftp text showing raw i18n keys * fix: onboarding rerunning for existing users after upgrading * fix: fleet detail buttons overflowing the sidebar * fix: session log player scrolling off screen horizontally * fix: network graph lag when adding hosts and on every render * fix: maintenance index name, shared host read only view and badge polling * fix: meeting tabs, workspace tab merging, rail panels as tabs and general ui lag * chore: update release notes * fix: remote desktop tabs reconnecting on every tab switch * fix: build plugin sdk before linting in release workflow * chore: lint, format, and bump version to 2.9.0 * chore: skip crowdin pre-translate in release for now * chore: switch to calver, bump version to 26.10.0 * fix(sso): send the PKCE verifier for GitHub login (#1534) * fix(remote-desktop): clip cursor overflow without disabling zoom (#1535) * test(remote-desktop): preserve sessions beyond one hour (#1536) * fix(hosts): expose controls for overflowing editor tabs (#1537) * fix(hosts): expose controls for overflowing editor tabs * test(hosts): mock resize observation in admin panel tests * fix(status): skip TCP probes while host sessions are active (#1538) * fix(database): batch session activity persistence (#1539) * docs(api): describe cookie and API key authentication (#1540) * fix(snippets): repair missing note column on SQLite upgrades (#1541) * fix(docker): retain stored SSH credential association (#1543) * fix(file-manager): render transfer toasts without plugin hooks (#1546) * feat(hosts): keep compact row actions inline (#1547) * fix(auth): allow retrying unavailable second-factor interfaces (#1549) * fix(auth): reject unresolved legacy identity provisioning (#1550) * fix(desktop): ship the plugin SDK inside Mac App Store builds (#1551) * fix(tmux): pass full session info to the terminal's session picker (#1552) The tmux.sessions service reduced detected sessions to bare names, but the picker reads session.name, so every entry rendered blank and selecting one sent an empty name, which created a new session instead of attaching. * fix(ssh): read force keyboard-interactive as a boolean when resolving hosts (#1553) The column holds the text "true"/"false", and the resolver passed it through as-is. The string "false" is truthy, so the password provider treated every saved host as forced keyboard-interactive and left the password out. Jump hops are built straight from the resolved host, so a password hop whose server doesn't offer keyboard-interactive failed with "All configured authentication methods failed". * fix(database): batch database saves for bulk host writes (#1554) * fix(database): yield to the event loop between database saves Each SQLite save serializes and encrypts the whole database into new buffers, which V8 only releases once the event loop turns. Boot migrations and bulk host import write plugin settings per host and per key in an awaited loop, so hundreds of full copies piled up and the container ran out of memory. * fix(database): save once per bulk host write instead of once per row On SQLite every repository write force-saves the whole database. Boot plugin data migrations, host defaults materialization and the bulk host routes write one row per host per setting, so they serialized and encrypted the full database hundreds of times in a row. DatabaseSaveTrigger.batched wraps a function so force saves made while it runs collapse into a single save when it finishes. Nested scopes fold into the outer one, and work that outlives its scope saves normally. * feat(hosts): add instance-wide predefined tag suggestions (#1548) * feat(hosts): add shared predefined tag suggestions * style(hosts): format tag catalog routes * test(database): advance fake timers past the save yield (#1555) * fix(i18n): complete Simplified Chinese core and plugin translations (#1542) * fix(i18n): complete Chinese onboarding and navigation labels * fix(i18n): translate remaining Chinese core and plugin interfaces * fix(i18n): translate host editor tab overflow controls * fix(i18n): use consistent Chinese fleet terminology * fix(i18n): localize hardcoded controls and plugin views * fix(i18n): translate built-in homepage widget catalog * test(homepage): follow translated timezone placeholder * fix(i18n): translate plugin-provided homepage widgets * fix(i18n): localize feature settings section titles * fix: 2.8 oidc accounts unable to sign in after upgrading (#1381) * fix: plugins losing the saved ssh login when copying a host (#1391) * fix: fleets, proxmox and automations not getting the host sudo password * fix: host imports running a defaults pass and metrics restart per host (#1384) * fix: high cpu from status probes and full database saves on every sample (#1300) * fix: user data export freezing the server (#1393) * fix: op:// secret references rejected as ssh keys on credentials (#1394) * fix: slow file deletes from the trash lookups on every delete (#1390) * fix: add openapi docs and error handling to host tag routes * test: compare download stream buffers directly so it stops timing out * chore: drop em dash from host row comment * chore: update release notes for 2.9.1 * feat(ai): add remote coding agent sessions for SSH hosts (#1545) * feat(ai): add host coding agent sessions with configured providers * Wait for agent initialization and shutdown before resuming sessions * Keep Pi transcripts outside its configuration migration directory * Cover Pi session directory separation * Update core permission catalog expectations for remote agents * Install remote agent runtimes from verified official sources * Wait for the identity panel credentials request in its test * Add scoped SSH forwarding setup for remote agents * Verify forwarding setup through a fresh SSH connection * Bound the SSH forwarding verification timeout * Return the forwarding verification callback result * fix(ai): support agent send and interrupt keyboard shortcuts * feat(ai): add agent queues attachments worktrees and session recovery * fix(ai): handle deleted workspace paths and duplicate status events * fix(ai): accept file references in root workspaces * fix(ai): refresh paused queues after agent errors * fix(ai): store agent sessions in plugin tables and lock down OpenCode Agent sessions lived in a single ctx.kv value holding up to 2000 events, which passed the 256 KB kv limit within minutes of a normal run. Every save after that failed, so history, nativeId, queue and archive changes were lost and every event wrote a kv audit row. Sessions, events and queued prompts now have their own tables. A running agent appends events in batches at most once a second with a lazy save; session and queue changes save immediately. Prompts, drafts and stored event text are capped in UTF-8 bytes to fit MySQL TEXT. kv:own is no longer requested. The OpenCode server now requires a per-session password, so other local accounts on the host cannot drive the agent through its loopback port. * test(upgrade): include agent session tables in the reviewed upgrade SQL * test: run the posix-only ai agent tests on linux only * fix: restore space to add host tags and redesign predefined tags editor * fix: host key silently accepted when the host is missing from the database (#1397) * fix: clearer host login failed status label and fix its translations (#1396) * chore: add host key and status label fixes to release notes * fix: sso and ldap provider dialogs overflowing the screen and using mismatched toggles * chore: increment ver * fix(audit): store plugin entries with no acting user as a null user_id (#1556) Plugin audit entries written outside a request used the literal "system" as user_id. That column references users.id, so the insert was refused (Postgres logs it as an FK violation) and the entry was silently dropped. Write null instead and keep "system" / plugin:<id> in username. * chore: add sso/ldap dialog and audit log fixes to release notes * fix: tunnels and host settings missing from shared hosts on desktop * fix: remote desktop logins missing from shared hosts on desktop * fix: simplify host status to online/offline and keep it live without a refresh * chore: sync Crowdin translations for 2.9.1 * fix: build docker frontend/backend natively to stop arm64 hang, build sdk before openapi * chore: rework plugin readmes, json changelogs and standalone repo setup * chore: move plugins to their own repos and drop the plugins folder * chore(deps-dev): bump globals (#1560) Bumps the dev-minor-updates group with 1 update: [globals](https://github.com/sindresorhus/globals). Updates `globals` from 17.12.0 to 17.13.0 - [Release notes](https://github.com/sindresorhus/globals/releases) - [Commits](https://github.com/sindresorhus/globals/compare/v17.12.0...v17.13.0) --- updated-dependencies: - dependency-name: globals dependency-version: 17.13.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: drop the 2.8 columns, moves and aliases kept for a downgrade * chore: remove the 2.9 finish list * feat: port the demo redesign with Manage and Settings tabs * chore: pin the plugin signing key and use TERMIX_PAT in workflows * chore: rename the plugin sdk to @termix-ssh/plugin-sdk * feat: add a publish workflow for the plugin sdk * chore: cleanup * fix: harden plugin sockets, public routes, prebuilt binaries and login fallback * chore: add a 2.9.1 upgrade check for postgres and mysql * fix: stop full database rewrites on every plugin db call * fix: stop full database rewrites on every plugin db call * fix: restore release video link in 2.9.2 notes * fix: use TERMIX_PAT in workflows * feat: pin the official plugins in the docker image * feat: implement plugin management UI * feat: shared list kit, settings search, rail order and ui consistency fixes * chore: run all workflows on blacksmith runners * chore: split dashboard quick actions into quarters and drop host status row lines * fix: open plain settings from the profile button, navigation only from the rail menu * feat: consent check, developer mode file installs, install counts and issue links for plugins * feat: row detail options for hosts and credentials, open manage from sidebar header * fix: unify connection failure screens and rebuild stale local plugins * feat: dev:all runner for web, electron and docker with plugin hot reload, termix-plugin dev * chore: clean up npm scripts, make npm run dev the full runner and drop concurrently * fix: settle quick connect panel loads in tests so they stop flaking * fix: stop the dev runner rebuilding plugins when windows reports file reads as changes * chore: update the plugin sdk ui export snapshot * feat: full screen onboarding with a plugin picker and per step versions * feat: changelog.md release notes, v tags, plugin release notes and videos * chore: add temp changelog * chore: release the plugin sdk as 1.0.1 * feat: show only the latest plugin release notes and cap long ones * chore: publish docker images to termix-ssh on ghcr and termixssh on docker hub * chore: rename docker hub token secret to DOCKERHUB_BUGATTIGUY527_TOKEN * chore: renew mac app store provisioning profile * chore: drop docs job from release workflow * chore: run sdk publish on github hosted runner * chore: remove dependabot * chore: general file cleanup * chore: rewrite readme and taglines for plugin-based termix * chore: drop optional from ai plugin row in readme * feat: per-repo issue forms and prefilled bug reports instead of the support repo * feat: add report a bug link to the your account settings section * fix: open settings goes to the plugin's page and hides when it has none * feat: show plugin features from the manifest on the plugin page * fix: retry failed or blocked plugins on restart instead of leaving them disabled * fix: refresh plugin settings after enabling a plugin and match select and disabled bar styling * feat: request a feature link for plugins and use the bug form for unverified plugins * feat: beta channels for core and plugins with one stable/beta release workflow * fix(sync): resolve shared hosts for connect-only recipients (#1568) * fix(ssh): accept full passwords in keyboard-interactive prompts (#1569) * fix(ssh): normalize PKCS8 private keys before connecting (#1570) * fix(sidebar): reclaim space from hidden folder actions (#1571) * fix(hosts): display protocol credential usernames for non-SSH hosts (#1572) * fix: ask for a push/TOTP menu choice as text instead of a push confirm * fix: keep client tunnels open when one of their connections fails (Support#1417) * fix: send plugin form uploads to the plugin's route (Support#1406, Support#1420) * fix: add missing sync ids to old snippet tables so snippets sync again (Support#1419) * fix: start the macOS local terminal when the shell or spawn helper is broken (Support#1418) * fix: refresh cached plugin translations when only a translation changes (Support#1411) * fix: import sshpk as a default so the backend starts under ESM * feat: add a plugin sdk changelog and tag sdk releases, release 1.0.2 * fix: drop the ./ from the plugin sdk bin path so npm stops warning * chore: name core and sdk releases Termix vX and Plugin SDK vX * fix: lock the desktop backend to the app's own origin (GHSA-frx8-qqgg-7j7g) * fix: trust devices by a server-issued token, not a client header (GHSA-6gr3-r7jx-wfmh) * fix: keep global settings out of non-admin data exports (GHSA-v3vp-ffww-q7pw) * fix: refuse sessionless tokens and keep the secrets file owner only * feat: add TRUSTED_PROXIES to choose who nginx takes client IPs from (GHSA-7j7m-85p4-2cpm) * chore: standardize repo setup files * chore: remove unused knip config * chore: add LICENSE and use Node 24 from .nvmrc * chore: update translation guidance, only en.json needs editing * feat: plugin docs and env manifest fields, in-app docs links, SDK 1.0.3 * fix: header separators render as borders and center the status divider * fix: lighter confirm prompt overlay to stop lag when it opens * fix: put plugin-only tailwind classes in core's utilities layer, SDK 1.0.4 * fix: dev stages local plugin builds on paths with spaces and builds them with the local SDK * fix: keep plugin tailwind variants in core's layer so overrides keep their order * fix: manage tab refetches before giving up on a host or credential it cannot find * fix: tab buttons like share show as soon as the terminal is ready * fix: folder rows no longer nest action buttons inside a button * fix: repin remote-desktop after its 1.0.0 re-release * chore: repin bundled plugins after the 1.0.0 re-release * fix: recent activity rows use the same separator as host status * feat: upload banner * fix: reject expired sessions on sockets, api key desktop links and 192.0.0.0/24 * fix: plugin sdk 1.0.5 with optional ui peers, safer timeouts and validate checks * fix: bundled plugins path for source runs and backend cleanup * fix: load plugin strings on guest pages, plugin wording and drop unused keys * fix: beta version stamping, homebrew cask bump, dockerignore and readme platforms * docs: 26.10.0 changelog * fix: current version in the version route example * chore: stop pushing the release- docker tag * feat: remove the donation reminder and its column * docs: note the removed donation reminder * fix: link server wizard always opens inline, onboarding card grows for it * feat: plugin text columns are longtext on mysql so they are not capped at 64KB * fix: linked desktops keep a plugin when its update from the server fails * chore: default mobile download links to v tags * fix: sso only accounts cannot sign in with a passkey or other local method * feat: note in the plugins tab that community plugins are coming * fix: plugin validate accepts beta versions * chore: pin bundled plugins rebuilt on sdk 1.0.5 * fix: skip locale fetches for disabled plugins * fix: show translated names for the built-in admin and user roles * fix: show host keys as SHA256 fingerprints like ssh-keygen * fix: host editor scrolls to a newly enabled protocol section * fix: pass the host to dashboard host row plugins * fix: plugin cards show dividers between author, version and category * fix: refuse plugin archives with paths outside the plugin folder * fix: theme picker shows one dropdown arrow * fix: read activity and audit times as UTC so they show in local time * fix: show the real error for a wrong password or code on plugin sign in * fix: explain that external sign in needs Auto-create external accounts * fix: clear leftover plugin unpack folders at startup * fix: shared session links open for guests again * fix: share panels no longer list yourself as a share target * fix: a host update without an auth type keeps the saved password * fix: guest pages get the tab ids a guest plugin registers * fix: refuse a 2.8 database, which already had a plugins table * fix: dashboard cards fit on a phone * fix: desktop setup no longer asks to secure the local account * fix: the desktop app keeps the desktop layout in a narrow window * fix: the desktop app shows the rail and no phone bar in a narrow window * fix: name every sync type in the Sync panel and pluralize the link prompt * chore: update the sdk ui snapshot for the host key dialog * fix: turning a plugin back on restarts the plugins it turned off * fix: quick connect asks to trust the host key * fix: revoking a manager also removes the shares they handed out * fix: database export works for users with TOTP on (#1426) * fix: rdp and vnc logins use the folder credential when none is picked (#1429) * fix: imported hosts get status checks without a restart * fix: re-pin bundled plugins after 1.0.0 re-release * fix: re-pin bundled plugins after search bar fix * chore: update app icon to smaller version * chore: round the readme logo, keep square source for app icons * feat: grid columns and table view in the plugins tab * fix: match the host key copy button to the fingerprint height * fix: use brand color for toggles in sync settings * fix: re-pin bundled plugins after 1.0.0 re-release * fix: web terminals failing auth behind a proxy that rewrites Host (Support#651) * fix: re-pin snippets and termix-identity after 1.0.0 overwrite * fix: re-pin file-manager after 1.0.0 overwrite * fix: re-pin file-manager after 1.0.0 overwrite * chore: remove Crowdin from the release workflow * chore: remove crowdin config --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
This commit is contained in:
3656 files changed
+116210
-460999
No files matched your search
@@ -1,158 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||
import { Button } from "@/components/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/dialog";
|
||||
import { useUiPreferencesContext } from "@/contexts/UiPreferencesContext";
|
||||
import { useActionSlot } from "@/hooks/use-action-slot";
|
||||
import {
|
||||
relevantSteps,
|
||||
type OnboardingContext,
|
||||
type OnboardingStep,
|
||||
} from "./onboarding-steps";
|
||||
|
||||
/** Plugin steps go in before this one. */
|
||||
const PLUGIN_STEPS_BEFORE = "security";
|
||||
|
||||
export function OnboardingDialog({
|
||||
open,
|
||||
context,
|
||||
onClose,
|
||||
}: {
|
||||
open: boolean;
|
||||
context: OnboardingContext;
|
||||
onClose: (skipped: boolean) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const ctx = useUiPreferencesContext();
|
||||
const pluginSteps = useActionSlot("onboarding.steps");
|
||||
const steps = useMemo(() => {
|
||||
const core = relevantSteps(context);
|
||||
const extra: OnboardingStep[] = pluginSteps
|
||||
.filter((contribution) => contribution.component)
|
||||
.map((contribution) => ({
|
||||
id: contribution.actionId,
|
||||
titleKey: contribution.titleKey,
|
||||
Component:
|
||||
contribution.component as unknown as OnboardingStep["Component"],
|
||||
}));
|
||||
const at = core.findIndex((step) => step.id === PLUGIN_STEPS_BEFORE);
|
||||
return at < 0
|
||||
? [...core, ...extra]
|
||||
: [...core.slice(0, at), ...extra, ...core.slice(at)];
|
||||
}, [context, pluginSteps]);
|
||||
const [index, setIndex] = useState(0);
|
||||
|
||||
// A reopened run always starts from the top.
|
||||
useEffect(() => {
|
||||
if (open) setIndex(0);
|
||||
}, [open]);
|
||||
|
||||
if (steps.length === 0) return null;
|
||||
|
||||
const clamped = Math.min(index, steps.length - 1);
|
||||
const step = steps[clamped];
|
||||
const isLast = clamped === steps.length - 1;
|
||||
const StepComponent = step.Component;
|
||||
|
||||
function finish(skipped: boolean) {
|
||||
ctx?.completeOnboarding(skipped);
|
||||
onClose(skipped);
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(next) => {
|
||||
if (!next) finish(true);
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
className="sm:max-w-xl max-h-[85vh] overflow-y-auto"
|
||||
onInteractOutside={(e) => e.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base font-bold">
|
||||
{t(step.titleKey)}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-xs text-muted-foreground">
|
||||
{t("onboarding.stepCounter", {
|
||||
current: clamped + 1,
|
||||
total: steps.length,
|
||||
})}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="h-0.5 w-full bg-muted-foreground/15">
|
||||
<div
|
||||
className="h-full bg-accent-brand transition-all duration-200"
|
||||
style={{ width: `${((clamped + 1) / steps.length) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-1">
|
||||
<StepComponent context={context} />
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex items-center justify-between gap-3 border-t border-border pt-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{steps.map((s, i) => (
|
||||
<button
|
||||
key={s.id}
|
||||
type="button"
|
||||
title={t(s.titleKey)}
|
||||
aria-label={t(s.titleKey)}
|
||||
aria-current={i === clamped}
|
||||
onClick={() => setIndex(i)}
|
||||
className={`h-1.5 w-1.5 rounded-full transition-colors ${
|
||||
i === clamped
|
||||
? "bg-accent-brand"
|
||||
: "bg-muted-foreground/25 hover:bg-muted-foreground/50"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{!isLast && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-[11px]"
|
||||
onClick={() => finish(true)}
|
||||
>
|
||||
{t("onboarding.skip")}
|
||||
</Button>
|
||||
)}
|
||||
{clamped > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 text-[11px]"
|
||||
onClick={() => setIndex(clamped - 1)}
|
||||
>
|
||||
<ArrowLeft size={12} />
|
||||
{t("common.back")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 text-[11px] border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
||||
onClick={() => (isLast ? finish(false) : setIndex(clamped + 1))}
|
||||
>
|
||||
{isLast ? t("onboarding.finish") : t("onboarding.next")}
|
||||
{!isLast && <ArrowRight size={12} />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { lazy, Suspense, useEffect, useRef, useState } from "react";
|
||||
import { useUiPreferencesContext } from "@/contexts/UiPreferencesContext";
|
||||
import { usePermissions } from "@/hooks/use-permissions";
|
||||
import { isElectron } from "@/lib/electron";
|
||||
import { isEmbeddedAuthFrame } from "@/lib/embedded-frame";
|
||||
import { settledPromise } from "@/plugin-host/plugin-store";
|
||||
import { subscribeToActionRegistry } from "@/shell/action-registry";
|
||||
import { onboardingSteps, type OnboardingMode } from "./onboarding-registry";
|
||||
import {
|
||||
baselineSeen,
|
||||
computeFlow,
|
||||
needsFullFlow,
|
||||
ONBOARDING_ADMIN_PERMISSION,
|
||||
} from "./onboarding-flow";
|
||||
import { canEnrollSecondFactor, currentStepDefs } from "./use-onboarding-steps";
|
||||
|
||||
const OnboardingStage = lazy(() =>
|
||||
import("./OnboardingStage").then((m) => ({ default: m.OnboardingStage })),
|
||||
);
|
||||
|
||||
/** Fired by "Run setup again" in settings. */
|
||||
export const OPEN_ONBOARDING_EVENT = "termix:open-onboarding";
|
||||
|
||||
const RECHECK_DELAY_MS = 750;
|
||||
|
||||
/**
|
||||
* Onboarding once the app is up: the rerun from settings, and a partial run
|
||||
* whenever steps appear that the user has not seen (a plugin installed here
|
||||
* or elsewhere, a step whose version went up). Both draw full screen over
|
||||
* the shell without unmounting it.
|
||||
*/
|
||||
export function OnboardingHost({
|
||||
onOpenChange,
|
||||
}: {
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
}) {
|
||||
const prefs = useUiPreferencesContext();
|
||||
const { has, loaded } = usePermissions();
|
||||
const [mode, setMode] = useState<OnboardingMode | null>(null);
|
||||
const [settled, setSettled] = useState(false);
|
||||
const modeRef = useRef(mode);
|
||||
modeRef.current = mode;
|
||||
const embedded = isEmbeddedAuthFrame();
|
||||
|
||||
useEffect(() => {
|
||||
onOpenChange?.(mode !== null);
|
||||
}, [mode, onOpenChange]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
void settledPromise().then(() => !cancelled && setSettled(true));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (embedded) return;
|
||||
const open = () => {
|
||||
void settledPromise().then(() => setMode("rerun"));
|
||||
};
|
||||
window.addEventListener(OPEN_ONBOARDING_EVENT, open);
|
||||
return () => window.removeEventListener(OPEN_ONBOARDING_EVENT, open);
|
||||
}, [embedded]);
|
||||
|
||||
const onboarding = prefs?.preferences.onboarding;
|
||||
const ready = !embedded && settled && loaded && !!prefs?.loaded;
|
||||
|
||||
// Carried over from the old onboarding: plugin steps that already exist
|
||||
// count as seen, without showing any of them.
|
||||
useEffect(() => {
|
||||
if (!ready || !onboarding?.baselinePending) return;
|
||||
prefs?.markOnboardingSeen(baselineSeen(currentStepDefs(has)), {
|
||||
baselineDone: true,
|
||||
});
|
||||
}, [ready, onboarding?.baselinePending, prefs, has]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ready || !onboarding || onboarding.baselinePending) return;
|
||||
if (needsFullFlow(onboarding)) return;
|
||||
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
const check = () => {
|
||||
if (modeRef.current !== null) return;
|
||||
if (document.visibilityState === "hidden") return;
|
||||
const isAdmin = has(ONBOARDING_ADMIN_PERMISSION);
|
||||
const pending = computeFlow(currentStepDefs(has), onboarding.seen, {
|
||||
mode: "partial",
|
||||
isAdmin,
|
||||
isDesktop: isElectron(),
|
||||
has,
|
||||
pluginSetupPending: false,
|
||||
pluginsManagedElsewhere: false,
|
||||
canEnrollSecondFactor: canEnrollSecondFactor(),
|
||||
});
|
||||
if (pending.length > 0) setMode("partial");
|
||||
};
|
||||
const schedule = () => {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(check, RECHECK_DELAY_MS);
|
||||
};
|
||||
schedule();
|
||||
const offSteps = onboardingSteps.subscribe(schedule);
|
||||
const offSlots = subscribeToActionRegistry(schedule);
|
||||
document.addEventListener("visibilitychange", schedule);
|
||||
return () => {
|
||||
if (timer) clearTimeout(timer);
|
||||
offSteps();
|
||||
offSlots();
|
||||
document.removeEventListener("visibilitychange", schedule);
|
||||
};
|
||||
}, [ready, onboarding, has]);
|
||||
|
||||
if (!mode || embedded) return null;
|
||||
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<OnboardingStage
|
||||
key={mode}
|
||||
mode={mode}
|
||||
shellReady
|
||||
onDone={() => setMode(null)}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,358 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ArrowLeft, ArrowRight, Loader2, LogOut } from "lucide-react";
|
||||
import { Button } from "@/components/button";
|
||||
import { SurfaceScope } from "@/components/surface/surface-scope";
|
||||
import { useUiPreferencesContext } from "@/contexts/UiPreferencesContext";
|
||||
import { usePermissions } from "@/hooks/use-permissions";
|
||||
import { isElectron } from "@/lib/electron";
|
||||
import {
|
||||
getOnboardingPlugins,
|
||||
type OnboardingPluginList,
|
||||
} from "@/api/plugins-api";
|
||||
import {
|
||||
sortSteps,
|
||||
type OnboardingCtx,
|
||||
type OnboardingMode,
|
||||
type OnboardingStepDef,
|
||||
} from "./onboarding-registry";
|
||||
import {
|
||||
computeFlow,
|
||||
ONBOARDING_ADMIN_PERMISSION,
|
||||
seenFor,
|
||||
} from "./onboarding-flow";
|
||||
import { OnboardingStageContext } from "./onboarding-stage-context";
|
||||
import {
|
||||
useCanEnrollSecondFactor,
|
||||
useOnboardingStepDefs,
|
||||
} from "./use-onboarding-steps";
|
||||
|
||||
type BeforeNext = () => boolean | Promise<boolean>;
|
||||
|
||||
export interface OnboardingStageProps {
|
||||
mode: OnboardingMode;
|
||||
/** The picker's plugin list, when the boot gate already fetched it. */
|
||||
initialPlugins?: OnboardingPluginList | null;
|
||||
/** False on a first run, which shows before the app shell exists. */
|
||||
shellReady: boolean;
|
||||
onDone: () => void;
|
||||
onLogout?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Onboarding as a page of its own, laid out like the settings pages: one
|
||||
* centred column with the step in a card and Back / Skip / Next under it.
|
||||
* The same stage runs a new user's first run, a partial run of steps
|
||||
* someone has not seen yet, and a rerun from settings.
|
||||
*/
|
||||
export function OnboardingStage({
|
||||
mode,
|
||||
initialPlugins = null,
|
||||
shellReady,
|
||||
onDone,
|
||||
onLogout,
|
||||
}: OnboardingStageProps) {
|
||||
const { t } = useTranslation();
|
||||
const prefs = useUiPreferencesContext();
|
||||
const { has, loaded: permissionsLoaded } = usePermissions();
|
||||
const isAdmin = has(ONBOARDING_ADMIN_PERMISSION);
|
||||
const isDesktop = isElectron();
|
||||
const canEnroll = useCanEnrollSecondFactor();
|
||||
|
||||
const [plugins, setPlugins] = useState<OnboardingPluginList | null>(
|
||||
initialPlugins,
|
||||
);
|
||||
|
||||
// A rerun or a partial run opened inside the app has no list yet, and
|
||||
// whether the picker applies depends on it.
|
||||
useEffect(() => {
|
||||
if (plugins || !isAdmin) return;
|
||||
let cancelled = false;
|
||||
getOnboardingPlugins()
|
||||
.then((list) => !cancelled && setPlugins(list))
|
||||
.catch(() => {});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [plugins, isAdmin]);
|
||||
|
||||
const allSteps = useOnboardingStepDefs();
|
||||
|
||||
const ctx = useMemo<OnboardingCtx>(
|
||||
() => ({
|
||||
mode,
|
||||
isAdmin,
|
||||
isDesktop,
|
||||
has,
|
||||
pluginSetupPending: !!plugins?.pending,
|
||||
pluginsManagedElsewhere: !!plugins?.managedByLinkedServer,
|
||||
canEnrollSecondFactor: canEnroll,
|
||||
}),
|
||||
[mode, isAdmin, isDesktop, has, plugins, canEnroll],
|
||||
);
|
||||
|
||||
// What was seen when the run started. Marking steps as seen happens at the
|
||||
// end, but the run itself must not shift under the user if it changes.
|
||||
const seenAtStart = useRef(prefs?.preferences.onboarding.seen ?? {});
|
||||
// Someone carried over from an older version gets their plugins' steps
|
||||
// marked seen by the shell, not shown, so only core steps run for them.
|
||||
const coreOnly = useRef(
|
||||
mode === "partial" && !!prefs?.preferences.onboarding.baselinePending,
|
||||
);
|
||||
const sticky = useRef(new Set<string>());
|
||||
|
||||
const flow = useMemo(() => {
|
||||
const candidates = coreOnly.current
|
||||
? allSteps.filter((step) => !step.pluginId)
|
||||
: allSteps;
|
||||
const live = computeFlow(candidates, seenAtStart.current, ctx);
|
||||
for (const step of live) sticky.current.add(step.id);
|
||||
// A step that was in the run stays in it (the picker stops being
|
||||
// pending once applied), unless its plugin went away.
|
||||
const kept = allSteps.filter(
|
||||
(step) =>
|
||||
sticky.current.has(step.id) && !live.some((s) => s.id === step.id),
|
||||
);
|
||||
return sortSteps([...live, ...kept]);
|
||||
}, [allSteps, ctx]);
|
||||
|
||||
const [currentId, setCurrentId] = useState<string | null>(null);
|
||||
const [viewOpen, setViewOpen] = useState(false);
|
||||
const lastPosition = useRef(0);
|
||||
const [confirmed, setConfirmed] = useState<Set<string>>(() => new Set());
|
||||
const [canContinue, setCanContinueMap] = useState<Record<string, boolean>>(
|
||||
{},
|
||||
);
|
||||
const beforeNext = useRef<Record<string, BeforeNext | null>>({});
|
||||
const [busy, setBusy] = useState(false);
|
||||
const finishing = useRef(false);
|
||||
|
||||
// Track the current step by key: a step disappearing (its plugin was
|
||||
// removed) moves on to whatever now sits in its place.
|
||||
let index = flow.findIndex((step) => step.id === currentId);
|
||||
if (index < 0) {
|
||||
index = flow.findIndex((step) => step.position >= lastPosition.current);
|
||||
if (index < 0) index = flow.length - 1;
|
||||
}
|
||||
const step: OnboardingStepDef | undefined = flow[index];
|
||||
|
||||
useEffect(() => {
|
||||
if (!step) return;
|
||||
lastPosition.current = step.position;
|
||||
if (step.id !== currentId) setCurrentId(step.id);
|
||||
}, [step, currentId]);
|
||||
|
||||
const finish = useCallback(
|
||||
async (skipped: boolean) => {
|
||||
if (finishing.current) return;
|
||||
finishing.current = true;
|
||||
prefs?.markOnboardingSeen(seenFor(flow), {
|
||||
completed: true,
|
||||
skipped,
|
||||
});
|
||||
await prefs?.flushNow().catch(() => {});
|
||||
onDone();
|
||||
},
|
||||
[prefs, flow, onDone],
|
||||
);
|
||||
|
||||
// Nothing to show (a partial run whose step vanished).
|
||||
useEffect(() => {
|
||||
if (permissionsLoaded && flow.length === 0) void finish(false);
|
||||
}, [permissionsLoaded, flow.length, finish]);
|
||||
|
||||
const canSkip = !flow.some((s) => s.required && !confirmed.has(s.id));
|
||||
const isLast = index === flow.length - 1;
|
||||
const stepId = step?.id ?? "";
|
||||
const stepCanContinue = canContinue[stepId] !== false;
|
||||
|
||||
const goNext = useCallback(async () => {
|
||||
if (!step || busy) return;
|
||||
const hook = beforeNext.current[step.id];
|
||||
if (hook) {
|
||||
setBusy(true);
|
||||
let ok = false;
|
||||
try {
|
||||
ok = await hook();
|
||||
} catch {
|
||||
ok = false;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
if (!ok) return;
|
||||
}
|
||||
if (step.required) {
|
||||
setConfirmed((prev) => new Set(prev).add(step.id));
|
||||
}
|
||||
if (isLast) {
|
||||
void finish(false);
|
||||
return;
|
||||
}
|
||||
setCurrentId(flow[index + 1].id);
|
||||
}, [step, busy, isLast, finish, flow, index]);
|
||||
|
||||
const skip = useCallback(() => {
|
||||
if (canSkip) void finish(true);
|
||||
}, [canSkip, finish]);
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (event: KeyboardEvent) => {
|
||||
if (event.key !== "Escape" || mode === "full") return;
|
||||
if (event.defaultPrevented) return;
|
||||
skip();
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [mode, skip]);
|
||||
|
||||
const setCanContinue = useCallback(
|
||||
(ok: boolean) =>
|
||||
setCanContinueMap((prev) =>
|
||||
prev[stepId] === ok ? prev : { ...prev, [stepId]: ok },
|
||||
),
|
||||
[stepId],
|
||||
);
|
||||
const setBeforeNext = useCallback(
|
||||
(fn: BeforeNext | null) => {
|
||||
beforeNext.current[stepId] = fn;
|
||||
},
|
||||
[stepId],
|
||||
);
|
||||
|
||||
const stageValue = useMemo(() => ({ plugins, setPlugins }), [plugins]);
|
||||
|
||||
if (!permissionsLoaded || !step) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-background">
|
||||
<Loader2 className="size-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const StepComponent = step.Component;
|
||||
const Icon = step.icon;
|
||||
|
||||
return (
|
||||
<OnboardingStageContext.Provider value={stageValue}>
|
||||
<div
|
||||
className="fixed inset-0 z-[60] overflow-y-auto bg-background text-foreground"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={t("onboarding.stageLabel")}
|
||||
>
|
||||
<div className="mx-auto flex min-h-full w-full max-w-2xl flex-col gap-4 px-4 py-8 sm:py-14">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
||||
{mode === "partial"
|
||||
? t("onboarding.partialHeading")
|
||||
: t("onboarding.setupHeading")}
|
||||
</span>
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{t("onboarding.stepCounter", {
|
||||
current: index + 1,
|
||||
total: flow.length,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
{onLogout && mode === "full" && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-[11px] text-muted-foreground"
|
||||
onClick={onLogout}
|
||||
>
|
||||
<LogOut size={12} />
|
||||
{t("onboarding.signOut")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1">
|
||||
{flow.map((s, i) => (
|
||||
<div
|
||||
key={s.id}
|
||||
className={`h-0.5 flex-1 ${
|
||||
i <= index ? "bg-accent-brand" : "bg-muted-foreground/20"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<SurfaceScope
|
||||
kind="tab"
|
||||
onEditingChange={(editing) => setViewOpen(!!editing)}
|
||||
className={`relative flex flex-col border border-border bg-card ${
|
||||
viewOpen ? "min-h-[70vh]" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
|
||||
{Icon && <Icon size={14} className="text-muted-foreground" />}
|
||||
<span className="flex-1 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
||||
{t(step.titleKey)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 px-3 py-4 md:px-4">
|
||||
{step.descriptionKey && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t(step.descriptionKey)}
|
||||
</p>
|
||||
)}
|
||||
<StepComponent
|
||||
key={step.id}
|
||||
mode={mode}
|
||||
isAdmin={isAdmin}
|
||||
isDesktop={isDesktop}
|
||||
shellReady={shellReady}
|
||||
setCanContinue={setCanContinue}
|
||||
setBeforeNext={setBeforeNext}
|
||||
/>
|
||||
</div>
|
||||
</SurfaceScope>
|
||||
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
{canSkip && !isLast && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 text-xs"
|
||||
onClick={skip}
|
||||
>
|
||||
{mode === "partial"
|
||||
? t("onboarding.skipPartial")
|
||||
: t("onboarding.skip")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{index > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 text-xs"
|
||||
disabled={busy}
|
||||
onClick={() => setCurrentId(flow[index - 1].id)}
|
||||
>
|
||||
<ArrowLeft size={13} />
|
||||
{t("common.back")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-8 border-accent-brand/40 text-xs text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
||||
disabled={busy || !stepCanContinue}
|
||||
onClick={() => void goNext()}
|
||||
>
|
||||
{busy && <Loader2 size={13} className="animate-spin" />}
|
||||
{isLast ? t("onboarding.finish") : t("onboarding.next")}
|
||||
{!isLast && !busy && <ArrowRight size={13} />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</OnboardingStageContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import type { UiOnboardingState } from "@/types/ui-preferences";
|
||||
import type { OnboardingCtx, OnboardingStepDef } from "./onboarding-registry";
|
||||
|
||||
/** The permission that makes someone an admin as far as onboarding goes. */
|
||||
export const ONBOARDING_ADMIN_PERMISSION = "admin.plugins.manage";
|
||||
|
||||
export function isStepRelevant(
|
||||
step: OnboardingStepDef,
|
||||
ctx: OnboardingCtx,
|
||||
): boolean {
|
||||
if (step.audience === "admin" && !ctx.isAdmin) return false;
|
||||
if (step.permission && !ctx.has(step.permission)) return false;
|
||||
if (step.isRelevant) {
|
||||
try {
|
||||
if (!step.isRelevant(ctx)) return false;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
export function isStepPending(
|
||||
step: OnboardingStepDef,
|
||||
seen: Record<string, number>,
|
||||
ctx: OnboardingCtx,
|
||||
): boolean {
|
||||
if ((seen[step.id] ?? 0) < step.version) return true;
|
||||
try {
|
||||
return step.forcePending?.(ctx) === true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The steps a run shows, in order. A full run or a rerun shows every step
|
||||
* that applies to the user; a partial run only the ones they have not seen
|
||||
* at their current version.
|
||||
*/
|
||||
export function computeFlow(
|
||||
steps: OnboardingStepDef[],
|
||||
seen: Record<string, number>,
|
||||
ctx: OnboardingCtx,
|
||||
): OnboardingStepDef[] {
|
||||
const relevant = steps.filter((step) => isStepRelevant(step, ctx));
|
||||
if (ctx.mode !== "partial") return relevant;
|
||||
return relevant.filter((step) => isStepPending(step, seen, ctx));
|
||||
}
|
||||
|
||||
/** A user who has never finished or skipped a run gets the full one. */
|
||||
export function needsFullFlow(state: UiOnboardingState): boolean {
|
||||
return Object.keys(state.seen).length === 0 && !state.completedAt;
|
||||
}
|
||||
|
||||
/** What to record once a run ends, finished or skipped. */
|
||||
export function seenFor(steps: OnboardingStepDef[]): Record<string, number> {
|
||||
return Object.fromEntries(steps.map((step) => [step.id, step.version]));
|
||||
}
|
||||
|
||||
/**
|
||||
* For a user carried over from the old onboarding: every plugin step that
|
||||
* exists right now counts as seen, so the upgrade does not show them a pile
|
||||
* of steps for plugins they have been using all along.
|
||||
*/
|
||||
export function baselineSeen(
|
||||
steps: OnboardingStepDef[],
|
||||
): Record<string, number> {
|
||||
return seenFor(steps.filter((step) => step.pluginId));
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import type { ComponentType } from "react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type {
|
||||
OnboardingMode,
|
||||
OnboardingSection,
|
||||
OnboardingStepProps,
|
||||
} from "@termix-ssh/plugin-sdk/frontend";
|
||||
import { createRegistry } from "@/lib/registry";
|
||||
import type { SlotContribution } from "@/shell/action-registry";
|
||||
import { pluginStepKey } from "@/types/onboarding";
|
||||
|
||||
export type { OnboardingMode, OnboardingSection, OnboardingStepProps };
|
||||
|
||||
export interface OnboardingCtx {
|
||||
mode: OnboardingMode;
|
||||
isAdmin: boolean;
|
||||
isDesktop: boolean;
|
||||
has: (permission: string) => boolean;
|
||||
/** True on a fresh install until an admin confirms the plugin picker. */
|
||||
pluginSetupPending: boolean;
|
||||
/** A linked desktop runs what its server runs. */
|
||||
pluginsManagedElsewhere: boolean;
|
||||
/** Whether a sign in plugin offers a passkey or authenticator to set up. */
|
||||
canEnrollSecondFactor?: boolean;
|
||||
}
|
||||
|
||||
export interface OnboardingStepDef {
|
||||
/** The key stored in the seen map: a core id, or `<pluginId>:<id>`. */
|
||||
id: string;
|
||||
pluginId?: string;
|
||||
version: number;
|
||||
titleKey: string;
|
||||
descriptionKey?: string;
|
||||
icon?: LucideIcon | ComponentType<{ size?: number; className?: string }>;
|
||||
Component: ComponentType<OnboardingStepProps>;
|
||||
audience: "all" | "admin";
|
||||
permission?: string;
|
||||
/** Position in the flow; plugin steps get theirs from their section. */
|
||||
position: number;
|
||||
isRelevant?: (ctx: OnboardingCtx) => boolean;
|
||||
/** Shown in a partial run even when already seen. */
|
||||
forcePending?: (ctx: OnboardingCtx) => boolean;
|
||||
/** Skip stays hidden until this step has been confirmed. */
|
||||
required?: boolean;
|
||||
}
|
||||
|
||||
/** Where each section of plugin steps sits among the core steps. */
|
||||
export const SECTION_POSITION: Record<OnboardingSection, number> = {
|
||||
setup: 50,
|
||||
explore: 80,
|
||||
security: 95,
|
||||
};
|
||||
|
||||
export const onboardingSteps = createRegistry<OnboardingStepDef>();
|
||||
|
||||
/** Plugin steps sort inside their section by order, then key. */
|
||||
export function sectionPosition(
|
||||
section: OnboardingSection | undefined,
|
||||
order = 0,
|
||||
): number {
|
||||
const base = SECTION_POSITION[section ?? "explore"];
|
||||
return base + Math.max(-1, Math.min(1, order / 1000)) * 0.4;
|
||||
}
|
||||
|
||||
export function sortSteps(steps: OnboardingStepDef[]): OnboardingStepDef[] {
|
||||
return [...steps].sort(
|
||||
(a, b) => a.position - b.position || a.id.localeCompare(b.id),
|
||||
);
|
||||
}
|
||||
|
||||
/** Steps still on the deprecated onboarding.steps slot, read as version 1. */
|
||||
export function legacyStepDefs(
|
||||
contributions: SlotContribution[],
|
||||
): OnboardingStepDef[] {
|
||||
return contributions
|
||||
.filter((c) => c.component && c.pluginId)
|
||||
.map((c) => ({
|
||||
id: pluginStepKey(c.pluginId!, c.actionId),
|
||||
pluginId: c.pluginId,
|
||||
version: 1,
|
||||
titleKey: c.titleKey,
|
||||
descriptionKey: c.descriptionKey,
|
||||
icon: c.icon as OnboardingStepDef["icon"],
|
||||
Component: c.component as unknown as ComponentType<OnboardingStepProps>,
|
||||
audience: "all" as const,
|
||||
position: sectionPosition("explore", c.order),
|
||||
}));
|
||||
}
|
||||
|
||||
/** Core, registered and legacy steps in flow order, registered winning ties. */
|
||||
export function mergeStepDefs(
|
||||
core: OnboardingStepDef[],
|
||||
registered: OnboardingStepDef[],
|
||||
legacy: OnboardingStepDef[],
|
||||
): OnboardingStepDef[] {
|
||||
const keys = new Set([...core, ...registered].map((step) => step.id));
|
||||
return sortSteps([
|
||||
...core,
|
||||
...registered,
|
||||
...legacy.filter((step) => !keys.has(step.id)),
|
||||
]);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { createContext, useContext } from "react";
|
||||
import type { OnboardingPluginList } from "@/api/plugins-api";
|
||||
|
||||
export interface OnboardingStageValue {
|
||||
/** Fetched by the boot gate for admins; null means fetch on demand. */
|
||||
plugins: OnboardingPluginList | null;
|
||||
setPlugins: (list: OnboardingPluginList) => void;
|
||||
}
|
||||
|
||||
export const OnboardingStageContext =
|
||||
createContext<OnboardingStageValue | null>(null);
|
||||
|
||||
export function useOnboardingStage(): OnboardingStageValue | null {
|
||||
return useContext(OnboardingStageContext);
|
||||
}
|
||||
@@ -1,72 +1,71 @@
|
||||
import type { ComponentType } from "react";
|
||||
import { WelcomeStep } from "./steps/WelcomeStep";
|
||||
import { LayoutTemplate, Monitor, Palette, Puzzle, Shield } from "lucide-react";
|
||||
import { CORE_ONBOARDING_STEPS } from "@/types/onboarding";
|
||||
import { PluginsStep } from "./steps/PluginsStep";
|
||||
import { PresetStep } from "./steps/PresetStep";
|
||||
import { AppearanceStep } from "./steps/AppearanceStep";
|
||||
import { FeaturesStep } from "./steps/FeaturesStep";
|
||||
import { WorkflowStep } from "./steps/WorkflowStep";
|
||||
import { SecurityStep } from "./steps/SecurityStep";
|
||||
import { DoneStep } from "./steps/DoneStep";
|
||||
import { DesktopSyncStep } from "./steps/DesktopSyncStep";
|
||||
import { isElectron } from "@/lib/electron";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
||||
export interface OnboardingContext {}
|
||||
|
||||
export interface OnboardingStepProps {
|
||||
context: OnboardingContext;
|
||||
}
|
||||
|
||||
export interface OnboardingStep {
|
||||
id: string;
|
||||
titleKey: string;
|
||||
Component: ComponentType<OnboardingStepProps>;
|
||||
/** Steps that do not apply to this account are skipped entirely. */
|
||||
isRelevant?: (context: OnboardingContext) => boolean;
|
||||
}
|
||||
import type { OnboardingStepDef } from "./onboarding-registry";
|
||||
|
||||
/**
|
||||
* Onboarding as data rather than hardcoded JSX, so steps can be added,
|
||||
* reordered or made conditional without touching the dialog shell. Plugins
|
||||
* add steps through the "onboarding.steps" slot; they land before security.
|
||||
* Core onboarding as data: only choices, no tour. Plugin steps slot in
|
||||
* between these by section (see SECTION_POSITION). To show a changed step
|
||||
* again to people who saw it, bump its version in CORE_ONBOARDING_STEPS;
|
||||
* only that step reruns.
|
||||
*/
|
||||
export const ONBOARDING_STEPS: OnboardingStep[] = [
|
||||
export const CORE_STEPS: OnboardingStepDef[] = [
|
||||
{
|
||||
id: "welcome",
|
||||
titleKey: "onboarding.welcomeTitle",
|
||||
Component: WelcomeStep,
|
||||
id: "plugins",
|
||||
version: CORE_ONBOARDING_STEPS.plugins,
|
||||
titleKey: "onboarding.pluginsTitle",
|
||||
icon: Puzzle,
|
||||
Component: PluginsStep,
|
||||
audience: "admin",
|
||||
position: 10,
|
||||
required: true,
|
||||
// Once applied there is nothing to redo here; the Plugins tab is where
|
||||
// plugins change after that, so a rerun leaves it out.
|
||||
isRelevant: (ctx) => !ctx.pluginsManagedElsewhere && ctx.pluginSetupPending,
|
||||
forcePending: (ctx) => ctx.pluginSetupPending,
|
||||
},
|
||||
{ id: "preset", titleKey: "onboarding.presetTitle", Component: PresetStep },
|
||||
{
|
||||
id: "desktop-sync",
|
||||
version: CORE_ONBOARDING_STEPS["desktop-sync"],
|
||||
titleKey: "onboarding.desktopTitle",
|
||||
icon: Monitor,
|
||||
Component: DesktopSyncStep,
|
||||
isRelevant: () => isElectron(),
|
||||
audience: "all",
|
||||
position: 20,
|
||||
isRelevant: (ctx) => ctx.isDesktop,
|
||||
},
|
||||
{
|
||||
id: "preset",
|
||||
version: CORE_ONBOARDING_STEPS.preset,
|
||||
titleKey: "onboarding.presetTitle",
|
||||
icon: LayoutTemplate,
|
||||
Component: PresetStep,
|
||||
audience: "all",
|
||||
position: 30,
|
||||
},
|
||||
{
|
||||
id: "appearance",
|
||||
version: CORE_ONBOARDING_STEPS.appearance,
|
||||
titleKey: "onboarding.appearanceTitle",
|
||||
icon: Palette,
|
||||
Component: AppearanceStep,
|
||||
},
|
||||
{
|
||||
id: "features",
|
||||
titleKey: "onboarding.featuresTitle",
|
||||
Component: FeaturesStep,
|
||||
},
|
||||
{
|
||||
id: "workflow",
|
||||
titleKey: "onboarding.workflowTitle",
|
||||
Component: WorkflowStep,
|
||||
audience: "all",
|
||||
position: 40,
|
||||
},
|
||||
{
|
||||
id: "security",
|
||||
version: CORE_ONBOARDING_STEPS.security,
|
||||
titleKey: "onboarding.securityTitle",
|
||||
icon: Shield,
|
||||
Component: SecurityStep,
|
||||
audience: "all",
|
||||
position: 90,
|
||||
// The desktop signs its local account in by itself, so a second factor
|
||||
// set up there would never be asked for.
|
||||
isRelevant: (ctx) => !ctx.isDesktop && ctx.canEnrollSecondFactor === true,
|
||||
},
|
||||
{ id: "done", titleKey: "onboarding.doneTitle", Component: DoneStep },
|
||||
];
|
||||
|
||||
export function relevantSteps(context: OnboardingContext): OnboardingStep[] {
|
||||
return ONBOARDING_STEPS.filter(
|
||||
(step) => !step.isRelevant || step.isRelevant(context),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import type {
|
||||
OnboardingPluginInfo,
|
||||
OnboardingPluginList,
|
||||
PluginChoice,
|
||||
} from "@/api/plugins-api";
|
||||
|
||||
export function currentChoice(plugin: OnboardingPluginInfo): PluginChoice {
|
||||
return plugin.state === "enabled" ? "enabled" : "disabled";
|
||||
}
|
||||
|
||||
/**
|
||||
* What the picker starts on. On a fresh install recommended plugins are on
|
||||
* and the rest are set to be removed; consent ones start on. Later runs
|
||||
* start from how things are now.
|
||||
*/
|
||||
export function defaultChoices(
|
||||
list: OnboardingPluginList,
|
||||
): Record<string, PluginChoice> {
|
||||
return Object.fromEntries(
|
||||
list.plugins.map((plugin) => {
|
||||
if (
|
||||
!list.pending ||
|
||||
list.reason !== "fresh" ||
|
||||
plugin.source !== "bundled"
|
||||
) {
|
||||
return [plugin.id, currentChoice(plugin)];
|
||||
}
|
||||
if (plugin.consent) return [plugin.id, "enabled"];
|
||||
return [plugin.id, plugin.recommended ? "enabled" : "remove"];
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
export function recommendedChoices(
|
||||
list: OnboardingPluginList,
|
||||
): Record<string, PluginChoice> {
|
||||
return Object.fromEntries(
|
||||
list.plugins.map((plugin) => [
|
||||
plugin.id,
|
||||
plugin.recommended || plugin.consent ? "enabled" : "remove",
|
||||
]),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { getUiPreferences } from "@/api/ui-preferences-api";
|
||||
import {
|
||||
getOnboardingPlugins,
|
||||
type OnboardingPluginList,
|
||||
} from "@/api/plugins-api";
|
||||
import { loadPermissionChecker } from "@/hooks/use-permissions";
|
||||
import { isElectron } from "@/lib/electron";
|
||||
import { isEmbeddedAuthFrame } from "@/lib/embedded-frame";
|
||||
import type { UiPreferences } from "@/types/ui-preferences";
|
||||
import {
|
||||
computeFlow,
|
||||
needsFullFlow,
|
||||
ONBOARDING_ADMIN_PERMISSION,
|
||||
} from "./onboarding-flow";
|
||||
import type { OnboardingCtx, OnboardingMode } from "./onboarding-registry";
|
||||
import { canEnrollSecondFactor, currentStepDefs } from "./use-onboarding-steps";
|
||||
|
||||
export interface StartupOnboarding {
|
||||
preferences: UiPreferences | null;
|
||||
/** Null when there is nothing to show. */
|
||||
mode: Exclude<OnboardingMode, "rerun"> | null;
|
||||
plugins: OnboardingPluginList | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Decides, after sign in and once plugins have loaded, whether the app opens
|
||||
* on onboarding: the full run for a new user, or just the steps someone has
|
||||
* not seen yet. Never inside the mobile app or a desktop's link window,
|
||||
* which only borrow this page to sign in.
|
||||
*/
|
||||
export async function resolveStartupOnboarding(): Promise<StartupOnboarding> {
|
||||
const none: StartupOnboarding = {
|
||||
preferences: null,
|
||||
mode: null,
|
||||
plugins: null,
|
||||
};
|
||||
if (isEmbeddedAuthFrame()) return none;
|
||||
if (new URLSearchParams(window.location.search).has("view")) return none;
|
||||
|
||||
let preferences: UiPreferences;
|
||||
try {
|
||||
preferences = await getUiPreferences();
|
||||
} catch {
|
||||
return none;
|
||||
}
|
||||
|
||||
const has = await loadPermissionChecker();
|
||||
const isAdmin = has(ONBOARDING_ADMIN_PERMISSION);
|
||||
const plugins = isAdmin
|
||||
? await getOnboardingPlugins().catch(() => null)
|
||||
: null;
|
||||
|
||||
const result: StartupOnboarding = { preferences, mode: null, plugins };
|
||||
const { onboarding } = preferences;
|
||||
|
||||
if (needsFullFlow(onboarding)) return { ...result, mode: "full" };
|
||||
|
||||
const ctx: OnboardingCtx = {
|
||||
mode: "partial",
|
||||
isAdmin,
|
||||
isDesktop: isElectron(),
|
||||
has,
|
||||
pluginSetupPending: !!plugins?.pending,
|
||||
pluginsManagedElsewhere: !!plugins?.managedByLinkedServer,
|
||||
canEnrollSecondFactor: canEnrollSecondFactor(),
|
||||
};
|
||||
const steps = currentStepDefs(has);
|
||||
// Someone carried over from the old onboarding has their plugin steps
|
||||
// marked seen by the shell first, so only core steps count for them here.
|
||||
const candidates = onboarding.baselinePending
|
||||
? steps.filter((step) => !step.pluginId)
|
||||
: steps;
|
||||
const pending = computeFlow(candidates, onboarding.seen, ctx);
|
||||
return { ...result, mode: pending.length > 0 ? "partial" : null };
|
||||
}
|
||||
@@ -1,101 +1,82 @@
|
||||
import { useState } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Check } from "lucide-react";
|
||||
import { useTheme } from "@/components/theme-provider";
|
||||
import { LanguageSwitcher } from "@/user/LanguageSwitcher";
|
||||
import { ACCENT_PRESET_COLORS, applyAccentColor } from "@/lib/theme";
|
||||
import type { ThemeId } from "@/types/ui-types";
|
||||
import {
|
||||
AccentPicker,
|
||||
FontSizePicker,
|
||||
LanguageSelect,
|
||||
ThemeGrid,
|
||||
UiFontSelect,
|
||||
useAppearanceSettings,
|
||||
} from "@/settings/appearance/appearance-controls";
|
||||
|
||||
const THEME_CHOICES: { id: ThemeId; swatch: string; labelKey: string }[] = [
|
||||
{
|
||||
id: "system",
|
||||
swatch: "linear-gradient(135deg,#ffffff 50%,#1a1c22 50%)",
|
||||
labelKey: "newUi.sidebar.userProfile.themeSystem",
|
||||
},
|
||||
{
|
||||
id: "light",
|
||||
swatch: "#ffffff",
|
||||
labelKey: "newUi.sidebar.userProfile.themeLight",
|
||||
},
|
||||
{
|
||||
id: "dark",
|
||||
swatch: "#1a1c22",
|
||||
labelKey: "newUi.sidebar.userProfile.themeDark",
|
||||
},
|
||||
];
|
||||
function Field({
|
||||
label,
|
||||
hint,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{label}
|
||||
</span>
|
||||
{children}
|
||||
{hint && (
|
||||
<span className="text-[10px] text-muted-foreground">{hint}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Every change applies right away, so the page itself is the preview. */
|
||||
export function AppearanceStep() {
|
||||
const { t } = useTranslation();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [accent, setAccent] = useState(
|
||||
() =>
|
||||
localStorage.getItem("termix-accent") ?? ACCENT_PRESET_COLORS[0].value,
|
||||
);
|
||||
const appearance = useAppearanceSettings();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-5">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("onboarding.appearanceIntro")}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("newUi.sidebar.userProfile.themeLabel")}
|
||||
</span>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{THEME_CHOICES.map((choice) => (
|
||||
<button
|
||||
key={choice.id}
|
||||
type="button"
|
||||
onClick={() => setTheme(choice.id)}
|
||||
className={`flex items-center gap-2 border p-2 text-xs transition-colors ${
|
||||
theme === choice.id
|
||||
? "border-accent-brand bg-accent-brand/10"
|
||||
: "border-border bg-card hover:bg-muted/40"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className="size-4 shrink-0 border border-border"
|
||||
style={{ background: choice.swatch }}
|
||||
/>
|
||||
{t(choice.labelKey)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Field label={t("newUi.sidebar.userProfile.themeLabel")}>
|
||||
<ThemeGrid value={appearance.theme} onChange={appearance.setTheme} />
|
||||
</Field>
|
||||
|
||||
<Field label={t("newUi.sidebar.userProfile.accentColorLabel")}>
|
||||
<AccentPicker
|
||||
value={appearance.accent}
|
||||
onChange={appearance.setAccent}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||||
<Field
|
||||
label={t("newUi.sidebar.userProfile.interfaceFontLabel")}
|
||||
hint={t("newUi.sidebar.userProfile.interfaceFontDescription")}
|
||||
>
|
||||
<UiFontSelect
|
||||
value={appearance.uiFont}
|
||||
onChange={appearance.setUiFont}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={t("newUi.sidebar.userProfile.fontSizeLabel")}>
|
||||
<FontSizePicker
|
||||
value={appearance.fontSize}
|
||||
onChange={appearance.setFontSize}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("newUi.sidebar.userProfile.accentColorLabel")}
|
||||
</span>
|
||||
<div className="grid grid-cols-6 gap-1.5">
|
||||
{ACCENT_PRESET_COLORS.map((color) => (
|
||||
<button
|
||||
key={color.value}
|
||||
type="button"
|
||||
title={color.label}
|
||||
onClick={() => {
|
||||
setAccent(color.value);
|
||||
localStorage.setItem("termix-accent", color.value);
|
||||
applyAccentColor(color.value);
|
||||
}}
|
||||
className="flex h-7 items-center justify-center border border-border"
|
||||
style={{ background: color.value }}
|
||||
>
|
||||
{accent === color.value && (
|
||||
<Check size={12} className="text-white drop-shadow" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("newUi.sidebar.userProfile.languageLabel")}
|
||||
</span>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
<Field label={t("newUi.sidebar.userProfile.languageLabel")}>
|
||||
<LanguageSelect
|
||||
value={appearance.language}
|
||||
onChange={appearance.setLanguage}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
BookOpen,
|
||||
CheckCircle2,
|
||||
Monitor,
|
||||
RotateCcw,
|
||||
Settings,
|
||||
Smartphone,
|
||||
Terminal,
|
||||
} from "lucide-react";
|
||||
|
||||
const NEXT_STEPS = [
|
||||
{ icon: Settings, key: "settings" },
|
||||
{ icon: RotateCcw, key: "rerun" },
|
||||
{ icon: Monitor, key: "desktop", href: "https://docs.termix.site/install" },
|
||||
{ icon: Smartphone, key: "mobile", href: "https://docs.termix.site/install" },
|
||||
{ icon: BookOpen, key: "docs", href: "https://docs.termix.site" },
|
||||
{ icon: Terminal, key: "cli", href: "https://docs.termix.site/cli" },
|
||||
] as const;
|
||||
|
||||
export function DoneStep() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col items-center gap-2 py-2 text-center">
|
||||
<CheckCircle2 size={26} className="text-accent-brand" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-sm font-semibold">
|
||||
{t("onboarding.doneHeading")}
|
||||
</span>
|
||||
<span className="max-w-sm text-[11px] leading-snug text-muted-foreground">
|
||||
{t("onboarding.doneDesc")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{NEXT_STEPS.map((step) => {
|
||||
const { icon: Icon, key } = step;
|
||||
const href = "href" in step ? step.href : null;
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="flex items-start gap-2.5 border border-border bg-card p-2.5"
|
||||
>
|
||||
<Icon size={14} className="mt-0.5 shrink-0 text-accent-brand" />
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs font-medium">
|
||||
{t(`onboarding.done_${key}`)}
|
||||
</span>
|
||||
<span className="text-[10px] leading-snug text-muted-foreground">
|
||||
{t(`onboarding.done_${key}_desc`)}
|
||||
</span>
|
||||
{href && (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="mt-0.5 w-fit text-[10px] font-medium text-accent-brand hover:underline"
|
||||
>
|
||||
{t(`onboarding.done_${key}_link`)}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { useActionSlot } from "@/hooks/use-action-slot";
|
||||
|
||||
/**
|
||||
* A tour of the things people miss because they live behind a rail icon.
|
||||
* Terminal and hosts are covered by the welcome step, so this is deliberately
|
||||
* the "there is more than SSH here" list. Every entry comes from a plugin,
|
||||
* through the "onboarding.features" slot.
|
||||
*/
|
||||
|
||||
export function FeaturesStep() {
|
||||
const { t } = useTranslation();
|
||||
const pluginFeatures = useActionSlot("onboarding.features");
|
||||
const features = pluginFeatures.map((feature) => ({
|
||||
id: feature.actionId,
|
||||
icon: feature.icon as LucideIcon | undefined,
|
||||
title: t(feature.titleKey),
|
||||
description: feature.descriptionKey ? t(feature.descriptionKey) : "",
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("onboarding.featuresIntro")}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
|
||||
{features.map(({ icon: Icon, id, title, description }) => (
|
||||
<div
|
||||
key={id}
|
||||
className="flex items-start gap-2.5 border border-border bg-card p-2.5"
|
||||
>
|
||||
{Icon && (
|
||||
<Icon size={14} className="mt-0.5 shrink-0 text-accent-brand" />
|
||||
)}
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs font-medium">{title}</span>
|
||||
<span className="text-[10px] leading-snug text-muted-foreground">
|
||||
{description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] text-muted-foreground/70">
|
||||
{t("onboarding.featuresRailHint")}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { AlertTriangle, Info, Loader2 } from "lucide-react";
|
||||
import type { OnboardingStepProps } from "@termix-ssh/plugin-sdk/frontend";
|
||||
import { Button } from "@/components/button";
|
||||
import { PluginIconBox } from "@/plugins/plugin-bits";
|
||||
import {
|
||||
applyOnboardingPlugins,
|
||||
getOnboardingPlugins,
|
||||
type OnboardingPluginInfo,
|
||||
type OnboardingPluginList,
|
||||
type PluginChoice,
|
||||
} from "@/api/plugins-api";
|
||||
import { syncPlugins } from "@/plugin-host/loader";
|
||||
import { resolvePluginChoices } from "@/types/plugin-onboarding";
|
||||
import { useOnboardingStage } from "../onboarding-stage-context";
|
||||
import {
|
||||
currentChoice,
|
||||
defaultChoices,
|
||||
recommendedChoices,
|
||||
} from "../plugin-choices";
|
||||
import { DocsLink } from "@/components/docs-link";
|
||||
|
||||
const CATEGORY_ORDER = [
|
||||
"Terminal",
|
||||
"Files & Transfer",
|
||||
"Infrastructure",
|
||||
"Monitoring",
|
||||
"Networking",
|
||||
"Access & Security",
|
||||
"Productivity",
|
||||
];
|
||||
|
||||
const CHOICES: PluginChoice[] = ["enabled", "disabled", "remove"];
|
||||
const RANK: Record<PluginChoice, number> = {
|
||||
remove: 0,
|
||||
disabled: 1,
|
||||
enabled: 2,
|
||||
};
|
||||
|
||||
export function PluginsStep({
|
||||
setCanContinue,
|
||||
setBeforeNext,
|
||||
}: OnboardingStepProps) {
|
||||
const { t } = useTranslation();
|
||||
const stage = useOnboardingStage();
|
||||
const [list, setList] = useState<OnboardingPluginList | null>(
|
||||
stage?.plugins ?? null,
|
||||
);
|
||||
const [loadError, setLoadError] = useState(false);
|
||||
const [choices, setChoices] = useState<Record<string, PluginChoice>>(() =>
|
||||
stage?.plugins ? defaultChoices(stage.plugins) : {},
|
||||
);
|
||||
const [applying, setApplying] = useState(false);
|
||||
const [failed, setFailed] = useState<{ id: string; error: string }[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (list) return;
|
||||
let cancelled = false;
|
||||
getOnboardingPlugins()
|
||||
.then((next) => {
|
||||
if (cancelled) return;
|
||||
setList(next);
|
||||
setChoices(defaultChoices(next));
|
||||
stage?.setPlugins(next);
|
||||
})
|
||||
.catch(() => !cancelled && setLoadError(true));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [list, stage]);
|
||||
|
||||
const resolved = useMemo(() => {
|
||||
if (!list) return null;
|
||||
return resolvePluginChoices(
|
||||
list.plugins.map((p) => ({ id: p.id, dependencies: p.dependencies })),
|
||||
choices,
|
||||
);
|
||||
}, [list, choices]);
|
||||
|
||||
const names = useMemo(
|
||||
() => new Map(list?.plugins.map((p) => [p.id, p.name]) ?? []),
|
||||
[list],
|
||||
);
|
||||
|
||||
const changed = useMemo(() => {
|
||||
if (!list || !resolved) return false;
|
||||
if (list.pending) return true;
|
||||
return list.plugins.some(
|
||||
(plugin) => resolved.choices[plugin.id] !== currentChoice(plugin),
|
||||
);
|
||||
}, [list, resolved]);
|
||||
|
||||
const apply = useCallback(async (): Promise<boolean> => {
|
||||
if (!list || !resolved) return !!loadError;
|
||||
if (!changed) return true;
|
||||
setApplying(true);
|
||||
setFailed([]);
|
||||
try {
|
||||
const result = await applyOnboardingPlugins(resolved.choices);
|
||||
await syncPlugins().catch(() => {});
|
||||
// Start again from how things are now, so going back and on again
|
||||
// does not apply twice, and a failure only stops Next once.
|
||||
const fresh = await getOnboardingPlugins().catch(() => null);
|
||||
const next = fresh ?? { ...list, pending: false };
|
||||
setList(next);
|
||||
setChoices(defaultChoices(next));
|
||||
stage?.setPlugins(next);
|
||||
if (result.failed.length > 0) {
|
||||
setFailed(result.failed);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} catch {
|
||||
setFailed([{ id: "", error: t("onboarding.pluginsApplyFailed") }]);
|
||||
return false;
|
||||
} finally {
|
||||
setApplying(false);
|
||||
}
|
||||
}, [list, resolved, changed, loadError, stage, t]);
|
||||
|
||||
useEffect(() => {
|
||||
setBeforeNext(apply);
|
||||
return () => setBeforeNext(null);
|
||||
}, [apply, setBeforeNext]);
|
||||
|
||||
useEffect(() => {
|
||||
setCanContinue(!!list || loadError);
|
||||
}, [list, loadError, setCanContinue]);
|
||||
|
||||
if (loadError) {
|
||||
return (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("onboarding.pluginsLoadFailed")}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
if (!list || !resolved) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
{t("common.loading")}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const regular = list.plugins.filter((p) => !p.consent);
|
||||
const consent = list.plugins.filter((p) => p.consent);
|
||||
const groups = new Map<string, OnboardingPluginInfo[]>();
|
||||
for (const plugin of regular) {
|
||||
const group = groups.get(plugin.category) ?? [];
|
||||
group.push(plugin);
|
||||
groups.set(plugin.category, group);
|
||||
}
|
||||
const orderedGroups = [...groups.entries()].sort(
|
||||
([a], [b]) =>
|
||||
(CATEGORY_ORDER.indexOf(a) + 1 || 99) -
|
||||
(CATEGORY_ORDER.indexOf(b) + 1 || 99),
|
||||
);
|
||||
|
||||
const counts = { enabled: 0, disabled: 0, remove: 0 };
|
||||
for (const plugin of list.plugins) counts[resolved.choices[plugin.id]]++;
|
||||
const forcedBy = new Map(
|
||||
resolved.adjustments.map((a) => [
|
||||
a.id,
|
||||
a.requiredBy.map((id) => names.get(id) ?? id).join(", "),
|
||||
]),
|
||||
);
|
||||
|
||||
const setChoice = (id: string, choice: PluginChoice) =>
|
||||
setChoices((prev) => ({ ...prev, [id]: choice }));
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("onboarding.pluginsIntro")}{" "}
|
||||
<DocsLink core="pluginCatalog" className="text-xs">
|
||||
{t("onboarding.pluginsDocsLink")}
|
||||
</DocsLink>
|
||||
</p>
|
||||
|
||||
<div className="flex items-start gap-2 border border-border bg-muted/30 p-2.5 text-[11px] leading-snug text-muted-foreground">
|
||||
<Info size={13} className="mt-0.5 shrink-0 text-accent-brand" />
|
||||
<span>
|
||||
{list.reason === "upgrade" && (
|
||||
<>{t("onboarding.pluginsUpgradeNote")} </>
|
||||
)}
|
||||
{t("onboarding.pluginsRemoveNote")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 text-[11px]"
|
||||
onClick={() => setChoices(recommendedChoices(list))}
|
||||
>
|
||||
{t("onboarding.pluginsUseRecommended")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 text-[11px]"
|
||||
onClick={() =>
|
||||
setChoices(
|
||||
Object.fromEntries(list.plugins.map((p) => [p.id, "enabled"])),
|
||||
)
|
||||
}
|
||||
>
|
||||
{t("onboarding.pluginsEnableAll")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 text-[11px]"
|
||||
onClick={() =>
|
||||
setChoices(
|
||||
Object.fromEntries(
|
||||
list.plugins.map((p) => [
|
||||
p.id,
|
||||
p.consent ? choices[p.id] : "disabled",
|
||||
]),
|
||||
),
|
||||
)
|
||||
}
|
||||
>
|
||||
{t("onboarding.pluginsDisableAll")}
|
||||
</Button>
|
||||
</div>
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{t("onboarding.pluginsCounts", {
|
||||
enabled: counts.enabled,
|
||||
disabled: counts.disabled,
|
||||
removed: counts.remove,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{orderedGroups.map(([category, plugins]) => (
|
||||
<div key={category} className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{category}
|
||||
</span>
|
||||
{plugins.map((plugin) => {
|
||||
const choice = resolved.choices[plugin.id];
|
||||
const floor = forcedBy.has(plugin.id) ? RANK[choice] : 0;
|
||||
return (
|
||||
<div
|
||||
key={plugin.id}
|
||||
className="flex flex-col gap-2 border border-border bg-card p-2.5 sm:flex-row sm:items-center"
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-start gap-2.5">
|
||||
<PluginIconBox
|
||||
name={plugin.icon ?? undefined}
|
||||
size="sm"
|
||||
muted={choice === "remove"}
|
||||
/>
|
||||
<div className="flex min-w-0 flex-col gap-0.5">
|
||||
<span className="flex items-center gap-1.5 text-xs font-medium">
|
||||
{plugin.name}
|
||||
{plugin.recommended && (
|
||||
<span className="border border-accent-brand/40 px-1 text-[9px] font-semibold uppercase tracking-wider text-accent-brand">
|
||||
{t("onboarding.pluginsRecommended")}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-[10px] leading-snug text-muted-foreground">
|
||||
{plugin.description}
|
||||
</span>
|
||||
{forcedBy.has(plugin.id) && (
|
||||
<span className="text-[10px] text-accent-brand">
|
||||
{t("onboarding.pluginsKeptBecause", {
|
||||
names: forcedBy.get(plugin.id),
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label={plugin.name}
|
||||
className="flex shrink-0 border border-border"
|
||||
>
|
||||
{CHOICES.map((option) => (
|
||||
<button
|
||||
key={option}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={choice === option}
|
||||
disabled={RANK[option] < floor}
|
||||
onClick={() => setChoice(plugin.id, option)}
|
||||
className={`px-2.5 py-1 text-[11px] transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
|
||||
choice === option
|
||||
? option === "remove"
|
||||
? "bg-destructive/15 text-destructive"
|
||||
: "bg-accent-brand/15 text-accent-brand"
|
||||
: "text-muted-foreground hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
{t(`onboarding.pluginsChoice_${option}`)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{consent.length > 0 && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("onboarding.pluginsConsentTitle")}
|
||||
</span>
|
||||
{consent.map((plugin) => {
|
||||
const on = resolved.choices[plugin.id] === "enabled";
|
||||
return (
|
||||
<label
|
||||
key={plugin.id}
|
||||
className="flex cursor-pointer items-start gap-2.5 border border-border bg-card p-2.5"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-0.5 accent-[var(--accent-brand)]"
|
||||
checked={on}
|
||||
disabled={forcedBy.has(plugin.id)}
|
||||
onChange={(e) =>
|
||||
setChoice(
|
||||
plugin.id,
|
||||
e.target.checked ? "enabled" : "disabled",
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs font-medium">{plugin.name}</span>
|
||||
<span className="text-[10px] leading-snug text-muted-foreground">
|
||||
{plugin.description}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground/80">
|
||||
{t("onboarding.pluginsConsentNote")}
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{applying && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
{t("onboarding.pluginsApplying")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{failed.length > 0 && (
|
||||
<div className="flex flex-col gap-1 border border-destructive/40 bg-destructive/10 p-2.5 text-[11px]">
|
||||
<span className="flex items-center gap-1.5 font-medium text-destructive">
|
||||
<AlertTriangle size={13} />
|
||||
{t("onboarding.pluginsSomeFailed")}
|
||||
</span>
|
||||
{failed.map((f) => (
|
||||
<span key={`${f.id}:${f.error}`} className="text-muted-foreground">
|
||||
{f.id ? `${names.get(f.id) ?? f.id}: ${f.error}` : f.error}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,49 +1,16 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Fingerprint, KeyRound, ShieldCheck, Users } from "lucide-react";
|
||||
import { AuthEnrollmentSections } from "@/sidebar/AuthEnrollmentSections";
|
||||
|
||||
const ITEMS = [
|
||||
{ icon: KeyRound, key: "credentials" },
|
||||
{ icon: ShieldCheck, key: "twofa" },
|
||||
{ icon: Fingerprint, key: "identity" },
|
||||
{ icon: Users, key: "sharing" },
|
||||
] as const;
|
||||
|
||||
/**
|
||||
* Credential reuse and 2FA are the two things worth knowing before someone
|
||||
* types a password into a host form, so they get their own step rather than a
|
||||
* line buried in the feature list.
|
||||
*/
|
||||
/** A passkey or authenticator, set up right here when a plugin offers one. */
|
||||
export function SecurityStep() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-4">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("onboarding.securityIntro")}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{ITEMS.map(({ icon: Icon, key }) => (
|
||||
<div
|
||||
key={key}
|
||||
className="flex items-start gap-2.5 border border-border bg-card p-2.5"
|
||||
>
|
||||
<Icon size={14} className="mt-0.5 shrink-0 text-accent-brand" />
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs font-medium">
|
||||
{t(`onboarding.security_${key}`)}
|
||||
</span>
|
||||
<span className="text-[10px] leading-snug text-muted-foreground">
|
||||
{t(`onboarding.security_${key}_desc`)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] text-muted-foreground/70">
|
||||
{t("onboarding.securityEncryptionNote")}
|
||||
</p>
|
||||
<AuthEnrollmentSections />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FolderTree, Server, TerminalSquare } from "lucide-react";
|
||||
|
||||
const HIGHLIGHTS = [
|
||||
{
|
||||
icon: Server,
|
||||
titleKey: "onboarding.welcome_hosts",
|
||||
descKey: "onboarding.welcome_hosts_desc",
|
||||
},
|
||||
{
|
||||
icon: TerminalSquare,
|
||||
titleKey: "onboarding.welcome_terminal",
|
||||
descKey: "onboarding.welcome_terminal_desc",
|
||||
},
|
||||
{
|
||||
icon: FolderTree,
|
||||
titleKey: "onboarding.welcome_files",
|
||||
descKey: "onboarding.welcome_files_desc",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export function WelcomeStep() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("onboarding.welcomeIntro")}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{HIGHLIGHTS.map(({ icon: Icon, titleKey, descKey }) => (
|
||||
<div
|
||||
key={titleKey}
|
||||
className="flex items-start gap-2.5 border border-border bg-card p-2.5"
|
||||
>
|
||||
<Icon size={14} className="mt-0.5 shrink-0 text-accent-brand" />
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs font-medium">{t(titleKey)}</span>
|
||||
<span className="text-[10px] leading-snug text-muted-foreground">
|
||||
{t(descKey)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Columns2, PanelRight, Search, type LucideIcon } from "lucide-react";
|
||||
import { Kbd } from "@/components/kbd";
|
||||
import { useActionSlot } from "@/hooks/use-action-slot";
|
||||
|
||||
/**
|
||||
* The handful of navigation habits that make the app feel fast. Each row shows
|
||||
* the actual gesture rather than describing it, so it reads as a cheat sheet
|
||||
* people can come back to via "Run setup again".
|
||||
*/
|
||||
export function WorkflowStep() {
|
||||
const { t } = useTranslation();
|
||||
const pluginTips = useActionSlot("onboarding.workflow");
|
||||
const tips = [
|
||||
...[
|
||||
{ icon: Columns2, key: "split" },
|
||||
{ icon: PanelRight, key: "dock" },
|
||||
].map(({ icon, key }) => ({
|
||||
id: key,
|
||||
icon: icon as LucideIcon | undefined,
|
||||
title: t(`onboarding.workflow_${key}`),
|
||||
description: t(`onboarding.workflow_${key}_desc`),
|
||||
})),
|
||||
...pluginTips.map((tip) => ({
|
||||
id: tip.actionId,
|
||||
icon: tip.icon as LucideIcon | undefined,
|
||||
title: t(tip.titleKey),
|
||||
description: tip.descriptionKey ? t(tip.descriptionKey) : "",
|
||||
})),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("onboarding.workflowIntro")}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-start gap-2.5 border border-border bg-card p-2.5">
|
||||
<Search size={14} className="mt-0.5 shrink-0 text-accent-brand" />
|
||||
<div className="flex flex-1 flex-col gap-1">
|
||||
<span className="text-xs font-medium">
|
||||
{t("onboarding.workflow_palette")}
|
||||
</span>
|
||||
<span className="text-[10px] leading-snug text-muted-foreground">
|
||||
{t("onboarding.workflow_palette_desc")}
|
||||
</span>
|
||||
<span className="mt-0.5 flex items-center gap-1">
|
||||
<Kbd className="h-5 rounded-none bg-background px-1.5">Shift</Kbd>
|
||||
<Kbd className="h-5 rounded-none bg-background px-1.5">Shift</Kbd>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tips.map(({ icon: Icon, id, title, description }) => (
|
||||
<div
|
||||
key={id}
|
||||
className="flex items-start gap-2.5 border border-border bg-card p-2.5"
|
||||
>
|
||||
{Icon && (
|
||||
<Icon size={14} className="mt-0.5 shrink-0 text-accent-brand" />
|
||||
)}
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs font-medium">{title}</span>
|
||||
<span className="text-[10px] leading-snug text-muted-foreground">
|
||||
{description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useMemo } from "react";
|
||||
import { useActionSlot } from "@/hooks/use-action-slot";
|
||||
import {
|
||||
getActionPermission,
|
||||
getSlotContributions,
|
||||
} from "@/shell/action-registry";
|
||||
import {
|
||||
legacyStepDefs,
|
||||
mergeStepDefs,
|
||||
onboardingSteps,
|
||||
type OnboardingStepDef,
|
||||
} from "./onboarding-registry";
|
||||
import { CORE_STEPS } from "./onboarding-steps";
|
||||
import {
|
||||
listLoginMethodUIs,
|
||||
listSecondFactorUIs,
|
||||
useLoginMethods,
|
||||
useSecondFactors,
|
||||
} from "@/plugin-host/auth-registry";
|
||||
|
||||
/** Every onboarding step that exists right now, in flow order. */
|
||||
export function useOnboardingStepDefs(): OnboardingStepDef[] {
|
||||
const registered = onboardingSteps.useList();
|
||||
const legacy = useActionSlot("onboarding.steps");
|
||||
return useMemo(
|
||||
() => mergeStepDefs(CORE_STEPS, registered, legacyStepDefs(legacy)),
|
||||
[registered, legacy],
|
||||
);
|
||||
}
|
||||
|
||||
/** The same list outside React, for the boot gate and the baseline pass. */
|
||||
export function currentStepDefs(
|
||||
has: (permission: string) => boolean,
|
||||
): OnboardingStepDef[] {
|
||||
const legacy = getSlotContributions("onboarding.steps").filter((c) => {
|
||||
const permission = getActionPermission(c.actionId);
|
||||
return !permission || has(permission);
|
||||
});
|
||||
return mergeStepDefs(
|
||||
CORE_STEPS,
|
||||
onboardingSteps.list(),
|
||||
legacyStepDefs(legacy),
|
||||
);
|
||||
}
|
||||
|
||||
/** Whether a sign in plugin offers something to set up for the account. */
|
||||
export function canEnrollSecondFactor(): boolean {
|
||||
return [...listLoginMethodUIs(), ...listSecondFactorUIs()].some(
|
||||
(entry) => entry.enrollment,
|
||||
);
|
||||
}
|
||||
|
||||
export function useCanEnrollSecondFactor(): boolean {
|
||||
const methods = useLoginMethods();
|
||||
const factors = useSecondFactors();
|
||||
return [...methods, ...factors].some((entry) => entry.enrollment);
|
||||
}
|
||||
Reference in new issue
Block a user