@antelopejs/dms 0.0.1

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import * as z from "zod";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+const { $authFetch } = useAuthFetch();
+
+const isLoading = ref(false);
+
+const schema = z.object({
+  email: z.string().email(),
+});
+type Schema = z.output<typeof schema>;
+const state = reactive<Partial<Schema>>({});
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  try {
+    isLoading.value = true;
+
+    await $authFetch("/api/auth/forgot-password", {
+      method: "POST",
+      body: {
+        email: event.data.email,
+      },
+    });
+
+    navigateDms(`/auth/forgot-validation?email=${event.data.email}`);
+  } catch (error: unknown) {
+    useApiError(error, {
+      title: "page.forgot.error_title",
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-lg">
+    <DmsCard variant="elevated" :padded="false" class="p-7 sm:p-12">
+      <h1 class="pb-5 text-2xl font-bold">
+        {{ $t("page.forgot.title_forget") }}
+      </h1>
+
+      <p class="text-muted pb-7 text-sm font-normal">
+        {{ $t("page.forgot.description_forget") }}
+      </p>
+
+      <UForm
+        :schema="schema"
+        :state="state"
+        class="space-y-7"
+        @submit="onSubmit"
+      >
+        <UFormField
+          class="text-sm font-medium"
+          :label="$t('form.email.label')"
+          name="email"
+        >
+          <UInput v-model="state.email" type="email" class="h-9 w-full" />
+        </UFormField>
+
+        <div class="grid gap-2">
+          <UButton
+            :loading="isLoading"
+            :label="$t('button.continue')"
+            type="submit"
+            block
+          />
+
+          <UButton
+            :label="$t('button.back_to_login')"
+            color="neutral"
+            variant="ghost"
+            to="/auth"
+            type="button"
+            block
+          />
+        </div>
+      </UForm>
+    </DmsCard>
+  </div>
+</template>

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

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import * as z from "zod";
+import type { FormSubmitEvent } from "@nuxt/ui";
+import { ACCOUNTS_LIST_ROUTE } from "../../utils/accountsFlow";
+
+const route = useDmsRoute();
+const homepage = useHomepage();
+const dmsApp = useDmsApp();
+const { links: extraLinks } = useAuthLinks("login");
+
+useOAuthErrorToast();
+
+const isLoading = ref(false);
+const isPasswordVisible = ref(false);
+
+const cameFromAccounts = computed(() => isFromAccountsList(route.query));
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().nonempty(),
+  keep_login: z.boolean().optional(),
+});
+type Schema = z.output<typeof schema>;
+const state = reactive<Partial<Schema>>({});
+
+function isTwoFactorRequired(
+  response: unknown,
+): response is TwoFactorRequiredResponse {
+  return (
+    !!response && typeof response === "object" && "requires_2fa" in response
+  );
+}
+
+function isTenantAssignmentRequired(
+  response: unknown,
+): response is TenantAssignmentRequiredResponse {
+  return (
+    !!response &&
+    typeof response === "object" &&
+    "requires_tenant_assignment" in response
+  );
+}
+
+async function handleTwoFactorRedirect(response: TwoFactorRequiredResponse) {
+  await navigateDms({
+    path: "/auth/2fa",
+    query: withAccountsFlag(route.query, {
+      token: response.two_factor_token,
+      methods: response.methods.join(","),
+    }),
+  });
+}
+
+async function handleTenantAssignmentRedirect(
+  response: TenantAssignmentRequiredResponse,
+) {
+  await navigateDms({
+    path: "/auth/no-workspace",
+    query: {
+      token: response.tenant_assignment_token,
+    },
+  });
+}
+
+async function onSubmit(payload: FormSubmitEvent<Schema>) {
+  const redirectUrl = route.query.redirect as string | undefined;
+
+  try {
+    isLoading.value = true;
+
+    const response = await $fetch("/auth/login", {
+      method: "POST",
+      body: payload.data,
+    });
+
+    if (isTwoFactorRequired(response)) {
+      await dmsApp.runWithContext(() => handleTwoFactorRedirect(response));
+      return;
+    }
+
+    if (isTenantAssignmentRequired(response)) {
+      await dmsApp.runWithContext(() =>
+        handleTenantAssignmentRedirect(response),
+      );
+      return;
+    }
+
+    await dmsApp.runWithContext(() =>
+      usePostLoginRedirect(redirectUrl || homepage),
+    );
+  } catch (error: unknown) {
+    await dmsApp.runWithContext(() =>
+      useApiError(error, {
+        title: "page.auth.error_title",
+      }),
+    );
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-lg">
+    <DmsCard
+      as="section"
+      variant="elevated"
+      :padded="false"
+      class="p-6 sm:p-12"
+    >
+      <h1 class="pb-11 text-xl font-bold sm:text-2xl">
+        {{ $t("page.auth.login_title") }}
+      </h1>
+
+      <DmsOAuthButtons />
+
+      <UForm
+        :schema="schema"
+        :state="state"
+        class="space-y-7"
+        @submit="onSubmit"
+      >
+        <UFormField :label="$t('form.email.label')" name="email">
+          <UInput v-model="state.email" class="w-full" />
+        </UFormField>
+
+        <UFormField :label="$t('form.password.label')" name="password">
+          <template #hint>
+            <DmsLink
+              to="/auth/forgot"
+              tabindex="-1"
+              class="text-primary text-sm"
+            >
+              {{ $t("form.password.recover") }}
+            </DmsLink>
+          </template>
+
+          <UInput
+            v-model="state.password"
+            :type="isPasswordVisible ? 'text' : 'password'"
+            class="w-full"
+          >
+            <template #trailing>
+              <UButton
+                :icon="isPasswordVisible ? 'i-ph-eye-slash' : 'i-ph-eye'"
+                square
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                type="button"
+                tabindex="-1"
+                @click="isPasswordVisible = !isPasswordVisible"
+              />
+            </template>
+          </UInput>
+        </UFormField>
+
+        <UFormField name="keep_login">
+          <UCheckbox
+            v-model="state.keep_login"
+            :label="$t('page.auth.keep_login')"
+          />
+        </UFormField>
+
+        <div class="grid gap-2">
+          <UButton
+            :loading="isLoading"
+            :label="$t('button.login')"
+            type="submit"
+            block
+          />
+
+          <UButton
+            v-if="cameFromAccounts"
+            :label="$t('page.auth.back_to_accounts')"
+            icon="i-ph-arrow-left"
+            color="neutral"
+            variant="ghost"
+            :disabled="isLoading"
+            :to="ACCOUNTS_LIST_ROUTE"
+            type="button"
+            block
+          />
+        </div>
+      </UForm>
+
+      <div
+        v-if="extraLinks.length"
+        class="mt-6 flex flex-col items-center gap-2"
+      >
+        <DmsLink
+          v-for="link in extraLinks"
+          :key="link.id"
+          :to="link.to"
+          class="text-primary text-sm"
+        >
+          {{ $t(link.label) }}
+        </DmsLink>
+      </div>
+    </DmsCard>
+  </div>
+</template>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { type OAuthHandoff, sanitizeRedirectPath } from "../../../shared/oauth";
+
+const OAUTH_FAILED_KEY = "error.oauth.failed";
+
+const route = useDmsRoute();
+const homepage = useHomepage();
+const dmsApp = useDmsApp();
+
+const redirect = computed(
+  () => sanitizeRedirectPath(route.query.redirect) || homepage,
+);
+
+type HandoffActions = {
+  [K in OAuthHandoff["kind"]]: (
+    handoff: Extract<OAuthHandoff, { kind: K }>,
+  ) => unknown;
+};
+
+// `replace` is a navigation option, not part of the location: passed inside the
+// route object it was silently dropped, and the handoff left the OAuth callback
+// in the history for the back button to land on.
+const REPLACE = { replace: true } as const;
+
+const HANDOFF_ACTIONS: HandoffActions = {
+  "2fa": (handoff) =>
+    navigateDms(
+      {
+        path: "/auth/2fa",
+        query: { token: handoff.token, methods: handoff.methods.join(",") },
+      },
+      REPLACE,
+    ),
+  "no-workspace": (handoff) =>
+    navigateDms(
+      {
+        path: "/auth/no-workspace",
+        query: { token: handoff.token, provider: handoff.provider },
+      },
+      REPLACE,
+    ),
+  none: () => usePostLoginRedirect(redirect.value),
+};
+
+function runHandoffAction(handoff: OAuthHandoff): unknown {
+  const action = HANDOFF_ACTIONS[handoff.kind] as (
+    value: OAuthHandoff,
+  ) => unknown;
+  return action(handoff);
+}
+
+function redirectToLoginWithError(): unknown {
+  return navigateDms(
+    { path: "/auth", query: { oauth_error: OAUTH_FAILED_KEY } },
+    REPLACE,
+  );
+}
+
+onMounted(async () => {
+  try {
+    const handoff = await $fetch<OAuthHandoff>("/auth/oauth/handoff", {
+      method: "POST",
+    });
+    await dmsApp.runWithContext(() => runHandoffAction(handoff));
+  } catch {
+    await dmsApp.runWithContext(() => redirectToLoginWithError());
+  }
+});
+</script>
+
+<template>
+  <div class="flex min-h-[40vh] items-center justify-center">
+    <div class="flex flex-col items-center gap-4">
+      <UIcon name="i-ph-spinner" class="text-primary size-8 animate-spin" />
+      <p class="text-muted text-sm">
+        {{ $t("page.auth.oauth.completing") }}
+      </p>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+<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_success") }}
+      </h1>
+
+      <p class="text-muted pb-7 text-sm font-normal">
+        {{ $t("page.forgot.description_success") }}
+      </p>
+
+      <UButton :label="$t('button.continue')" to="/auth" block />
+    </DmsCard>
+  </div>
+</template>

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

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import * as z from "zod";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+const MIN_VALID_PASSWORD_SCORE = 4;
+
+const route = useDmsRoute();
+const { $authFetch } = useAuthFetch();
+
+if (!route.query.token || !route.query.email) {
+  throw createError({
+    statusCode: HTTP_BAD_REQUEST,
+    statusMessage: INVALID_REQUEST,
+    message: "Missing required authentication parameters",
+  });
+}
+
+const isLoading = ref(false);
+const isPasswordVisible = ref(false);
+
+const schema = z.object({
+  password: passwordSchema,
+});
+type Schema = z.output<typeof schema>;
+
+const state = reactive<Partial<Schema>>({
+  password: undefined,
+});
+
+const { strength, score, color } = usePasswordStrength(
+  computed(() => state.password || ""),
+);
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  try {
+    isLoading.value = true;
+    await $authFetch("/api/auth/reset-password", {
+      method: "POST",
+      body: {
+        password: event.data.password,
+        token: route.query.token,
+        email: route.query.email,
+      },
+    });
+
+    navigateDms("/auth/recover-success");
+  } catch (error: unknown) {
+    useApiError(error, {
+      title: "page.forgot.error_title",
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-lg">
+    <DmsCard variant="elevated" :padded="false" class="p-6 sm:p-12">
+      <h1 class="pb-5 text-2xl font-bold">
+        {{ $t("page.recover.title") }}
+      </h1>
+
+      <p class="text-muted wrap pb-7 text-sm font-normal">
+        {{ $t("page.recover.description") }}
+      </p>
+
+      <UForm
+        :schema="schema"
+        :state="state"
+        class="space-y-7"
+        @submit="onSubmit"
+      >
+        <div class="flex flex-col gap-4">
+          <UFormField
+            :error="state.password && color !== 'success'"
+            :label="$t('form.password.label')"
+            name="password"
+          >
+            <UInput
+              v-model="state.password"
+              :color="color"
+              :type="isPasswordVisible ? 'text' : 'password'"
+              :aria-invalid="score < MIN_VALID_PASSWORD_SCORE"
+              aria-describedby="password-strength"
+              class="w-full"
+            >
+              <template #trailing>
+                <UButton
+                  :icon="
+                    isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'
+                  "
+                  :aria-label="
+                    isPasswordVisible ? 'Hide password' : 'Show password'
+                  "
+                  :aria-pressed="isPasswordVisible"
+                  aria-controls="password"
+                  color="neutral"
+                  square
+                  size="xs"
+                  variant="ghost"
+                  @click="isPasswordVisible = !isPasswordVisible"
+                />
+              </template>
+            </UInput>
+          </UFormField>
+
+          <DmsPasswordStrength
+            :color="color"
+            :score="score"
+            :strength="strength"
+          />
+        </div>
+
+        <UButton
+          :label="$t('button.continue')"
+          :loading="isLoading"
+          type="submit"
+          block
+        />
+      </UForm>
+    </DmsCard>
+  </div>
+</template>

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

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import * as z from "zod";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+const MIN_VALID_PASSWORD_SCORE = 4;
+
+const { locale } = useI18n();
+const config = useDmsRuntimeConfig();
+const homepage = useHomepage();
+
+const route = useDmsRoute();
+const queryToken = computed(() => route.query.token as string);
+const queryEmail = computed(() => route.query.email as string);
+const queryName = computed(() => route.query.name as string | undefined);
+
+if (!queryToken.value) {
+  throw createError({
+    statusCode: HTTP_BAD_REQUEST,
+    statusMessage: INVALID_REQUEST,
+    message: "Missing required token parameter",
+  });
+}
+
+const isLoading = ref(false);
+const isPasswordVisible = ref(false);
+
+const schema = z.object({
+  email: z.string().email(),
+  name: z.string().min(2),
+  password: passwordSchema,
+});
+type Schema = z.output<typeof schema>;
+const state = reactive<Partial<Schema>>({
+  email: queryEmail.value,
+  name: queryName.value,
+});
+
+const { strength, score, color } = usePasswordStrength(
+  computed(() => state.password || ""),
+);
+
+async function onSubmit(payload: FormSubmitEvent<Schema>) {
+  try {
+    isLoading.value = true;
+
+    await $fetch("/auth/signup", {
+      method: "POST",
+      body: {
+        ...payload.data,
+        lang: locale.value,
+        token: queryToken.value,
+      },
+    });
+
+    await usePostLoginRedirect(
+      config.public.dms.mustValidateEmail ? "/auth/validate" : homepage,
+    );
+  } catch (error: unknown) {
+    useApiError(error, {
+      title: "page.signup.error_title",
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-xl">
+    <DmsCard variant="elevated" :padded="false" class="p-6 sm:p-12">
+      <h1 class="pb-11 text-xl font-bold sm:text-2xl">
+        {{ $t("page.signup.create_account_title") }}
+      </h1>
+
+      <DmsOAuthButtons />
+
+      <UForm
+        :schema="schema"
+        :state="state"
+        class="space-y-7"
+        @submit="onSubmit"
+      >
+        <UFormField :label="$t('form.name.label')" name="name">
+          <UInput v-model="state.name" class="w-full" />
+        </UFormField>
+
+        <UFormField :label="$t('form.email.label')" name="email">
+          <UInput v-model="state.email" type="email" class="w-full" disabled />
+        </UFormField>
+
+        <UFormField :label="$t('form.password.label')" name="password">
+          <UInput
+            v-model="state.password"
+            :color="color"
+            :type="isPasswordVisible ? 'text' : 'password'"
+            :aria-invalid="score < MIN_VALID_PASSWORD_SCORE"
+            aria-describedby="password-strength"
+            class="w-full"
+          >
+            <template #trailing>
+              <UButton
+                :icon="isPasswordVisible ? 'i-ph-eye-slash' : 'i-ph-eye'"
+                :aria-label="
+                  isPasswordVisible ? 'Hide password' : 'Show password'
+                "
+                :aria-pressed="isPasswordVisible"
+                color="neutral"
+                square
+                size="xs"
+                variant="ghost"
+                aria-controls="password"
+                @click="isPasswordVisible = !isPasswordVisible"
+              />
+            </template>
+          </UInput>
+        </UFormField>
+
+        <DmsPasswordStrength
+          :color="color"
+          :score="score"
+          :strength="strength"
+        />
+
+        <UButton
+          :label="$t('button.continue')"
+          :loading="isLoading"
+          type="submit"
+          block
+        />
+
+        <div class="flex justify-center gap-1 text-center text-sm">
+          <p>{{ $t("page.auth.already_have") }}</p>
+          <DmsLink to="/auth" class="text-primary font-medium">
+            {{ $t("button.login") }}
+          </DmsLink>
+        </div>
+      </UForm>
+    </DmsCard>
+  </div>
+</template>