@antelopejs/dms 0.5.6 → 0.6.1

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

@@ -1,57 +1,87 @@
 <script setup lang="ts">
+import { useTemplateRef } from "vue";
 import * as z from "zod";
 import type { FormSubmitEvent } from "@nuxt/ui";
 import striptags from "striptags";
+import StageCard from "../../../../../dms-layout/app/build/components/layout/StageCard.vue";
+import AuthFormAlert from "../../../../../dms-auth/app/build/components/AuthFormAlert.vue";
+import AuthNewPasswordField from "../../../../../dms-auth/app/build/components/AuthNewPasswordField.vue";
+import {
+  type AuthFormHandle,
+  useAuthFormError,
+} from "../../../../../dms-auth/app/build/composables/useAuthFormError";
+import type {
+  OnboardingAdministrator,
+  OnboardingPlatform,
+} from "../../../build/composables/onboarding/steps";
+import StepMeta from "../../../build/components/onboarding/StepMeta.vue";
+import {
+  focusFirstFormError,
+  useLiveFormErrors,
+  useLocalizedSchema,
+} from "#dms-core/app/composables/useFormValidation";
+
+interface RegisterStepProps {
+  platform: OnboardingPlatform;
+}
+
+interface RegisterStepEmits {
+  back: [];
+  registered: [administrator: OnboardingAdministrator];
+}
+
+const props = defineProps<RegisterStepProps>();
+const emit = defineEmits<RegisterStepEmits>();
 
-const { t } = useI18n();
 const { $authFetch } = useAuthFetch();
-const toast = useToast();
 const dmsApp = useDmsApp();
-const { siteLayoutTree } = useSiteLayout();
-const homepage = useHomepage();
+const { formError, clearFormError, showError } = useAuthFormError();
+const form = useTemplateRef<AuthFormHandle>("form");
 
-const MIN_VALID_PASSWORD_SCORE = 4;
 const LOGIN_PATH = "/auth";
+const MAX_NAME_PART_LENGTH = 100;
 
 const isLoading = ref(false);
 const isRegistered = ref(false);
-const isPasswordVisible = ref(false);
 
-const schema = z
+const namePart = z.string().trim().min(1).max(MAX_NAME_PART_LENGTH);
+
+const fields = z
   .object({
+    firstName: namePart,
+    lastName: namePart,
     email: z.string().trim().email(),
-    name: z
-      .string()
-      .trim()
-      .min(2, { message: t("form.error.min_two") }),
     password: passwordSchema,
   })
   .transform((data) => ({
+    firstName: striptags(data.firstName),
+    lastName: striptags(data.lastName),
     email: striptags(data.email),
-    name: striptags(data.name),
     password: data.password,
   }));
 
-type Schema = z.output<typeof schema>;
+type Schema = z.output<typeof fields>;
+const schema = useLocalizedSchema(fields);
 
 const state = reactive<Partial<Schema>>({
+  firstName: undefined,
+  lastName: undefined,
   email: undefined,
-  name: undefined,
   password: undefined,
 });
+useLiveFormErrors(form, state);
 
