@antelopejs/dms 0.15.0 → 0.16.0

package/frontend-vue/build/backend-boundary.ts

@@ -10,20 +10,32 @@ const QUERY_OR_HASH = /[?#].*$/;
 
 const backendRoots = new Map<string, string | null>();
 
-function packageName(manifest: string): unknown {
+/** Whether a parsed manifest names its package. */
+function isNamedManifest(value: unknown): value is { name: string } {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "name" in value &&
+    typeof value.name === "string"
+  );
+}
+
+/** The package name a `package.json` declares, or `undefined`. */
+function packageName(manifest: string): string | undefined {
   try {
-    const parsed: { name?: unknown } = JSON.parse(
-      readFileSync(manifest, "utf8"),
-    );
-    return parsed.name;
+    const parsed: unknown = JSON.parse(readFileSync(manifest, "utf8"));
+    return isNamedManifest(parsed) ? parsed.name : undefined;
   } catch {
     return undefined;
   }
 }
 
+/** The directory of the backend package that holds `directory`, or null. */
 function backendRoot(directory: string): string | null {
   const known = backendRoots.get(directory);
-  if (known !== undefined) return known;
+  if (known !== undefined) {
+    return known;
+  }
   const manifest = join(directory, "package.json");
   const parent = dirname(directory);
   let root: string | null = null;
@@ -44,7 +56,9 @@ function backendRoot(directory: string): string | null {
  */
 function backendSourceFile(id: string): string | undefined {
   const path = id.replace(QUERY_OR_HASH, "");
-  if (!isAbsolute(path)) return undefined;
+  if (!isAbsolute(path)) {
+    return undefined;
+  }
   let real: string;
   try {
     real = realpathSync(path);
@@ -52,39 +66,56 @@ function backendSourceFile(id: string): string | undefined {
     return undefined;
   }
   const root = backendRoot(dirname(real));
-  if (root === null) return undefined;
+  if (root === null) {
+    return undefined;
+  }
   return relative(root, real).split(sep)[0] === BACKEND_SOURCE
     ? real
     : undefined;
 }
 
 /**
- * Fails the build, the dev server and the tests when a module of the frontend
- * resolves to a file under `packages/dms/src`: the browser reaches the
+ * Fails the build and the dev server when a module of the frontend resolves to
+ * a file under the `src` of the backend package: the browser reaches the
  * backend only through its HTTP interface. It checks what the whole resolution
- * chain returns, so an alias is seen through and a symlink the resolver
- * returns is followed to its real path, and it runs before the other plugins
- * (`enforce: "pre"`). The build copies the frontend module with its symlinks
- * resolved, so only `pnpm run deps` sees a symlink inside the module.
+ * chain returns, an id marked external included, so an alias is seen through
+ * and a symlink the resolver returns is followed to its real path, and it runs
+ * before the other plugins (`enforce: "pre"`). Vite builds workers with their
+ * own plugin list, so the plugin adds itself there too.
+ *
+ * antelopejs-sync writes this file from `@antelopejs/tooling-configs` and
+ * restores it on every run: change the plugin in the pack, not here.
  */
 export function backendBoundary(): VitePlugin {
   return {
-    name: "dms:backend-boundary",
+    ...boundaryCheck(),
+    config: () => ({ worker: { plugins: () => [boundaryCheck()] } }),
+  };
+}
+
+/** The check alone, as a worker build runs it. */
+function boundaryCheck(): VitePlugin {
+  return {
+    name: `${BACKEND_PACKAGE}:backend-boundary`,
     enforce: "pre",
     async resolveId(source, importer, options) {
       const resolved = await this.resolve(source, importer, {
         ...options,
         skipSelf: true,
       });
-      if (resolved === null || resolved.external) return resolved;
+      if (resolved === null) {
+        return resolved;
+      }
       const file = backendSourceFile(resolved.id);
-      if (file === undefined) return resolved;
+      if (file === undefined) {
+        return resolved;
+      }
       const from =
         importer === undefined
           ? "an entry point"
           : importer.replace(QUERY_OR_HASH, "");
       return this.error(
-        `Backend boundary: ${from} imports ${file}, which is under packages/dms/src. The frontend reaches the backend only through its HTTP interface.`,
+        `Backend boundary: ${from} imports ${file}, which is under the src of ${BACKEND_PACKAGE}. The frontend reaches the backend only through its HTTP interface.`,
       );
     },
   };

package/frontend-vue/dms.frontend.ts

@@ -8,6 +8,7 @@ import {
   type DmsFrontendSdk,
   useDmsRuntimeConfig,
 } from "#dms/frontend-module";
+import { lazyPlugin } from "./lazy-plugin";
 import authMiddleware from "./layers/dms-auth/app/middleware/auth";
 import permissionsPreloadPlugin from "./layers/dms-auth/app/plugins/permissions-preload";
 import asyncDataScopePlugin from "./layers/dms-core/app/plugins/async-data-scope";
@@ -164,20 +165,15 @@ function registerDeferredPlugins(
 function registerPlugins(sdk: Parameters<DmsFrontendModule["setup"]>[0]): void {
   const clientOnly = { clientOnly: true };
   if (import.meta.env.DEV) {
-    sdk.registerPlugin(async (context) => {
-      const plugin = await import(
-        "./layers/dms-layout/app/plugins/dms-dev-reload.client"
-      );
-      await plugin.default(context);
-    }, clientOnly);
+    sdk.registerPlugin(
+      lazyPlugin(
+        () => import("./layers/dms-layout/app/plugins/dms-dev-reload.client"),
+      ),
+      clientOnly,
+    );
 
     sdk.registerPlugin(
-      async (context) => {
-        const plugin = await import(
-          "./layers/dms-core/app/plugins/dev-error-log"
-        );
-        await plugin.default(context);
-      },
+      lazyPlugin(() => import("./layers/dms-core/app/plugins/dev-error-log")),
       { ...clientOnly, enforce: "pre" },
     );
   }

package/frontend-vue/layers/dms-auth/server/accounts.ts

@@ -1,6 +1,10 @@
 import { randomUUID } from "node:crypto";
 import type { DmsServerEvent, DmsSession } from "#dms/server";
-import { isString } from "../../dms-core/app/utils/type-check";
+import {
+  isBoolean,
+  isObject,
+  isString,
+} from "../../dms-core/app/utils/type-check";
 
 /**
  * The accounts this browser is signed in to: an index of their descriptors,
@@ -68,8 +72,42 @@ function descriptor(session: DmsSession, accountId: string): AccountDescriptor {
   };
 }
 
+function isOptionalText(value: unknown): value is string | undefined {
+  return value === undefined || isString(value);
+}
+
+function isAccountDescriptor(value: unknown): value is AccountDescriptor {
+  return (
+    isObject(value) &&
+    value !== null &&
+    isString(value.accountId) &&
+    isOptionalText(value.userId) &&
+    isOptionalText(value.email) &&
+    isOptionalText(value.name) &&
+    isOptionalText(value.activeTenantId) &&
+    isBoolean(value.persistent)
+  );
+}
+
+function isStoredAccount(value: unknown): value is StoredAccount {
+  return (
+    isAccountDescriptor(value) &&
+    isObject(value) &&
+    isOptionalText(value.refreshToken)
+  );
+}
+
+function isAccountIndex(value: unknown): value is AccountIndex {
+  return (
+    isObject(value) &&
+    value !== null &&
+    !Array.isArray(value) &&
+    Object.values(value).every(isAccountDescriptor)
+  );
+}
+
 export function readAccounts(event: DmsServerEvent): AccountIndex {
-  return event.cookies.readSealed<AccountIndex>(ACCOUNT_INDEX_COOKIE) ?? {};
+  return event.cookies.readSealed(ACCOUNT_INDEX_COOKIE, isAccountIndex) ?? {};
 }
 
 function writeAccountIndex(event: DmsServerEvent, accounts: AccountIndex) {
@@ -84,7 +122,10 @@ export function readAccount(
   accountId: Parameters<typeof isString>[0],
 ): StoredAccount | undefined {
   if (!isString(accountId) || !UUID.test(accountId)) return undefined;
-  return event.cookies.readSealed<StoredAccount>(accountCookieName(accountId));
+  return event.cookies.readSealed(
+    accountCookieName(accountId),
+    isStoredAccount,
+  );
 }
 
 export function storeAccount(

package/frontend-vue/layers/dms-auth/server/actions.ts

@@ -1,4 +1,8 @@
-import { isString } from "../../dms-core/app/utils/type-check";
+import {
+  isBoolean,
+  isObject,
+  isString,
+} from "../../dms-core/app/utils/type-check";
 import type { DmsBackendRequest, DmsServerEvent } from "#dms/server";
 import {
   isPersistent,
@@ -30,6 +34,15 @@ interface PendingLogin {
   persistent: boolean;
 }
 
+function isPendingLogin(value: unknown): value is PendingLogin {
+  return (
+    isObject(value) &&
+    value !== null &&
+    isString(value.token) &&
+    isBoolean(value.persistent)
+  );
+}
+
 /**
  * Calls a backend endpoint that opens a session and, unless it asks for a
  * second step, writes the session and stores the account.
@@ -51,7 +64,7 @@ async function establishWith(
       { maxAge: PENDING_LOGIN_LIFETIME_S, path: PENDING_LOGIN_PATH },
     );
   if (result.requires_2fa || result.requires_tenant_assignment) return result;
-  if (event.cookies.readSealed(PENDING_LOGIN))
+  if (event.cookies.readSealed(PENDING_LOGIN, isPendingLogin))
     event.cookies.clear(PENDING_LOGIN, { path: PENDING_LOGIN_PATH });
   const account = persistAccountSession(event, sessionFrom(result, persistent));
   return { user: result.user, account };
@@ -83,9 +96,9 @@ export async function signup(event: DmsServerEvent) {
  */
 export async function verifyTwoFactor(event: DmsServerEvent) {
   const input = await event.readJson<Input>();
-  const pending = event.cookies.readSealed<PendingLogin>(PENDING_LOGIN);
+  const pending = event.cookies.readSealed(PENDING_LOGIN, isPendingLogin);
   const persistent =
-    isString(input.token) && pending?.token === input.token
+    pending !== undefined && pending.token === input.token
       ? isPersistent(pending)
       : true;
   return establishWith(event, "/api/auth/verify-2fa", input, persistent);

package/frontend-vue/layers/dms-auth/server/oauth.ts

@@ -3,7 +3,16 @@ import type { DmsServerEvent } from "#dms/server";
 import { privateSecret } from "../../../server/private-options";
 import { persistAccountSession } from "./accounts";
 import { type SessionTokens, sessionFrom } from "./session";
-import { isNumber, isString } from "../../dms-core/app/utils/type-check";
+import type {
+  NoHandoff,
+  NoWorkspaceHandoff,
+  TwoFactorHandoff,
+} from "../shared/oauth";
+import {
+  isNumber,
+  isObject,
+  isString,
+} from "../../dms-core/app/utils/type-check";
 
 const FLOW = "dms_oauth_flow";
 const HANDOFF = "dms_oauth_handoff";
@@ -43,6 +52,35 @@ interface OAuthResult extends SessionTokens {
 
 const attempts = new Map<string, RateWindow>();
 
+function isOAuthFlow(value: unknown): value is OAuthFlow {
+  return (
+    isObject(value) &&
+    value !== null &&
+    isString(value.state) &&
+    isNumber(value.expiresAt) &&
+    isString(value.redirect) &&
+    isString(value.language) &&
+    isString(value.invite)
+  );
+}
+
+function isTextList(value: unknown): value is string[] {
+  return Array.isArray(value) && value.every(isString);
+}
+
+function isOAuthHandoff(
+  value: unknown,
+): value is TwoFactorHandoff | NoWorkspaceHandoff {
+  if (!isObject(value) || value === null) return false;
+  if (value.kind === "2fa")
+    return isString(value.token) && isTextList(value.methods);
+  return (
+    value.kind === "no-workspace" &&
+    isString(value.token) &&
+    isString(value.provider)
+  );
+}
+
 function sweepAttempts(now: number) {
   for (const [key, window] of attempts)
     if (now - window.startedAt >= RATE_WINDOW_MS) attempts.delete(key);
@@ -155,7 +193,6 @@ function sameState(
   left: OAuthFlow["state"],
   right: OAuthFlow["state"],
 ): boolean {
-  if (!isString(left) || !isString(right)) return false;
   const a = Buffer.from(left);
   const b = Buffer.from(right);
   return a.length === b.length && timingSafeEqual(a, b);
@@ -239,7 +276,7 @@ export async function oauthCallback(event: DmsServerEvent): Promise<Response> {
   const { provider } = event.params;
   if (!isValidOAuthProvider(provider) || rateLimited(event, "callback"))
     return errorRedirect(FAILED);
-  const flow = event.cookies.readSealed<OAuthFlow>(FLOW);
+  const flow = event.cookies.readSealed(FLOW, isOAuthFlow);
   event.cookies.clear(FLOW, { path: FLOW_PATH });
   const query = event.url.searchParams;
   if (query.has("error")) return errorRedirect("error.oauth.cancelled");
@@ -253,7 +290,8 @@ export async function oauthCallback(event: DmsServerEvent): Promise<Response> {
  * finish (a 2FA step, a workspace to pick), once.
  */
 export function oauthHandoff(event: DmsServerEvent) {
-  const handoff = event.cookies.readSealed(HANDOFF) ?? { kind: "none" };
+  const handoff: TwoFactorHandoff | NoWorkspaceHandoff | NoHandoff =
+    event.cookies.readSealed(HANDOFF, isOAuthHandoff) ?? { kind: "none" };
   event.cookies.clear(HANDOFF, { path: FLOW_PATH });
   return handoff;
 }

package/frontend-vue/layers/dms-core/app/types/watch.ts

@@ -21,7 +21,6 @@ export interface WatchAction {
   component: string;
   event: string;
   functionId: string;
-  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- Registered action functions own their heterogeneous parameters; no shared schema or ComponentOptionsData contract covers all public action callers.
-  params?: Record<string, unknown>;
+  params?: object;
   onParam?: WatchActionCondition | WatchActionCondition[];
 }

package/frontend-vue/layers/dms-core/i18n/locales/core-en-GB.json

@@ -64,6 +64,7 @@
     "invite_used": "This invitation was already used. Please log in.",
     "onboarding_already_completed": "Onboarding already completed.",
     "admin_already_set": "An administrator account already exists.",
+    "invalid_setup_token": "The setup token is missing or wrong. Use the address in the server log, or the value of DMS_SETUP_TOKEN.",
     "user_creation_failed": "The user account could not be created. Please try again.",
     "settings_not_found": "General settings not found.",
     "token_expired": "The validation code has expired.",

package/frontend-vue/layers/dms-core/i18n/locales/core-fr-FR.json

@@ -64,6 +64,7 @@
     "invite_used": "Cette invitation a déjà été utilisée. Veuillez vous connecter.",
     "onboarding_already_completed": "L'onboarding a déjà été completé.",
     "admin_already_set": "Un compte administrateur existe déjà.",
+    "invalid_setup_token": "Le jeton d'installation est absent ou incorrect. Utilisez l'adresse affichée dans les logs du serveur, ou la valeur de DMS_SETUP_TOKEN.",
     "user_creation_failed": "Le compte utilisateur n'a pas pu être créé. Veuillez réessayer.",
     "settings_not_found": "Les paramètres généraux n'ont pas été trouvés.",
     "token_expired": "Le code de validation a expiré.",

package/frontend-vue/layers/dms-core/shared/types/app-config.ts

@@ -14,6 +14,11 @@ export interface DmsLogoSources {
 
 /** The logos of an instance, one per place it is drawn. */
 export interface DmsBrandingLogo {
+  /**
+   * The name a screen reader announces for the logo: the application's name.
+   * Set it with a logo of your own.
+   */
+  alt?: string;
   /** The expanded sidebar and the auth pages. */
   default: DmsLogoSources;
   /** The icon-only sidebar. */

package/frontend-vue/layers/dms-layout/app/app.config.ts

@@ -30,6 +30,7 @@ function dmsColors(): DmsUiColors {
 
 function dmsLogo(): DmsBrandingLogo {
   return {
+    alt: "Antelope DMS",
     default: {
       light: "/images/antelope-logo/light.svg",
       dark: "/images/antelope-logo/dark.svg",

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardSidebar.vue

@@ -13,6 +13,7 @@ import { useSidebarState } from "./sidebarState";
 import { useKeyboardPlatform } from "#dms-ui/app/composables/global/keyboardPlatform";
 import { useMediaQuery } from "@vueuse/core";
 import DmsSidebarUserMenu from "./SidebarUserMenu.vue";
+import { useInstalledModuleCount } from "../../../composables/page/useInstalledModules";
 
 const MODULES_PATH = "/modules";
 
@@ -205,14 +206,7 @@ watch(
   { immediate: true },
 );
 
-const moduleCount = computed(() => {
-  const modulesNode =
-    siteLayout.siteLayoutTree.value?.children[MODULES_TREE_KEY];
-  if (!modulesNode) return 0;
-  return modulesNode.childrenOrders.filter(
-    (childId) => modulesNode.children[childId]?.isModuleRoot,
-  ).length;
-});
+const moduleCount = useInstalledModuleCount();
 
 const footerItems = computed((): NavigationMenuItem[] => {
   const result: NavigationMenuItem[] = [];
@@ -297,7 +291,13 @@ const footerItems = computed((): NavigationMenuItem[] => {
           "
           :class="isRail(sidebarRail) ? 'size-7' : 'h-12 w-auto'"
           class="object-contain"
-          :alt="t('navigation.goToHomepage')"
+          :alt="
+            appConfig.branding?.logo?.alt
+              ? t('navigation.goToBrandHomepage', {
+                  name: appConfig.branding.logo.alt,
+                })
+              : t('navigation.goToHomepage')
+          "
         />
       </DmsLink>
     </template>

package/frontend-vue/layers/dms-layout/app/components/layout/AppLogo.vue

@@ -7,5 +7,6 @@ const appConfig = useDmsAppConfig();
     v-if="appConfig.branding.logo"
     :light="appConfig.branding?.logo?.default.light"
     :dark="appConfig.branding?.logo?.default.dark"
+    :alt="appConfig.branding.logo.alt"
   />
 </template>

package/frontend-vue/layers/dms-layout/app/composables/page/useInstalledModules.ts

@@ -0,0 +1,78 @@
+import type { StoreListing } from "#dms-core/app/types/module-store";
+import type { ModuleCatalogEntry } from "#dms-core/app/types/page";
+import type { Ref } from "vue";
+import {
+  sortStoreModules,
+  storeOnlyModules,
+  toModuleStoreEntry,
+  withStoreDetails,
+} from "../../build/utils/module-store-catalog";
+import { ENDPOINT_STORE_LISTING } from "./useModuleStore";
+import { useModulesListing } from "./useModulesListing";
+
+/**
+ * The installed modules, as the Modules page lists them and the sidebar
+ * counts them: the modules that register pages, with the store's details,
+ * and the installed store modules that register none, such as the Builder.
+ * Both read it here, so the badge and the page never count differently.
+ *
+ * @param modulesListing The registered modules
+ * @param moduleStore The module store
+ */
+export const useInstalledModules = (
+  modulesListing: ReturnType<typeof useModulesListing>,
+  moduleStore: { listing: Readonly<Ref<StoreListing | undefined>> },
+) => {
+  const { locale } = useI18n();
+  const { processI18n } = useTranslation();
+
+  const storeModules = computed(() =>
+    sortStoreModules(
+      (moduleStore.listing.value?.modules ?? []).map((entry) =>
+        toModuleStoreEntry(entry, modulesListing.modules.value ?? []),
+      ),
+      processI18n,
+      locale.value,
+    ),
+  );
+
+  const modules = computed<ModuleCatalogEntry[]>(() => {
+    const registered = withStoreDetails(
+      (modulesListing.modules.value ?? []).filter((entry) => entry.hasAccess),
+      storeModules.value,
+    );
+    return [...registered, ...storeOnlyModules(storeModules.value, registered)];
+  });
+
+  return { storeModules, modules };
+};
+
+/**
+ * How many modules are installed, for the sidebar's badge. The store listing
+ * waits on the npm registry, so a server render must not wait for it: the
+ * browser reads it, and the count shows once mounted and the read is over,
+ * whether it answered or failed. Until then the badge is absent, on the server
+ * and on the browser's first render, which a page that handed the listing
+ * over (the Modules page) would otherwise have filled in and mismatched, and
+ * while the read runs, so the count never shows without the store's modules.
+ */
+export const useInstalledModuleCount = () => {
+  const isOwner = useIsOwner();
+  const storeListing = useApiData<StoreListing>(
+    () => (isOwner.value ? ENDPOINT_STORE_LISTING : null),
+    { server: false },
+  );
+  const { modules } = useInstalledModules(useModulesListing(), {
+    listing: computed(() => storeListing.data.value ?? undefined),
+  });
+  const isMounted = ref(false);
+  onMounted(() => (isMounted.value = true));
+  const isSettled = computed(
+    () =>
+      storeListing.status.value === "success" ||
+      storeListing.status.value === "error",
+  );
+  return computed(() =>
+    isMounted.value && isSettled.value ? modules.value.length : 0,
+  );
+};

package/frontend-vue/layers/dms-layout/app/custom-pages/modules.vue

@@ -20,7 +20,6 @@ import {
   useModulesListing,
 } from "../composables/page/useModulesListing";
 import { useModuleHistory } from "../composables/page/useModuleHistory";
-import type { ModuleCatalogEntry } from "#dms-core/app/types/page";
 import {
   MODULE_CATEGORY_ALL,
   MODULE_STORE_PATH,
@@ -33,13 +32,8 @@ import {
   summarizeModules,
   type ModuleSortMode,
 } from "../build/utils/modules-catalog";
-import {
-  sortStoreModules,
-  storeOnlyModules,
-  storeOpenTarget,
-  toModuleStoreEntry,
-  withStoreDetails,
-} from "../build/utils/module-store-catalog";
+import { storeOpenTarget } from "../build/utils/module-store-catalog";
+import { useInstalledModules } from "../composables/page/useInstalledModules";
 import { useModuleStore } from "../composables/page/useModuleStore";
 import { useModuleStoreActions } from "../composables/page/useModuleStoreActions";
 import DmsSearchInput from "#dms-ui/app/entries/components/form/SearchInput";
@@ -123,26 +117,13 @@ const isInitiallyLoading = computed(
 );
 const isRetrying = ref(false);
 
-const storeModules = computed(() =>
-  sortStoreModules(
-    (moduleStore.listing.value?.modules ?? []).map((entry) =>
-      toModuleStoreEntry(entry, modulesListing.modules.value ?? []),
-    ),
-    processI18n,
-    locale.value,
-  ),
+const { storeModules, modules } = useInstalledModules(
+  modulesListing,
+  moduleStore,
 );
 const storeEntries = computed(
   () => new Map(storeModules.value.map((entry) => [entry.id, entry])),
 );
-
-const modules = computed<ModuleCatalogEntry[]>(() => {
-  const registered = withStoreDetails(
-    (modulesListing.modules.value ?? []).filter((entry) => entry.hasAccess),
-    storeModules.value,
-  );
-  return [...registered, ...storeOnlyModules(storeModules.value, registered)];
-});
 const summary = computed(() => summarizeModules(modules.value));
 
 const visitedAt = computed(

package/frontend-vue/layers/dms-layout/i18n/locales/layout-en-GB.json

@@ -1,6 +1,7 @@
 {
   "navigation": {
-    "goToHomepage": "Go to homepage"
+    "goToHomepage": "Go to homepage",
+    "goToBrandHomepage": "{name}, go to homepage"
   },
   "header": {
     "home": "Home",

package/frontend-vue/layers/dms-layout/i18n/locales/layout-fr-FR.json

@@ -1,6 +1,7 @@
 {
   "navigation": {
-    "goToHomepage": "Aller à la page d'accueil"
+    "goToHomepage": "Aller à la page d'accueil",
+    "goToBrandHomepage": "{name}, aller à la page d'accueil"
   },
   "header": {
     "home": "Accueil",

package/frontend-vue/layers/dms-onboarding/app/components/onboarding/steps/register.vue

@@ -23,6 +23,8 @@ import {
 
 interface RegisterStepProps {
   platform: OnboardingPlatform;
+  /** The token the address carried; empty when the wizard has to ask for it. */
+  setupToken: string;
 }
 
 interface RegisterStepEmits {
@@ -43,6 +45,7 @@ const MAX_NAME_PART_LENGTH = 100;
 
 const isLoading = ref(false);
 const isRegistered = ref(false);
+const asksForSetupToken = !props.setupToken;
 
 const namePart = z.string().trim().min(1).max(MAX_NAME_PART_LENGTH);
 
@@ -52,12 +55,14 @@ const fields = z
     lastName: namePart,
     email: z.string().trim().email(),
     password: passwordSchema,
+    setupToken: z.string().trim().min(1),
   })
   .transform((data) => ({
     firstName: striptags(data.firstName),
     lastName: striptags(data.lastName),
     email: striptags(data.email),
     password: data.password,
+    setupToken: data.setupToken,
   }));
 
 type Schema = z.output<typeof fields>;
@@ -68,6 +73,7 @@ const state = reactive<Partial<Schema>>({
   lastName: undefined,
   email: undefined,
   password: undefined,
+  setupToken: props.setupToken,
 });
 useLiveFormErrors(form, state);
 
@@ -106,7 +112,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
     }
 
     await showError(error, "page.onboarding.administrator.error_title", {
-      fields: ["firstName", "lastName", "email", "password"],
+      fields: ["firstName", "lastName", "email", "password", "setupToken"],
       form,
     });
   } finally {
@@ -139,6 +145,20 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
     >
       <AuthFormAlert :error="formError" />
 
+      <UFormField
+        v-if="asksForSetupToken"
+        :label="$t('page.onboarding.administrator.setup_token')"
+        :help="$t('page.onboarding.administrator.setup_token_help')"
+        name="setupToken"
+      >
+        <UInput
+          v-model="state.setupToken"
+          autocomplete="off"
+          size="lg"
+          class="w-full"
+        />
+      </UFormField>
+
       <div class="grid gap-3 sm:grid-cols-2">
         <UFormField
           :label="$t('page.onboarding.administrator.first_name')"