@antelopejs/dms 0.0.1

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

@@ -0,0 +1,32 @@
+const SWITCH_ACCOUNT_ROUTE = "/auth/accounts";
+const FALLBACK_AUTH_ROUTE = "/auth";
+
+/**
+ * Ends the current session and routes to the account switcher when other
+ * accounts remain, or to the auth page otherwise. Shared by every logout
+ * surface (header user menu, command palette).
+ *
+ * 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.
+ */
+export function useLogout() {
+  const { user, clear: clearSession } = useUserSession<User>();
+  const { accounts, removeAccount } = useMultiAccount();
+
+  async function logout(): Promise<void> {
+    const userId = user.value?._id;
+
+    await clearSession();
+    if (userId) {
+      await removeAccount(userId);
+    }
+
+    if (accounts.value.length > 0) {
+      await navigateDms(SWITCH_ACCOUNT_ROUTE);
+      return;
+    }
+    await navigateDms(FALLBACK_AUTH_ROUTE);
+  }
+
+  return { logout };
+}

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

@@ -0,0 +1,39 @@
+const OAUTH_ERROR_QUERY = "oauth_error";
+const ERROR_KEY_PREFIX = "error.";
+const FALLBACK_ERROR_KEY = "error.oauth.failed";
+
+/**
+ * Surface the failure a provider round-trip came back with. The server route
+ * cannot raise a toast itself, so it hands the message key over through the
+ * query string and clears it once shown.
+ *
+ * The query value is user-forgeable, so only known error-namespace keys reach
+ * the toast — anything else would let a crafted URL display an arbitrary
+ * translation, or echo a raw unknown key.
+ */
+export function useOAuthErrorToast(): void {
+  const route = useDmsRoute();
+  const router = useDmsRouter();
+  const toast = useToast();
+  const { t, te } = useI18n();
+
+  function toErrorMessageKey(value: unknown): string | undefined {
+    if (typeof value !== "string" || !value) return undefined;
+    if (value.startsWith(ERROR_KEY_PREFIX) && te(value)) return value;
+    return FALLBACK_ERROR_KEY;
+  }
+
+  onMounted(() => {
+    const messageKey = toErrorMessageKey(route.query[OAUTH_ERROR_QUERY]);
+    if (!messageKey) return;
+
+    toast.add({
+      title: t("page.auth.error_title"),
+      description: t(messageKey),
+      color: "error",
+    });
+
+    const { [OAUTH_ERROR_QUERY]: _consumed, ...query } = route.query;
+    void router.replace({ query });
+  });
+}

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

