@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/dms.frontend.ts

@@ -10,14 +10,17 @@ import authMiddleware from "./layers/dms-auth/app/middleware/auth";
 import homepageRedirectMiddleware from "./layers/dms-layout/app/middleware/homepage-redirect.global";
 import moduleRoutingMiddleware from "./layers/dms-layout/app/middleware/module-routing.global";
 import pageLeaveGuardMiddleware from "./layers/dms-layout/app/middleware/page-leave-guard.global";
+import accessibilityPlugin from "./layers/dms-layout/app/plugins/accessibility";
 import colorModePlugin from "./layers/dms-layout/app/plugins/color-mode";
 import interfaceScalePlugin from "./layers/dms-layout/app/plugins/interface-scale";
-import languageSyncPlugin from "./layers/dms-layout/app/plugins/language-sync";
+import fontPreloadPlugin from "./layers/dms-layout/app/plugins/font-preload";
+import permissionPreviewPrepaintPlugin from "./layers/dms-layout/app/plugins/permission-preview-prepaint";
+import regionalPreferencesPlugin from "./layers/dms-layout/app/plugins/regional-preferences";
 import seoPlugin from "./layers/dms-layout/app/plugins/seo";
 import onboardingMiddleware from "./layers/dms-onboarding/app/middleware/onboarding.global";
 import registerPlugin from "./layers/dms-ui/app/plugins/register";
 import shortcutsPlugin from "./layers/dms-ui/app/plugins/shortcuts";
-import tableViewDisplaysPlugin from "./layers/dms-ui/app/plugins/table-view-displays.client";
+import tableViewDisplaysPlugin from "./layers/dms-ui/app/plugins/table-view-displays";
 import "./layers/dms-layout/app/assets/css/main.css";
 import type {} from "./layers/dms-core/shared/types/runtime-config";
 import type {} from "./layers/dms-core/shared/types/app-config";
@@ -34,9 +37,13 @@ interface DmsPublicOptions {
   };
 }
 
-const components = import.meta.glob<VueModule>(
-  "./layers/**/app/{components,build/components}/**/*.vue",
-);
+// The build/ components are registered too, so a backend page tree can name
+// them, but they stay the layer's internals: never auto-imported, and not a
+// surface other modules should build on.
+const components = import.meta.glob<VueModule>([
+  "./layers/**/app/components/**/*.vue",
+  "./layers/**/app/build/components/**/*.vue",
+]);
 const customPages = import.meta.glob<VueModule>(
   "./layers/**/app/custom-pages/**/*.vue",
 );
@@ -62,7 +69,7 @@ function componentName(path: string): string {
     /^.*\/(?:components|build\/components)\//,
     "",
   );
-  return `Dms${pascalCase(relativePath.split("/").at(-1) ?? relativePath)}`;
+  return pascalCase(relativePath.split("/").at(-1) ?? relativePath);
 }
 
 function entryName(path: string, directory: string): string {
@@ -83,6 +90,14 @@ function lazyComponent(loader: VueLoader): Component {
   return defineAsyncComponent(async () => (await loader()).default);
 }
 
+// Components that render a backend block under a name of their own: the block
+// names (`dms-xxx-block`) resolve to the same component as the template name.
+const COMPONENT_ALIASES: Record<string, string> = {
+  ActivityFeed: "ActivityFeedBlock",
+  Section: "SectionBlock",
+  FieldRow: "FieldRowBlock",
+};
+
 function registerComponents(
   sdk: Parameters<DmsFrontendModule["setup"]>[0],
 ): void {
@@ -96,7 +111,10 @@ function registerComponents(
       );
     }
     names.set(name, path);
-    sdk.registerComponent(name, lazyComponent(loader));
+    const component = lazyComponent(loader);
+    sdk.registerComponent(name, component);
+    const alias = COMPONENT_ALIASES[name];
+    if (alias) sdk.registerComponent(alias, component);
   }
 }
 
@@ -117,7 +135,7 @@ function registerCustomPages(
     const name = entryName(path, "custom-pages").replace(/\/index$/, "");
     const component = lazyComponent(loader);
     sdk.registerPage(name, component, loader);
-    sdk.registerComponent(`Dms${pascalCase(name)}`, component);
+    sdk.registerComponent(pascalCase(name), component);
   });
 }
 
