@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -1,12 +1,29 @@
 <script setup lang="ts">
+import { useTemplateRef } from "vue";
 import * as z from "zod";
 import type { FormSubmitEvent } from "@nuxt/ui";
-
-const MIN_VALID_PASSWORD_SCORE = 4;
+import StageCard from "../../../../dms-layout/app/build/components/layout/StageCard.vue";
+import AuthFormAlert from "../../build/components/AuthFormAlert.vue";
+import AuthNewPasswordField from "../../build/components/AuthNewPasswordField.vue";
+import {
+  type AuthFormHandle,
+  useAuthFormError,
+} from "../../build/composables/useAuthFormError";
+import { AUTH_LINK_CLASS } from "../../build/utils/authStyles";
+import {
+  focusFirstFormError,
+  useLiveFormErrors,
+  useLocalizedSchema,
+} from "#dms-core/app/composables/useFormValidation";
+
+const MIN_NAME_LENGTH = 2;
 
 const { locale, locales, setLocale } = useI18n();
 const config = useDmsRuntimeConfig();
 const homepage = useHomepage();
+const dmsApp = useDmsApp();
+const { formError, clearFormError, showError } = useAuthFormError();
+const form = useTemplateRef<AuthFormHandle>("form");
 
 const route = useDmsRoute();
 const queryToken = computed(() => route.query.token as string);
@@ -29,26 +46,24 @@ if (invitationLanguage && invitationLanguage.code !== locale.value) {
 }
 
 const isLoading = ref(false);
-const isPasswordVisible = ref(false);
 