@@ -0,0 +1,28 @@
+type PostLoginDestination = string | (() => string | undefined);
+
+/** Refresh authenticated state before resolving and opening the destination. */
+export async function usePostLoginRedirect(redirectUrl?: PostLoginDestination) {
+  const dmsApp = useDmsApp();
+  const { fetch: refreshUser, user } = useUserSession();
+  const { addCurrentAccount } = useMultiAccount();
+  const siteLayout = useSiteLayout();
+  const homepage = useHomepage();
+
+  await refreshUser();
+  if (!user.value) {
+    throw new Error(
+      "Unable to load the authenticated session. Please sign in again.",
+    );
+  }
+  addCurrentAccount();
+
+  await siteLayout.refresh();
+
+  if (user.value?.language) {
+    await dmsApp.$i18n.setLocale(user.value.language as "en" | "fr");
+  }
+
+  const destination =
+    typeof redirectUrl === "function" ? redirectUrl() : redirectUrl;
+  await navigateDms(destination || homepage);
+}

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { useWindowSize } from "@vueuse/core";
+
+const { t } = useI18n();
+const toast = useToast();
+const route = useDmsRoute();
+const { width } = useWindowSize();
+
+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"));
+
+const isLoading = ref(false);
+const activeMethod = ref<"totp" | "email">("totp");
+const pin = ref<string[]>([]);
+const isEmailSent = ref(false);
+
+const hasTotp = computed(() => availableMethods.value.includes("totp"));
+const hasEmail = computed(() => availableMethods.value.includes("email"));
+
+const backToLoginTarget = computed(() => ({
+  path: "/auth",
+  query: withAccountsFlag(route.query),
+}));
+
+const backupTarget = computed(() => ({
+  path: "/auth/backup",
+  query: withAccountsFlag(route.query, {
+    token: token.value,
+    methods: route.query.methods,
+  }),
+}));
+
+watchEffect(() => {
+  if (!hasTotp.value && hasEmail.value) {
+    activeMethod.value = "email";
+  }
+});
+
+async function requestEmailCode() {
+  try {
+    await $fetch("/auth/request-2fa-email", {
+      method: "POST",
+      body: { token: token.value },
+    });
+    isEmailSent.value = true;
+    toast.add({
+      title: t("page.2fa.email_sent"),
+      color: "success",
+    });
+  } catch (error: unknown) {
+    useApiError(error, {
+      title: "page.2fa.email_error",
+    });
+  }
+}
+
+async function verify() {
+  const code = pin.value.join("");
+  if (code.length !== PIN_LENGTH) return;
+
+  isLoading.value = true;
+  try {
+    await $fetch("/auth/verify-2fa", {
+      method: "POST",
+      body: {
+        token: token.value,
+        code,
+        method: activeMethod.value,
+      },
+    });
+
+    await usePostLoginRedirect();
+  } catch (error: unknown) {
+    useApiError(error, {
+      title: "page.2fa.error_title",
+    });
+    pin.value = [];
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function switchToEmail() {
+  activeMethod.value = "email";
+  pin.value = [];
+}
+
+function switchToTotp() {
+  activeMethod.value = "totp";
+  pin.value = [];
+  isEmailSent.value = false;
+}
+</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"
+      >
+        <UButton block @click="requestEmailCode">
+          {{ $t("page.2fa.send_email") }}
+        </UButton>
+      </div>
+
+      <div
+        v-if="activeMethod === 'totp' || isEmailSent"
+        class="flex flex-col gap-7"
+      >
+        <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>
+</template>

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const toast = useToast();
+const homepage = useHomepage();
+const {
+  accounts,
+  getActiveAccount,
+  addCurrentAccount,
+  switchAccount,
+  removeAccount,
+  validateAllAccounts,
+} = useMultiAccount();
+
+const loading = ref<string | null>(null);
+const pendingValidation = ref<Promise<unknown> | null>(null);
+const activeAccount = computed(() => getActiveAccount());
+
+const sortedAccounts = computed(() => {
+  const active = activeAccount.value;
+  const inactive = accounts.value.filter((a) => a.userId !== active?.userId);
+
+  return active ? [active, ...inactive] : inactive;
+});
+
+async function handleSwitchAccount(userId: string) {
+  if (loading.value) {
+    return;
+  }
+
+  if (userId === activeAccount.value?.userId) {
+    await navigateDms(homepage);
+
+    return;
+  }
+
+  loading.value = userId;
+
+  try {
+    await pendingValidation.value;
+    await switchAccount(userId);
+
+    await navigateDms(homepage);
+  } catch (error: unknown) {
+    useApiError(error, {
+      title: "error.switch_account_failed",
+    });
+  } finally {
+    loading.value = null;
+  }
+}
+
+async function handleRemoveAccount(userId: string) {
+  await removeAccount(userId);
+  toast.add({
+    title: t("page.accounts.account_removed"),
+    color: "success",
+  });
+}
+
+function handleAddAccount() {
+  addCurrentAccount();
+  navigateDms({ path: "/auth", query: FROM_ACCOUNTS_QUERY });
+}
+
+onMounted(() => {
+  pendingValidation.value = validateAllAccounts();
+});
+</script>
+
+<template>
+  <div class="mx-auto max-w-lg">
+    <DmsCard variant="elevated" :padded="false" class="p-4">
+      <div class="pb-8">
+        <h1 class="text-xl font-bold sm:text-2xl">
+          {{ $t("page.accounts.title") }}
+        </h1>
+        <p class="text-muted text-sm">
+          {{ $t("page.accounts.description") }}
+        </p>
+      </div>
+
+      <div class="space-y-3">
+        <DmsClientOnly>
+          <DmsCard
+            v-for="account in sortedAccounts"
+            :key="account.userId"
+            interactive
+            :padded="false"
+            class="group flex items-center justify-between p-4"
+            @click="handleSwitchAccount(account.userId)"
+          >
+            <div class="flex items-center gap-4">
+              <UAvatar :alt="account.name" size="xl" />
+
+              <div>
+                <div class="flex items-center gap-2">
+                  <span class="font-medium">{{ account.name }}</span>
+
+                  <UBadge
+                    v-if="account.userId === activeAccount?.userId"
+                    variant="subtle"
+                    size="sm"
+                  >
+                    {{ $t("page.accounts.active_account") }}
+                  </UBadge>
+
+                  <UBadge v-else-if="account.isExpired" color="error" size="sm">
+                    {{ $t("page.accounts.expired_account") }}
+                  </UBadge>
+                </div>
+
+                <span class="text-muted text-sm">
+                  {{ account.email }}
+                </span>
+              </div>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <UIcon
+                v-if="loading === account.userId"
+                name="i-ph-spinner"
+                class="animate-spin text-lg"
+              />
+
+              <UButton
+                v-if="account.userId !== activeAccount?.userId"
+                icon="i-ph-x"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                :disabled="loading !== null"
+                class="opacity-0 transition-opacity group-hover:opacity-100"
+                @click.stop="handleRemoveAccount(account.userId)"
+              />
+            </div>
+          </DmsCard>
+
+          <template #fallback>
+            <DmsCard
+              v-for="i in 2"
+              :key="i"
+              :padded="false"
+              class="flex items-center justify-between p-4"
+            >
+              <div class="flex items-center gap-4">
+                <USkeleton class="size-16 rounded-full" />
+                <div class="space-y-2">
+                  <USkeleton class="h-4 w-32" />
+                  <USkeleton class="h-3 w-48" />
+                </div>
+              </div>
+            </DmsCard>
+          </template>
+        </DmsClientOnly>
+
+        <UButton
+          block
+          variant="outline"
+          icon="i-ph-plus"
+          class="mt-6"
+          @click="handleAddAccount"
+        >
+          {{ $t("page.accounts.add_account") }}
+        </UButton>
+      </div>
+    </DmsCard>
+  </div>
+</template>

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import * as z from "zod";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+const route = useDmsRoute();
+
+const token = computed(() => (route.query.token as string) || "");
+
+const twoFactorTarget = computed(() => ({
+  path: "/auth/2fa",
+  query: withAccountsFlag(route.query, {
+    token: token.value,
+    methods: route.query.methods,
+  }),
+}));
+
+const backToLoginTarget = computed(() => ({
+  path: "/auth",
+  query: withAccountsFlag(route.query),
+}));
+
+const isLoading = ref(false);
+
+const schema = z.object({
+  code: z.string().min(1),
+});
+type Schema = z.output<typeof schema>;
+const state = reactive<Partial<Schema>>({ code: undefined });
+
+async function onSubmit(payload: FormSubmitEvent<Schema>) {
+  isLoading.value = true;
+  try {
+    await $fetch("/auth/verify-2fa", {
+      method: "POST",
+      body: {
+        token: token.value,
+        code: payload.data.code,
+        method: "backup",
+      },
+    });
+
+    await usePostLoginRedirect();
+  } catch (error: unknown) {
+    useApiError(error, {
+      title: "page.backup.error_title",
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-xl">
+    <DmsCard variant="elevated" :padded="false" class="grid gap-7 p-7 sm:p-12">
+      <div>
+        <h1 class="pb-5 text-2xl font-bold">
+          {{ $t("page.backup.title") }}
+        </h1>
+        <p class="text-muted text-sm font-normal">
+          {{ $t("page.backup.description") }}
+        </p>
+      </div>
+      <UForm
+        :schema="schema"
+        :state="state"
+        class="space-y-7"
+        @submit="onSubmit"
+      >
+        <UFormField
+          class="text-sm font-medium"
+          :label="$t('page.backup.code')"
+          name="code"
+        >
+          <UInput
+            v-model="state.code"
+            :loading="isLoading"
+            class="h-9 w-full"
+            type="text"
+          />
+        </UFormField>
+        <div class="flex flex-col gap-4">
+          <UButton :loading="isLoading" type="submit" block>
+            {{ $t("button.continue") }}
+          </UButton>
+          <div class="flex flex-col gap-2 text-center">
+            <DmsLink :to="twoFactorTarget" class="text-muted text-sm">
+              {{ $t("page.2fa.back_to_2fa") }}
+            </DmsLink>
+            <DmsLink :to="backToLoginTarget" class="text-muted text-sm">
+              {{ $t("button.back_to_login") }}
+            </DmsLink>
+          </div>
+        </div>
+      </UForm>
+    </DmsCard>
+  </div>
+</template>

package/frontend-vue/layers/dms-auth/app/custom-pages/auth/forgot-validation.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import * as z from "zod";
+import type { FormSubmitEvent } from "@nuxt/ui";
+import { useWindowSize } from "@vueuse/core";
+
+const route = useDmsRoute();
+const { t } = useI18n();
+const toast = useToast();
+const { width } = useWindowSize();
+const { $authFetch } = useAuthFetch();
+
+if (!route.query.email) {
+  throw createError({
+    statusCode: HTTP_BAD_REQUEST,
+    statusMessage: INVALID_REQUEST,
+    message: "Missing required email parameter",
+  });
+}
+
+const MOBILE_BREAKPOINT = 375;
+const PIN_LENGTH = 6;
+const COOLDOWN_DURATION = 60;
+
+const computedSize = computed(() => {
+  return width.value < MOBILE_BREAKPOINT ? "lg" : "xl";
+});
+
+const isLoading = ref(false);
+const form = useTemplateRef("form");
+
+const schema = z.object({
+  pin: z.string().array().length(PIN_LENGTH),
+});
+type Schema = z.output<typeof schema>;
+const state = reactive<Partial<Schema>>({});
+
+const { cooldown, startCooldown } = useCooldown(COOLDOWN_DURATION);
+
+onMounted(() => {
+  startCooldown();
+});
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  try {
+    isLoading.value = true;
+    const token = event.data.pin.join("");
+
+    await $authFetch("/api/auth/validate-forgot-password-token", {
+      method: "POST",
+      body: {
+        token,
+        email: route.query.email,
+      },
+    });
+
+    navigateDms(`/auth/recover?token=${token}&email=${route.query.email}`);
+  } catch (error: unknown) {
+    useApiError(error, {
+      title: "page.forgot.error_title",
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function onUpdatePin(value: string[]) {
+  if (value.length !== PIN_LENGTH) return;
+
+  form.value?.submit();
+}
+
+async function requestForgotPassword() {
+  try {
+    isLoading.value = true;
+
+    await $authFetch("/api/auth/forgot-password", {
+      method: "POST",
+      body: {
+        email: route.query.email as string,
+      },
+    });
+
+    startCooldown();
+
+    toast.add({
+      title: t("page.validate.request_sended"),
+      description: t("page.validate.request_sended_description"),
+      color: "success",
+    });
+  } catch (error: unknown) {
+    useApiError(error, {
+      title: "page.validate.error_title",
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-md">
+    <DmsCard variant="elevated" :padded="false" class="p-6 sm:p-12">
+      <h1 class="pb-5 text-2xl font-bold">
+        {{ $t("page.forgot.title_forget") }}
+      </h1>
+
+      <p class="text-muted wrap pb-7 text-sm font-normal">
+        {{ $t("page.forgot.description_validation") }}
+      </p>
+
+      <UForm
+        ref="form"
+        :schema="schema"
+        :state="state"
+        class="space-y-7"
+        @submit="onSubmit"
+      >
+        <div class="flex items-center justify-center">
+          <UPinInput
+            v-model="state.pin"
+            :length="PIN_LENGTH"
+            :size="computedSize"
+            type="text"
+            otp
+            @update:model-value="onUpdatePin"
+          />
+        </div>
+
+        <div class="flex justify-center">
+          <UButton
+            v-if="cooldown === 0"
+            :label="$t('page.validate.request_validation')"
+            :loading="isLoading"
+            color="primary"
+            variant="ghost"
+            size="sm"
+            type="button"
+            @click="requestForgotPassword()"
+          />
+
+          <UButton
+            v-else
+            :label="
+              $t('page.validate.request_validation_in', {
+                time: cooldown,
+              })
+            "
+            :loading="isLoading"
+            color="neutral"
+            variant="link"
+            size="sm"
+            disabled
+          />
+        </div>
+      </UForm>
+    </DmsCard>
+  </div>
+</template>