@@ -146,12 +164,15 @@ function registerPlugins(sdk: Parameters<DmsFrontendModule["setup"]>[0]): void {
     }, clientOnly);
   }
   sdk.registerPlugin(colorModePlugin);
+  sdk.registerPlugin(permissionPreviewPrepaintPlugin);
+  sdk.registerPlugin(fontPreloadPlugin);
   sdk.registerPlugin(interfaceScalePlugin);
-  sdk.registerPlugin(languageSyncPlugin);
+  sdk.registerPlugin(accessibilityPlugin);
+  sdk.registerPlugin(regionalPreferencesPlugin);
   sdk.registerPlugin(seoPlugin);
   sdk.registerPlugin(registerPlugin);
   sdk.registerPlugin(shortcutsPlugin);
-  sdk.registerPlugin(tableViewDisplaysPlugin, clientOnly);
+  sdk.registerPlugin(tableViewDisplaysPlugin);
   registerDeferredPlugins(sdk);
 }
 
@@ -171,6 +192,7 @@ function registerMiddleware(
 }
 
 const frontendModule: DmsFrontendModule = {
+  componentPrefix: "Dms",
   setup(sdk) {
     const runtimeDms = (useDmsRuntimeConfig().public as DmsPublicOptions).dms;
     if (runtimeDms && typeof window !== "undefined")

package/frontend-vue/layers/dms-auth/app/build/components/AuthBackLink.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from "#dms/frontend-module";
+
+interface AuthBackLinkProps {
+  to: RouteLocationRaw;
+  label: string;
+}
+
+const props = defineProps<AuthBackLinkProps>();
+</script>
+
+<template>
+  <!-- v2 .au-back: the quiet way out, under the card content. -->
+  <DmsLink
+    :to="props.to"
+    class="text-muted hover:text-highlighted mt-3.5 flex items-center justify-center gap-1.5 text-[13px] transition-colors max-sm:min-h-8"
+  >
+    <UIcon name="i-ph-arrow-left" class="size-3.5" />
+    {{ props.label }}
+  </DmsLink>
+</template>

package/frontend-vue/layers/dms-auth/app/build/components/AuthFormAlert.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { AuthFormError } from "../composables/useAuthFormError";
+
+interface AuthFormAlertProps {
+  error: AuthFormError | null;
+}
+
+const props = defineProps<AuthFormAlertProps>();
+</script>
+
+<template>
+  <UAlert
+    v-if="props.error"
+    role="alert"
+    color="error"
+    variant="subtle"
+    icon="i-ph-warning-circle"
+    :title="props.error.title"
+    :description="props.error.description"
+    :ui="{
+      root: 'px-3 py-2.5',
+      title: 'text-[13px] font-semibold',
+      description: 'text-[12.5px]',
+    }"
+  />
+</template>

package/frontend-vue/layers/dms-auth/app/build/components/AuthNewPasswordField.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import DmsPasswordInput from "#dms-ui/app/build/components/form/PasswordInput.vue";
+import PasswordRules from "../../../../dms-ui/app/components/check-list/PasswordRules.vue";
+
+interface AuthNewPasswordFieldProps {
+  label: string;
+  name?: string;
+  disabled?: boolean;
+}
+
+const RULES_ID = "new-password-rules";
+
+const props = withDefaults(defineProps<AuthNewPasswordFieldProps>(), {
+  name: "password",
+  disabled: false,
+});
+
+const password = defineModel<string | undefined>();
+</script>
+
+<template>
+  <!-- The rules list fills in live; the field itself turns red only with
+       the form's error (empty, or a rule still unmet) on blur or submit. -->
+  <UFormField :label="props.label" :name="props.name">
+    <DmsPasswordInput
+      v-model="password"
+      size="lg"
+      autocomplete="new-password"
+      :aria-describedby="RULES_ID"
+      :disabled="props.disabled"
+      labelled-toggle
+      has-lock-icon
+    />
+
+    <PasswordRules
+      :list-id="RULES_ID"
+      :password="password || ''"
+      class="mt-2"
+    />
+  </UFormField>
+</template>

package/frontend-vue/layers/dms-auth/app/build/components/AuthResendCode.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { AUTH_LINK_CLASS } from "../utils/authStyles";
+
+interface AuthResendCodeProps {
+  /** Seconds left before another code can be requested. */
+  cooldown: number;
+  disabled?: boolean;
+}
+
+interface AuthResendCodeEmits {
+  resend: [];
+}
+
+const props = withDefaults(defineProps<AuthResendCodeProps>(), {
+  disabled: false,
+});
+
+const emit = defineEmits<AuthResendCodeEmits>();
+
+const SECONDS_PER_MINUTE = 60;
+const SECONDS_DIGITS = 2;
+
+const countdown = computed(() => {
+  const minutes = Math.floor(props.cooldown / SECONDS_PER_MINUTE);
+  const seconds = String(props.cooldown % SECONDS_PER_MINUTE).padStart(
+    SECONDS_DIGITS,
+    "0",
+  );
+  return `${minutes}:${seconds}`;
+});
+</script>
+
+<template>
+  <!-- v2 .au-alt: "Didn't get it?" with the countdown until a new code. -->
+  <p class="text-muted mt-5 text-center text-[13px]" aria-live="polite">
+    {{ $t("page.auth.code.not_received") }}
+    <span v-if="props.cooldown > 0" class="text-dimmed">
+      {{ $t("page.auth.code.resend_in") }}
+      <span class="font-mono tabular-nums">{{ countdown }}</span>
+    </span>
+    <button
+      v-else
+      type="button"
+      :class="AUTH_LINK_CLASS"
+      :disabled="props.disabled"
+      @click="emit('resend')"
+    >
+      {{ $t("page.auth.code.resend") }}
+    </button>
+  </p>
+</template>

package/frontend-vue/layers/dms-auth/app/build/composables/useAuthFormError.ts

@@ -0,0 +1,102 @@
+import { ref, type Ref } from "vue";
+import {
+  type FieldErrorCode,
+  resolveFieldErrors,
+} from "#dms-core/app/composables/useFieldErrors";
+import { resolveApiErrorMessage } from "#dms-core/app/composables/useApiError";
+import { resolveApiMessage } from "#dms-core/app/composables/translation/useTranslation";
+
+export interface AuthFormError {
+  title: string;
+  description: string;
+}
+
+/** What an auth page's `UForm` exposes that a field error needs. */
+export interface AuthFormHandle {
+  setErrors: (errors: Array<{ name: string; message: string }>) => void;
+  getErrors: (name?: string) => Array<{ id?: string; name?: string }>;
+  validate: (options: { name: string; silent: boolean }) => Promise<unknown>;
+}
+
+/** Where an auth page shows the errors that belong to one of its fields. */
+export interface AuthFieldErrorTarget {
+  /** The fields of the page, by the name the API gives them. */
+  fields: readonly string[];
+  /** API error codes that belong to a field (`error.invalid_2fa_code`…). */
+  codes?: Readonly<Record<string, FieldErrorCode>>;
+  /** The page's `UForm`: the error goes under its `UFormField`. */
+  form?: Ref<AuthFormHandle | null | undefined>;
+  /** For a field outside a `UFormField` (the code cells): shows it itself. */
+  show?: (field: string, message: string) => void;
+}
+
+/**
+ * The errors of an auth form, following the dashboard's error rule: one that
+ * belongs to a field shows under that field (marked invalid, focused), any
+ * other shows inline above the fields (`AuthFormAlert`) instead of a toast
+ * that disappears before it is read. Translated when set, so it can be set
+ * after an `await` without the i18n context.
+ */
+export function useAuthFormError() {
+  const { t } = useI18n();
+  const translate = (key: string, params: Record<string, unknown> = {}) =>
+    t(key, params);
+  const formError = ref<AuthFormError | null>(null);
+
+  function showFormError(error: unknown, titleKey: string): void {
+    formError.value = {
+      title: t(titleKey),
+      description: resolveApiMessage(translate, resolveApiErrorMessage(error)),
+    };
+  }
+
+  function clearFormError(): void {
+    formError.value = null;
+  }
+
+  /**
+   * Focuses the first field in error. A page disables its fields while the
+   * request runs: the focus waits for its `finally` to enable them again.
+   */
+  function focusFirstFormError(form: AuthFormHandle): void {
+    setTimeout(() => {
+      const [first] = form.getErrors();
+      if (first?.id) document.getElementById(first.id)?.focus();
+    });
+  }
+
+  /**
+   * Shows an API error under the field it belongs to, else above the form.
+   *
+   * @returns Whether it went under a field
+   */
+  async function showError(
+    error: unknown,
+    titleKey: string,
+    target: AuthFieldErrorTarget,
+  ): Promise<boolean> {
+    const { fields } = resolveFieldErrors(error, {
+      fields: target.fields,
+      codes: target.codes,
+    });
+    const form = target.form?.value;
+    if (fields.length === 0 || (!target.show && !form)) {
+      showFormError(error, titleKey);
+      return false;
+    }
+    clearFormError();
+    const messages = fields.map((entry) => ({
+      name: entry.field,
+      message: resolveApiMessage(translate, entry.message),
+    }));
+    if (target.show) {
+      for (const { name, message } of messages) target.show(name, message);
+      return true;
+    }
+    form!.setErrors(messages);
+    focusFirstFormError(form!);
+    return true;
+  }
+
+  return { formError, showFormError, clearFormError, showError };
+}

package/frontend-vue/layers/dms-auth/app/build/utils/authStyles.ts

@@ -0,0 +1,8 @@
+import { TEXT_LINK_CLASS } from "#dms-ui/app/build/utils/textLink";
+
+/**
+ * v2 .au-link: the accent text link of the auth cards. Below `sm` an invisible
+ * box stretches its hit area to about 32px tall, so the small text stays easy
+ * to tap without moving anything around it.
+ */
+export const AUTH_LINK_CLASS = `${TEXT_LINK_CLASS} max-sm:relative max-sm:after:absolute max-sm:after:-inset-x-1 max-sm:after:-inset-y-1.5 max-sm:after:content-['']`;

package/frontend-vue/layers/dms-auth/app/components/OAuthButtons.vue

@@ -31,7 +31,8 @@ function startUrl(providerId: string): string {
 </script>
 
 <template>
-  <div v-if="providers.length" class="space-y-4 pb-7">
+  <!-- v2 .au-oauth: secondary buttons first, then the mono "or" separator. -->
+  <div v-if="providers.length" class="mt-6 grid gap-2.5">
     <UButton
       v-for="provider in providers"
       :key="provider.id"
@@ -41,6 +42,8 @@ function startUrl(providerId: string): string {
       color="neutral"
       variant="outline"
       size="lg"
+      class="justify-center"
+      :ui="{ leadingIcon: 'size-[18px]' }"
       external
       block
     />
@@ -49,10 +52,8 @@ function startUrl(providerId: string): string {
       {{ note }}
     </p>
 
-    <USeparator>
-      <span class="text-dimmed text-xs font-medium uppercase">
-        {{ $t("page.auth.oauth.separator") }}
-      </span>
+    <USeparator class="mt-3" :ui="{ border: 'border-default' }">
+      <DmsEyebrow as="span" :label="$t('page.auth.oauth.separator')" />
     </USeparator>
   </div>
 </template>

package/frontend-vue/layers/dms-auth/app/composables/useLogout.ts

@@ -1,3 +1,5 @@
+import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
+
 const SWITCH_ACCOUNT_ROUTE = "/auth/accounts";
 const FALLBACK_AUTH_ROUTE = "/auth";
 
@@ -8,14 +10,17 @@ const FALLBACK_AUTH_ROUTE = "/auth";
  *
  * Clears the session even when the user object is malformed (missing `_id`),
  * so logout never silently no-ops; only the multi-account cleanup needs the id.
+ * Any "Preview as role" state goes too.
  */
 export function useLogout() {
   const { user, clear: clearSession } = useUserSession<User>();
   const { accounts, removeAccount } = useMultiAccount();
+  const { purge: purgePermissionPreviews } = usePermissionPreview();
 
   async function logout(): Promise<void> {
     const userId = user.value?._id;
 
+    purgePermissionPreviews();
     await clearSession();
     if (userId) {
       await removeAccount(userId);

package/frontend-vue/layers/dms-auth/app/custom-pages/auth/2fa.vue

@@ -1,28 +1,61 @@
 <script setup lang="ts">
-import { useWindowSize } from "@vueuse/core";
+import { nextTick, useTemplateRef } from "vue";
+import StageCard from "../../../../dms-layout/app/build/components/layout/StageCard.vue";
+import AuthBackLink from "../../build/components/AuthBackLink.vue";
+import DmsOtpInput from "#dms-ui/app/build/components/form/OtpInput.vue";
+import AuthFormAlert from "../../build/components/AuthFormAlert.vue";
+import { useAuthFormError } from "../../build/composables/useAuthFormError";
+import { AUTH_LINK_CLASS } from "../../build/utils/authStyles";
+import { codeEntryError } from "#dms-core/app/composables/useFormValidation";
+
+type TwoFactorMethod = "totp" | "email";
 
 const { t } = useI18n();
 const toast = useToast();
 const route = useDmsRoute();
-const { width } = useWindowSize();
+const { processApiMessage } = useTranslation();
+const { formError, showFormError, clearFormError, showError } =
+  useAuthFormError();
 
 const token = computed(() => (route.query.token as string) || "");
 const availableMethods = computed(() =>
   ((route.query.methods as string) || "").split(",").filter(Boolean),
 );
 
-const MOBILE_BREAKPOINT = 375;
 const PIN_LENGTH = 6;
-
-const pinSize = computed(() => (width.value < MOBILE_BREAKPOINT ? "lg" : "xl"));
+// Refusals of the typed code: shown under the cells, not above the form.
+const CODE_ERRORS = {
+  "error.invalid_2fa_code": "code",
+  "error.2fa_code_expired": "code",
+} as const;
+
+const METHOD_ICONS: Record<TwoFactorMethod, string> = {
+  totp: "i-ph-device-mobile",
+  email: "i-ph-envelope-simple",
+};
+
+const METHOD_DESCRIPTION_KEYS: Record<TwoFactorMethod, string> = {
+  totp: "page.2fa.description_totp",
+  email: "page.2fa.description_email",
+};
 
 const isLoading = ref(false);
-const activeMethod = ref<"totp" | "email">("totp");
+const activeMethod = ref<TwoFactorMethod>("totp");
 const pin = ref<string[]>([]);
 const isEmailSent = ref(false);
+const codeError = ref<string>();
+const codeInput = useTemplateRef<{ focus: () => void }>("codeInput");
+
+// Typing a new code clears the refusal of the previous one.
+watch(pin, (digits) => {
+  if (digits.some(Boolean)) codeError.value = undefined;
+});
 
 const hasTotp = computed(() => availableMethods.value.includes("totp"));
 const hasEmail = computed(() => availableMethods.value.includes("email"));
+const isCodeVisible = computed(
+  () => activeMethod.value === "totp" || isEmailSent.value,
+);
 
 const backToLoginTarget = computed(() => ({
   path: "/auth",
@@ -55,17 +88,23 @@ async function requestEmailCode() {
       color: "success",
     });
   } catch (error: unknown) {
-    useApiError(error, {
-      title: "page.2fa.email_error",
-    });
+    showFormError(error, "page.2fa.email_error");
   }
 }
 
 async function verify() {
+  // An empty or partial code is flagged under the cells, not sent.
+  const missing = codeEntryError(pin.value, PIN_LENGTH);
+  if (missing) {
+    codeError.value = processApiMessage(missing);
+    codeInput.value?.focus();
+    return;
+  }
   const code = pin.value.join("");
-  if (code.length !== PIN_LENGTH) return;
 
   isLoading.value = true;
+  clearFormError();
+  codeError.value = undefined;
   try {
     await $fetch("/auth/verify-2fa", {
       method: "POST",
@@ -78,91 +117,93 @@ async function verify() {
 
     await usePostLoginRedirect();
   } catch (error: unknown) {
-    useApiError(error, {
-      title: "page.2fa.error_title",
-    });
     pin.value = [];
+    await showError(error, "page.2fa.error_title", {
+      fields: ["code"],
+      codes: CODE_ERRORS,
+      show: (_field, message) => {
+        codeError.value = message;
+      },
+    });
+    await nextTick();
+    codeInput.value?.focus();
   } finally {
     isLoading.value = false;
   }
 }
 
-function switchToEmail() {
-  activeMethod.value = "email";
-  pin.value = [];
-}
-
-function switchToTotp() {
-  activeMethod.value = "totp";
+function switchMethod(method: TwoFactorMethod) {
+  activeMethod.value = method;
   pin.value = [];
   isEmailSent.value = false;
+  codeError.value = undefined;
+  clearFormError();
 }
 </script>
 
 <template>
-  <div class="mx-auto max-w-xl">
-    <DmsCard variant="elevated" :padded="false" class="grid gap-7 p-6 sm:p-12">
-      <div>
-        <h1 class="pb-5 text-2xl font-bold">
-          {{ $t("page.2fa.title") }}
-        </h1>
-        <p class="text-muted text-sm font-normal">
-          {{
-            activeMethod === "totp"
-              ? $t("page.2fa.description_totp")
-              : $t("page.2fa.description_email")
-          }}
-        </p>
-      </div>
-
-      <div
-        v-if="activeMethod === 'email' && !isEmailSent"
-        class="flex flex-col gap-4"
+  <StageCard
+    :icon="METHOD_ICONS[activeMethod]"
+    :title="$t('page.2fa.title')"
+    :description="$t(METHOD_DESCRIPTION_KEYS[activeMethod])"
+  >
+    <form class="mt-[22px] grid gap-4" @submit.prevent="verify">
+      <AuthFormAlert :error="formError" />
+
+      <UButton
+        v-if="!isCodeVisible"
+        :label="$t('page.2fa.send_email')"
+        icon="i-ph-paper-plane-tilt"
+        size="lg"
+        class="justify-center"
+        block
+        @click="requestEmailCode"
+      />
+
+      <template v-else>
+        <DmsOtpInput
+          ref="codeInput"
+          :label="$t('page.auth.code.label')"
+          size="xl"
+          is-split
+          is-centered
+          v-model="pin"
+          :length="PIN_LENGTH"
+          :error="codeError"
+        />
+        <UButton
+          :loading="isLoading"
+          :label="$t('page.2fa.verify')"
+          type="submit"
+          size="lg"
+          class="justify-center"
+          block
+        />
+      </template>
+    </form>
+
+    <div class="text-muted mt-5 flex flex-col items-center gap-1.5 text-[13px]">
+      <button
+        v-if="hasEmail && activeMethod === 'totp'"
+        type="button"
+        :class="AUTH_LINK_CLASS"
+        @click="switchMethod('email')"
       >
-        <UButton block @click="requestEmailCode">
-          {{ $t("page.2fa.send_email") }}
-        </UButton>
-      </div>
-
-      <div
-        v-if="activeMethod === 'totp' || isEmailSent"
-        class="flex flex-col gap-7"
+        {{ $t("page.2fa.use_email") }}
+      </button>
+      <button
+        v-if="hasTotp && activeMethod === 'email'"
+        type="button"
+        :class="AUTH_LINK_CLASS"
+        @click="switchMethod('totp')"
       >
-        <div class="flex items-center justify-center">
-          <UPinInput
-            v-model="pin"
-            :length="PIN_LENGTH"
-            type="text"
-            :size="pinSize"
-          />
-        </div>
-        <UButton :loading="isLoading" block @click="verify">
-          {{ $t("button.continue") }}
-        </UButton>
-      </div>
-
-      <div class="flex flex-col gap-2 text-center">
-        <ULink
-          v-if="hasEmail && activeMethod === 'totp'"
-          class="text-muted text-sm"
-          @click.prevent="switchToEmail"
-        >
-          {{ $t("page.2fa.use_email") }}
-        </ULink>
-        <ULink
-          v-if="hasTotp && activeMethod === 'email'"
-          class="text-muted text-sm"
-          @click.prevent="switchToTotp"
-        >
-          {{ $t("page.2fa.use_totp") }}
-        </ULink>
-        <DmsLink :to="backupTarget" class="text-muted text-sm">
-          {{ $t("page.2fa.use_backup") }}
-        </DmsLink>
-        <DmsLink :to="backToLoginTarget" class="text-muted text-sm">
-          {{ $t("button.back_to_login") }}
-        </DmsLink>
-      </div>
-    </DmsCard>
-  </div>
+        {{ $t("page.2fa.use_totp") }}
+      </button>
+      <DmsLink :to="backupTarget" :class="AUTH_LINK_CLASS">
+        {{ $t("page.2fa.use_backup") }}
+      </DmsLink>
+    </div>
+
+    <AuthBackLink :to="backToLoginTarget" :label="$t('button.back_to_login')" />
+  </StageCard>
 </template>