-const { strength, score, color } = usePasswordStrength(
-  computed(() => state.password || ""),
-);
-
-async function loginAdmin(data: Schema) {
-  await $fetch("/auth/login", {
+async function registerAdmin(data: Schema) {
+  await $authFetch("/api/onboarding/register", {
     method: "POST",
-    body: { email: data.email, password: data.password },
+    body: {
+      ...data,
+      platformName: props.platform.name,
+      language: props.platform.language,
+    },
   });
-  await dmsApp.runWithContext(() =>
-    usePostLoginRedirect(() => firstAccessiblePagePath(siteLayoutTree.value)),
-  );
+  isRegistered.value = true;
+  dmsApp.runWithContext(() => setOnboardingComplete());
 }
 
 async function onSubmit(event: FormSubmitEvent<Schema>) {
@@ -59,19 +89,15 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 
   try {
     isLoading.value = true;
-
-    await $authFetch("/api/onboarding/register", {
+    clearFormError();
+    await registerAdmin(event.data);
+    await $fetch("/auth/login", {
       method: "POST",
-      body: event.data,
+      body: { email: event.data.email, password: event.data.password },
     });
-
-    isRegistered.value = true;
-    dmsApp.runWithContext(() => setOnboardingComplete());
-    await loginAdmin(event.data);
-
-    toast.add({
-      title: t("page.onboarding.success.title"),
-      color: "success",
+    emit("registered", {
+      name: `${event.data.firstName} ${event.data.lastName}`,
+      email: event.data.email,
     });
   } catch (error: unknown) {
     if (isRegistered.value) {
@@ -79,12 +105,12 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       window.location.replace(LOGIN_PATH);
       return;
     }
-    dmsApp.runWithContext(() =>
-      useApiError(error, {
-        title: "error.500.title",
-        description: "error.500.description",
-      }),
-    );
+    // A refused value shows under its field; anything else (an administrator
+    // already set) above the form.
+    await showError(error, "page.onboarding.administrator.error_title", {
+      fields: ["firstName", "lastName", "email", "password"],
+      form,
+    });
   } finally {
     isLoading.value = false;
   }
@@ -92,81 +118,92 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <div class="mx-auto max-w-xl">
-    <DmsCard variant="elevated" :padded="false" class="grid gap-4 p-6 sm:p-12">
-      <div>
-        <h1 class="pb-11 text-xl font-bold sm:text-2xl">
-          {{ $t("page.onboarding.create_admin") }}
-        </h1>
-        <UForm
-          :schema="schema"
-          :state="state"
-          class="space-y-7"
-          @submit="onSubmit"
+  <StageCard
+    :title="$t('page.onboarding.administrator.title')"
+    :description="$t('page.onboarding.administrator.description')"
+  >
+    <template #eyebrow>
+      <StepMeta
+        :step="2"
+        :label="$t('page.onboarding.steps.administrator')"
+        :aside="props.platform.name"
+      />
+    </template>
+
+    <UForm
+      ref="form"
+      :schema="schema"
+      :state="state"
+      class="mt-[22px] grid gap-4"
+      novalidate
+      @submit="onSubmit"
+      @error="focusFirstFormError($event.errors)"
+    >
+      <AuthFormAlert :error="formError" />
+
+      <div class="grid gap-3 sm:grid-cols-2">
+        <UFormField
+          :label="$t('page.onboarding.administrator.first_name')"
+          name="firstName"
         >
-          <UFormField :label="$t('form.name.label')" name="name">
-            <UInput v-model="state.name" :loading="isLoading" class="w-full" />
-          </UFormField>
-
-          <UFormField :label="$t('form.email.label')" name="email">
-            <UInput
-              v-model="state.email"
-              :loading="isLoading"
-              type="email"
-              class="w-full"
-            />
-          </UFormField>
-
-          <UFormField :label="$t('form.password.label')" name="password">
-            <UInput
-              v-model="state.password"
-              :color="color"
-              :loading="isLoading"
-              :type="isPasswordVisible ? 'text' : 'password'"
-              :aria-invalid="score < MIN_VALID_PASSWORD_SCORE"
-              aria-describedby="password-strength"
-              class="w-full"
-            >
-              <template #trailing>
-                <UButton
-                  color="neutral"
-                  square
-                  size="xs"
-                  variant="ghost"
-                  :icon="
-                    isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'
-                  "
-                  :aria-label="
-                    isPasswordVisible ? 'Hide password' : 'Show password'
-                  "
-                  :aria-pressed="isPasswordVisible"
-                  aria-controls="password"
-                  @click="isPasswordVisible = !isPasswordVisible"
-                />
-              </template>
-            </UInput>
-          </UFormField>
-
-          <DmsPasswordStrength
-            :color="color"
-            :score="score"
-            :strength="strength"
+          <UInput
+            v-model="state.firstName"
+            autocomplete="given-name"
+            size="lg"
+            class="w-full"
           />
-
-          <UButton type="submit" block>
-            {{ $t("button.next") }}
-          </UButton>
-
-          <div class="text-center text-sm">
-            <p>
-              {{ $t("page.onboarding.modif_last") }}
-              <DmsLink :to="homepage" class="text-primary font-medium">
-                {{ $t("button.back") }}
-              </DmsLink>
-            </p>
-          </div>
-        </UForm>
+        </UFormField>
+        <UFormField
+          :label="$t('page.onboarding.administrator.last_name')"
+          name="lastName"
+        >
+          <UInput
+            v-model="state.lastName"
+            autocomplete="family-name"
+            size="lg"
+            class="w-full"
+          />
+        </UFormField>
       </div>
-    </DmsCard>
-  </div>
+
+      <UFormField
+        :label="$t('page.onboarding.administrator.email')"
+        name="email"
+      >
+        <UInput
+          v-model="state.email"
+          type="email"
+          autocomplete="email"
+          icon="i-ph-envelope-simple"
+          size="lg"
+          class="w-full"
+        />
+      </UFormField>
+
+      <AuthNewPasswordField
+        v-model="state.password"
+        :label="$t('form.password.label')"
+      />
+
+      <UButton
+        :label="$t('page.onboarding.administrator.submit')"
+        :loading="isLoading"
+        :disabled="isRegistered"
+        type="submit"
+        size="lg"
+        class="justify-center"
+        block
+      />
+    </UForm>
+
+    <button
+      type="button"
+      class="text-muted hover:text-highlighted mx-auto mt-3.5 flex items-center justify-center gap-1.5 text-[13px] transition-colors"
+      :disabled="isLoading || isRegistered"
+      @click="emit('back')"
+    >
+      <UIcon name="i-ph-arrow-left" class="size-3.5" />
+      {{ $t("page.onboarding.administrator.back") }}
+    </button>
+  </StageCard>
 </template>

package/frontend-vue/layers/dms-onboarding/app/custom-pages/onboarding.vue

@@ -1,12 +1,71 @@
 <script setup lang="ts">
+import StepIndicator from "../build/components/onboarding/StepIndicator.vue";
+import Platform from "../build/components/onboarding/steps/platform.vue";
+import Ready from "../build/components/onboarding/steps/ready.vue";
 import Register from "../components/onboarding/steps/register.vue";
+import {
+  ONBOARDING_STEPS,
+  type OnboardingAdministrator,
+  type OnboardingPlatform,
+  type OnboardingStep,
+} from "../build/composables/onboarding/steps";
 
 // A custom page runs the global middleware only once it declares its meta:
 // that is what lets the onboarding middleware send a visitor away from a
 // wizard that is already finished, on a direct load as on a navigation.
 defineDmsPageMeta({});
+
+const { t, locale } = useI18n();
+const { metaTitle } = useSystemState();
+
+// The steps live in this one page, so the middleware, which releases a
+// finished wizard, never runs between the account step and the Ready step.
+const step = ref<OnboardingStep>("platform");
+const platform = ref<OnboardingPlatform>({
+  name: metaTitle.value,
+  language: locale.value,
+});
+
+// The configured meta title only prefills the name, once it has loaded.
+watch(metaTitle, (title) => {
+  if (!platform.value.name) platform.value.name = title;
+});
+const administrator = ref<OnboardingAdministrator | null>(null);
+
+const stepLabels = computed(() =>
+  ONBOARDING_STEPS.map((id) => t(`page.onboarding.steps.${id}`)),
+);
+const currentIndex = computed(() => ONBOARDING_STEPS.indexOf(step.value));
+
+function onRegistered(owner: OnboardingAdministrator) {
+  administrator.value = owner;
+  step.value = "ready";
+}
 </script>
 
 <template>
-  <Register />
+  <div class="grid justify-items-center gap-[18px]">
+    <StepIndicator
+      :labels="stepLabels"
+      :current="currentIndex"
+      :steps-label="$t('page.onboarding.steps.aria_label')"
+    />
+
+    <Platform
+      v-if="step === 'platform'"
+      v-model="platform"
+      @next="step = 'administrator'"
+    />
+    <Register
+      v-else-if="step === 'administrator'"
+      :platform="platform"
+      @back="step = 'platform'"
+      @registered="onRegistered"
+    />
+    <Ready
+      v-else-if="administrator"
+      :platform="platform"
+      :administrator="administrator"
+    />
+  </div>
 </template>

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

@@ -1,21 +1,52 @@
 {
   "page": {
     "onboarding": {
-      "start_title": "Platform configuration",
-      "start_description": "Basic information about your application",
-      "create_admin": "Administrator account",
-      "modif_last": "Modify previous information here.",
-      "documentation": "Documentation",
-      "website": "Website",
-      "contributor": "Contribution",
-      "start_button": "Access your administration panel",
-      "success": {
-        "title": "Welcome to your DMS",
-        "description": "Your application is ready to be used. We invite you to discover the useful links relating to Antelope and its framework below:",
-        "dms": "Antelope DMS",
-        "dms_description": "Deep explore the capabilities of your application by accessing the different links offered by the DMS. Find out about advanced features and maximize the potential of your platform.",
-        "framework": "Antelope Framework",
-        "framework_description": "Your application is based on the powerful Antelope framework. Explore the extent of its capabilities and the many creative possibilities it provides you with."
+      "start_title": "Set up your platform",
+      "steps": {
+        "aria_label": "Setup progress",
+        "eyebrow": "Step {step} of {total} · {label}",
+        "platform": "Platform",
+        "administrator": "Administrator",
+        "ready": "Ready"
+      },
+      "platform": {
+        "duration": "about 1 min",
+        "title": "Welcome to Antelope DMS",
+        "description": "Name the platform and pick its default language. The name appears in the browser tab and on the sign-in page.",
+        "name_help": "Shown in the browser tab and on the sign-in page.",
+        "language": "Default language",
+        "language_help": "Your administrator account starts in this language. Everyone can switch in their profile.",
+        "address": "Address",
+        "address_secure": "Detected from this browser · HTTPS is on",
+        "address_insecure": "Detected from this browser · HTTPS is off",
+        "submit": "Continue to administrator",
+        "team_hint": "Setting up for a team? You invite teammates once the platform is ready."
+      },
+      "administrator": {
+        "title": "Create the administrator account",
+        "description": "This account owns the platform: it can manage modules, settings and invite everyone else.",
+        "first_name": "First name",
+        "last_name": "Last name",
+        "name_required": "Required",
+        "email": "Work e-mail",
+        "submit": "Create administrator account",
+        "back": "Back to platform details",
+        "error_title": "The account could not be created"
+      },
+      "ready": {
+        "title": "{platform} is ready",
+        "description": "You're signed in as {name}, owner of the platform. Here's what most teams do first.",
+        "invite_title": "Invite your teammates",
+        "invite_description": "Give them a role so they only see what they need.",
+        "security_title": "Turn on two-factor authentication",
+        "security_description": "Recommended for the owner account.",
+        "modules_title": "Review installed modules",
+        "modules_description": "See what each installed module adds to the platform.",
+        "docs_title": "Read the documentation",
+        "docs_description": "Antelope DMS and the Antelope framework.",
+        "submit": "Open the dashboard",
+        "recap_platform": "Platform",
+        "recap_language": "Default language"
       }
     }
   }

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

@@ -1,21 +1,52 @@
 {
   "page": {
     "onboarding": {
-      "start_title": "Configuration de votre plateforme",
-      "start_description": "Informations de base sur votre application",
-      "create_admin": "Compte administrateur",
-      "modif_last": "Modifier les informations précédentes ici.",
-      "documentation": "Documentation",
-      "website": "Site web",
-      "contributor": "Contribution",
-      "start_button": "Accéder à votre panel d'administration",
-      "success": {
-        "title": "Bienvenue sur votre DMS",
-        "description": "Votre application est prête à être utilisée. Nous vous invitons à découvrir les liens utiles relatifs à Antelope et à son framework ci-dessous :",
-        "dms": "Antelope DMS",
-        "dms_description": "Explorez en profondeur les capacités de votre application en accédant aux différents liens proposés par le DMS. Informez-vous sur les fonctionnalités avancées et maximisez le potentiel de votre plateforme.",
-        "framework": "Antelope Framework",
-        "framework_description": "Votre application repose sur le puissant framework Antelope. Explorez l'étendue de ses capacités et les nombreuses possibilités créatives qu'il met à votre disposition."
+      "start_title": "Configurer votre plateforme",
+      "steps": {
+        "aria_label": "Progression de la configuration",
+        "eyebrow": "Étape {step} sur {total} · {label}",
+        "platform": "Plateforme",
+        "administrator": "Administrateur",
+        "ready": "Prête"
+      },
+      "platform": {
+        "duration": "environ 1 min",
+        "title": "Bienvenue dans Antelope DMS",
+        "description": "Nommez la plateforme et choisissez sa langue par défaut. Le nom apparaît dans l'onglet du navigateur et sur la page de connexion.",
+        "name_help": "Affiché dans l'onglet du navigateur et sur la page de connexion.",
+        "language": "Langue par défaut",
+        "language_help": "Votre compte administrateur démarre dans cette langue. Chacun peut en changer dans son profil.",
+        "address": "Adresse",
+        "address_secure": "Détectée depuis ce navigateur · HTTPS activé",
+        "address_insecure": "Détectée depuis ce navigateur · HTTPS désactivé",
+        "submit": "Continuer vers l'administrateur",
+        "team_hint": "Vous configurez pour une équipe ? Vous inviterez vos collègues une fois la plateforme prête."
+      },
+      "administrator": {
+        "title": "Créer le compte administrateur",
+        "description": "Ce compte possède la plateforme : il gère les modules, les paramètres et invite tous les autres.",
+        "first_name": "Prénom",
+        "last_name": "Nom",
+        "name_required": "Obligatoire",
+        "email": "E-mail professionnel",
+        "submit": "Créer le compte administrateur",
+        "back": "Retour aux informations de la plateforme",
+        "error_title": "Le compte n'a pas pu être créé"
+      },
+      "ready": {
+        "title": "{platform} est prête",
+        "description": "Vous êtes connecté en tant que {name}, propriétaire de la plateforme. Voici ce que la plupart des équipes font en premier.",
+        "invite_title": "Invitez vos collègues",
+        "invite_description": "Donnez-leur un rôle pour qu'ils ne voient que ce dont ils ont besoin.",
+        "security_title": "Activez l'authentification à deux facteurs",
+        "security_description": "Recommandée pour le compte propriétaire.",
+        "modules_title": "Passez en revue les modules installés",
+        "modules_description": "Découvrez ce que chaque module installé apporte à la plateforme.",
+        "docs_title": "Lire la documentation",
+        "docs_description": "Antelope DMS et le framework Antelope.",
+        "submit": "Ouvrir le tableau de bord",
+        "recap_platform": "Plateforme",
+        "recap_language": "Langue par défaut"
       }
     }
   }