-const schema = z.object({
+const fields = z.object({
   email: z.string().email(),
-  name: z.string().min(2),
+  name: z.string().trim().min(MIN_NAME_LENGTH),
   password: passwordSchema,
 });
-type Schema = z.output<typeof schema>;
+type Schema = z.output<typeof fields>;
+const schema = useLocalizedSchema(fields);
 const state = reactive<Partial<Schema>>({
   email: queryEmail.value,
   name: queryName.value,
 });
-
-const { strength, score, color } = usePasswordStrength(
-  computed(() => state.password || ""),
-);
+useLiveFormErrors(form, state);
 
 async function onSubmit(payload: FormSubmitEvent<Schema>) {
   try {
     isLoading.value = true;
+    clearFormError();
 
     await $fetch("/auth/signup", {
       method: "POST",
@@ -59,12 +74,18 @@ async function onSubmit(payload: FormSubmitEvent<Schema>) {
       },
     });
 
-    await usePostLoginRedirect(
-      config.public.dms.mustValidateEmail ? "/auth/validate" : homepage,
+    await dmsApp.runWithContext(() =>
+      usePostLoginRedirect(
+        config.public.dms.mustValidateEmail ? "/auth/validate" : homepage,
+      ),
     );
   } catch (error: unknown) {
-    useApiError(error, {
-      title: "page.signup.error_title",
+    // A refused value (an address already used) shows under its field;
+    // anything else above the form.
+    await showError(error, "page.signup.error_title", {
+      fields: ["name", "email", "password"],
+      codes: { "error.email_already_used": "email" },
+      form,
     });
   } finally {
     isLoading.value = false;
@@ -73,97 +94,81 @@ async function onSubmit(payload: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <div v-if="!hasInvitationToken" class="mx-auto max-w-md">
-    <DmsCard
-      variant="elevated"
-      :padded="false"
-      class="p-6 sm:p-12"
-      data-testid="signup-invalid-invitation"
+  <StageCard
+    v-if="!hasInvitationToken"
+    icon="i-ph-link-break"
+    tone="warning"
+    :title="$t('page.signup.invalid_invitation_title')"
+    :description="$t('page.signup.invalid_invitation_description')"
+    data-testid="signup-invalid-invitation"
+  >
+    <UButton
+      :label="$t('button.login')"
+      to="/auth"
+      size="lg"
+      class="mt-[22px] justify-center"
+      block
+    />
+  </StageCard>
+
+  <StageCard
+    v-else
+    :title="$t('page.signup.create_account_title')"
+    :description="$t('page.signup.description')"
+  >
+    <DmsOAuthButtons />
+
+    <UForm
+      ref="form"
+      :schema="schema"
+      :state="state"
+      novalidate
+      class="mt-5 grid gap-4"
+      @submit="onSubmit"
+      @error="focusFirstFormError($event.errors)"
     >
-      <UIcon
-        name="i-ph-link-break"
-        class="text-warning mb-4 size-10"
-        :aria-hidden="true"
-      />
-      <h1 class="pb-5 text-2xl font-bold">
-        {{ $t("page.signup.invalid_invitation_title") }}
-      </h1>
-      <p class="text-muted pb-7 text-sm font-normal">
-        {{ $t("page.signup.invalid_invitation_description") }}
-      </p>
-      <UButton :label="$t('button.login')" to="/auth" block />
-    </DmsCard>
-  </div>
-
-  <div v-else 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"
+      <AuthFormAlert :error="formError" />
+
+      <UFormField :label="$t('form.name.label')" name="name">
+        <UInput
+          v-model="state.name"
+          autocomplete="name"
+          size="lg"
+          class="w-full"
         />
-
-        <UButton
-          :label="$t('button.continue')"
-          :loading="isLoading"
-          type="submit"
-          block
+      </UFormField>
+
+      <UFormField :label="$t('form.email.label')" name="email">
+        <UInput
+          v-model="state.email"
+          type="email"
+          icon="i-ph-envelope-simple"
+          size="lg"
+          class="w-full"
+          disabled
         />
+      </UFormField>
+
+      <AuthNewPasswordField
+        v-model="state.password"
+        :label="$t('form.password.label')"
+      />
 
-        <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>
+      <UButton
+        :label="$t('page.signup.submit')"
+        :loading="isLoading"
+        type="submit"
+        size="lg"
+        class="justify-center"
+        block
+      />
+    </UForm>
+
+    <p class="text-muted mt-5 text-center text-[13px]">
+      {{ $t("page.auth.already_have") }}
+      <DmsLink to="/auth" :class="AUTH_LINK_CLASS">
+        {{ $t("button.login") }}
+      </DmsLink>
+    </p>
+  </StageCard>
 </template>

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

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import * as z from "zod";
+import { nextTick, useTemplateRef } from "vue";
 import type { FormSubmitEvent } from "@nuxt/ui";
-import { useWindowSize } from "@vueuse/core";
+import StageCard from "../../../../dms-layout/app/build/components/layout/StageCard.vue";
+import DmsOtpInput from "#dms-ui/app/build/components/form/OtpInput.vue";
+import AuthFormAlert from "../../build/components/AuthFormAlert.vue";
+import AuthResendCode from "../../build/components/AuthResendCode.vue";
+import { useAuthFormError } from "../../build/composables/useAuthFormError";
+import { codeEntryError } from "#dms-core/app/composables/useFormValidation";
 
 const route = useDmsRoute();
+const { processApiMessage } = useTranslation();
 const { t } = useI18n();
 const toast = useToast();
-const { width } = useWindowSize();
+const dmsApp = useDmsApp();
 const homepage = useHomepage();
 const { $authFetch } = useAuthFetch();
+const { formError, showFormError, clearFormError, showError } =
+  useAuthFormError();
 
 if (!route.query.id) {
   throw createError({
@@ -18,22 +26,31 @@ if (!route.query.id) {
   });
 }
 
-const MOBILE_BREAKPOINT = 375;
 const PIN_LENGTH = 6;
+// Refusals of the typed code: shown under the cells, not above the form.
+const CODE_ERRORS = {
+  "error.invalid_token": "token",
+  "error.token_expired": "token",
+} as const;
 const COOLDOWN_DURATION = 60;
 
-const computedSize = computed(() => {
-  return width.value < MOBILE_BREAKPOINT ? "lg" : "xl";
-});
-
 const isLoading = ref(false);
 const form = useTemplateRef("form");
+const codeInput = useTemplateRef<{ focus: () => void }>("codeInput");
+const codeError = ref<string>();
 
-const schema = z.object({
-  pin: z.string().array().length(PIN_LENGTH),
-});
-type Schema = z.output<typeof schema>;
-const state = reactive<Partial<Schema>>({});
+interface CodeState {
+  pin?: string[];
+}
+const state = reactive<CodeState>({});
+
+// Typing a new code clears the refusal of the previous one.
+watch(
+  () => state.pin,
+  (digits) => {
+    if (digits?.some(Boolean)) codeError.value = undefined;
+  },
+);
 
 const { cooldown, startCooldown } = useCooldown(COOLDOWN_DURATION);
 
@@ -41,29 +58,48 @@ onMounted(() => {
   startCooldown();
 });
 
-async function onSubmit(event: FormSubmitEvent<Schema>) {
+async function onSubmit(event: FormSubmitEvent<CodeState>) {
+  // An empty or partial code is flagged under the cells, not sent.
+  const missing = codeEntryError(event.data.pin, PIN_LENGTH);
+  if (missing) {
+    codeError.value = processApiMessage(missing);
+    codeInput.value?.focus();
+    return;
+  }
   try {
     isLoading.value = true;
+    clearFormError();
+    codeError.value = undefined;
     await $authFetch("/api/auth/verify-email", {
       method: "POST",
       body: {
-        token: event.data.pin.join(""),
+        token: (event.data.pin ?? []).join(""),
         user_id: route.query.id as string,
       },
     });
 
-    navigateDms(homepage);
+    await dmsApp.runWithContext(() => navigateDms(homepage));
   } catch (error: unknown) {
-    useApiError(error, {
-      title: "page.validate.error_title",
+    const isCodeError = await showError(error, "page.validate.error_title", {
+      fields: ["token"],
+      codes: CODE_ERRORS,
+      show: (_field, message) => {
+        codeError.value = message;
+      },
     });
+    if (isCodeError) state.pin = [];
   } finally {
     isLoading.value = false;
   }
+  // The cells are disabled while the request runs: focus them once enabled.
+  if (codeError.value) {
+    await nextTick();
+    codeInput.value?.focus();
+  }
 }
 
-function onUpdatePin(value: string[]) {
-  if (value.length !== PIN_LENGTH) return;
+function onUpdatePin(value: string[] | undefined) {
+  if ((value ?? []).join("").length !== PIN_LENGTH) return;
 
   form.value?.submit();
 }
@@ -81,9 +117,7 @@ async function requestEmailValidation() {
       color: "success",
     });
   } catch (error: unknown) {
-    useApiError(error, {
-      title: "page.validate.error_title",
-    });
+    showFormError(error, "page.validate.error_title");
   } finally {
     isLoading.value = false;
   }
@@ -91,61 +125,48 @@ async function requestEmailValidation() {
 </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.validate.title") }}
-      </h1>
-
-      <p class="text-muted pb-7 text-sm font-normal">
-        {{ $t("page.validate.description") }}
-      </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="requestEmailValidation()"
-          />
-
-          <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>
+  <StageCard
+    icon="i-ph-envelope-simple-open"
+    :title="$t('page.validate.title')"
+    :description="$t('page.validate.description')"
+  >
+    <UForm
+      ref="form"
+      :state="state"
+      novalidate
+      class="mt-[22px] grid gap-4"
+      @submit="onSubmit"
+    >
+      <AuthFormAlert :error="formError" />
+
+      <DmsOtpInput
+        ref="codeInput"
+        :label="$t('page.auth.code.label')"
+        size="xl"
+        is-split
+        is-centered
+        v-model="state.pin"
+        :error="codeError"
+        :length="PIN_LENGTH"
+        :disabled="isLoading"
+        is-otp
+        @update:model-value="onUpdatePin"
+      />
+
+      <UButton
+        :loading="isLoading"
+        :label="$t('page.validate.submit')"
+        type="submit"
+        size="lg"
+        class="justify-center"
+        block
+      />
+    </UForm>
+
+    <AuthResendCode
+      :cooldown="cooldown"
+      :disabled="isLoading"
+      @resend="requestEmailValidation"
+    />
+  </StageCard>
 </template>

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

@@ -1,7 +1,4 @@
-import type {
-  LocationQuery,
-  LocationQueryRaw,
-} from "#dms/frontend-module";
+import type { LocationQuery, LocationQueryRaw } from "#dms/frontend-module";
 
 export const ACCOUNTS_LIST_ROUTE = "/auth/accounts";
 export const FROM_ACCOUNTS_QUERY = { from: "accounts" };